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

#258 add scss asset to manage suggestions lists (add/remove)

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-11-25 13:21:55 +01:00
parent b09f32b1c2
commit 33c7a495c7
6 changed files with 76 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
View File

@ -1,36 +1,33 @@
<template> <template>
<teleport to="#add-persons" v-if="isComponentVisible"> <teleport to="#add-persons" v-if="isComponentVisible">
<div class="flex-bloc concerned-groups" :class="getContext"> <div class="flex-bloc concerned-groups" :class="getContext">
<persons-bloc <persons-bloc
v-for="bloc in contextPersonsBlocs" v-for="bloc in contextPersonsBlocs"
v-bind:key="bloc.key" v-bind:key="bloc.key"
v-bind:bloc="bloc" v-bind:bloc="bloc"
v-bind:blocWidth="getBlocWidth" v-bind:blocWidth="getBlocWidth"
v-bind:setPersonsInBloc="setPersonsInBloc"> v-bind:setPersonsInBloc="setPersonsInBloc">
</persons-bloc> </persons-bloc>
</div> </div>
<div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0"> <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
<ul class="list-unstyled"> <ul class="list-suggest add-items">
<li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)"> <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
<span class="badge bg-primary" style="cursor: pointer;"> <span>{{ p.text }}</span>
<i class="fa fa-plus fa-fw text-success"></i> </li>
{{ p.text }} </ul>
</span> </div>
</li>
</ul>
</div>
<add-persons <add-persons
buttonTitle="activity.add_persons" buttonTitle="activity.add_persons"
modalTitle="activity.add_persons" modalTitle="activity.add_persons"
v-bind:key="addPersons.key" v-bind:key="addPersons.key"
v-bind:options="addPersonsOptions" v-bind:options="addPersonsOptions"
@addNewPersons="addNewPersons" @addNewPersons="addNewPersons"
ref="addPersons"> ref="addPersons">
</add-persons> </add-persons>
</teleport> </teleport>
</template> </template>
<script> <script>

10
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
View File

@ -1,12 +1,8 @@
<template> <template>
<li> <li>
<span class="badge bg-primary" :title="person.text"> <span :title="person.text">
<span class="chill_denomination"> <span class="chill_denomination">{{ textCutted }}</span>
{{ textCutted }} <a @click.prevent="$emit('remove', person)"></a>
</span>
<a class="fa fa-fw fa-times text-danger text-decoration-none"
@click.prevent="$emit('remove', person)">
</a>
</span> </span>
</li> </li>
</template> </template>

2
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
View File

@ -5,7 +5,7 @@
<h4>{{ $t(bloc.title) }}</h4> <h4>{{ $t(bloc.title) }}</h4>
</div> </div>
<div class="item-col"> <div class="item-col">
<ul class="list-content"> <ul class="list-suggest remove-items">
<person-badge <person-badge
v-for="person in bloc.persons" v-for="person in bloc.persons"
v-bind:key="person.id" v-bind:key="person.id"

3
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@ -10,6 +10,9 @@
// Chill buttons // Chill buttons
@import './scss/buttons'; @import './scss/buttons';
// Chill badges
@import './scss/badge';
// Chill forms // Chill forms
@import './scss/forms'; @import './scss/forms';

34
src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss Normal file
View File

@ -0,0 +1,34 @@
///
/// A specific list of badges used to manage suggestions
/// use bootstrap badge styles, cfr. src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
///
ul.list-suggest {
list-style-type: none;
padding-left: 0;
&.add-items {
li {
cursor: pointer;
& > span:before {
font: normal normal normal 14px/1 ForkAwesome;
margin-right: 0.5em;
content: "\f067"; // fa-plus
color: var(--bs-success);
}
}
}
&.remove-items {
li {
a {
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;
}
}
}
}
}

9
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
View File

@ -4,3 +4,12 @@
*/ */
/// A specific list of badges, use bootstrap badge styles
/// cfr. src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
ul.list-suggest {
li > span {
@extend .badge;
@extend .bg-primary;
}
}