@7365admin1/layer-common 3.2.2-staging.111 → 3.2.2-staging.113

package/components/BuildingForm.vue

@@ -1,20 +1,17 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">
+      {{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
+    </v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters class="px-6 pt-4">
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize font-weight-bold" title="Block Name" required />
               <v-col cols="12">
-                <v-text-field v-model="building.name" density="comfortable" :rules="[requiredRule]"></v-text-field>
+                <v-text-field v-model="building.name" class="filter-field" density="comfortable" :rules="[requiredRule]"></v-text-field>
               </v-col>
             </v-row>
           </v-col>
@@ -26,7 +23,7 @@
                   <InputLabel class="text-capitalize font-weight-bold" title="Block No." required />
                   <v-col cols="12">
                     <v-select v-model.number="building.block" :items="blocks" item-title="label" item-value="value"
-                      density="comfortable" :rules="[
+                      class="filter-field" density="comfortable" :rules="[
                         requiredRule,
                         () =>
                           (building.block && building.block > 0) ||
@@ -45,7 +42,7 @@
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize font-weight-bold" title="No. of Levels" required />
                   <v-col cols="12">
-                    <v-text-field v-model.number="buildingLevels" density="comfortable" :rules="[requiredRule]"
+                    <v-text-field v-model.number="buildingLevels" class="filter-field" density="comfortable" :rules="[requiredRule]"
                       type="number" @update:model-value="setBuildingLevels()"></v-text-field>
                   </v-col>
                 </v-row>
@@ -73,7 +70,7 @@
               <v-col cols="12">
                 <v-row no-gutters>
                   <v-col :cols="prop.mode === 'edit' ? 10 : 12">
-                    <v-text-field v-model.trim="building.levels[levelIndex].name" density="comfortable"></v-text-field>
+                    <v-text-field v-model.trim="building.levels[levelIndex].name" class="filter-field" density="comfortable"></v-text-field>
                   </v-col>
                   <v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
                     <v-btn icon variant="text" color="error" :disabled="disable"
@@ -92,7 +89,7 @@
         <v-row no-gutters class="px-6 w-100">
           <v-row no-gutters v-for="(newLevelsItem, index) in newLevelsArray" :key="index" :cols="12" class="w-100">
             <v-col :cols="prop.mode === 'edit' ? 10 : 12">
-              <v-text-field v-model.trim="newLevelsArray[index]" density="comfortable"></v-text-field>
+              <v-text-field v-model.trim="newLevelsArray[index]" class="filter-field" density="comfortable"></v-text-field>
             </v-col>
             <v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
               <v-btn icon variant="text" color="error" @click="newLevelsArray.splice(index, 1)">
@@ -104,7 +101,7 @@
 
         <v-row v-if="prop.mode === 'edit'" no-gutters class="px-6 w-100">
           <v-col cols="10">
-            <v-text-field v-model.trim="activeNewLevelInput" density="comfortable" class="w-100"
+            <v-text-field v-model.trim="activeNewLevelInput" class="filter-field w-100" density="comfortable"
               placeholder="Add new level" @click="addNewLevelErrorMessage = ''"></v-text-field>
           </v-col>
           <v-col cols="2" class="d-flex align-center pb-5 justify-end">
@@ -150,22 +147,22 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel" :disabled="disable">
+        <v-col cols="6" class="pr-2">
+          <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="cancel" :disabled="disable">
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
-          <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || disable"
+        <v-col cols="6" class="pl-2">
+          <v-btn block variant="flat" class="text-none screen-btn-primary" :disabled="!validForm || disable"
             @click="submit" :loading="disable">
             Submit
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
 
     <ConfirmDialog v-model="confirmDeleteLevelDialog" :loading="loading.deletingLevel" width="450" persistent>
       <template #title>
@@ -178,16 +175,24 @@
 
       <template #footer>
         <v-row no-gutters class="w-100">
-          <v-col cols="6">
-            <v-btn tile block size="48" variant="text" class="text-none" :disabled="loading.deletingLevel"
+          <v-col cols="6" class="pr-2">
+            <v-btn block variant="outlined" class="text-none screen-btn-ghost" :disabled="loading.deletingLevel"
               @click="closeDeleteLevelPrompt">
               Cancel
             </v-btn>
           </v-col>
 
-          <v-col cols="6">
-            <v-btn tile block size="48" variant="flat" color="error" class="text-none" :loading="loading.deletingLevel"
-              :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
+          <v-col cols="6" class="pl-2">
+            <!-- Left on Vuetify's own error fill, deliberately. It must NOT
+                 take `.screen-btn-primary` - that class sets `background` and
+                 would repaint a delete button accent blue. And the handoff
+                 draws no modal, so it specifies no destructive button: making
+                 one out of `--err` puts white on a token that LIGHTENS in dark
+                 theme, which measured 2.99:1 - the same fill-used-as-ink trap
+                 as the Upload button. So this keeps today's appearance and only
+                 loses the 40px height. A destructive button needs a spec. -->
+            <v-btn block variant="flat" color="error" class="text-none"
+              :loading="loading.deletingLevel" :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
               Delete
             </v-btn>
           </v-col>

package/components/BulletinBoardForm.vue

@@ -1,18 +1,14 @@
 <template>
   <v-card
+    class="screen-modal"
     width="100%"
     :loading="loading.processing"
     :disabled="loading.processing || getAnnouncementByIdPending"
     :key="`form-key-${formKey}`"
   >
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Announcement
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-6">
+    <v-card-title class="text-capitalize">{{ prop.mode }} Announcement</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-6">
       <v-form
         ref="formRef"
         v-model="validForm"
@@ -61,7 +57,7 @@
                       density="compact"
                       color="transparent"
                       flat
-                      class="ml-3 text-black"
+                      class="ml-3"
                       @mousedown.stop
                       @click.stop="handleRemoveRecipient(item)"
                     />
@@ -112,10 +108,14 @@
               >Attachments</v-col
             >
             <v-col cols="12">
+              <!-- Was `color="primary-button"` on an OUTLINED button, i.e. a
+                   FILL token used as ink - the exact case `utils/theme.ts`
+                   warns about. Measured 3.64:1 on the dark card, under AA. It
+                   is a secondary action, so it takes the design's ghost
+                   button, whose `--text2` ink is readable in both themes. -->
               <v-btn
                 text="Upload"
-                class="text-capitalize"
-                color="primary-button"
+                class="text-capitalize screen-btn-ghost"
                 variant="outlined"
                 min-width="150"
                 @click="handleUpload"
@@ -161,34 +161,29 @@
         {{ errorMessage }}
       </p>
     </v-row>
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="close"
             text="Close"
           />
         </v-col>
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="primary-button"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :text="prop.mode === 'add' ? 'Add Bulletin' : 'Save'"
             :disabled="loading.processing || !validForm"
             @click="onSubmit"
           />
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/CameraForm.vue

@@ -1,20 +1,15 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ title }}
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
+    <v-card-text class="screen-modal__body pa-5">
       <v-form ref="formRef" v-model="validForm" :disabled="disable">
         <v-row no-gutters class="pt-4">
           <v-col v-if="isCCTV" cols="12">
             <InputLabel class="text-capitalize" title="Camera Name" required />
             <v-text-field
               v-model.trim="camera.name"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter CCTV camera name"
@@ -24,6 +19,7 @@
             <InputLabel class="text-capitalize" title="URL" required />
             <v-text-field
               v-model.trim="camera.host"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule, hostRule]"
               placeholder="Enter camera URL"
@@ -35,6 +31,7 @@
             <v-select
               v-model="camera.category"
               :items="anprCategoryOptions"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -45,6 +42,7 @@
             <v-select
               v-model="camera.direction"
               :items="anprDirectionOptions"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -55,6 +53,7 @@
             <v-select
               v-model="camera.guardPost"
               :items="guardPostOptions"
+              class="filter-field"
               density="comfortable"
             />
           </v-col> -->
@@ -63,6 +62,7 @@
             <InputLabel class="text-capitalize" title="User" required />
             <v-text-field
               v-model.trim="camera.username"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter username"
@@ -74,6 +74,7 @@
             <v-text-field
               v-model.trim="camera.password"
               type="password"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               placeholder="Enter password"
@@ -86,6 +87,7 @@
               v-model="camera.status"
               hide-details
               inset
+              class="filter-field"
               density="comfortable"
               true-value="active"
               false-value="inactive"
@@ -97,27 +99,24 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
+         hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="back"
             text="Cancel"
           />
         </v-col>
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm || disable || !hasChanges"
             @click="submit"
             :loading="disable"
@@ -125,7 +124,7 @@
           />
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/ConfirmDialog.vue

@@ -1,36 +1,42 @@
 <template>
-  <v-dialog v-model="dialog" max-width="400" persistent>
-    <v-card class="rounded-xl pa-6" elevation="2">
+  <!-- 520px is the handoff's `--modal-w`; the card was `rounded-xl` (24px) on a
+       Material elevation, where the design draws a 16px corner and its own
+       modal shadow. -->
+  <v-dialog v-model="dialog" max-width="520" persistent>
+    <v-card class="screen-modal pa-6">
       <!-- Close Button -->
       <v-btn
         icon
         variant="text"
         size="small"
-        class="position-absolute"
+        class="screen-modal__close position-absolute"
         style="top: 8px; right: 8px"
         @click="closeDialog"
       >
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-      <v-card-text class="text-center">
+      <v-card-text class="screen-modal__body text-center">
         <v-row v-if="imageSrc" justify="center" class="py-10">
           <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
         </v-row>
 
-        <!-- Title Slot -->
-        <div class="text-h6 font-weight-medium mb-2">
+        <!-- Title Slot. The handoff's 17px/800 modal title belongs to a
+             bordered header row this dialog does not draw - a centred title
+             inside the body is a case it is silent on, so it takes the
+             established `.screen-card-title` primitive. -->
+        <div class="screen-card-title mb-2">
           <slot name="title"></slot>
         </div>
 
         <!-- Description Slot -->
-        <div class="text-body-1 mb-4">
+        <div class="mb-4">
           <slot name="description"></slot>
         </div>
       </v-card-text>
 
       <!-- Footer Slot -->
-      <v-card-actions>
+      <v-card-actions class="screen-modal__footer">
         <slot name="footer"></slot>
       </v-card-actions>
     </v-card>

package/components/Dialog/ReplaceAutofillPrompt.vue

@@ -1,32 +1,25 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="font-weight-bold text-h6">{{ promptTitle }}</v-col>
-                <v-col cols="12" class="mt-5">
-                    <span>
-                        By proceeding, your previous user inputs will be replaced.
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span class="d-block mt-5">
+                By proceeding, your previous user inputs will be replaced.
+            </span>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. Replaces the `v-toolbar` of two square 48px
+             tiles, whose Proceed was a hardcoded `color="black"` fill. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
-                        @click="emit('proceed')">
-                        Proceed
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" @click="emit('proceed')">
+                Proceed
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -46,4 +39,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Dialog/ReusablePrompt.vue

@@ -1,34 +1,35 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="text-h6 font-weight-bold">
-                    <span class=""> {{ promptTitle }}</span>
-                </v-col>
-                <v-col v-if="message" cols="12" class="mt-5">
-                    <span  >
-                        {{ message }}
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span v-if="message" class="d-block mt-5">
+                {{ message }}
+            </span>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
+
+            <!-- The old default was a hardcoded `color="black"` fill, which is
+                 the same black on the dark theme as on the light one. With no
+                 colour asked for, the confirming action now takes the design's
+                 primary shape like every other modal's Submit.
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48"
-                        :color="confirmButtonColor" @click="emit('proceed')">
-                        {{ confirmLabel }}
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+                 A caller that DOES name a colour keeps it: `NumberSettingField`
+                 passes `red` to mark a destructive confirm, and the handoff
+                 draws no destructive button, so overriding it here would be
+                 inventing a control the design never named. Left as it renders
+                 today and raised for a design decision. -->
+            <v-btn :class="confirmButtonColor ? 'text-none' : 'screen-btn-primary'"
+                variant="flat" :color="confirmButtonColor || undefined" @click="emit('proceed')">
+                {{ confirmLabel }}
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -52,7 +53,7 @@ const props = defineProps({
     },
     confirmButtonColor: {
         type: String,
-        default: "black"
+        default: ""
     }
 
 })
@@ -61,4 +62,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>