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

Banner vue component fully manage AccompanyingCourse banner

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-20 12:59:58 +02:00
parent ae1146c79c
commit 821b67723c
5 changed files with 95 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

@ -43,21 +43,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
div.vue-component { div.vue-component {
padding: 1.5em 0; padding: 1.5em 1em;
margin: 2em 0; margin: 2em 0;
border: 2px dotted lightgrey; border: 1px solid lightgrey;
border-radius: 10px; border-radius: 5px;
border-left: 0; border-left: 1px dotted lightgrey;
border-right: 0; border-right: 1px dotted lightgrey;
position: relative; /*
&:before { position: relative; */
&:before { /*
content: "vuejs component"; content: "vuejs component";
position: absolute; position: absolute;
left: 1.5em; left: 1.5em;
top: -0.9em; top: -0.9em;
background-color: white; background-color: white;
color: grey; color: grey;
padding: 0 0.3em; padding: 0 0.3em;*/
} }
dd { dd {
margin-left: 1em; margin-left: 1em;

59
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div class="vue-component" style="display: none;"> <div class="vue-component" style="display: none;">
<h3>{{ $t('course.title') }}</h3> <h3>{{ $t('course.title') }}</h3>
<dl> <dl>
@ -7,19 +8,38 @@
</dl> </dl>
</div> </div>
<teleport to="#header-accompanying_course-name .grid-4"> <teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags> <toggle-flags></toggle-flags>
</teleport> </teleport>
<teleport to="#header-accompanying_course-name .grid-3"> <teleport to="#header-accompanying_course-name #banner-status">
<p style="text-align: right;"> <div v-if="accompanyingCourse.step === 'DRAFT'">
<span v-if="accompanyingCourse.openingDate"> <span class="badge badge-secondary">
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i> {{ $t('course.step.draft') }}
</span><br>
<span v-if="accompanyingCourse.user">
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
</span> </span>
</p> </div>
<div v-else>
<div>
<span class="badge badge-primary">
{{ $t('course.step.active') }}
</span>
</div>
<div>
<span>
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
</span>
<br>
<span v-if="accompanyingCourse.user">
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
</span>
</div>
</div>
</teleport>
<teleport to="#header-accompanying_course-details #banner-social-issues">
<div class="grid-4">{{ $t('social_issue.title') }}</div>
<div class="grid-4">_</div>
<div class="grid-4">_</div>
</teleport> </teleport>
</template> </template>
@ -39,3 +59,22 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
div#banner-flags,
div#banner-status {
margin: 1.5em 0;
div {
text-align: right;
margin-bottom: 0.8em;
}
.badge {
text-transform: uppercase;
}
}
div#banner-status {
span.badge {
font-size: 90%;
}
}
</style>

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
View File

@ -7,11 +7,11 @@
<div> <div>
<p> <p>
{{ $t('confirm.text_draft') }} {{ $t('confirm.text_draft') }}
<span class="badge badge-pill badge-secondary">{{ $t('course.step.draft') }}</span> <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
</p> </p>
<p> <p>
{{ $t('confirm.text_active') }} {{ $t('confirm.text_active') }}
<span class="badge badge-pill badge-primary">{{ $t('course.step.active') }}</span> <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
</p> </p>
</div> </div>

55
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
View File

@ -1,24 +1,20 @@
<template> <template>
<p style="text-align: right;"> <div>
<a @click="toggleIntensity" class="flag-toggle"> <a @click="toggleIntensity" class="flag-toggle">
{{ $t('course.occasional') }} {{ $t('course.occasional') }}
<i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-off': !isRegular }"></i> <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
{{ $t('course.regular') }} {{ $t('course.regular') }}
</a> </a>
</div>
<button class="badge badge-pill"
:class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }" <div>
@click="toggleEmergency"> <button class="badge badge-pill" :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }" @click="toggleEmergency">
{{ $t('course.emergency') }} {{ $t('course.emergency') }}
</button> </button>
<button class="badge badge-pill" :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }" @click="toggleConfidential">
<button class="badge badge-pill"
:class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }"
@click="toggleConfidential">
{{ $t('course.confidential') }} {{ $t('course.confidential') }}
</button> </button>
</p> </div>
</template> </template>
<script> <script>
@ -32,7 +28,7 @@ export default {
confidential: state => state.accompanyingCourse.confidential, confidential: state => state.accompanyingCourse.confidential,
}), }),
isRegular() { isRegular() {
return (this.intensity === 'regular')? true : false; return (this.intensity === 'regular') ? true : false;
}, },
isEmergency() { isEmergency() {
return (this.emergency) ? true : false; return (this.emergency) ? true : false;
@ -68,15 +64,26 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a.flag-toggle { a.flag-toggle {
color: white; color: white;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: white; color: white;
//border: 1px solid rgba(255,255,255,0.2); text-decoration: underline;
text-decoration: underline; border-radius: 20px;
border-radius: 20px; }
} i {
} margin: auto 0.4em;
}
}
button.badge {
margin-left: 0.8em;
&.badge-secondary {
opacity: 0.5;
&:hover {
opacity: 0.7;
}
}
}
</style> </style>

22
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
View File

@ -2,7 +2,7 @@
<div class="grid-12 parent" id="header-accompanying_course-name" > <div class="grid-12 parent" id="header-accompanying_course-name" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div class="grid-5">{% set title = title %} <div class="grid-6">{% set title = title %}
<h1> <h1>
<i class="fa fa-random fa-fw"></i> <i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }}{# ou défini en amont {{ 'Accompanying Course'|trans }}{# ou défini en amont
@ -11,30 +11,16 @@
</h1> </h1>
</div> </div>
<div class="grid-4"> <div class="grid-3" id="banner-flags"></div>
</div>
<div class="grid-3"> <div class="grid-3" id="banner-status"></div>
<p style="text-align: right;">
{% if 'DRAFT' == accompanyingCourse.getStep() %}
Brouillon
{% else %}
<i>{{ 'Started on %date%'|trans({'%date%': accompanyingCourse.openingDate|format_date('short') } ) }}</i><br>
{% if accompanyingCourse.user is not null %}
par <b>{{ accompanyingCourse.user.username }}</b>
{% endif %}
{% endif %}
</p>
</div>
</div> </div>
</div> </div>
<div class="grid-12 parent" id="header-accompanying_course-details" > <div class="grid-12 parent" id="header-accompanying_course-details" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div class="grid-4">Problématiques sociales</div> <div id="banner-social-issues"></div>
<div class="grid-4">_</div>
<div class="grid-4">_</div>
</div> </div>
</div> </div>