mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Merge branch 'fix_blur_toggle' into 'master'
finding solution for toggle button position See merge request Chill-Projet/chill-bundles!374
This commit is contained in:
commit
0ce787701f
@ -41,7 +41,7 @@ and this project adheres to
|
||||
* [thirdparty] Add parameter condition to display centers or not (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/500)
|
||||
* [phonenumber] Remove placeholder in phonenumber field (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/496)
|
||||
* [contact] add contact button color changed plus the pipe at the side removed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/506)
|
||||
|
||||
* [blur] Improved positioning of toggle icon (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/486)
|
||||
## Test releases
|
||||
|
||||
### test release 2022-02-21
|
||||
|
||||
@ -1,37 +1,26 @@
|
||||
.confidential {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.toggle-far-twig {
|
||||
i {
|
||||
bottom: 0px;
|
||||
right: -30px;
|
||||
}
|
||||
margin-right: 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;
|
||||
&-twig {
|
||||
position: absolute;
|
||||
right: -25px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.blur {
|
||||
|
||||
@ -2,18 +2,19 @@ require('./blur.scss');
|
||||
|
||||
document.querySelectorAll('.confidential').forEach(function (el) {
|
||||
let i = document.createElement('i');
|
||||
const classes = ['fa', 'fa-eye', 'toggle'];
|
||||
const classes = ['fa', 'fa-eye-slash', 'toggle-twig'];
|
||||
i.classList.add(...classes);
|
||||
el.appendChild(i);
|
||||
|
||||
const toggleBlur = function(e) {
|
||||
for (let child of el.children) {
|
||||
if (!child.classList.contains('toggle')) {
|
||||
if (!child.classList.contains('toggle-twig')) {
|
||||
child.classList.toggle('blur');
|
||||
}
|
||||
}
|
||||
i.classList.toggle('fa-eye');
|
||||
i.classList.toggle('fa-eye-slash');
|
||||
i.classList.toggle('fa-eye');
|
||||
}
|
||||
i.addEventListener('click', toggleBlur);
|
||||
toggleBlur();
|
||||
});
|
||||
});
|
||||
@ -22,6 +22,7 @@ const fetchCountries = () => {
|
||||
*/
|
||||
const fetchCities = (country) => {
|
||||
//console.log('<<< fetching cities for', country);
|
||||
// warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
|
||||
const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
|
||||
@ -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 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>
|
||||
|
||||
@ -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 %}">
|
||||
|
||||
@ -33,6 +33,8 @@ div.banner {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
div.contact {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
& > * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -67,7 +67,12 @@
|
||||
<li>
|
||||
<i class="fa fa-li fa-home"></i>
|
||||
<span class="item-key">{{ "Address of"|trans}}</span>
|
||||
<span class="chill-entity entity-person badge-thirdparty">{{ a.hostThirdParty|chill_entity_render_box }}</span>
|
||||
{% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
|
||||
action: 'show', displayBadge: true,
|
||||
targetEntity: { name: 'thirdparty', id: a.hostThirdParty.id },
|
||||
buttonText: a.hostThirdParty|chill_entity_render_string,
|
||||
isDead: false,
|
||||
} %}
|
||||
</li>
|
||||
<li>
|
||||
{% if a.hostThirdParty.address is not null %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user