ot_customizer - improves css ans cleans code

ot_templating/Classes/Controller/OtCustomizerController.php

@@ -2,7 +2,7 @@
 
 namespace Opentalent\OtTemplating\Controller;
 
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use PDO;
 use TYPO3\CMS\Core\Database\ConnectionPool;
 use TYPO3\CMS\Core\DataHandling\DataHandler;

ot_templating/Classes/Utilities/OtPageRepository.php → ot_templating/Classes/Page/OtPageRepository.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Opentalent\OtTemplating\Utilities;
+namespace Opentalent\OtTemplating\Page;
 
 use FluidTYPO3\Vhs\Service\PageService;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -19,12 +19,12 @@ class OtPageRepository extends PageRepository
     CONST templates = [
         'Classic' => [
             'name' => 'Classique',
-            'description' => 'Le thème classique, simple et complet.',
+            'description' => "Le thème classique, simple et complet. C'est le thème par défaut.",
             'picture' => 'EXT:ot_templating/Resources/Public/media/theme_classic.png'
         ],
         'Modern' => [
             'name' => 'Moderne',
-            'description' => '[Nouveau] Un thème moderne et intuitif.',
+            'description' => '[Nouveauté 2020] Un thème moderne et intuitif.',
             'picture' => 'EXT:ot_templating/Resources/Public/media/theme_modern.png'
         ]
     ];

ot_templating/Classes/Readme.md

@@ -2,7 +2,8 @@
 
 Ce répertoire contient toutes les classes PHP créés pour l'extension: viewhelpers, repositories, models...
 
+* Controller contient les controllers qui gère les actions BE/FE
 * Domain contient les repositories et les models
 * Exception contient les exceptions custom
-* Utilities fournit des utilitaires utilisables par les autres classes
+* Page fournit des méthodes utiles pour interagir avec les pages (BE/FE)
 * Viewhelpers contient les viewhelpers (surprise!) qui sont utilisés dans les templates fluid de l'extension

ot_templating/Classes/ViewHelpers/EventsPage/GetIdViewHelper.php

@@ -3,7 +3,7 @@
 namespace Opentalent\OtTemplating\ViewHelpers\EventsPage;
 
 use Closure;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 

ot_templating/Classes/ViewHelpers/GetPageUidViewHelper.php

@@ -4,7 +4,7 @@ namespace Opentalent\OtTemplating\ViewHelpers;
 
 
 use Closure;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use Opentalent\OtTemplating\ViewHelpers\RootPage\GetIdViewHelper;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

ot_templating/Classes/ViewHelpers/RootPage/GetIdViewHelper.php

@@ -3,10 +3,7 @@
 namespace Opentalent\OtTemplating\ViewHelpers\RootPage;
 
 use Closure;
-use FluidTYPO3\Vhs\Service\PageService;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
-use TYPO3\CMS\Core\Utility\GeneralUtility;
-use TYPO3\CMS\Extbase\Object\ObjectManager;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
 

ot_templating/Classes/ViewHelpers/Template/CurrentViewHelper.php

@@ -4,7 +4,7 @@ namespace Opentalent\OtTemplating\ViewHelpers\Template;
 
 
 use Closure;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

ot_templating/Classes/ViewHelpers/Template/GetPreferenceViewHelper.php

@@ -4,8 +4,7 @@ namespace Opentalent\OtTemplating\ViewHelpers\Template;
 
 
 use Closure;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
-use Opentalent\OtTemplating\ViewHelpers\RootPage\GetIdViewHelper;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

ot_templating/Classes/ViewHelpers/Template/GetPreferencesViewHelper.php

@@ -3,7 +3,7 @@
 namespace Opentalent\OtTemplating\ViewHelpers\Template;
 
 use Closure;
-use Opentalent\OtTemplating\Utilities\OtPageRepository;
+use Opentalent\OtTemplating\Page\OtPageRepository;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
 use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

ot_templating/Resources/Private/Templates/OtCustomizer/Index.html

@@ -10,44 +10,48 @@
             <f:then>
 
                 <div class="templates">
-                    <h3>Choisir un thème:</h3>
-                    <f:for each="{templates}" as="template" key="template_key">
+                    <h3>Thèmes disponibles</h3>
+                    <div class="templates-gallery">
+                        <f:for each="{templates}" as="template" key="template_key">
 
-                        <div class="template-card">
-                            <div class="template-title">
-                                {template.name}
-                            </div>
-                            <div class="template-poster">
-                                <f:image src="{template.picture}" alt="poster" />
-                            </div>
-                            <div class="template-description">
-                                {template.description}
-                            </div>
-                            <div class="template-controls">
+                            <div class="template-card">
+                                <div class="template-title">
+                                    {template.name}
+                                </div>
+                                <div class="template-poster">
+                                    <f:image src="{template.picture}" alt="poster" />
+                                </div>
+                                <div class="template-description">
+                                    {template.description}
+                                </div>
+                                <div class="template-controls">
 
-                                <f:if condition="{template_key}=={currentTemplate}">
-                                    <f:then>
-                                        <div class="active">Thème actif</div>
-                                    </f:then>
-                                    <f:else>
-                                        <f:link.action
-                                                action="selectTemplate"
-                                                arguments="{template_key: template_key}"
-                                                title="select"
-                                                class="ot-btn"
-                                        >
-                                            Utiliser ce thème
-                                        </f:link.action>
-                                    </f:else>
-                                </f:if>
+                                    <f:if condition="{template_key}=={currentTemplate}">
+                                        <f:then>
+                                            <div class="active">Thème actif</div>
+                                        </f:then>
+                                        <f:else>
+                                            <f:link.action
+                                                    action="selectTemplate"
+                                                    arguments="{template_key: template_key}"
+                                                    title="select"
+                                                    class="ot-btn"
+                                            >
+                                                Utiliser ce thème
+                                            </f:link.action>
+                                        </f:else>
+                                    </f:if>
 
+                                </div>
                             </div>
-                        </div>
-                    </f:for>
+                        </f:for>
+                    </div>
                 </div>
 
                 <div class="customizer">
 
+                    <h3>Autre options de personnalisation</h3>
+
                     <f:form action="updatePreferences">
                         <div class="form-group">
                             <label>Couleur du thème</label>

ot_templating/Resources/Private/Templates/Page/Home.html

@@ -7,9 +7,6 @@
 
 <f:section name='Configuration'>
     <flux:form id="home" label="Gabarit Accueil" extensionName="Opentalent.OtTemplating">
-        <flux:field.select name="settings.template" label="Modèle de site" items="{ Classic: 'Classique', Modern: 'Moderne' }" />
-        <flux:field.select name="settings.themeColor" label="Couleur du thème" items="{ light-blue: 'Bleu ciel', blue: 'Bleu', green: 'Vert', orange: 'Orange', grey: 'Gris', red: 'Rouge', light-red: 'Rouge cerise', purple: 'Violet' }" />
-        <flux:field.checkbox name="settings.displayCarousel" label="Afficher le caroussel" default="1"/>
         <flux:field.checkbox name="settings.staticDonors" label="Partenaires: affichage statique" default="0"/>
         <flux:field.input name="settings.eventsLimit" label="Prochains évènements: nombre maximum" default="5" minimum="1" maximum="24" eval="int"/>
         <flux:field.input name="settings.eventsPeriod" label="Prochains évènements: limiter aux prochaines semaines (0 pour ne pas limiter)" default="8" minimum="0" eval="int"/>

ot_templating/Resources/Private/Templates/Readme.md

@@ -4,6 +4,6 @@ Les templates configurent le backend:
 
 * les templates contenus dans 'Page' sont liés aux layout et déclarent les options relatives à la page
 * les templates contenus dans 'Content' crééent de nouveaux types de contenu pour le backend
-
+* Les templates contenus dans OtCustomizer sont utilisés par le sous-module du backend ot_cutomizer
 
 > **Important** : les templates sont communs à tous les modèles de site !

ot_templating/Resources/Public/assets/Backend/style/ot_customizer.css

@@ -4,12 +4,28 @@
     flex-direction: row;
 }
 
+.ot-customizer h3 {
+    font-weight: 500;
+    font-size: 1.35em;
+    line-height: 1.2em;
+}
+
 .ot-customizer .templates {
+    width: 60%;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
     align-items: center;
-    border-right: #cccccc solid 2px;
+    /*border-right: #cccccc solid 2px;*/
+    min-height: 100vh;
+    box-shadow: 2px 3px 3px #bfbfbf;
+    z-index: 1;
+}
+
+.ot-customizer .templates-gallery {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: scroll;
 }
 
 .ot-customizer .template-card {
@@ -17,9 +33,9 @@
     flex-direction: column;
     align-items: center;
 
-    width: 380px;
+    width: 320px;
     margin: 12px 24px;
-    padding: 12px;
+    padding: 8px;
 
     border: 1px solid #e6e6e6;
     box-shadow: 2px 3px 3px #737373;
@@ -40,7 +56,7 @@
 }
 
 .ot-customizer .template-poster img {
-    max-height: 300px;
+    max-height: 240px;
     max-width: 100%;
     width: auto;
 }
@@ -78,13 +94,15 @@
 
 .ot-customizer .customizer {
     flex: 1;
+    padding: 0 3%;
+    min-height: 100vh;
+    background-color: #e6e6e6;
 }
 
 .ot-customizer .customizer form {
     display: flex;
     flex-direction: column;
     width: 80%;
-    margin: 24px auto;
 }
 
 .ot-customizer .customizer .form-group {