@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/FeedbackMain.vue

@@ -1,7 +1,17 @@
 <template>
-  <v-row no-gutters>
+  <div>
+    <!-- The design's title row: the page's name at 22px and its primary
+         action on the right of that same line. Placement only - the same
+         button opens the same dialog under the same permission. -->
+    <PageHeader title="Feedbacks">
+      <template v-if="canCreateFeedback" #actions>
+        <AppButton @click="showCreateDialog = true">Create Feedback</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
+      <v-row no-gutters align="center" class="filter-bar">
         <v-text-field
           v-model="searchText"
           placeholder="Search feedback..."
@@ -50,51 +60,32 @@
             <v-date-picker v-model="endDate" width="320" :locale="locale" />
           </v-card>
         </v-dialog>
-        <v-btn
-          v-if="canCreateFeedback"
-          text="create feedback"
-          class="text-none text-capitalize ml-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="showCreateDialog = true"
-        />
       </v-row>
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+      <AppCard class="table-card">
+        <!-- One row inside the card - refresh, the range and the pager - in
+             place of a `v-toolbar` that stacked them above the table. Same
+             three controls, same handlers. -->
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="(page = 1), refreshFeedbacks()"
-            >
-              <v-icon icon="mdi-refresh" />
-            </v-btn>
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -104,6 +95,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -139,13 +131,7 @@
           </template>
           <template #item.status="{ value }">
             <span class="d-inline-block text-truncate">
-              <v-chip
-                :color="getStatusColor(value ?? '')"
-                class="pa-5 text-capitalize text-center whitespace-nowrap text-body-1"
-                variant="flat"
-              >
-                {{ value }}
-              </v-chip>
+              <StatusChip class="text-capitalize" :status="value" />
             </span>
           </template>
           <template #item.assigneeInfo="{ item, index }">
@@ -183,9 +169,10 @@
             <span v-else class="mt-1 text-wrap"> Not Assigned </span>
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <!-- <FeedbackForm
     v-model="showCreateDialog"
@@ -660,7 +647,6 @@ const _feedback = ref({
 });
 
 const {
-  getStatusColor,
   debounce,
   standardFormatDateTime,
   standardFormatDate,

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>
 

package/components/FileInputWithList.vue

@@ -13,10 +13,16 @@
       @update:modelValue="handleFileSelect"
       @click:clear="handleClear"
       :hide-input="hasHideInput"
+      class="filter-field"
     >
       <template v-slot:append v-if="hasLabel">
         <slot name="append">
-          <v-btn color="primary" height="50px" @click="openCameraDialog">
+          <v-btn
+            variant="text"
+            class="screen-icon-btn"
+            aria-label="Take a picture"
+            @click="openCameraDialog"
+          >
             <v-icon>mdi-camera</v-icon>
           </v-btn>
         </slot>
@@ -29,7 +35,7 @@
           <template v-for="(file, index) in files" :key="file.name">
             <v-chip
               closable
-              class="text-wrap text-caption custom-chip"
+              class="text-wrap custom-chip file-list__chip"
               @click:close="removeFile(index)"
             >
               <span class="chip-text">{{ file.name }}</span>
@@ -54,16 +60,18 @@
         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-card elevation="0" class="screen-modal d-flex flex-column align-center">
+          <v-card-title class="d-flex align-center">
+            Take a Picture
+            <v-spacer />
             <v-btn
-              color="grey-darken-1"
+              variant="text"
               icon="mdi-close"
+              class="screen-modal__close"
+              aria-label="Close"
               @click="closeCameraDialog"
             ></v-btn>
-          </v-toolbar>
+          </v-card-title>
 
           <div
             id="reader"
@@ -89,15 +97,25 @@
 
           <v-row align="center" justify="center">
             <v-col cols="6">
-              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
+              <v-btn
+                variant="text"
+                class="screen-icon-btn mt-4"
+                aria-label="Switch camera"
+                @click="switchCamera"
+              >
                 <v-icon>mdi-camera-switch</v-icon>
               </v-btn>
             </v-col>
             <v-col cols="6">
+              <!--
+                Was `color="secondary"`, which is NOT one of the four theme
+                names `utils/theme.ts` maps onto the design's palette - it fell
+                through to Vuetify's own secondary and drew an off-palette slab.
+                This is the capture button, so it is the design's PRIMARY.
+              -->
               <v-btn
-                color="secondary"
-                icon
-                class="mt-4"
+                class="screen-btn-primary mt-4"
+                aria-label="Take the picture"
                 @click="captureImageFromCamera"
               >
                 <v-icon large>mdi-camera-outline</v-icon>
@@ -289,6 +307,21 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/**
+ * The attachment tags under the field. They were Vuetify's default chip on
+ * `text-caption` - a grey pill on the Roboto scale - which is the one thing in
+ * the chat composer that did not match the tags the rest of the product draws.
+ * The design's tag radius and chip type, on tokens, so it follows the theme.
+ */
+.file-list__chip {
+  border-radius: var(--r-tag);
+  background: var(--hover);
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip);
+  font-weight: var(--fw-chip);
+}
+
 .custom-chip {
   max-width: 100%;
   height: auto !important;
@@ -301,4 +334,18 @@ onUnmounted(() => {
   white-space: normal;
   line-height: 1.2;
 }
+
+/**
+ * The attach icon (mdi-paperclip) was drawing at Vuetify's default
+ * `.v-input__prepend > .v-icon { opacity: var(--v-medium-emphasis-opacity) }`
+ * (0.64) - the same field-icon dimming ~200 other call sites rely on, so it is
+ * overridden here only, not in the layer's token. Full opacity, `--text2` -
+ * the same colour `.screen-icon-btn` already uses for an icon at rest -
+ * matches a sibling icon drawn outside a field (e.g. a composer's chat icon,
+ * which is never subject to this Vuetify rule in the first place).
+ */
+.filter-field :deep(.v-input__prepend > .v-icon) {
+  opacity: 1;
+  color: var(--text2);
+}
 </style>

package/components/FormDialog.vue

@@ -1,31 +1,35 @@
+<!--
+  PHASE 3 - THE MODAL.
+
+  520px, 16px radius and the design's overlay and shadow, with the BODY as the
+  only thing that scrolls so the footer never leaves the screen. Same dialog,
+  same slots, same close behaviour, same `persistent`.
+
+  The two `theme.name.value === ...` branches are gone, and that is a fix, not
+  a preference: they hard-coded `bg-white` and Vuetify's `grey-darken-4`, so
+  the card was painted by a literal colour instead of by the theme it is in.
+  `--card` is that surface in each theme.
+-->
 <template>
-  <v-dialog v-model="model" max-width="600" persistent>
-    <v-card
-      class="px-3 d-flex flex-column"
-      :class="`${theme.name.value === 'light' ? 'bg-white' : ''} ${
-        mdAndUp ? 'rounded-xl' : ''
-      }`"
-      :style="{ border: 'none', boxShadow: 'none' }"
-    >
+  <v-dialog v-model="model" :max-width="520" persistent class="form-dialog">
+    <v-card class="d-flex flex-column form-dialog__card" :style="{ border: 'none' }">
       <v-toolbar
-        :color="theme.name.value === 'dark' ? 'grey-darken-4' : 'white'"
-        class="flex-shrink-0 mb-3"
+        color="transparent"
+        class="flex-shrink-0 form-dialog__head"
         style="position: sticky; top: 0; z-index: 10"
       >
         <slot name="title">
-          <span class="text-h6 font-weight-medium pt-1 text-capitalize">
-            Dialog
-          </span>
+          <span class="form-dialog__title"> Dialog </span>
         </slot>
         <v-spacer />
-        <v-btn icon="mdi-close" @click="closeDialog" />
+        <v-btn icon="mdi-close" variant="text" @click="closeDialog" />
       </v-toolbar>
 
-      <v-sheet class="flex-grow-1 overflow-y-auto px-3">
+      <v-sheet class="flex-grow-1 overflow-y-auto px-4 form-dialog__body">
         <slot />
       </v-sheet>
 
-      <v-sheet class="flex-shrink-0 px-3 py-2">
+      <v-sheet class="flex-shrink-0 px-4 py-3 form-dialog__footer">
         <slot name="footer" />
       </v-sheet>
     </v-card>
@@ -33,11 +37,6 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme, useDisplay } from "vuetify";
-
-const theme = useTheme().global;
-const { mdAndUp } = useDisplay();
-
 const props = defineProps<{
   modelValue: boolean;
 }>();
@@ -62,4 +61,44 @@ function closeDialog() {
 :deep(.v-dialog .v-overlay__content) {
   margin: auto;
 }
+
+.form-dialog__card {
+  font-family: var(--font-sans);
+  background: var(--card);
+  /* `!important` because Vuetify's own `.v-overlay__content > .v-card` rule is
+     more specific than a class on the card, and it is what keeps the dialog at
+     its factory 4px. */
+  border-radius: var(--r-modal) !important;
+  box-shadow: var(--shadow-modal);
+  /* Never taller than the screen it has to fit inside; the body is what
+     scrolls, so the Cancel/Submit footer cannot be pushed out of view. */
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+}
+
+.form-dialog__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.form-dialog__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  text-transform: capitalize;
+}
+
+.form-dialog__body,
+.form-dialog__footer {
+  background: var(--card);
+}
+
+.form-dialog__footer {
+  border-top: 1px solid var(--border);
+}
+
+@media (max-width: 599.98px) {
+  .form-dialog__card {
+    max-height: calc(100dvh - 32px);
+  }
+}
 </style>