Merge branch '92-detail-address-button' into 'master'

Intégration bouton address details

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

src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss

@@ -64,6 +64,7 @@ section.chill-entity {
                 margin: 0.7em 0;
                 p {
                     display: block;
+                    margin-bottom: 0;
                 }
             }
             &.delimiter {

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-sm btn-misc">
+  <a v-if="data.loading === false" @click.prevent="clickOrOpen" class="btn btn-misc address-details-button">
-    <span class="fa fa-map address-details-button"></span>
+    <span class="fa fa-map"></span> <!-- button -->
   </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/views/Entity/address.html.twig

@@ -10,6 +10,7 @@
     * has_no_address    bool
     * multiline         bool    multiline display
     * extended_infos    bool    add extra informations (step, floor, etc.) DEPRECATED
+    * details_button    bool    add an address details button
 
 #}
 
@@ -79,7 +80,12 @@
             <i class="fa fa-fw fa-map-marker"></i>
         {% endif %}
         {{ _self.inline(address, options, streetLine, lines) }}
-        <span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" data-address-ref-status="{{ address.refStatus|escape('html_attr') }}"></span>
+        {% if options['details_button'] is defined and options['details_button'] == true  %}
+            <span data-address-details="1"
+                data-address-id="{{ address.id|escape('html_attr') }}"
+                data-address-ref-status="{{ address.refStatus|escape('html_attr') }}">
+            </span>
+        {% endif %}
     </span>
 {%- endif -%}
 
@@ -112,7 +118,12 @@
                     <i class="fa fa-fw fa-map-marker"></i>
                 {% endif %}
                 {{ _self.raw(lines) }}
-                <p><span data-address-details="1" data-address-id="{{ address.id|escape('html_attr') }}" data-address-ref-status="{{ address.refStatus|escape('html_attr') }}"></span></p>
+                {% if options['details_button'] is defined and options['details_button'] == true  %}<p class="mt-3">
+                    <span data-address-details="1"
+                        data-address-id="{{ address.id|escape('html_attr') }}"
+                        data-address-ref-status="{{ address.refStatus|escape('html_attr') }}">
+                    </span></p>
+                {% endif %}
             </div>
         {% endif %}
         {{ _self.validity(address, options) }}

src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss

@@ -14,6 +14,31 @@
 @import './scss/person_by_phonenumber.scss';
 @import './scss/address_history.scss';
 
+/*
+ * Mixins
+ */
+
+@mixin context_buttons ($context) {
+    .chill-entity.entity-address .address {
+        padding-right: 1em;
+    }
+    .address-details-button,
+    .household-link {
+        border: 1px solid white;
+        background-color: transparent;
+        width: 1.85rem;
+        height: 1.85rem;
+        font-size: 75%;
+        padding: .38rem;
+        border-radius: 5px;
+        color: white;
+        cursor: pointer;
+        &:hover {
+            background-color: white;
+            color: $context
+        }
+    }
+}
 
 /*
 *  PERSON CONTEXT
@@ -39,17 +64,7 @@ div.banner {
                 margin-right: 1em;
             }
         }
-        .household-link {
+        @include context_buttons($chill-person-context);
-            border: 1px solid white;
-            padding: .05rem .3rem;
-            border-radius: 5px;
-            color: white;
-            cursor: pointer;
-            &:hover {
-                background-color: white;
-                color: $chill-person-context
-            }
-        }
     }
 }
 
@@ -219,6 +234,8 @@ div.banner {
             font-weight: 700;
             font-weight: bold;
         }
+
+        @include context_buttons($chill-household-context);
     }
 }
 

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

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

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

@@ -23,7 +23,11 @@
             {% if address is empty %}
                 <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
             {% else %}
-                {{ address|chill_entity_render_box({'multiline': true, 'extended_infos': true }) }}
+                {{ address|chill_entity_render_box({
+                    'multiline': true,
+                    'extended_infos': true,
+                    'details_button': true
+                }) }}
             {% endif %}
 
             <ul class="list-inline text-right mt-2">

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

@@ -19,25 +19,25 @@
     <div id="header-person-details" class="header-details">
         <div class="container-xxl">
             <div class="row justify-content-between">
+                <div class="col-md-12 ps-md-5 ps-xxl-0 container">
+                    <div class="row contact">
 
-                <div class="col-md-12 ps-md-5 ps-xxl-0">
-                    <div class="contact">
                         {% if person.phonenumber %}
-                            <span class="phonenumber d-block d-sm-inline-block">
+                            <span class="col-auto phonenumber">
                                 <i class="fa fa-fw fa-phone"></i>
                                 <a href="{{ 'tel:' ~ person.phonenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
                                     {{ person.phonenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.mobilenumber %}
-                            <span class="mobilenumber d-block d-sm-inline-block">
+                            <span class="col-auto mobilenumber">
                                 <i class="fa fa-fw fa-mobile"></i>
                                 <a href="{{ 'tel:' ~ person.mobilenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
                                     {{ person.mobilenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.email %}
-                            <span class="email d-block d-sm-inline-block">
+                            <span class="col-auto email">
                                 <i class="fa fa-fw fa-envelope-o"></i>
                                 <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
                                     {{ person.email }}
@@ -51,23 +51,25 @@
                         {%- elseif person.lastAddress is not empty -%}
                             {% set address = person.lastAddress %}
                         {%- endif -%}
-                        {%- if address is not null -%}
+
-                            <span class=" d-block d-sm-inline-block">
+                        <span class="col-md-auto address">
+                            {%- if address is not null -%}
                                 {{ address|chill_entity_render_box({
-                                    'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
+                                    'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true,
+                                    'details_button': false
                                 }) }}
-                            </span>
+                            {%- endif -%}
-                        {%- endif -%}
+                            {% if person.getCurrentHousehold is not null %}
-                        {% if person.getCurrentHousehold is not null %}
+                                <a class="btn household-link text-end"
-                            <span>
+                                    href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
-                                <a class="household-link" href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}">
+                                    title="{{ 'Show household'|trans }}">
-                                    <i class="fa fa-home"></i>
+                                    <i class="fa fa-lg fa-home"></i>
                                 </a>
-                            </span>
+                            {% endif %}
-                        {% endif %}
+                        </span>
+
                     </div>
                 </div>
-
             </div>
         </div>
     </div>