wip #6108 @0.5

diff --git a/.env.dev b/.env.dev
index 86a88581b583cd3bc10db65da1532490a1f0f73f..b10b015092bc81358a5a8dc33b12ce29a7ad5074 100644 (file)
--- a/.env.dev
+++ b/.env.dev
@@ -8,6 +8,9 @@ DEBUGBAR_OPEN_STORAGE=true
 
 APP_URL=https://dev.toolbox.fluidbook.com
 HEADER_COLOR="#df4759"
+THEME=toolbox
+POWERED_BY_LINK=https://www.fluidbook.com/
+
 
 LOG_CHANNEL=stack
 APP_LOG=daily
@@ -46,6 +49,7 @@ MAIL_ENCRYPTION=tls
 MAIL_FROM_ADDRESS=toolbox+dev@fluidbook.com
 MAIL_FROM_NAME="[DEV] Fluidbook Toolbox"
 MAIL_BCC_ALL=test+toolboxdev@cubedesigners.com
+MAIL_TEAM_NAME=Fluidbook
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

diff --git a/app/Elearning/QuizCompiler.php b/app/Elearning/QuizCompiler.php
index 4a229b1d3f84845a01a09ca67178644e9b135f35..6789e8bb5f8268de1d1c2e969483600aafb884ea 100644 (file)
--- a/app/Elearning/QuizCompiler.php
+++ b/app/Elearning/QuizCompiler.php
@@ -5,6 +5,9 @@ namespace App\Elearning;
 use App\Elearning\QuizCompiler\Animations;
 use App\Elearning\QuizCompiler\L10N;
 use App\Fields\FluidbookFont;
+use App\Fields\HorizontalAlign;
+use App\Fields\ThemeBackgroundSize;
+use App\Fields\VerticalAlign;
 use App\Jobs\Base;
 use App\Models\Quiz;
 use App\Models\QuizTheme;
@@ -14,7 +17,10 @@ use Cubist\Util\CommandLine\Npx;
 use Cubist\Util\Data;
 use Cubist\Util\Files\Files;
 use Cubist\Util\Files\VirtualDirectory;
+use Cubist\Util\Graphics\Color;
+use Psy\Output\Theme;
 use RyanChandler\Blade\Blade;
+use function PHPUnit\Framework\matches;
 
 class QuizCompiler extends Base
 {
@@ -124,14 +130,72 @@ class QuizCompiler extends Base
         $this->sassVariables['neutral-color'] = $this->theme->neutralColor;
         $this->sassVariables['ok-color'] = $this->theme->okColor;
         $this->sassVariables['nok-color'] = $this->theme->nokColor;
-        // Breakpoints
-        $this->sassVariables['breakpoints'] = "(sm: (min: '576px',max: '575.98px') , md: (min: '768px',max: '767.98px'), lg: (min: '1024px',max: '1023.98px' ), xl: (min: '1200px', max: '1199.98px'))";
         // Fonts size:Line Height
         $this->sassVariables['fonts-size'] = "(14: 20px, 16: 22px, 20: 28px, 24: 35px)";
 
+        $this->sassVariables['background-color'] = Color::colorToCSS($this->theme->backgroundColor);
+        $this->sassVariables['background-custom'] = $this->theme->backgroundCustom ? 'true' : 'false';
+        if ($this->theme->backgroundCustom) {
+            $this->_addBackgroundVariables('background-desktop', 'background');
+            if ($this->theme->backgroundCustomMobile) {
+                $this->_addBackgroundVariables('background-mobile', 'background', 'Mobile');
+            } else {
+                $this->_addBackgroundVariables('background-mobile', 'background');
+            }
+        }
+
         $this->writeSass();
     }
 
+    protected function _addBackgroundVariables($sassPrefix, $themePrefix, $themeSuffix = '')
+    {
+        $this->sassVariables[$sassPrefix . '-image'] = '../' . $this->data['theme']->{$themePrefix . 'Image' . $themeSuffix};
+
+        switch ($this->data['theme']->{$themePrefix . 'Image' . $themeSuffix}) {
+
+            case ThemeBackgroundSize::REPEAT:
+                $size = 'auto auto';
+                $repeat = 'repeat';
+                break;
+            case ThemeBackgroundSize::RATIO:
+                $size = 'cover';
+                $repeat = 'no-repeat';
+                break;
+            case ThemeBackgroundSize::NONE:
+                $size = 'auto auto';
+                $repeat = 'no-repeat';
+                break;
+            default:
+            case ThemeBackgroundSize::STRETCH:
+                $size = '100% 100%';
+                $repeat = 'no-repeat';
+                break;
+
+        }
+
+        $positionx = match ($this->data['theme']->{$themePrefix . 'HorizontalAlign' . $themeSuffix}) {
+            HorizontalAlign::LEFT => '0%',
+            HorizontalAlign::CENTER => '50%',
+            HorizontalAlign::RIGHT => '100%',
+            default => '50%',
+        };
+
+
+        $positiony = match ($this->data['theme']->{$themePrefix . 'VerticalAlign' . $themeSuffix}) {
+            VerticalAlign::TOP => '0%',
+            VerticalAlign::MIDDLE => '50%',
+            VerticalAlign::BOTTOM => '100%',
+            default => '50%',
+        };
+
+
+        $this->sassVariables[$sassPrefix . '-repeat'] = $repeat;
+        $this->sassVariables[$sassPrefix . '-size'] = $size;
+        $this->sassVariables[$sassPrefix . '-position-x'] = $positionx;
+        $this->sassVariables[$sassPrefix . '-position-y'] = $positiony;
+    }
+
+
     protected function _font($f)
     {
         $font = FluidbookFont::getAvailableFonts()[$f];
@@ -165,11 +229,19 @@ class QuizCompiler extends Base
     {
         $sass = '';
         foreach ($this->sassVariables as $key => $value) {
-            $sass .= '$' . $key . ': ' . $value . "\n";
+            $sass .= '$' . $key . ': ' . $this->_escapeSassValue($value) . "\n";
         }
         file_put_contents($this->compilePath . '/style/002-item-variables.sass', $sass);
     }
 
+    protected function _escapeSassValue($value)
+    {
+        if (stristr($value, '.')) {
+            return '"' . $value . '"';
+        }
+        return $value;
+    }
+
 
     /**
      * @param $vdir VirtualDirectory
@@ -222,8 +294,12 @@ class QuizCompiler extends Base
         $cli->setModule('cross-env process.env.local=1 mix' . $arg);
         $cli->execute();
 
-        if (!file_exists($this->compilePath . '/dist/js/quiz.js')) {
-            $cli->dd();
+        $requiredFiles = ['js/quiz.js', 'css/style.css'];
+
+        foreach ($requiredFiles as $requiredFile) {
+            if (!file_exists($this->compilePath . '/dist/' . $requiredFile)) {
+                $cli->dd();
+            }
         }
     }
 }

diff --git a/app/Models/QuizTheme.php b/app/Models/QuizTheme.php
index 77ca71d616946506aaa4cd79c662c2e8dff2776f..af40d9b358b4c5e727b66fd43634869d79d25367 100644 (file)
--- a/app/Models/QuizTheme.php
+++ b/app/Models/QuizTheme.php
@@ -143,8 +143,8 @@ class QuizTheme extends ToolboxModel
         $this->addField('outroImage', FluidbookThemeImage::class, __('Desktop'), ['hint' => __('Taille recommandée : :size', ['size' => '1200 x 680px']), 'when' => ['outroCustom' => 1]]);
         $this->addField('outroImageMobile', FluidbookThemeImage::class, __('Mobile'), ['hint' => __('Taille recommandée : :size', ['size' => '390 x 844px']), 'when' => ['outroCustom' => 1]]);
         $this->addField('', FormSeparator::class, '');
-        $this->addField('outroSuccessAnimation', FluidbookThemeImage::class, __('Animation de réussite'), ['hint' => __('390 x390px')]);
-        $this->addField('outroFailAnimation', FluidbookThemeImage::class, __('Animation d\'échec'), ['hint' => __('390 x390px')]);
+        $this->addField('outroSuccessAnimation', FluidbookThemeImage::class, __('Animation de réussite'), ['hint' => __('390 x 390px')]);
+        $this->addField('outroFailAnimation', FluidbookThemeImage::class, __('Animation d\'échec'), ['hint' => __('390 x 390px')]);
     }
 
     public function getTextsColor()