Merge branch '93-improve-address-design' into 'master'

Améliorations cosmétiques en rapport avec le bouton "détails de l'adresse"

See merge request Chill-Projet/chill-bundles!579

.changes/unreleased/UX-20230713-102851.yaml

@@ -0,0 +1,5 @@
+kind: UX
+body: 'Better integration of address details button: look, position, title tag'
+time: 2023-07-13T10:28:51.12557493+02:00
+custom:
+  Issue: "93"

.changes/unreleased/UX-20230713-102925.yaml

@@ -0,0 +1,6 @@
+kind: UX
+body: |
+  Show address detail button on person and household banners
+time: 2023-07-13T10:29:25.787302443+02:00
+custom:
+  Issue: "93"

.changes/unreleased/UX-20230713-102949.yaml

@@ -0,0 +1,6 @@
+kind: UX
+body: |
+  Improve residential address position on show onthefly modale
+time: 2023-07-13T10:29:49.326592915+02:00
+custom:
+  Issue: ""

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue

@@ -1,7 +1,7 @@
 <template>
   <span v-if="data.working_ref_status === 'to_review'" class="badge bg-danger address-details-button-warning">L'adresse de référence a été modifiée</span>
-  <a v-if="data.loading === false" @click.prevent="clickOrOpen" class="btn btn-misc address-details-button">
+  <a v-if="data.loading === false" @click.prevent="clickOrOpen" class="btn btn-sm address-details-button" title="Plus de détails">
-    <span class="fa fa-map"></span> <!-- button -->
+    <span class="fa fa-map-o"></span>
   </a>
   <span v-if="data.loading" class="fa fa-spin fa-spinner "></span>
   <AddressModal :address="data.working_address" @update-address="onUpdateAddress" ref="address_modal"></AddressModal>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -1,6 +1,6 @@
 <template>
 
-   <component :is="component" class="chill-entity entity-address my-3">
+   <component :is="component" class="chill-entity entity-address">
 
       <component :is="component" class="address" :class="multiline">
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -68,27 +68,45 @@
               <ul class="list-content fa-ul">
                 <li v-if="person.current_household_id">
                   <i class="fa fa-li fa-map-marker"></i>
-                  <address-render-box v-if="person.current_household_address"
+                  <address-render-box v-if="person.current_household_address" :address="person.current_household_address" :isMultiline="isMultiline"></address-render-box>
-                                      :address="person.current_household_address"
+                  <p v-else class="chill-no-data-statement">{{ $t('renderbox.household_without_address') }}</p>
-                                      :isMultiline="isMultiline">
-                  </address-render-box>
-                  <p v-else class="chill-no-data-statement">
-                    {{ $t('renderbox.household_without_address') }}
-                  </p>
                   <a v-if="options.addHouseholdLink === true"
                      :href="getCurrentHouseholdUrl"
                      :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
-                                <span class="badge rounded-pill bg-chill-beige">
+                       <span class="badge rounded-pill bg-chill-beige">
-                                    <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
+                           <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
-                                </span>
+                       </span>
                   </a>
                 </li>
                 <li v-else-if="options.addNoData">
-                  <i class="fa fa-li fa-map-marker"></i>
+                  <i class="fa fa-li fa-map-marker"></i><p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                  <p class="chill-no-data-statement">
-                    {{ $t('renderbox.no_data') }}
-                  </p>
                 </li>
+                
+                <template v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
+                   <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
+                      <i class="fa fa-li fa-map-marker"></i>
+                      <div v-if="addr.address">
+                         <span class="item-key">{{ $t('renderbox.residential_address') }}:</span>
+                         <div style="margin-top: -1em;">
+                           <address-render-box :address="addr.address" :isMultiline="isMultiline"></address-render-box>
+                         </div>
+                      </div>
+                      <div v-else-if="addr.hostPerson" class="mt-3">
+                         <p>{{ $t('renderbox.located_at') }}:</p>
+                         <span class="chill-entity entity-person badge-person">
+                             <person-text v-if="addr.hostPerson" :person="addr.hostPerson"></person-text>
+                         </span>
+                         <address-render-box v-if="addr.hostPerson.address" :address="addr.hostPerson.address" :isMultiline="isMultiline"></address-render-box>
+                      </div>
+                      <div v-else-if="addr.hostThirdParty" class="mt-3">
+                         <p>{{ $t('renderbox.located_at') }}:</p>
+                         <span class="chill-entity entity-person badge-thirdparty">
+                             <third-party-text v-if="addr.hostThirdParty" :thirdparty="addr.hostThirdParty"></third-party-text>
+                         </span>
+                         <address-render-box v-if="addr.hostThirdParty.address" :address="addr.hostThirdParty.address" :isMultiline="isMultiline"></address-render-box>
+                      </div>
+                   </li>
+                </template>
 
                 <li v-if="person.email">
                   <i class="fa fa-li fa-envelope-o"></i>
@@ -131,53 +149,6 @@
           </div>
         </div>
 
-        <div class="item-col mx-3"
-             v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
-          <div class="float-button bottom">
-            <div class="box">
-              <ul class="list-content fa-ul">
-                <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
-                  <i class="fa fa-li fa-map-marker"></i>
-                  <div v-if="addr.address">
-                    <address-render-box
-                        :address="addr.address"
-                        :isMultiline="isMultiline">
-                    </address-render-box>
-                    <p>({{ $t('renderbox.residential_address') }})</p>
-                  </div>
-                  <div v-else-if="addr.hostPerson" class="mt-3">
-                    <p>{{ $t('renderbox.located_at') }}:</p>
-                    <span class="chill-entity entity-person badge-person">
-                                    <person-text
-                                        v-if="addr.hostPerson"
-                                        :person="addr.hostPerson"
-                                    ></person-text>
-                                </span>
-                    <address-render-box v-if="addr.hostPerson.address"
-                                        :address="addr.hostPerson.address"
-                                        :isMultiline="isMultiline">
-                    </address-render-box>
-                  </div>
-                  <div v-else-if="addr.hostThirdParty" class="mt-3">
-                    <p>{{ $t('renderbox.located_at') }}:</p>
-                    <span class="chill-entity entity-person badge-thirdparty">
-                                    <third-party-text
-                                        v-if="addr.hostThirdParty"
-                                        :thirdparty="addr.hostThirdParty"
-                                    ></third-party-text>
-                                </span>
-                    <address-render-box v-if="addr.hostThirdParty.address"
-                                        :address="addr.hostThirdParty.address"
-                                        :isMultiline="isMultiline">
-                    </address-render-box>
-                  </div>
-
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
       </div>
 
       <slot name="end-bloc"></slot>

src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig

@@ -59,7 +59,7 @@
                         <span class=" d-block d-sm-inline-block">
                             {{ address|chill_entity_render_box({
                                 'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
-                                'details_button': false
+                                'details_button': true
                             }) }}
                         </span>
                     {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig

@@ -56,13 +56,12 @@
                             {%- if address is not null -%}
                                 {{ address|chill_entity_render_box({
                                     'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
-                                    'details_button': false
+                                    'details_button': true
                                 }) }}
                             {%- endif -%}
                             {% if person.getCurrentHousehold is not null %}
-                                <a class="btn household-link text-end"
+                                <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
-                                    href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
+                                   class="btn btn-sm household-link" title="{{ 'Show household'|trans }}">
-                                    title="{{ 'Show household'|trans }}">
                                     <i class="fa fa-lg fa-home"></i>
                                 </a>
                             {% endif %}