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

finding solution for toggle button position

Browse Source
This commit is contained in:
Julie Lenaerts 2022-03-08 09:48:17 +01:00
parent efbd9b0185
commit 1860478aea
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 {
display: flex;
position: relative;
}
.toggle-far-twig {
i {
bottom: 0px;
right: -30px;
}
margin-right: 20px
// margin-left 20px;
}
.toggle-close-twig {
i {
bottom: 0px;
right: -5px;
}
.toggle-container {
position: absolute;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 5;
padding-right: 1rem;
}
.toggle{
margin-left: 30px;
margin-top: 5px;
cursor: pointer;
position: absolute;
z-index: 5;
right: -30px
}
.toggle-far {
bottom: 0px;
right: 20px !important;
}
.toggle-close {
bottom: 125px;
right: 15px !important;
right: 4px;
}
.blur {

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

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

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

@ -59,7 +59,7 @@
must be shown in such 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'] %}
<i class="fa fa-li fa-map-marker"></i>
{% endif %}
@ -68,7 +68,7 @@
{%- endif -%}
{%- 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'] %}
<i class="fa fa-fw fa-map-marker"></i>
{% endif %}
@ -77,7 +77,7 @@
{%- endif -%}
{%- 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 address.postCode is not empty %}
<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-bottom: 1em;
div.contact {
display: flex;
align-content: center;
& > * {
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" />
{{ $t('requestor.is_anonymous') }}
</label>
<confidential :positionBtn="false" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
<template v-slot:confidential-content>
<third-party-render-box
:thirdparty="accompanyingCourse.requestor"
@ -33,7 +33,7 @@
</template>
</confidential>
<confidential :positionBtnFar="false" v-else-if="accompanyingCourse.requestor.type === 'person'">
<confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
<template v-slot:confidential-content>
<person-render-box render="bloc"
:person="accompanyingCourse.requestor"
@ -339,5 +339,6 @@ div.flex-table {
.confidential {
display: block;
margin-right: 0px !important;
}
</style>