reworks display panel layout

src/components/ItemsRenderer.vue

@@ -7,7 +7,7 @@ This file is part of LiberaForms.
 
 <template>
 
-  <ItemsGrid v-if="display_items" />
+  <ItemsGrid v-if="display_items" class="mt-4"/>
 
   <FieldModal v-if="!is_loading"
               :show_modal="show_field_modal"

src/components/itemsRenderer/ItemPagination.vue

@@ -7,7 +7,7 @@ This file is part of LiberaForms.
 
 <template>
   <div v-if="is_loading === false"
-       class="d-flex align-items-center justify-content-end my-4">
+       class="d-flex align-items-center justify-content-end mb-2">
     <small class="page_count_display me-2">
       {{ getPaginationText() }}
     </small>

src/components/itemsRenderer/ItemsGrid.vue

@@ -7,8 +7,6 @@ This file is part of LiberaForms.
 
 <template>
   <div>
-    <ItemPagination />
-
     {{ column_width }}
 
     <div class="table-responsive">
@@ -38,7 +36,6 @@ This file is part of LiberaForms.
           <GridRow v-for="item in items" :key="item.id"
                    :item="item"
                    :field_index="field_index"
-                   :edit_mode="edit_mode"
                    :is_data_sticky="is_data_sticky"
                    :highlighted_row="highlighted_row"
                    @click="highlighted_row = item.id"
@@ -47,12 +44,13 @@ This file is part of LiberaForms.
         </tbody>
       </table>
     </div>
+    <ItemPagination />
     <NumericTotals />
-    </div>
+  </div>
 </template>
 
 <script>
-import { computed, ref } from "vue";
+import { computed, ref, inject } from "vue";
 import { dataDisplayStore } from '@/store.js'
 import { orderItems } from '@/modules/items.js'
 import { ArrowDownIcon, CheckCircleIcon } from '@zhuowenli/vue-feather-icons'
@@ -76,7 +74,6 @@ export default {
     })
     const highlighted_row = ref(0)
 
-    let edit_mode = false
     var is_data_sticky = false
 
     let grid_width = 400 //$refs.table.clientWidth
@@ -125,7 +122,7 @@ export default {
         return "stickyColumn first_sticky_col sticky_data_col"
       }
       if (col_index == 1) {
-        if (edit_mode) {
+        if (store.show_other_options) {
           return "stickyColumn sticky_data_col sticky_data_col_with_controls_expanded";
         }
         if (store.has_row_controls) {
@@ -146,8 +143,6 @@ export default {
 
 
     return {
-      store,
-      edit_mode,
       items: computed(() => store.paginatedItems),
       field_index,
       setOrder,

src/components/itemsRenderer/RowControls.vue

@@ -12,7 +12,7 @@ This file is part of LiberaForms.
             :aria-label="$t('Mark for reference')">
       <CheckCircleIcon size="1.3x" />
     </button>
-    <button v-if="edit_mode==true"
+    <button v-if="with_other_options"
             class="ds-delete-button"
             :class="{'ds-card-button':is_card==true}"
             :aria-label="$t('Delete answer')"
@@ -43,11 +43,13 @@ export default {
   setup(props) {
     const store = dataDisplayStore()
 
+    const with_other_options = computed(() => { return store.show_other_options })
+
     const controlClass = computed(() => {
       if (props.is_card==true) {
-        return props.edit_mode ? 'card-controls editMode' : 'card-controls nonEditMode'
+        return with_other_options ? 'card-controls editMode' : 'card-controls nonEditMode'
       } else {
-        return props.edit_mode ? 'grid-controls editMode' : 'grid-controls nonEditMode'
+        return with_other_options ? 'grid-controls editMode' : 'grid-controls nonEditMode'
       }
     })
 
@@ -69,6 +71,7 @@ export default {
     return {
       controlClass,
       toggleBookmarked,
+      with_other_options,
     }
   },
 }

src/components/panel/DisplayModes.vue

@@ -18,7 +18,7 @@ This file is part of LiberaForms.
            v-on:click="displayItemsAs('cards')">
      {{ $t("Cards") }}
     </button>
-    <button v-if="include_graphs"
+    <button v-if="data_type='answer'"
            class="btn btn-sm"
            :class="button_classes.graphs"
            :disabled="disabled"
@@ -56,7 +56,8 @@ export default {
           'grid': store.display_items_as == 'grid' ? 'btn-primary' : 'btn-outline-secondary',
           'graphs': store.display_items_as == 'graphs' ? 'btn-primary' : 'btn-outline-secondary'
         }
-      })
+      }),
+      data_type: store.data_type,
     }
   },
 }

src/components/panel/DisplayPanel.vue

@@ -8,38 +8,81 @@ This file is part of LiberaForms.
 <template>
   <div>
 
-    <PanelControls />
     <div class="ds-panel-desktop-container-1">
+      <ExportOptions />
+    </div>
+
+    <div class="mt-2 ds-panel-desktop-container-1">
       <!--<Filters :mq="$mq" :field_index="field_index" />-->
       <ItemFilters />
     </div>
 
+    <div  v-if="data_type=='answer'"
+         class="mt-3 ds-panel-desktop-container-1"
+         :class="controlGroupClasses()">
+
+      <div class="ds-controls-height">
+        <DisplayModes />
+      </div>
+
+      <div class="ds-controls-height">
+        <OtherOptions />
+      </div>
+
+    </div>
+
   </div>
 </template>
 
 <script>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { dataDisplayStore } from '@/store.js'
 import ItemFilters from '@/components/panel/ItemFilters.vue'
-import PanelControls from '@/components/panel/PanelControls.vue'
+import ExportOptions from '@/components/panel/ExportOptions.vue'
+import DisplayModes from '@/components/panel/DisplayModes.vue'
+import OtherOptions from '@/components/panel/OtherOptions.vue'
 
 export default {
   name: 'DisplayPanel',
   components: {
-    ItemFilters, PanelControls
+    ItemFilters, ExportOptions, DisplayModes, OtherOptions
   },
 
   setup() {
     const store = dataDisplayStore()
 
+    let mq = "lg"
+    function controlGroupClasses() {
+      if (mq == "sm") {
+        return "mb-3"
+      }
+      if (store.data_type=='answer') {
+        return 'd-flex align-items-center justify-content-between'
+      }
+      if (store.data_type=='user') {
+        return 'd-flex align-items-center justify-content-end'
+      }
+      return "mt-1";
+    }
 
     return {
-
+      controlGroupClasses,
+      data_type: store.data_type,
+      //show_other_options, toggleOtherOptions,
     }
   },
 }
 </script>
 
 <style scoped>
+.ds-controls-height {
+  min-height: 31px !important;
+}
 
 </style>
+<style>
+.ds-controls-title svg {
+  color: var(--lf-link-color);
+  cursor: pointer;
+}
+</style>

src/components/panel/OtherOptions.vue

@@ -0,0 +1,74 @@
+<!--
+This file is part of LiberaForms.
+
+# SPDX-FileCopyrightText: 2024 LiberaForms.org
+# SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+
+  <span v-if="show_options"
+        class="modes">
+
+    <a class="btn btn-sm btn-outline-danger"
+       role="button"
+       :href="endpoint+'/delete-all-items'">
+        {{ $t("Delete all") }}
+    </a>
+
+    <button v-if="has_deleted_fields == true"
+            class="btn btn-sm"
+            :class="show_deleted==true ? 'btn-primary' : 'btn-outline-secondary'"
+            v-on:click="toggle_deleted_fields">
+      {{ $t("Include deleted fields") }}
+    </button>
+
+  </span>
+
+  <button v-if="can_edit == true"
+          class="btn btn-sm"
+          :class="edit_mode==true ? 'btn-primary' : 'btn-outline-primary'"
+          v-on:click="toggleOptions()">
+        {{ $t("Options") }}
+      </button>
+
+</template>
+
+<script>
+import { computed } from "vue";
+import { dataDisplayStore } from '@/store.js'
+
+
+export default {
+  name: 'OtherOptions',
+  components: {
+    //ArrowLeftIcon,
+  },
+
+  setup() {
+    const store = dataDisplayStore()
+
+    function toggleOptions() {
+      store.show_other_options = !store.show_other_options
+    }
+
+    return {
+      can_edit: store.can_edit,
+      data_type: store.data_type,
+      endpoint: store.endpoint,
+      show_options: computed(() => store.show_other_options),
+      toggleOptions,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.ds-controls-height {
+  min-height: 31px !important;
+}
+.ds-controls-title svg {
+  color: var(--lf-link-color);
+  cursor: pointer;
+}
+</style>

src/components/panel/PanelControls.vue

@@ -1,86 +0,0 @@
-<!--
-This file is part of LiberaForms.
-
-# SPDX-FileCopyrightText: 2024 LiberaForms.org
-# SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-
-  <div class="ds-modes-export-container-1"
-       :class="controlGroupClasses()">
-
-    <div v-if="data_type=='answer'" class="ds-controls-height">
-
-      <DisplayModes :disabled="pdf_builder_mode"
-                    :include_graphs="data_type=='answer'" />
-
-      <!--<EditOptions v-if="can_edit" :edit_mode="edit_mode" :can_edit="can_edit" />-->
-
-    </div>
-
-    <div v-if="pdf_builder_mode"
-         class="ds-controls-title ds-controls-height fs-5 fw-light">
-      <ArrowLeftIcon stroke-width="1" size="1.2x"
-                     v-if="mq=='sm'"
-                     @click="togglePdfBuilderMode()"/>
-      {{ $t("Export PDF") }}
-    </div>
-
-    <ExportOptions />
-
-  </div>
-</template>
-
-<script>
-import { computed } from "vue";
-import { dataDisplayStore } from '@/store.js'
-import { ArrowLeftIcon } from '@zhuowenli/vue-feather-icons'
-import DisplayModes from '@/components/panel/DisplayModes.vue'
-import EditOptions from '@/components/panel/EditOptions.vue'
-import ExportOptions from '@/components/panel/ExportOptions.vue'
-
-export default {
-  name: 'PanelControls',
-  components: {
-    DisplayModes, EditOptions, ExportOptions,
-    ArrowLeftIcon,
-  },
-
-  setup() {
-    const store = dataDisplayStore()
-
-    let mq = "lg"
-
-    function controlGroupClasses() {
-      if (mq == "sm") {
-        return "mb-3"
-      }
-      if (store.data_type=='answer') {
-        return 'd-flex align-items-center justify-content-between mb-4'
-      }
-      if (store.data_type=='user') {
-        return 'd-flex align-items-center justify-content-end mb-3'
-      }
-      return "mt-1";
-    }
-
-    return {
-      controlGroupClasses,
-      can_edit: store.can_edit,
-      data_type: store.data_type,
-      pdf_builder_mode: computed(() => { return store.pdf_builder_mode }),
-    }
-  },
-}
-</script>
-
-<style scoped>
-.ds-controls-height {
-  min-height: 31px !important;
-}
-.ds-controls-title svg {
-  color: var(--lf-link-color);
-  cursor: pointer;
-}
-</style>

src/store.js

@@ -37,6 +37,7 @@ export const dataDisplayStore = defineStore("dataDisplayStore", {
     page_length: 10,
     can_edit: false,
     show_modes: false,
+    show_other_options: false,
     has_row_controls: false,
     include_deleted_fields: false,
     display_items_as: "grid",