Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 13:54:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-11-25 16:21:33 +01:00
parent 33c7a495c7
commit d274ba3823
7 changed files with 101 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -14,6 +14,7 @@ and this project adheres to
* Use the user.label in accompanying course banner, instead of username; * Use the user.label in accompanying course banner, instead of username;
* fix: show validation message when closing accompanying course; * 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) * [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 ## 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) * [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) * [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 * [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 ### Test release 2021-11-15

30
CONVENTIONS.md
View File

@ -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. Par exemple pour mettre un style au titre on précise juste h3 dans la cascade bloc.
```sass ```scss
div.bloc { div.bloc {
// un bloc générique, utilisé à plusieurs endroits // un bloc générique, utilisé à plusieurs endroits
&.bloc-dark { &.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"; * utiliser `chill_return_path_or` dans le bouton "Cancel";
* pour les boutons "enregistrer et voir" et "Enregistrer et fermer" => ? * 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>
```

30
src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
View File

@ -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 /// 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 { ul.list-suggest {
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
@ -20,15 +31,16 @@ ul.list-suggest {
&.remove-items { &.remove-items {
li { li {
a { 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;
}
}

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

@ -20,10 +20,9 @@
</VueMultiselect> </VueMultiselect>
<template v-if="referrersSuggested.length > 0"> <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)"> <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> <user-render-box-badge :user="u"></user-render-box-badge>
</span> </span>
</li> </li>

44
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
View File

@ -44,9 +44,9 @@
<!-- results which **are** attached to an objective --> <!-- results which **are** attached to an objective -->
<div v-for="g in goalsPicked"> <div v-for="g in goalsPicked">
<div> <div>
<div class="item-title" @click="removeGoal(g)"> <div class="item-title">
<i class="fa fa-times"></i>
{{ g.goal.title.fr }} {{ g.goal.title.fr }}
<a @click="removeGoal(g)"></a>
</div> </div>
</div> </div>
<div> <div>
@ -61,10 +61,9 @@
<p>{{ $t('available_goals_text') }}</p> <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> </li>
</ul> </ul>
</div> </div>
@ -98,10 +97,9 @@
<div class="add_evaluation"> <div class="add_evaluation">
<div v-if="showAddEvaluation"> <div v-if="showAddEvaluation">
<p>{{ $t('available_evaluations_text') }}</p> <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> </li>
</ul> </ul>
</div> </div>
@ -497,8 +495,8 @@ div#workEditor {
& > div.results_without_objective { & > div.results_without_objective {
background: repeating-linear-gradient( background: repeating-linear-gradient(
45deg, 45deg,
$gray-500, $gray-200,
$gray-500 10px, $gray-200 10px,
$gray-100 10px, $gray-100 10px,
$gray-100 20px $gray-100 20px
); );
@ -537,31 +535,11 @@ div#workEditor {
font-size: 85%; 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 { i.fa {
padding: 0.25rem; padding: 0.25rem;
color: $white; color: $white;
&.fa-plus { background-color: $green; } &.fa-times { color: $red; }
&.fa-times { background-color: $red; }
&.fa-pencil { background-color: $orange; }
} }
} }

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

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

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

@ -3,18 +3,21 @@
<p v-if="pickedResults.length ===0" class="chill-no-data-statement"> <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
Aucun résultat associé Aucun résultat associé
</p> </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 }}
</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 }} {{ r.title.fr }}
</li> <a @click="removeResult(r)"></a>
</template> </span>
</li>
</ul> </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"> <ul class="record_actions">
<li v-if="isExpanded"> <li v-if="isExpanded">
<button class="btn btn-hide" @click="toggleSelect"> <button class="btn btn-hide" @click="toggleSelect">