Merge pull request #3185 from c2corg/query-items-mobile

c2corg · Jan 4, 2023 · 229c456 · 229c456
2 parents 4641b9a + 5f6be7b
commit 229c456
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
@@ -395,22 +406,17 @@ export default {
 
 <style scoped lang="scss">
 .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;
   }
 }
 
+.query-item-component {
+  margin-bottom: 0.5rem;
+}
+
 .title-input {
   display: inline-flex;
   margin-bottom: 0 !important;