From 1860478aea1d54093106f35780bfb47a03839c7b Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 8 Mar 2022 09:48:17 +0100
Subject: [PATCH] finding solution for toggle button position

---
 .../Resources/public/module/blur/blur.scss    | 37 ++++++-------------
 .../public/vuejs/_components/Confidential.vue | 14 +++----
 .../Resources/views/Entity/address.html.twig  |  6 +--
 .../Resources/public/chill/chillperson.scss   |  2 +
 .../components/Requestor.vue                  |  5 ++-
 5 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss b/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
index a53ea69d9..ba5d38edf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
@@ -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 {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index f5a555520..af488cf0c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -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>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
index 54a0b86b7..3dfc27d2f 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@@ -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 %}">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
index 92542f178..fba0516a7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@@ -33,6 +33,8 @@ div.banner {
         padding-top: 1em;
         padding-bottom: 1em;
         div.contact {
+            display: flex;
+            align-content: center;
             & > * {
                 margin-right: 1em;
             }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 713693605..7cf0dcecc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -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>