@7365admin1/layer-common 3.2.2-staging.127 → 3.2.2-staging.129

package/components/DrawImage.vue

@@ -4,32 +4,25 @@
     transition="dialog-top-transition"
     max-width="1000"
   >
-    <v-card class="pa-1">
-      <v-toolbar>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi-close" @click="emit('onCloseDialog')" />
-      </v-toolbar>
-      <canvas id="imageCanvas" />
-      <v-card-title class="text-end">
+    <v-card class="screen-modal">
+      <div class="draw-image__head">
         <v-btn
-          color="orange-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px; margin-right: 12px"
-          @click="onClearDrawing()"
-        >
+          class="screen-modal__close"
+          variant="text"
+          icon="mdi-close"
+          aria-label="Close"
+          @click="emit('onCloseDialog')"
+        />
+      </div>
+      <canvas id="imageCanvas" />
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="onClearDrawing()">
           Clear Drawing
         </v-btn>
-        <v-btn
-          color="blue-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px"
-          @click="submit"
-        >
+        <v-btn class="screen-btn-primary" variant="flat" @click="submit">
           Submit
         </v-btn>
-      </v-card-title>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -170,3 +163,18 @@ async function onClearDrawing() {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 }
 </script>
+
+<style scoped>
+/* The design's modal has a title row; this dialog has never had a title, only
+   a close - so the row keeps that and just moves the close onto the design's
+   borderless 32px square. No copy invented. */
+.draw-image__head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px 0;
+}
+
+/* The canvas itself is untouched: its width/height are computed in script from
+   its own bounding box, so a layout rule here would quietly move the drawing
+   coordinates - a behaviour change no render can prove. */
+</style>

package/components/Input/Date.vue

@@ -13,6 +13,7 @@
             v-model="month"
             :items="props.months"
             label="Month"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-month'"
             hide-details
@@ -28,6 +29,7 @@
             label="Day"
             hide-details
             placeholder="DD"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-day'"
             :error="!!validationErrMsg"
@@ -42,6 +44,7 @@
             label="Year"
             hide-details
             placeholder="YYYY"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-year'"
             :error="!!validationErrMsg"

package/components/Input/File.vue

@@ -11,7 +11,7 @@
         "
       >
         <div
-          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          class="file-drop d-flex align-center justify-center pa-4"
           @dragover.prevent
           @drop="handleDrop"
           style="position: relative; z-index: 1"
@@ -35,12 +35,10 @@
             class="d-flex align-center"
             style="z-index: 1; pointer-events: none"
           >
-            <v-icon size="28" class="mr-2" color="primary"
+            <v-icon size="28" class="file-drop__icon mr-2"
               >mdi-cloud-upload-outline</v-icon
             >
-            <span class="text-body-1 font-weight-medium"
-              >Drag and drop files here</span
-            >
+            <span class="file-drop__hint">Drag and drop files here</span>
           </div>
         </div>
       </v-col>
@@ -55,11 +53,10 @@
         "
       >
         <v-btn
-          color="primary-button"
-          min-width="55"
-          width="55"
-          height="55"
+          class="screen-btn-primary file-camera"
+          variant="flat"
           elevation="0"
+          aria-label="Take a photo"
           @click="selectAttachment"
         >
           <v-icon size="20">mdi-camera-outline</v-icon>
@@ -73,7 +70,7 @@
           v-for="(file, index) in attachments"
           :key="index"
           cols="12"
-          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+          class="file-row d-flex align-center pa-2 mr-2 mb-2"
         >
           <div class="mr-3">
             <!-- <v-img
@@ -108,6 +105,8 @@
 
           <v-icon
             size="small"
+            class="file-row__remove"
+            aria-label="Remove file"
             @click.stop="$emit('delete', file)"
             v-if="
               props.createdFrom === 'feedback' && props.attachments.length > 0
@@ -234,3 +233,49 @@ defineExpose({
   },
 });
 </script>
+
+<style scoped>
+/* The drop zone was `border-dashed border border-grey` with a `primary` glyph -
+   `primary` being the FOREGROUND token, used here as an icon colour, and the
+   grey a fixed light-theme hairline. */
+.file-drop {
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+  position: relative;
+  z-index: 1;
+}
+
+.file-drop__icon {
+  color: var(--accent-text);
+}
+
+.file-drop__hint {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was a 55px square. The design's button is 40px, which is what
+   .screen-btn-primary carries; this only keeps it square. */
+.file-camera {
+  min-width: var(--btn-h) !important;
+  width: var(--btn-h);
+  padding: 0 !important;
+}
+
+/* Each attachment row was `bg-white border-sm` - a hard white slab drawn on the
+   dark theme as well. */
+.file-row {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.file-row__remove {
+  color: var(--err);
+}
+</style>

package/components/Input/ListGroupSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <v-input v-bind="attrs">
-    <v-card width="100%" v-bind="attrs">
+    <v-card class="perm-list screen-card" elevation="0" width="100%" v-bind="attrs">
       <v-list
         v-model:selected="selected"
         lines="two"
@@ -18,14 +18,14 @@
           <v-list-group :value="permissionKey" fluid>
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" density="compact">
-                <span class="text-capitalize">
+                <span class="perm-list__group text-capitalize">
                   {{ formatResourceLabel(String(permissionKey)) }}
                 </span>
 
                 <template #prepend>
-                  <v-chip class="mr-2" small>
+                  <span class="perm-list__count mr-2">
                     {{ selectedActionCount(String(permissionKey)) }}
-                  </v-chip>
+                  </span>
                 </template>
               </v-list-item>
             </template>
@@ -34,13 +34,13 @@
               <v-divider></v-divider>
               <v-list-item v-if="attrs.readonly" density="compact">
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2">{{ item.description }}</span>
+                  <span class="perm-list__sub">{{ item.description }}</span>
                 </template>
               </v-list-item>
 
@@ -50,13 +50,13 @@
                 density="compact"
               >
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__sub text-capitalize">
                     {{ String(item.description).replace(/-/g, " ") }}
                   </span>
                 </template>
@@ -101,3 +101,51 @@ const selectedActionCount = (resource: string) => {
     .length;
 };
 </script>
+
+<style scoped>
+.perm-list {
+  font-family: var(--font-sans);
+}
+
+.perm-list__group {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/**
+ * The count beside each permission group. The handoff draws no counter here at
+ * all, so this is the neutral chip's own geometry - 999px, 12px/700, the tone
+ * wash - rather than a new shape: a `v-chip small`, which is what it was, is
+ * 24px of Vuetify grey with its own font.
+ */
+.perm-list__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  color: var(--text2);
+  font-size: var(--fs-chip);
+  font-weight: 700;
+}
+
+/* A ticked row was Vuetify's own rgb(224,224,224) slab - a light-theme grey
+   painted on the dark theme too. Same emphasis, on the design's hover wash. */
+.perm-list :deep(.v-list-item--active) {
+  background: var(--hover);
+}
+
+.perm-list__title {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.perm-list__sub {
+  font-size: var(--fs-cell-dense);
+  color: var(--muted);
+}
+</style>