improve look of dialog, add confirmation dialog to reset config.

photobooth-app · May 21, 2024 · c6d0fbe · c6d0fbe
1 parent c1b0487
commit c6d0fbe
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/src/components/ConnectionOverlay.vue b/src/components/ConnectionOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card class="q-pa-sm">
-    <q-card-section class="row items-center">
+    <q-card-section class="row items-center" style="flex-wrap: nowrap">
       <q-spinner color="negative" size="2em" />
       <span class="q-ml-sm">{{ $t('MSG_CONNECTING_TO_BACKEND') }}</span>
     </q-card-section>

diff --git a/src/components/GalleryImageDetail.vue b/src/components/GalleryImageDetail.vue
@@ -17,7 +17,7 @@
 
         <q-dialog v-model="confirmDeleteFile">
           <q-card id="gallery-confirm-delete-dialog" class="q-pa-sm" style="min-width: 350px">
-            <q-card-section class="row items-center">
+            <q-card-section class="row items-center" style="flex-wrap: nowrap">
               <q-avatar icon="delete" color="primary" text-color="white" />
               <span class="q-ml-sm">{{ $t('MSG_CONFIRM_DELETE_IMAGE') }}</span>
             </q-card-section>

diff --git a/src/pages/AdminConfigPage.vue b/src/pages/AdminConfigPage.vue
@@ -19,11 +19,25 @@
     <q-page-sticky position="bottom-right" :offset="[18, 18]">
       <div class="q-gutter-sm">
         <!-- linter error, see open issue: https://github.com/intlify/vue-i18n-next/issues/1403-->
-        <q-btn :label="$t('BTN_LABEL_RESET_CONFIG')" @click="remoteProcedureCall('/api/admin/config/reset')" />
+        <q-btn :label="$t('BTN_LABEL_RESET_CONFIG')" @click="confirm_reset_config = true" />
         <q-btn :label="$t('BTN_LABEL_RESTORE_CONFIG')" @click="configurationStore.getConfig('current')" />
         <q-btn color="primary" :label="$t('BTN_LABEL_PERSIST_CONFIG')" @click="configurationStore.saveConfig()" />
       </div>
     </q-page-sticky>
+
+    <q-dialog v-model="confirm_reset_config">
+      <q-card class="q-pa-sm" style="min-width: 350px">
+        <q-card-section class="row items-center" style="flex-wrap: nowrap">
+          <q-avatar icon="delete" color="negative" text-color="white" />
+          <span class="q-ml-sm">{{ $t('Are you sure you want to reset the configuration and delete config.json?') }}</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn v-close-popup flat :label="$t('BTN_LABEL_CANCEL')" color="primary" />
+          <q-btn v-close-popup :label="$t('yes, delete')" color="negative" @click="remoteProcedureCall('/api/admin/config/reset')" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </q-page>
 </template>
 <script lang="ts">
@@ -41,6 +55,7 @@ const myStyles = mergeStyles(defaultStyles, { control: { label: 'q-label' } });
 const renderers = [...quasarRenderers];
 const isLoadingState = ref(true);
 const schema = ref({});
+const confirm_reset_config = ref(false);
 
 const getSchema = async () => {
   try {
@@ -106,6 +121,7 @@ export default {
       cuischema,
       isLoadingState,
       configurationStore,
+      confirm_reset_config,
     };
   },
   // name: 'PageName',

diff --git a/src/pages/AdminFilesPage.vue b/src/pages/AdminFilesPage.vue
@@ -94,7 +94,7 @@
         <template #top-left>
           <q-dialog v-model="confirm_delete">
             <q-card class="q-pa-sm" style="min-width: 350px">
-              <q-card-section class="row items-center">
+              <q-card-section class="row items-center" style="flex-wrap: nowrap">
                 <q-avatar icon="delete" color="negative" text-color="white" />
                 <span class="q-ml-sm">{{ $t('Are you sure you want to delete the selected files and subfolders?') }}</span>
               </q-card-section>

diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
@@ -7,7 +7,7 @@
           <div class="text-no-wrap">
             <q-dialog v-model="confirm_reboot">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="restart_alt" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_REBOOT') }}</span>
                 </q-card-section>
@@ -21,7 +21,7 @@
 
             <q-dialog v-model="confirm_shutdown">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="power_settings_new" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_SHUTDOWN') }}</span>
                 </q-card-section>
@@ -40,7 +40,7 @@
 
             <q-dialog v-model="confirm_restart_service">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="restart_alt" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_RESTART_SERVICE') }}</span>
                 </q-card-section>
@@ -59,7 +59,7 @@
 
             <q-dialog v-model="confirm_reload_service">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="restart_alt" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_RELOAD_SERVICE') }}</span>
                 </q-card-section>
@@ -78,7 +78,7 @@
 
             <q-dialog v-model="confirm_install_service">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="add_circle" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_INSTALL_SERVICE') }}</span>
                 </q-card-section>
@@ -97,7 +97,7 @@
 
             <q-dialog v-model="confirm_uninstall_service">
               <q-card class="q-pa-sm" style="min-width: 350px">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="cancel" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_UNINSTALL_SERVICE') }}</span>
                 </q-card-section>
@@ -129,7 +129,7 @@
           <div class="text-no-wrap">
             <q-dialog v-model="confirm_delete_all">
               <q-card class="q-pa-sm">
-                <q-card-section class="row items-center">
+                <q-card-section class="row items-center" style="flex-wrap: nowrap">
                   <q-avatar icon="delete" color="primary" text-color="white" />
                   <span class="q-ml-sm">{{ $t('MSG_CONFIRM_DELETE_ALL_MEDIA_FILES') }}</span>
                 </q-card-section>