style: add flex and i18n labels

ICIJ · Jul 24, 2024 · b2c3206 · b2c3206
1 parent d035a3e
commit b2c3206
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 49 deletions.
diff --git a/src/components/Document/DocumentActionsGroup/DocumentActionsGroup.vue b/src/components/Document/DocumentActionsGroup/DocumentActionsGroup.vue
@@ -1,25 +1,19 @@
 <template>
-  <b-button-group class="document-actions align-items-center" :vertical="vertical" size="sm">
-    <slot name="selection" v-bind="{document}">
-
-    </slot>
+  <div class="document-actions-group d-flex align-items-center" :class="{'flex-column': vertical}">
+    <b-form-checkbox class="m-2" v-if="selectMode" :model-value="selected" @update:modelValue="$emit('update:selected',$event)" name="checkbox"/>
     <slot name="actions" v-bind="{document}">
-      <document-actions-group-entry icon-name="star" label="Star" @click="clickStar" :tooltipPlacement="tooltipPlacement" :isFilled="isStarred"/>
-      <document-actions-group-entry icon-name="share" label="Share" @click="clickShare" :tooltipPlacement="tooltipPlacement"/>
-      <document-actions-group-entry icon-name="download" :disabled="isDownloadAllowed" @click="clickDownload" :label="downloadLabel" :tooltipPlacement="tooltipPlacement" />
-      <document-actions-group-entry icon-name="arrows-out-simple"  label="Expand"  @click="clickExpand" :tooltipPlacement="tooltipPlacement"/>
-  </slot>
+      <document-actions-group-entry icon="star" :label="$t('documentActionsGroup.star')" @click="clickStar" :tooltip-placement="tooltipPlacement" :is-filled="isStarred"/>
+      <document-actions-group-entry icon="share" :label="$t('documentActionsGroup.share')" @click="clickShare" :tooltip-placement="tooltipPlacement"/>
+      <document-actions-group-entry icon="download" :label="$t('documentActionsGroup.download')" :disabled="isDownloadAllowed" @click="clickDownload"  :tooltip-placement="tooltipPlacement" />
+      <document-actions-group-entry icon="arrows-out-simple" :label="$t('documentActionsGroup.expand')" @click="clickExpand" :tooltipPlacement="tooltipPlacement"/>
+    </slot>
+  </div>
 
-  </b-button-group>
 </template>
 
 <script setup>
-import { findIndex, uniqueId } from 'lodash'
-import { mapState, useStore } from 'vuex'
-import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import RouterLinkPopup from '@/components/RouterLinkPopup'
 import DocumentActionsGroupEntry from '@/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry'
 defineProps({
   /**
@@ -53,46 +47,37 @@ defineProps({
    */
    isStarred: {
     type: Boolean
+  },
+  /**
+   * True if selectMode is allowed
+   */
+   selectMode: {
+    type: Boolean
+  },
+  /**
+   * True if checkbox is selected
+   */
+   selected: {
+    type: Boolean
   }
 })
 
 const { t } = useI18n()
 
-const emit = defineEmits(['click-star','click-download','click-share','click-expand'])
-
-
+const emit = defineEmits(['click-star','click-download','click-share','click-expand','update:selected'])
 
-async function clickStar() {
+const clickStar = () => {
   emit("click-star", {id:document.id})
 }
-async function clickDownload() {
+const clickDownload = () => {
   emit("click-download", {id:document.id})
 }
-async function clickShare() {
+const clickShare = () => {
   emit("click-share", {id:document.id})
 }
-async function clickExpand() {
+const clickExpand = () => {
   emit("click-expand", {id:document.id})
 }
 
 </script>
 
-<style lang="scss" scoped>
-.document-actions {
-  .btn-group {
-    .btn:not(:first-of-type) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .dropdown:last-of-type {
-      display: inline-flex;
-
-      &:deep(.btn) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry.vue b/src/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry.vue
@@ -1,7 +1,7 @@
 <template>
   <icon-button
     :id="btnId"
-    :icon-left="iconName"
+    :icon-left="icon"
     :icon-left-weight="iconWeight"
     :icon-left-hover-weight="iconHoverWeight"
     :label="label"
@@ -26,7 +26,7 @@ const props = defineProps({
   /**
    * Icon name
    */
-  iconName: {
+  icon: {
     type: String,
     required: true
   },

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -155,6 +155,12 @@
     "nextPage": "Go to next page",
     "lastPage": "Go to last page"
   },
+  "documentActionsGroup": {
+    "star": "Star",
+    "download": "Download",
+    "share": "Share",
+    "expand": "Expand"
+  },
   "documentLocalSearchOccurrences": {
     "label": "{activeIndex} on {occurrences}"
   },

diff --git a/src/stories/components/Document/DocumentActionsGroup/DocumentActionsGroup.stories.js b/src/stories/components/Document/DocumentActionsGroup/DocumentActionsGroup.stories.js
@@ -1,6 +1,7 @@
 import IconButton from '@/components/IconButton'
 import { vueRouter } from 'storybook-vue3-router'
 import DocumentActionsGroup from '@/components/Document/DocumentActionsGroup/DocumentActionsGroup'
+import {BFormCheckbox} from 'bootstrap-vue-next'
 const routes = [{  name: 'document-modal',path: '/document-modal' }]
 
 export default {
@@ -20,9 +21,6 @@ export default {
     },
     template: `
       <document-actions-group v-bind="args" >
-      <template #selection>
-      <b-checkbox/>
-      </template>
       </document-actions-group>
     `
   })
@@ -36,6 +34,8 @@ export const Default = {
     vertical: false,
     tooltipPlacement: 'top',
     isStarred: false,
-    isDownloadAllowed: false
+    isDownloadAllowed: false,
+    selectMode:true,
+    selected:false
   }
 }
diff --git a/src/stories/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry.stories.js b/src/stories/components/Document/DocumentActionsGroup/DocumentActionsGroupEntry.stories.js
@@ -2,14 +2,14 @@ import DocumentActionsGroupEntry from '@/components/Document/DocumentActionsGrou
 
 export default {
   components: { DocumentActionsGroupEntry },
-  title: 'Components/Document/DocumentActionsGroup/Entry',
+  title: 'Components/Document/DocumentActionsGroup/DocumentActionsGroupEntry',
   component: DocumentActionsGroupEntry,
   tags: ['autodocs']
 }
 
 export const Default = {
   args: {
-    iconName: 'star',
+    icon: 'star',
     label: 'Star',
     tooltipPlacement: 'right',
     tooltipLabel: 'Test',
@@ -19,7 +19,7 @@ export const Default = {
 }
 export const Filled = {
   args: {
-    iconName: 'star',
+    icon: 'star',
     label: 'Star',
     tooltipLabel: 'Test',
     tooltipPlacement: 'right',