#258 apply assets to lists of suggestion, adapt item-title case

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 * Use the user.label in accompanying course banner, instead of username;
 * fix: show validation message when closing accompanying course;
 * [thirdparty] link from modal to thirdparty detail page fixed (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/228)
+* [assets] new asset to style suggestions lists (with add/remove item link) (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/258)
 
 ## Test releases
 
@@ -45,7 +46,7 @@ and this project adheres to
 * [accompanyingCourse] Ability to close accompanying course (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/296)
 * [task] Select2 field in task form to allow search for a user (https://gitlab.com/champs-libres/departement-de-la-vendee/accent-suivi-developpement/-/issues/167)
 * [list result] show all courses, except ones with period closed
-
+* [accompanyingCourse] improve banner with small carousel to display slide social-issues or slide associated persons
 
 ### Test release 2021-11-15
 

CONVENTIONS.md

@@ -98,7 +98,7 @@ Finalement, il importe ici de définir ce qu'est un bloc, ce qu'est une zone d'a
 
 Par exemple pour mettre un style au titre on précise juste h3 dans la cascade bloc.
 
-```sass
+```scss
 div.bloc {
    // un bloc générique, utilisé à plusieurs endroits
    &.bloc-dark {
@@ -381,3 +381,31 @@ A chaque fois qu'un lien est indiqué, vérifier si on ne doit pas utiliser la f
     * utiliser `chill_return_path_or` dans le bouton "Cancel";
     * pour les boutons "enregistrer et voir" et "Enregistrer et fermer" => ?
 
+### Assets pour les listes de suggestion
+
+Créer une liste de suggestions à ajouter (tout l'item est cliquable)
+```html
+<ul class="list-suggest add-items">
+   <li>
+      <span>item</span>
+   </li>
+</ul>
+```
+Créer une liste de suggestions à enlever (avec une croix rouge cliquable, l'ancre a est vide)
+```html
+<ul class="list-suggest remove-items">
+    <li>
+        <span>
+            item
+            <a></a>
+        </span>
+    </li>
+</ul>
+```
+Créer un titre enlevable (avec une croix rouge cliquable, l'ancre a est vide)
+```html
+<div class="item-title">
+    title
+    <a></a>
+</div>
+```

src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

@@ -1,8 +1,19 @@
 
 ///
-/// A specific list of badges used to manage suggestions
+/// A specific list of badges used to manage suggestions (with add/remove link)
 /// use bootstrap badge styles, cfr. src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
 ///
+@mixin remove_link {
+    cursor: pointer;
+    &:before {
+        font: normal normal normal 14px/1 ForkAwesome;
+        margin-left: 0.5em;
+        content: "\f00d";  // fa-times
+        color: var(--bs-danger);
+        text-decoration: none;
+    }
+}
+
 ul.list-suggest {
     list-style-type: none;
     padding-left: 0;
@@ -20,15 +31,16 @@ ul.list-suggest {
     &.remove-items {
         li {
             a {
-                cursor: pointer;
+                @include remove_link;
-                &:before {
-                    font: normal normal normal 14px/1 ForkAwesome;
-                    margin-left: 0.5em;
-                    content: "\f00d";  // fa-times
-                    color: var(--bs-danger);
-                    text-decoration: none;
-                }
             }
         }
     }
 }
+
+/// manage remove link if it isn't a list but a title
+/// (cfr. in Vue AccompanyingCourseWorkEdit)
+div.item-title {
+    a {
+        @include remove_link;
+    }
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -20,10 +20,9 @@
       </VueMultiselect>
 
       <template v-if="referrersSuggested.length > 0">
-         <ul class="list-unstyled">
+         <ul class="list-suggest add-items">
             <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
-               <span class="badge bg-primary" style="cursor: pointer">
+               <span>
-                  <i class="fa fa-plus fa-fw text-success"></i>
                   <user-render-box-badge :user="u"></user-render-box-badge>
                </span>
             </li>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -44,9 +44,9 @@
          <!-- results which **are** attached to an objective -->
          <div v-for="g in goalsPicked">
             <div>
-               <div class="item-title" @click="removeGoal(g)">
+               <div class="item-title">
-                  <i class="fa fa-times"></i>
                   {{ g.goal.title.fr }}
+                  <a @click="removeGoal(g)"></a>
                </div>
             </div>
             <div>
@@ -61,10 +61,9 @@
 
                   <p>{{ $t('available_goals_text') }}</p>
 
-                  <ul class="list-objectives">
+                  <ul class="list-suggest add-items">
-                     <li v-for="g in availableForCheckGoal" class="badge bg-primary" @click="addGoal(g)">
+                     <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
-                        <i class="fa fa-plus"></i>
+                        <span>{{ g.title.fr }}</span>
-                        {{ g.title.fr }}
                      </li>
                   </ul>
                </div>
@@ -98,10 +97,9 @@
          <div class="add_evaluation">
             <div v-if="showAddEvaluation">
                <p>{{ $t('available_evaluations_text') }}</p>
-               <ul class="list-evaluations">
+               <ul class="list-suggest add-items">
-                  <li v-for="e in evaluationsForAction" class="badge bg-primary" @click="addEvaluation(e)">
+                  <li v-for="e in evaluationsForAction" @click="addEvaluation(e)">
-                     <i class="fa fa-plus"></i>
+                     <span>{{ e.title.fr }}</span>
-                     {{ e.title.fr }}
                   </li>
                </ul>
             </div>
@@ -497,8 +495,8 @@ div#workEditor {
             & > div.results_without_objective {
                background: repeating-linear-gradient(
                      45deg,
-                     $gray-500,
+                     $gray-200,
-                     $gray-500 10px,
+                     $gray-200 10px,
                      $gray-100 10px,
                      $gray-100 20px
                );
@@ -537,31 +535,11 @@ div#workEditor {
             font-size: 85%;
          }
 
-         ul.list-evaluations,
-         ul.list-objectives,
-         ul.list-results {
-
-            list-style-type: none;
-            padding: 0;
-
-            li {
-               margin: 0.5rem;
-
-               &.badge {
-                  padding-bottom: 0;
-                  padding-top: 0;
-                  padding-left: 0;
-               }
-            }
-         }
-
          i.fa {
             padding: 0.25rem;
             color: $white;
 
-            &.fa-plus { background-color: $green; }
+            &.fa-times { color: $red; }
-            &.fa-times { background-color: $red; }
-            &.fa-pencil { background-color: $orange; }
          }
       }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

@@ -1,9 +1,10 @@
 <template>
    <div>
-      <div class="item-title" @click="removeEvaluation(evaluation)">
+      <div class="item-title">
-         <i class="fa fa-fw fa-times"></i>
          {{ evaluation.evaluation.title.fr }}
+         <a @click="removeEvaluation(evaluation)"></a>
       </div>
+
       <div v-if="!evaluation.editEvaluation">
          <dl class="item-details definition-inline">
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue

@@ -3,18 +3,21 @@
       <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
          Aucun résultat associé
       </p>
-      <ul class="list-results">
+      <ul class="list-suggest remove-items">
-         <li v-for="r in pickedResults" class="badge bg-primary" @click="removeResult(r)">
+         <li v-for="r in pickedResults">
-            <i class="fa fa-times"></i>
+            <span>
                {{ r.title.fr }}
+               <a @click="removeResult(r)"></a>
+            </span>
          </li>
-         <template v-if="isExpanded">
-            <li v-for="r in availableForCheckResults" class="badge bg-primary" @click="addResult(r)">
-               <i class="fa fa-plus"></i>
-               {{ r.title.fr }}
-            </li>
-         </template>
       </ul>
+      <template v-if="isExpanded">
+         <ul class="list-suggest add-items">
+            <li v-for="r in availableForCheckResults" @click="addResult(r)">
+               <span>{{ r.title.fr }}</span>
+            </li>
+         </ul>
+      </template>
       <ul class="record_actions">
          <li v-if="isExpanded">
             <button class="btn btn-hide" @click="toggleSelect">