Update miniMenu to allow selector to be a button, and use for filtering the gallery

webapp/src/assets/less/variables.less

@@ -372,6 +372,25 @@
     }
 }
 
+.ofm-top-nav-button {
+  margin-top: 4px;
+  height: 38px;
+}
+
+.ofm-top-nav-square-button {
+  margin-top: 4px;
+  height: 38px;
+  width: 38px;
+}
+
+.ofm-top-nav-square-button.material-icon {
+  // MAterial icons are 24x24 , set padding to centre
+  padding: 6px !important;
+  margin-top: 4px;
+  height: 38px;
+  width: 38px;
+}
+
 // A button styled like text. For use in menus
 .ofm-text-button {
   display: block;

webapp/src/components/genericComponents/miniMenu.vue

@@ -1,9 +1,21 @@
 <template>
   <div ref="mini-menu" class="mini-menu">
-    <a class="icon" @click.prevent="isOpen = !isOpen">
+    <a v-if="!withButton" class="icon" @click.prevent="isOpen = !isOpen">
-      <span class="material-symbols-outlined"> more_vert </span>
+      <span class="material-symbols-outlined"> {{ icon }} </span>
     </a>
-    <div v-if="isOpen" class="dropdown-menu ofm-close-pars ofm-opaque-element">
+    <button
+      v-if="withButton"
+      class="ofm-top-nav-square-button material-icon uk-button uk-button-default"
+      type="button"
+      @click="isOpen = !isOpen"
+    >
+      <span class="material-symbols-outlined"> {{ icon }} </span>
+    </button>
+    <div
+      v-if="isOpen"
+      class="dropdown-menu ofm-close-pars ofm-opaque-element"
+      :class="{ 'with-button': withButton }"
+    >
       <slot :close="close"></slot>
     </div>
   </div>
@@ -13,7 +25,18 @@
 export default {
   name: "MiniMenu",
 
-  props: {},
+  props: {
+    icon: {
+      type: String,
+      default: "more_vert",
+      required: false,
+    },
+    withButton: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
 
   data() {
     return {
@@ -62,6 +85,10 @@ export default {
   padding-top: 5px;
 }
 
+.dropdown-menu.with-button {
+  top: 40px;
+}
+
 .icon {
   user-select: none;
   color: #888;

webapp/src/components/tabContentComponents/galleryContent.vue

@@ -4,8 +4,32 @@
     <nav class="ofm-tab-navbar">
       <!-- Right side buttons -->
       <div class="uk-navbar-right">
+        <mini-menu v-slot="{ close }" icon="mobile_layout" :with-button="true">
+          <p>
+            <icon-button
+              icon="tile_small"
+              :show-label="true"
+              label="Detailed cards"
+              @click="
+                thumbnailOnly = false;
+                close();
+              "
+            />
+          </p>
+          <p>
+            <icon-button
+              icon="view_compact"
+              :show-label="true"
+              label="Thumbnail only"
+              @click="
+                thumbnailOnly = true;
+                close();
+              "
+            />
+          </p>
+        </mini-menu>
         <button
-          class="uk-button uk-button-default gallery-button"
+          class="uk-button uk-button-default ofm-top-nav-button"
           type="button"
           @click="refreshGallery()"
         >
@@ -13,7 +37,7 @@
         </button>
 
         <button
-          class="sidebar-toggle uk-button uk-button-default gallery-button"
+          class="ofm-top-nav-square-button uk-button uk-button-default"
           type="button"
           @click="sidebarOpen = !sidebarOpen"
         >
@@ -41,6 +65,7 @@
           <div v-for="itemData in paginatedItems" :key="itemData.id">
             <gallery-card
               :item-data="itemData"
+              :thumbnail-only="thumbnailOnly"
               @viewer-requested="showItem"
               @update-requested="refreshGallery"
             />
@@ -93,6 +118,8 @@ import PaginateLinks from "@/components/genericComponents/paginateLinks.vue";
 import MultiSelectDropdown from "@/components/genericComponents/multiSelectDropdown.vue";
 import actionButton from "@/components/labThingsComponents/actionButton.vue";
 import ServerSpecifiedActionButton from "@/components/labThingsComponents/serverSpecifiedActionButton.vue";
+import MiniMenu from "@/components/genericComponents/miniMenu.vue";
+import iconButton from "@/components/genericComponents/iconButton.vue";
 import galleryCard from "./galleryComponents/galleryCard.vue";
 import galleryModal from "./galleryComponents/galleryViewer.vue";
 import { eventBus } from "../../eventBus.js";
@@ -110,6 +137,8 @@ export default {
     PaginateLinks,
     MultiSelectDropdown,
     ServerSpecifiedActionButton,
+    MiniMenu,
+    iconButton,
   },
 
   emits: ["scrollTop"],
@@ -120,11 +149,11 @@ export default {
       selectedItem: null,
       osdViewer: null,
       currentPage: 1,
-      itemsPerPage: 18,
       selectedCardTypes: [],
       allCardTypes: [],
       bulkActions: [],
       sidebarOpen: false,
+      thumbnailOnly: false,
     };
   },
 
@@ -136,6 +165,9 @@ export default {
     noItems() {
       return !this.filtered_items || this.filtered_items?.length === 0;
     },
+    itemsPerPage() {
+      return this.thumbnailOnly ? 25 : 18;
+    },
     totalPages() {
       return Math.ceil((this.filtered_items?.length || 0) / this.itemsPerPage);
     },
@@ -263,15 +295,6 @@ export default {
   padding-top: 20px;
 }
 
-.gallery-button {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.sidebar-toggle {
-  width: 40px;
-}
-
 .sidebar-toggle-text {
   font-size: 24px;
   transition: transform 0.25s ease;