From c7f50c7afedc23fc1838b42adbb0c9346de737ec Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 20 Sep 2023 20:21:04 +0200 Subject: [PATCH] wip #6108 @0.5 --- .env.dev | 4 ++ app/Elearning/QuizCompiler.php | 86 ++++++++++++++++++++++++++++++++-- app/Models/QuizTheme.php | 4 +- 3 files changed, 87 insertions(+), 7 deletions(-) diff --git a/.env.dev b/.env.dev index 86a88581b..b10b01509 100644 --- 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 4a229b1d3..6789e8bb5 100644 --- 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 77ca71d61..af40d9b35 100644 --- 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() -- 2.39.5