From abe183fd10a7cf8cd903d46ef2cb7f3743753b86 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 2 Mar 2022 19:11:34 +0100
Subject: [PATCH] fix position of toggle button

so it doesn't cover content or falls outside box
---
 .../Resources/public/module/blur/blur.scss    | 29 +++++++++++++++++--
 .../public/vuejs/_components/Confidential.vue | 10 +++++--
 .../_components/Entity/AddressRenderBox.vue   |  2 +-
 .../Resources/views/Entity/address.html.twig  |  6 ++--
 .../components/Requestor.vue                  |  4 +--
 .../views/AccompanyingCourse/index.html.twig  |  4 +--
 .../Entity/ThirdPartyRenderBox.vue            |  2 +-
 7 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss b/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
index b56609d85..a53ea69d9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
@@ -1,16 +1,39 @@
-.confidential{
+.confidential {
     display: flex;
     position: relative;
 }
+.toggle-far-twig {
+    i {
+        bottom: 0px;
+        right: -30px;
+    }
+}
+
+.toggle-close-twig {
+    i {
+        bottom: 0px;
+        right: -5px;
+    }
+}
 .toggle{
     margin-left: 30px;
     margin-top: 5px;
     cursor: pointer;
     position: absolute;
-    bottom: 0px;
-    right: 10px;
     z-index: 5;
+    right: -30px
 }
+
+.toggle-far {
+    bottom: 0px;
+    right: 20px !important;
+}
+
+.toggle-close {
+    bottom: 125px;
+    right: 15px !important;
+}
+
 .blur {
     -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index 3d237a2d4..f5a555520 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -4,7 +4,7 @@
             <slot name="confidential-content"></slot>
         </div>
         <div>
-            <i class="fa fa-eye toggle" aria-hidden="true" @click="toggleBlur"></i>
+            <i class="fa fa-eye toggle" :class="positionBtn" aria-hidden="true" @click="toggleBlur"></i>
         </div>
     </div>
 </template>
@@ -12,6 +12,7 @@
 <script>
 export default {
     name: "Confidential",
+    props: ['positionBtnFar'],
     data() {
         return {
             isBlurred: true,
@@ -19,9 +20,14 @@ export default {
     },
     methods : {
         toggleBlur() {
-            console.log('toggle blur');
+            console.log(this.positionBtnFar);
             this.isBlurred = !this.isBlurred;
         },
+    },
+    computed: {
+        positionBtn() {
+            return this.positionBtnFar ? 'toggle-far' : 'toggle-close'
+        }
     }
 }
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index fca64106f..a7f121a87 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -5,7 +5,7 @@
       <component :is="component" class="address" :class="multiline">
 
          <div v-if="isConfidential">
-            <confidential>
+            <confidential :positionBtnFar="true">
                <template v-slot:confidential-content>
                   <div v-if="isMultiline === true">
                      <p v-for="(l, i) in address.lines" :key="`line-${i}`">
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
index cccebabf5..54a0b86b7 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{% endif %}">
+    <li class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% 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{% endif %}">
+    <span class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% 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{% endif %}">
+    <div class="chill-entity entity-address {% if address.confidential %} confidential toggle-close-twig {% 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/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 239d43706..713693605 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 v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+      <confidential :positionBtn="false" 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 v-else-if="accompanyingCourse.requestor.type === 'person'">
+      <confidential :positionBtnFar="false" v-else-if="accompanyingCourse.requestor.type === 'person'">
          <template v-slot:confidential-content>
             <person-render-box render="bloc"
                :person="accompanyingCourse.requestor"
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 842152ac4..0a021997d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -151,14 +151,14 @@
                     {% if accompanyingCourse.requestorPerson is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
+                            <div class="confidential toggle-close-twig"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
                         {% endif %}
                     {% elseif accompanyingCourse.requestorThirdParty is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
+                            <div class="confidential toggle-close-twig"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
                         {% endif %}
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 7f5727050..1555ec66a 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -54,7 +54,7 @@
                     -->
                 </ul>
                 <div v-if="thirdparty.contactDataAnonymous">
-                    <confidential>
+                    <confidential :positionBtnFar="false">
                         <template v-slot:confidential-content>
                             <ul class="list-content fa-ul">
                                 <li v-if="thirdparty.address">