improve collage approval page's look

photobooth-app · Jan 25, 2025 · f51b3f5 · f51b3f5
1 parent 56ca345
commit f51b3f5
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 36 deletions.
diff --git a/src/components/ReturnButton.vue b/src/components/ReturnButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <!-- show back button on all pages except / -->
+  <q-page-sticky position="top-left" class="q-ma-lg">
+    <q-btn id="layout-button-back" color="primary" rounded no-caps @click="emit('triggerReturn')" class="action-button glass-effect">
+      <q-icon left :name="icon" />
+      <div>{{ t('BTN_LABEL_BACK') }}</div>
+    </q-btn>
+  </q-page-sticky>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n'
+</script>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { icon = 'sym_o_arrow_back_ios_new' } = defineProps<{
+  icon?: string
+}>()
+
+const emit = defineEmits<{
+  triggerReturn: []
+}>()
+</script>
+
+<style lang="scss"></style>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -53,6 +53,18 @@ h6 {
   &.bg-secondary {
     background: rgba($secondary, 0.4) !important;
   }
+
+  &.bg-positive {
+    background: rgba($positive, 0.4) !important;
+  }
+
+  &.bg-negative {
+    background: rgba($negative, 0.4) !important;
+  }
+
+  &.bg-grey {
+    background: rgba($grey, 0.4) !important;
+  }
 }
 
 .toolbar {

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -3,14 +3,6 @@
     <q-page-container>
       <router-view />
 
-      <!-- show back button on all pages except / -->
-      <q-page-sticky v-if="route.path != '/'" position="top-left" class="q-ma-lg" style="/*z-index: 10000*/">
-        <q-btn id="layout-button-back" color="primary" rounded no-caps @click="$router.back()" class="action-button glass-effect">
-          <q-icon left name="sym_o_arrow_back_ios_new" />
-          <div>{{ $t('BTN_LABEL_BACK') }}</div>
-        </q-btn>
-      </q-page-sticky>
-
       <!-- auto-start slideshow after timeout -->
       <RouteAfterTimeout
         v-if="configurationStore.configuration.uisettings.enable_automatic_slideshow && mediacollectionStore.collection_number_of_items > 0"

diff --git a/src/pages/GalleryDetailPage.vue b/src/pages/GalleryDetailPage.vue
@@ -61,6 +61,8 @@
       <!-- usually not visible but if page is called with wrong id or the page was not closed after an item is deleted -->
       <ItemNotAvailableError />
     </div>
+
+    <ReturnButton @trigger-return="$router.back()"></ReturnButton>
   </q-layout>
 </template>
 
@@ -78,6 +80,8 @@ import ItemNotAvailableError from '../components/ItemNotAvailableError.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { type ShareSchema } from '../components/ShareTriggerButtons.vue'
 import { remoteProcedureCall } from '../util/fetch_api.js'
+import { default as ReturnButton } from '../components/ReturnButton.vue'
+
 const route = useRoute()
 const router = useRouter()
 const configurationStore = useConfigurationStore()

diff --git a/src/pages/GalleryPage.vue b/src/pages/GalleryPage.vue
@@ -9,13 +9,20 @@
     </div>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-else v-html="configurationStore.configuration.uisettings.GALLERY_EMPTY_MSG"></div>
+
+    <ReturnButton v-if="!props.standaloneMode" @trigger-return="$router.back()"></ReturnButton>
   </q-page>
 </template>
 <script setup lang="ts">
 import { useConfigurationStore } from '../stores/configuration-store'
 import { useMediacollectionStore } from '../stores/mediacollection-store'
 import { computed } from 'vue'
 import { default as MediaItemThumbnailViewer } from '../components/MediaItemThumbnailViewer.vue'
+import { default as ReturnButton } from '../components/ReturnButton.vue'
+
+const props = defineProps({
+  standaloneMode: Boolean,
+})
 
 const configurationStore = useConfigurationStore()
 const mediacollectionStore = useMediacollectionStore()

diff --git a/src/pages/ItemApprovalPage.vue b/src/pages/ItemApprovalPage.vue
@@ -1,42 +1,55 @@
 <template>
-  <q-page id="itemapproval-page" class="fullscreen flex flex-center">
+  <q-page id="itemapproval-page" class="absolute-full flex flex-center">
     <!-- fullscreen class hides the back button, which is what we want here since the back button just returns without aborting the job-->
     <q-img v-if="imgToApproveSrc" :src="`/media/preview/${imgToApproveSrc}`" fit="contain" style="height: 95%" />
     <!-- video approval not yet supported -->
 
+    <q-page-sticky position="top-left" class="q-ma-lg">
+      <q-btn id="layout-button-back" color="grey" rounded no-caps @click="userAbort()" class="action-button glass-effect">
+        <q-icon left name="sym_o_cancel" />
+        <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_CANCEL_COLLAGE') }}</div>
+      </q-btn>
+    </q-page-sticky>
+
     <q-page-sticky position="bottom" class="q-ma-lg">
-      <q-banner rounded inline-actions>
-        <div>
-          <div class="text-h5">{{ $t('TITLE_ITEM_APPROVAL') }}</div>
-          <div class="text-subtitle2">
+      <div class="q-mb-lg action-buttons col">
+        <div class="q-mb-sm row flex flex-center">
+          <q-badge color="grey-8" class="q-mr-xs">
+            <q-icon name="sym_o_tag" color="white" class="q-mr-xs" />
             {{
-              $t('MSG_APPROVE_COLLAGE_ITEM_NO_OF_TOTAL', {
+              $t('LABEL_ELEMENT_X_OF_Y', {
                 no: stateStore.number_captures_taken,
                 total: stateStore.total_captures_to_take,
               })
             }}
-          </div>
+          </q-badge>
         </div>
+        <div class="row">
+          <q-btn
+            id="item-approval-button-reject"
+            stack
+            rounded
+            class="q-mr-lg action-button col-auto glass-effect"
+            color="negative"
+            no-caps
+            icon="sym_o_thumb_down"
+            :label="$t('MSG_APPROVE_COLLAGE_ITEM_RETRY')"
+            @click="userReject()"
+          />
 
-        <template #action>
-          <q-btn id="item-approval-button-reject" color="negative" no-caps class="" @click="userReject()">
-            <q-icon left size="xl" name="sym_o_thumb_down" />
-            <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_RETRY') }}</div>
-          </q-btn>
-
-          <q-btn id="item-approval-button-abort" flat color="grey" no-caps class="" @click="userAbort()">
-            <q-icon left size="xl" name="sym_o_cancel" />
-            <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_CANCEL_COLLAGE') }}</div>
-          </q-btn>
-
-          <q-btn id="item-approval-button-approve" color="positive" no-caps @click="userConfirm()">
-            <q-icon left size="xl" name="sym_o_thumb_up" />
-            <div>
-              <div>{{ $t('MSG_APPROVE_COLLAGE_ITEM_APPROVE') }}</div>
-            </div>
-          </q-btn>
-        </template>
-      </q-banner>
+          <q-btn
+            id="item-approval-button-approve"
+            stack
+            rounded
+            class="q-mr-sm action-button col-auto glass-effect"
+            color="positive"
+            no-caps
+            icon="sym_o_thumb_up"
+            :label="$t('MSG_APPROVE_COLLAGE_ITEM_APPROVE')"
+            @click="userConfirm()"
+          />
+        </div>
+      </div>
     </q-page-sticky>
   </q-page>
 </template>

diff --git a/src/pages/SlideshowPage.vue b/src/pages/SlideshowPage.vue
@@ -5,13 +5,20 @@
     </div>
     <div v-else class="full-height"><ItemNotAvailableError /></div>
   </q-page>
+
+  <ReturnButton v-if="!props.standaloneMode" @trigger-return="$router.back()"></ReturnButton>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue'
 import { useMediacollectionStore } from '../stores/mediacollection-store'
 import { default as MediaItemPreviewViewer } from '../components/MediaItemPreviewViewer.vue'
 import ItemNotAvailableError from '../components/ItemNotAvailableError.vue'
+import { default as ReturnButton } from '../components/ReturnButton.vue'
+
+const props = defineProps({
+  standaloneMode: Boolean,
+})
 
 const mediacollectionStore = useMediacollectionStore()
 const nextMediaitemTimeout = 5_000

diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -51,8 +51,8 @@ const routes: RouteRecordRaw[] = [
     path: '/standalone',
     component: () => import('layouts/StandaloneLayout.vue'),
     children: [
-      { path: 'gallery', component: () => import('pages/GalleryPage.vue') },
-      { path: 'slideshow', component: () => import('pages/SlideshowPage.vue') },
+      { path: 'gallery', component: () => import('pages/GalleryPage.vue'), props: { standaloneMode: true } },
+      { path: 'slideshow', component: () => import('pages/SlideshowPage.vue'), props: { standaloneMode: true } },
     ],
   },
   {