@7365admin1/layer-common 3.2.2-staging.126 → 3.2.2-staging.128

package/components/AreaFormDialog.vue

@@ -1,30 +1,40 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <template v-if="$slots.header">
-          <slot
-            name="header"
-            :title="
-              prop.mode === 'edit'
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            "
-            :close="close"
-          />
-        </template>
-        <template v-else>
-          <v-row no-gutters class="fill-height px-6" align="center">
-            <span class="font-weight-bold text-h6 text-capitalize">{{
-              prop.mode === "edit"
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            }}</span>
-          </v-row>
-        </template>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface` -
+           a grey slab across the top of the card, visibly lighter than the card
+           on the dark theme - carrying a `text-h6` (20px/500 Roboto) heading.
+           The design's modal heading is the `v-card-title` row on the card's own
+           surface, and it carries the design's own title size and weight. The
+           `header` slot keeps its title/close payload unchanged. -->
+      <template v-if="$slots.header">
+        <slot
+          name="header"
+          :title="
+            prop.mode === 'edit'
+              ? `Edit ${prop.entityType}`
+              : `Add New ${prop.entityType}`
+          "
+          :close="close"
+        />
+      </template>
+      <v-card-title v-else class="d-flex align-center text-capitalize">
+        {{
+          prop.mode === "edit"
+            ? `Edit ${prop.entityType}`
+            : `Add New ${prop.entityType}`
+        }}
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="close"
+        />
+      </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col v-if="prop.showType" cols="12" class="pa-0 mb-2">
@@ -35,7 +45,7 @@
                 density="comfortable"
                 variant="outlined"
                 hide-details
-                class="w-100 mb-0"
+                class="filter-field w-100 mb-0"
               />
             </v-col>
 
@@ -49,7 +59,7 @@
               <v-text-field
                 v-model="model"
                 :rules="[requiredRule]"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
@@ -68,18 +78,21 @@
                 chips
                 closable-chips
                 placeholder="Select units"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
             <v-col v-if="prop.showOptional" cols="12" class="mb-4">
               <v-row dense justify="center">
                 <v-col cols="6" class="pa-0">
+                  <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND
+                       token; this is a plain text toggle, so it takes the
+                       accent's INK form, which the theme test already holds at
+                       >= 4.5:1 on the card. -->
                   <v-btn
                     block
-                    color="primary"
                     variant="text"
-                    class="text-none font-weight-bold"
+                    class="text-none font-weight-bold area-form-dialog__optional"
                     text="Optional"
                     @click="show = !show"
                   ></v-btn>
@@ -101,6 +114,7 @@
                         density="comfortable"
                         type="number"
                         min="1"
+                        class="filter-field"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -111,36 +125,24 @@
         </v-form>
       </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"
-              @click="close"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="submitting"
-              @click="submit"
-            >
-              {{ prop.mode === "edit" ? "Save" : "Create" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- Was a second `v-toolbar` holding two square 48px bars - the primary a
+           hardcoded `color="black"`, which is neither theme's accent and reads
+           as a hole in the dark modal - with `rounded-0` forcing 0px corners.
+           This is the design's shared modal footer: a bordered strip with a
+           ghost secondary and the primary beside it, both 40px at 10px. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="outlined" @click="close">
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="submit"
+        >
+          {{ prop.mode === "edit" ? "Save" : "Create" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -268,3 +270,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* The "Optional" reveal is plain text, not a filled button, so it takes the
+   accent's INK form. `--accent-strong` is the FILL that a white label sits on;
+   `--accent-text` is the one `utils/theme.test.ts` holds at >= 4.5:1 against
+   the card in both themes. */
+.area-form-dialog__optional {
+  color: var(--accent-text);
+}
+</style>

package/components/AttachmentsViewer.vue

@@ -6,8 +6,10 @@
 
                 <!-- Loading Skeleton -->
                 <template v-if="loading && files?.length > 0">
-                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black"
-                        class="mb-2">
+                    <!-- `border="sm black"` painted a literal black hairline on
+                         both themes; the design's rule is `--border`. -->
+                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat
+                        class="att-skeleton mb-2">
                         <v-skeleton-loader type="list-item" class="mb-2" />
                     </v-card>
                 </template>
@@ -17,7 +19,7 @@
 
                     <!-- Videos -->
                     <template v-if="videosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1">Videos ({{
+                        <div v-if="showFileTypeTitle" class="att-group mb-1">Videos ({{
                             videosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
                             <template v-for="(item, i) in videosArray" :key="item._id">
@@ -26,11 +28,11 @@
                                     :subtitle="item.mimeType" class="cursor-pointer"
                                     @click="openMediaViewer(item._id, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-play-circle-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -39,7 +41,7 @@
 
                     <!-- Photos -->
                     <template v-if="photosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 }">
                             Photos ({{ photosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -50,16 +52,16 @@
                                         <v-avatar size="36" rounded="sm" class="mr-3">
                                             <v-img :src="imageCover(item._id)" cover>
                                                 <template #error>
-                                                    <v-icon color="green" size="20">mdi-image</v-icon>
+                                                    <v-icon size="20" class="att-icon--ok">mdi-image</v-icon>
                                                 </template>
                                             </v-img>
                                         </v-avatar>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-eye-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -68,7 +70,7 @@
 
                     <!-- Documents & Other Files -->
                     <template v-if="filesArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{
                                 filesArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -77,14 +79,14 @@
                                 <v-list-item class="cursor-pointer"
                                     @click="openDocumentViewer(item._id, item.file.name, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-open-in-new</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -185,13 +187,20 @@ function getFileIcon(mimeType: string): string {
     return 'mdi-file-outline';
 }
 
-function getFileIconColor(mimeType: string): string {
-    if (mimeType === 'application/pdf') return 'red';
-    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue';
-    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green';
-    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange';
-    if (mimeType.startsWith('video/')) return 'purple';
-    return 'grey';
+/**
+ * Was Vuetify's raw palette names - `red`, `blue`, `green`, `orange`, `purple`,
+ * `grey` - which are the same six hexes in both themes and none of them a token.
+ * The handoff draws NO file-type icon palette, so this keeps the distinctions
+ * the screen already made and states each one in the token that already carries
+ * that tone. `purple` has no counterpart at all, so video takes the muted tone
+ * with the rest; that one IS a change of meaning and is recorded as such.
+ */
+function getFileIconClass(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'att-icon--err';
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'att-icon--info';
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'att-icon--ok';
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'att-icon--warn';
+    return 'att-icon--muted';
 }
 
 function getByType(prefix: 'image/' | 'video/' | 'other') {
@@ -311,3 +320,56 @@ function inferMimeType(ext?: string): string {
     return mimeMap[ext] || 'application/octet-stream';
 }
 </script>
+
+<style scoped>
+/* The group heading was `text-caption text-medium-emphasis` - Vuetify's 12px
+   Roboto at 60% alpha. The design's sub-line is `--muted` at the card's own
+   caption size. */
+.att-group {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--muted);
+}
+
+/* Row title and meta were `text-body-2` / `text-caption`, i.e. Roboto again.
+   These take the design's cell type, the same pair every converted table row
+   uses. */
+.att-name {
+    font-family: var(--font-sans);
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.att-meta {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.att-skeleton {
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+}
+
+.att-icon--err {
+    color: var(--err);
+}
+
+.att-icon--info {
+    color: var(--info);
+}
+
+.att-icon--ok {
+    color: var(--ok);
+}
+
+.att-icon--warn {
+    color: var(--warn);
+}
+
+.att-icon--muted {
+    color: var(--muted);
+}
+</style>

package/components/FileInput.vue

@@ -6,6 +6,9 @@
       accept="image/*"
       :prepend-icon="prependIcon"
       :loading="isFileUploading"
+      variant="outlined"
+      density="comfortable"
+      class="filter-field"
       hide-details
       chips
       multiple
@@ -16,7 +19,16 @@
     >
       <template v-slot:append v-if="hasLabel">
         <slot name="append">
-          <v-btn color="primary" height="50px" @click="openCameraDialog">
+          <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token,
+               so this drew accent-on-accent; the fill is `primary-button`, which
+               is what `.screen-btn-primary` states. `height="50px"` was also
+               10px taller than the design's 40px button. -->
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            aria-label="Take a picture"
+            @click="openCameraDialog"
+          >
             <v-icon>mdi-camera</v-icon>
           </v-btn>
         </slot>
@@ -32,64 +44,69 @@
       persistent
       @after-enter="startCamera"
     >
-      <v-container
-        class="d-flex justify-center"
-        max-height="90vh"
-        width="800"
-        max-width="800"
-      >
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2">
-          <v-toolbar>
-            <v-card-title class="text-h5">Take a Picture</v-card-title>
-            <v-spacer></v-spacer>
-            <v-btn
-              color="grey-darken-1"
-              icon="mdi-close"
-              @click="closeCameraDialog"
-            ></v-btn>
-          </v-toolbar>
-
-          <div
-            id="reader"
-            class="d-flex justify-center align-center"
-            style="
-              position: relative;
-              width: 500px;
-              min-width: 400px;
-              height: 400px;
-            "
+      <!-- Was a `v-container` wrapping a factory 4px `v-card` with a bare
+           `v-toolbar` across the top - Vuetify paints that toolbar from its own
+           `surface`, a grey slab visibly lighter than the card on dark. The
+           design's modal is the card itself: 16px radius on `--card`, a
+           `v-card-title` row, and the borderless 32px close. -->
+      <v-card class="screen-modal d-flex flex-column align-center">
+        <v-card-title class="d-flex align-center w-100">
+          Take a Picture
+          <v-spacer />
+          <v-btn
+            variant="text"
+            icon="mdi-close"
+            class="screen-modal__close"
+            aria-label="Close camera"
+            @click="closeCameraDialog"
+          />
+        </v-card-title>
+
+        <div
+          id="reader"
+          class="d-flex justify-center align-center"
+          style="
+            position: relative;
+            width: 500px;
+            min-width: 400px;
+            height: 400px;
+          "
+        >
+          <video
+            ref="video"
+            style="flex: 1; height: 400px; min-width: 300px"
+            class="video-shutter"
+            autoplay
+          ></video>
+          <canvas
+            ref="canvas"
+            style="flex: 1; height: 400px; min-width: 300px; display: none"
+          ></canvas>
+        </div>
+
+        <!-- Was a two-column `v-row` of Vuetify `primary` / `secondary` icon
+             buttons - `secondary` is not a design token at all, and `primary` is
+             the foreground one. The design's icon button is the 36px bordered
+             square, and the capture action is the primary of the pair, so it
+             sits on the shared modal footer in the primary's place. -->
+        <div class="screen-modal__footer w-100">
+          <v-btn
+            class="text-none screen-btn-ghost"
+            variant="outlined"
+            aria-label="Switch camera"
+            @click="switchCamera"
+          >
+            <v-icon>mdi-camera-switch</v-icon>
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            @click="captureImageFromCamera"
           >
-            <video
-              ref="video"
-              style="flex: 1; height: 400px; min-width: 300px"
-              class="video-shutter"
-              autoplay
-            ></video>
-            <canvas
-              ref="canvas"
-              style="flex: 1; height: 400px; min-width: 300px; display: none"
-            ></canvas>
-          </div>
-
-          <v-row align="center" justify="center">
-            <v-col cols="6">
-              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
-                <v-icon>mdi-camera-switch</v-icon>
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                color="secondary"
-                icon
-                class="mt-4"
-                @click="captureImageFromCamera"
-              >
-                <v-icon large>mdi-camera-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-container>
+            <v-icon>mdi-camera-outline</v-icon>
+          </v-btn>
+        </div>
+      </v-card>
     </v-dialog>
   </div>