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

finding solution for toggle button position

Browse Source
This commit is contained in:
Julie Lenaerts 2022-03-08 09:48:17 +01:00
parent d6933fce35
commit c611f35cd6
5 changed files with 24 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
View File

@ -1,37 +1,22 @@
.confidential { .confidential {
display: flex; display: flex;
position: relative; position: relative;
} margin-right: 20px
.toggle-far-twig { // margin-left 20px;
i {
bottom: 0px;
right: -30px;
}
} }
.toggle-close-twig { .toggle-container {
i { position: absolute;
bottom: 0px; width: 100%;
right: -5px; top: 0;
} left: 0;
cursor: pointer;
z-index: 5;
padding-right: 1rem;
} }
.toggle{ .toggle{
margin-left: 30px;
margin-top: 5px;
cursor: pointer;
position: absolute; position: absolute;
z-index: 5; right: 4px;
right: -30px
}
.toggle-far {
bottom: 0px;
right: 20px !important;
}
.toggle-close {
bottom: 125px;
right: 15px !important;
} }
.blur { .blur {

14
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
View File

@ -3,8 +3,8 @@
<div :class="{ 'blur': isBlurred }"> <div :class="{ 'blur': isBlurred }">
<slot name="confidential-content"></slot> <slot name="confidential-content"></slot>
</div> </div>
<div> <div class="toggle-container">
<i class="fa fa-eye toggle" :class="positionBtn" aria-hidden="true" @click="toggleBlur"></i> <i class="fa fa-eye toggle" :class="{ toggleIcon }" aria-hidden="true" @click="toggleBlur"></i>
</div> </div>
</div> </div>
</template> </template>
@ -12,28 +12,24 @@
<script> <script>
export default { export default {
name: "Confidential", name: "Confidential",
props: ['positionBtnFar'],
data() { data() {
return { return {
isBlurred: true, isBlurred: true,
toggleIcon: 'fa-eye',
}; };
}, },
methods : { methods : {
toggleBlur() { toggleBlur() {
console.log(this.positionBtnFar); console.log(this.positionBtnFar);
this.isBlurred = !this.isBlurred; this.isBlurred = !this.isBlurred;
this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
}, },
}, },
computed: {
positionBtn() {
return this.positionBtnFar ? 'toggle-far' : 'toggle-close'
}
}
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.confidential{ .confidential{
align-items: center; align-content: center;
} }
</style> </style>

6
src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
View File

@ -59,7 +59,7 @@
must be shown in such list must be shown in such list
#} #}
{%- if render == 'list' -%} {%- if render == 'list' -%}
<li class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% endif %}"> <li class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
{% if options['with_picto'] %} {% if options['with_picto'] %}
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
{% endif %} {% endif %}
@ -68,7 +68,7 @@
{%- endif -%} {%- endif -%}
{%- if render == 'inline' -%} {%- if render == 'inline' -%}
<span class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% endif %}"> <span class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
{% if options['with_picto'] %} {% if options['with_picto'] %}
<i class="fa fa-fw fa-map-marker"></i> <i class="fa fa-fw fa-map-marker"></i>
{% endif %} {% endif %}
@ -77,7 +77,7 @@
{%- endif -%} {%- endif -%}
{%- if render == 'bloc' -%} {%- if render == 'bloc' -%}
<div class="chill-entity entity-address {% if address.confidential %} confidential toggle-close-twig {% endif %}"> <div class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
{% if options['has_no_address'] == true and address.isNoAddress == true %} {% if options['has_no_address'] == true and address.isNoAddress == true %}
{% if address.postCode is not empty %} {% if address.postCode is not empty %}
<div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}"> <div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}">

2
src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
View File

@ -33,6 +33,8 @@ div.banner {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
div.contact { div.contact {
display: flex;
align-content: center;
& > * { & > * {
margin-right: 1em; margin-right: 1em;
} }

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

@ -9,7 +9,7 @@
<input type="checkbox" v-model="requestorIsAnonymous" class="me-2" /> <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
{{ $t('requestor.is_anonymous') }} {{ $t('requestor.is_anonymous') }}
</label> </label>
<confidential :positionBtn="false" v-if="accompanyingCourse.requestor.type === 'thirdparty'"> <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<template v-slot:confidential-content> <template v-slot:confidential-content>
<third-party-render-box <third-party-render-box
:thirdparty="accompanyingCourse.requestor" :thirdparty="accompanyingCourse.requestor"
@ -33,7 +33,7 @@
</template> </template>
</confidential> </confidential>
<confidential :positionBtnFar="false" v-else-if="accompanyingCourse.requestor.type === 'person'"> <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
<template v-slot:confidential-content> <template v-slot:confidential-content>
<person-render-box render="bloc" <person-render-box render="bloc"
:person="accompanyingCourse.requestor" :person="accompanyingCourse.requestor"
@ -339,5 +339,6 @@ div.flex-table {
.confidential { .confidential {
display: block; display: block;
margin-right: 0px !important;
} }
</style> </style>