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

position of toggle button improved (differentation between twig and vue) + fix fa-eye-slash in vue component

Browse Source
This commit is contained in:
Julie Lenaerts 2022-03-09 12:10:33 +01:00
parent c611f35cd6
commit 3d1ded8b1c
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@
display: flex;
position: relative;
margin-right: 20px
// margin-left 20px;
}
.toggle-container {
@ -17,6 +16,11 @@
.toggle{
position: absolute;
right: 4px;
&-twig {
position: absolute;
right: -25px;
bottom: 20px;
}
}
.blur {

9
src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
View File

@ -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();
});
});

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

@ -4,7 +4,7 @@
<slot name="confidential-content"></slot>
</div>
<div class="toggle-container">
<i class="fa fa-eye toggle" :class="{ toggleIcon }" aria-hidden="true" @click="toggleBlur"></i>
<i class="fa toggle" :class="toggleIcon" aria-hidden="true" @click="toggleBlur"></i>
</div>
</div>
</template>