From 58384f71d8e0f5d296cec83b9207be7748b0a5f5 Mon Sep 17 00:00:00 2001
From: Bruno Besson <bruno.besson@viseo.com>
Date: Wed, 4 Jan 2023 17:25:25 +0100
Subject: [PATCH 1/2] fix: use another approach to avoid multiline buttons on
 mobile

---
 src/js/vue-plugins/font-awesome-config.js     |  2 ++
 .../utils/LoadUserPreferencesButton.vue       | 22 +++++++++++--
 src/views/documents/utils/PrintButton.vue     | 17 ++++++++--
 src/views/documents/utils/QueryItems.vue      | 31 ++++++++++---------
 4 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/js/vue-plugins/font-awesome-config.js b/src/js/vue-plugins/font-awesome-config.js
index 902c1846b..64809922d 100644
--- a/src/js/vue-plugins/font-awesome-config.js
+++ b/src/js/vue-plugins/font-awesome-config.js
@@ -43,6 +43,7 @@ import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
 import { faDirections } from '@fortawesome/free-solid-svg-icons/faDirections';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
+import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons/faEllipsisVertical';
 import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
@@ -271,6 +272,7 @@ export default function install(Vue) {
     faDirections,
     faDownload,
     faEdit,
+    faEllipsisVertical,
     faExclamation,
     faExclamationCircle,
     faExpand,
diff --git a/src/views/documents/utils/LoadUserPreferencesButton.vue b/src/views/documents/utils/LoadUserPreferencesButton.vue
index bc8d5b054..9cf0e1c0d 100644
--- a/src/views/documents/utils/LoadUserPreferencesButton.vue
+++ b/src/views/documents/utils/LoadUserPreferencesButton.vue
@@ -1,20 +1,36 @@
 <template>
   <button
-    v-if="$user.isLogged"
+    v-if="$user.isLogged && display === 'button'"
     class="button is-small is-primary header-item"
     :class="{ 'is-loading': promise.loading }"
     @click="loadPreferences"
   >
     <fa-icon icon="star" />
-    <span class="is-hidden-mobile">&nbsp;</span>
-    <span class="is-hidden-mobile" v-translate> Load my preferences </span>
+    <span>&nbsp;</span>
+    <span v-translate>Load my preferences</span>
   </button>
+  <span
+    v-else-if="$user.isLogged && display === 'dropdown'"
+    class="dropdown-item"
+    :class="{ 'is-loading': promise.loading }"
+    @click="loadPreferences"
+  >
+    <fa-icon icon="star" />
+    <span v-translate>Load my preferences</span>
+  </span>
 </template>
 
 <script>
 import c2c from '@/js/apis/c2c';
 
 export default {
+  props: {
+    display: {
+      type: String,
+      default: 'button',
+    },
+  },
+
   data() {
     return {
       promise: {},
diff --git a/src/views/documents/utils/PrintButton.vue b/src/views/documents/utils/PrintButton.vue
index ad605e3a6..8fd7b32d3 100644
--- a/src/views/documents/utils/PrintButton.vue
+++ b/src/views/documents/utils/PrintButton.vue
@@ -1,10 +1,14 @@
 <template>
   <router-link target="_blank" :to="path" rel="nofollow">
-    <button class="button is-primary is-size-7-mobile">
+    <button v-if="display === 'button'" class="button is-primary is-size-7-mobile">
       <fa-icon icon="print"></fa-icon>
-      <span class="is-hidden-touch">&nbsp;</span>
-      <span class="is-hidden-touch" v-translate>Print search results</span>
+      <span>&nbsp;</span>
+      <span v-translate>Print search results</span>
     </button>
+    <span v-else class="dropdown-item">
+      <fa-icon icon="print"></fa-icon>
+      <span v-translate>Print search results</span>
+    </span>
   </router-link>
 </template>
 
@@ -14,6 +18,13 @@ import urlMixin from './url-mixin';
 export default {
   mixins: [urlMixin],
 
+  props: {
+    display: {
+      type: String,
+      default: 'button',
+    },
+  },
+
   computed: {
     path() {
       return { path: this.documentType + 's/print', query: this.$route.query };
diff --git a/src/views/documents/utils/QueryItems.vue b/src/views/documents/utils/QueryItems.vue
index 3ad3ac630..cffe61d35 100644
--- a/src/views/documents/utils/QueryItems.vue
+++ b/src/views/documents/utils/QueryItems.vue
@@ -62,12 +62,23 @@
         :document-types="associations"
         @add="addTag"
       />
-      <load-user-preferences-button class="is-hidden-tablet query-item-component" />
-      <export-csv-button v-if="listMode" class="is-small-mobile query-item-component"></export-csv-button>
-      <print-button />
-    </div>
-    <div class="query-items-tags is-hidden-mobile">
-      <query-tags :documents="tags" @remove="removeTag"></query-tags>
+      <div class="is-hidden-mobile" style="display: inline">
+        <load-user-preferences-button class="is-hidden-tablet query-item-component" />
+        <export-csv-button v-if="listMode" class="is-small-mobile query-item-component"></export-csv-button>
+        <print-button />
+        <div class="query-items-tags">
+          <query-tags :documents="tags" @remove="removeTag"></query-tags>
+        </div>
+      </div>
+      <dropdown-button class="is-hidden-tablet is-pulled-right">
+        <span slot="button" class="button is-white is-size-7-mobile">
+          <fa-icon icon="ellipsis-vertical" />
+        </span>
+        <div class="dropdown-items is-flex is-flex-direction-column">
+          <load-user-preferences-button display="dropdown" />
+          <print-button display="dropdown" />
+        </div>
+      </dropdown-button>
     </div>
   </div>
 </template>
@@ -397,14 +408,6 @@ export default {
 .query-items-filters {
   margin-bottom: 0.5rem;
   font-size: 0;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
   > div {
     font-size: 1rem;

From 5f6be7b3c7fb69fa59788c1fe527c286ee256c88 Mon Sep 17 00:00:00 2001
From: Bruno Besson <bruno.besson@viseo.com>
Date: Wed, 4 Jan 2023 17:29:41 +0100
Subject: [PATCH 2/2] fix: spacing between lines (on tablet)

---
 src/views/documents/utils/QueryItems.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/documents/utils/QueryItems.vue b/src/views/documents/utils/QueryItems.vue
index cffe61d35..ac7b18e0b 100644
--- a/src/views/documents/utils/QueryItems.vue
+++ b/src/views/documents/utils/QueryItems.vue
@@ -406,7 +406,6 @@ export default {
 
 <style scoped lang="scss">
 .query-items-filters {
-  margin-bottom: 0.5rem;
   font-size: 0;
 
   > div {
@@ -414,6 +413,10 @@ export default {
   }
 }
 
+.query-item-component {
+  margin-bottom: 0.5rem;
+}
+
 .title-input {
   display: inline-flex;
   margin-bottom: 0 !important;