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

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

@ -2,17 +2,18 @@ require('./blur.scss');
document.querySelectorAll('.confidential').forEach(function (el) { document.querySelectorAll('.confidential').forEach(function (el) {
let i = document.createElement('i'); let i = document.createElement('i');
const classes = ['fa', 'fa-eye', 'toggle']; const classes = ['fa', 'fa-eye-slash', 'toggle-twig'];
i.classList.add(...classes); i.classList.add(...classes);
el.appendChild(i); el.appendChild(i);
const toggleBlur = function(e) { const toggleBlur = function(e) {
for (let child of el.children) { for (let child of el.children) {
if (!child.classList.contains('toggle')) { if (!child.classList.contains('toggle-twig')) {
child.classList.toggle('blur'); child.classList.toggle('blur');
} }
} }
i.classList.toggle('fa-eye');
i.classList.toggle('fa-eye-slash'); i.classList.toggle('fa-eye-slash');
i.classList.toggle('fa-eye');
} }
i.addEventListener('click', toggleBlur); i.addEventListener('click', toggleBlur);
toggleBlur(); toggleBlur();

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

@ -4,7 +4,7 @@
<slot name="confidential-content"></slot> <slot name="confidential-content"></slot>
</div> </div>
<div class="toggle-container"> <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>
</div> </div>
</template> </template>