feat: en-tête selection

Signed-off-by: Maud Royer <hello@maudroyer.fr>
AgenceBio · Apr 2, 2024 · 921217b · 921217b
1 parent 5319dec
commit 921217b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/Features/MassActionsSelector.vue b/src/components/Features/MassActionsSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <nav ref="openerElement" role="navigation" class="fr-translate fr-nav" data-fr-js-navigation="true">
     <div class="fr-nav__item" data-fr-js-navigation-item="true">
-      <button type="button" class="fr-btn fr-btn--secondary fr-translate__btn" aria-controls="mass-actions__actions" :aria-expanded="isMenuOpen" @click="(isMenuOpen = !isMenuOpen)" data-fr-js-collapse-button="true">
+      <button type="button" class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--icon-right fr-icon-arrow-down-s-line menu-button" aria-controls="mass-actions__actions" :aria-expanded="isMenuOpen" @click="(isMenuOpen = !isMenuOpen)" data-fr-js-collapse-button="true">
         {{ label }}
       </button>
       <div :class="['fr-collapse', 'fr-translate__menu', 'fr-menu', isMenuOpen && 'fr-collapse--expanded']" id="mass-actions__actions" data-fr-js-collapse="true" style="--collapse-max-height: none; --collapse: -148px">
@@ -66,19 +66,20 @@ function handleSubmit ({ ids, patch }) {
   position: relative;
 }
   .fr-translate__menu {
+    position: absolute;
     left: 0;
     top: calc(100%);
     min-width: 25em;
     text-align: left;
   }
-  .fr-translate .fr-translate__btn {
+  .fr-translate .menu-button {
     border: 1px solid #fff;
     background-color: #fff;
     margin-bottom: 0;
     box-shadow: none;
   }
 
-  .fr-translate .fr-translate__btn::before {
+  .fr-translate .menu-button::before {
     content: none;
   }
 

diff --git a/src/components/record/Table.vue b/src/components/record/Table.vue
@@ -19,15 +19,17 @@
       </colgroup>
       <thead>
         <tr v-if="(selectedFeatureIds.length > 0)" class="summary summary__mass-actions">
-          <td class="selection">
+          <td class="selection" colspan="2">
             <div class="fr-checkbox-group single-checkbox">
               <input type="checkbox" id="radio-mass-edit" checked @click="selectedFeatureIds = []" />
               <label class="fr-label" for="radio-mass-edit" />
             </div>
           </td>
-          <td colspan="2">{{ selectedFeatureIds.length }} parcelles sélectionnées</td>
-          <td colspan="2">
-            <MassActionsSelector v-if="massActions.length" :actions="massActions" label="Modifier" @submit="handleFeatureCollectionSubmit" />
+          <td colspan="3">
+            <div>
+              {{ selectedFeatureIds.length }} parcelles sélectionnées
+              <MassActionsSelector v-if="massActions.length" :actions="massActions" label="Modifier" @submit="handleFeatureCollectionSubmit" />
+            </div>
           </td>
         </tr>
         <tr>
@@ -310,6 +312,13 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
   box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
 }
 
+.fr-table .summary.summary__mass-actions td:nth-child(2) div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .fr-table td.numeric,
 .fr-table th.numeric {
   font-variant-numeric: tabular-nums;