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>
div.vue-component {
padding: 1.5em 0;
padding: 1.5em 1em;
margin: 2em 0;
border: 2px dotted lightgrey;
border-radius: 10px;
border-left: 0;
border-right: 0;
position: relative;
&:before {
border: 1px solid lightgrey;
border-radius: 5px;
border-left: 1px dotted lightgrey;
border-right: 1px dotted lightgrey;
/*
position: relative; */
&:before { /*
content: "vuejs component";
position: absolute;
left: 1.5em;
top: -0.9em;
background-color: white;
color: grey;
padding: 0 0.3em;
padding: 0 0.3em;*/
}
dd {
margin-left: 1em;

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

@ -1,4 +1,5 @@
<template>
<div class="vue-component" style="display: none;">
<h3>{{ $t('course.title') }}</h3>
<dl>
@ -7,19 +8,38 @@
</dl>
</div>
<teleport to="#header-accompanying_course-name .grid-4">
<teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags>
</teleport>
<teleport to="#header-accompanying_course-name .grid-3">
<p style="text-align: right;">
<span v-if="accompanyingCourse.openingDate">
<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>
<teleport to="#header-accompanying_course-name #banner-status">
<div v-if="accompanyingCourse.step === 'DRAFT'">
<span class="badge badge-secondary">
{{ $t('course.step.draft') }}
</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>
</template>
@ -39,3 +59,22 @@ export default {
}
}
</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>
<p>
{{ $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>
{{ $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>
</div>

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

@ -1,24 +1,20 @@
<template>
<p style="text-align: right;">
<div>
<a @click="toggleIntensity" class="flag-toggle">
{{ $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') }}
</a>
<button class="badge badge-pill"
:class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
@click="toggleEmergency">
</div>
<div>
<button class="badge badge-pill" :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }" @click="toggleEmergency">
{{ $t('course.emergency') }}
</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') }}
</button>
</p>
</div>
</template>
<script>
@ -32,7 +28,7 @@ export default {
confidential: state => state.accompanyingCourse.confidential,
}),
isRegular() {
return (this.intensity === 'regular')? true : false;
return (this.intensity === 'regular') ? true : false;
},
isEmergency() {
return (this.emergency) ? true : false;
@ -68,15 +64,26 @@ export default {
</script>
<style lang="scss" scoped>
a.flag-toggle {
color: white;
padding: 0 10px;
cursor: pointer;
&:hover {
color: white;
//border: 1px solid rgba(255,255,255,0.2);
text-decoration: underline;
border-radius: 20px;
}
}
a.flag-toggle {
color: white;
padding: 0 10px;
cursor: pointer;
&:hover {
color: white;
text-decoration: underline;
border-radius: 20px;
}
i {
margin: auto 0.4em;
}
}
button.badge {
margin-left: 0.8em;
&.badge-secondary {
opacity: 0.5;
&:hover {
opacity: 0.7;
}
}
}
</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-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>
<i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }}{# ou défini en amont
@ -11,30 +11,16 @@
</h1>
</div>
<div class="grid-4">
</div>
<div class="grid-3" id="banner-flags"></div>
<div class="grid-3">
<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 class="grid-3" id="banner-status"></div>
</div>
</div>
<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-4">Problématiques sociales</div>
<div class="grid-4">_</div>
<div class="grid-4">_</div>
<div id="banner-social-issues"></div>
</div>
</div>