@7365admin1/layer-common 3.2.2-staging.114 → 3.2.2-staging.118

package/components/Nfc/NFCPatrolRouteForm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card width="100%" max-width="800">
-    <v-toolbar color="white" elevation="0">
+    <v-toolbar class="screen-dialog-bar" elevation="0">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5">
           {{ title }}
@@ -15,8 +15,8 @@
         <v-row no-gutters>
           <!-- Route Name -->
           <v-col cols="12" class="mb-4">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Route Name <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Route Name <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.name"
@@ -30,8 +30,8 @@
 
           <!-- Checkpoints, Tolerance, Repeat Every -->
           <v-col cols="12" md="4" class="mb-4 pr-md-2">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Checkpoints <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Checkpoints <span class="text-error">*</span>
             </label>
             <v-select
               v-model="form.checkPointNumber"
@@ -44,8 +44,8 @@
           </v-col>
 
           <v-col cols="12" md="4" class="mb-4 px-md-1">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Tolerance (mins) <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Tolerance (mins) <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.tolerance"
@@ -57,8 +57,8 @@
           </v-col>
 
           <v-col cols="12" md="4" class="mb-4 pl-md-2">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Days <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Days <span class="text-error">*</span>
             </label>
             <v-select
               v-model="form.days"
@@ -76,7 +76,7 @@
             <v-card variant="outlined" class="pa-4" rounded="lg">
               <div class="d-flex align-center justify-space-between mb-3">
                 <span class="text-h6 font-weight-medium">Start Times</span>
-                <span class="text-body-2 text-grey-darken-1">Schedule</span>
+                <span class="text-body-2 screen-hint">Schedule</span>
               </div>
 
               <!-- Start Time Slots -->
@@ -96,7 +96,6 @@
                       prepend-inner-icon="mdi-clock-outline"
                       hide-details
                       type="time"
-                      bg-color="grey-lighten-4"
                       rounded="lg"
                       @update:model-value="syncEndTimeAt(index)"
                     />
@@ -116,7 +115,6 @@
                       prepend-inner-icon="mdi-clock-outline"
                       hide-details
                       type="time"
-                      bg-color="grey-lighten-2"
                       rounded="lg"
                       readonly
                     />
@@ -160,19 +158,19 @@
             <v-row no-gutters class="mb-2">
               <v-col
                 cols="2"
-                class="text-caption text-grey-darken-1 font-weight-medium"
+                class="text-caption screen-hint font-weight-medium"
               >
                 Checkpoints
               </v-col>
               <v-col
                 cols="6"
-                class="text-caption text-grey-darken-1 font-weight-medium pl-4"
+                class="text-caption screen-hint font-weight-medium pl-4"
               >
                 NFC Tag
               </v-col>
               <v-col
                 cols="4"
-                class="text-caption text-grey-darken-1 font-weight-medium text-right"
+                class="text-caption screen-hint font-weight-medium text-right"
               >
                 Travel time
               </v-col>
@@ -218,15 +216,15 @@
           <!-- Summary -->
           <v-col cols="12">
             <v-row no-gutters class="mb-2">
-              <v-col cols="6" class="text-body-2 text-grey-darken-1">
+              <v-col cols="6" class="text-body-2 screen-hint">
                 Tolerance Balance:
-                <span class="font-weight-bold text-grey-darken-3"
+                <span class="font-weight-bold"
                   >{{ toleranceBalance }} min</span
                 >
               </v-col>
-              <v-col cols="6" class="text-body-2 text-grey-darken-1 text-right">
+              <v-col cols="6" class="text-body-2 screen-hint text-right">
                 Total Travel Time:
-                <span class="font-weight-bold text-grey-darken-3"
+                <span class="font-weight-bold"
                   >{{ totalTravelTime }} min</span
                 >
               </v-col>
@@ -238,7 +236,7 @@
 
     <v-divider />
 
-    <v-toolbar class="pa-0" density="compact" color="white" elevation="0">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact" elevation="0">
       <v-row no-gutters>
         <v-col cols="6" class="pa-0">
           <v-btn

package/components/Nfc/NFCPatrolSettings.vue

@@ -1,7 +1,12 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+      <!--
+        `AppCard` for the outlined card. This mounts inside PM `settings.vue`'s
+        "NFC Patrol Settings" expansion panel, which already draws that
+        heading - so NO `PageHeader`, or the panel would name itself twice.
+      -->
+      <AppCard>
         <v-row no-gutters class="pa-6" align="center">
           <v-col cols="12" md="7" class="pr-md-8">
             <div class="text-subtitle-1 font-weight-medium">
@@ -36,10 +41,15 @@
 
         <v-row no-gutters class="pa-6 pt-0">
           <v-col cols="12" class="d-flex justify-end">
+            <!--
+              Stays a `v-btn`: `AppButton` has no `loading`, and dropping the
+              spinner would lose the only signal this save is in flight. The
+              design's fill comes from `.screen-btn-primary` instead of
+              Vuetify's `color="primary"` - same click, same `loading` gate.
+            -->
             <v-btn
               text="Save"
-              color="primary"
-              class="text-none"
+              class="screen-btn-primary"
               size="large"
               variant="flat"
               @click="submit"
@@ -47,7 +57,7 @@
             />
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>

package/components/Nfc/NFCTagForm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card width="100%">
-    <v-toolbar>
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ title }}
@@ -16,7 +16,7 @@
         <v-row no-gutters>
           <v-col cols="12" class="mb-4">
             <label class="text-subtitle-2 font-weight-medium mb-2">
-              Name <span class="text-red">*</span>
+              Name <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.name"
@@ -30,7 +30,7 @@
 
           <v-col cols="12" class="mb-4">
             <label class="text-subtitle-2 font-weight-medium mb-2">
-              Tag ID <span class="text-red">*</span>
+              Tag ID <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.tagID"
@@ -47,7 +47,7 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
       <v-row no-gutters>
         <v-col cols="6" class="pa-0">
           <v-btn

package/components/Nfc/NFCTagMain.vue

@@ -1,53 +1,51 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-          <template #prepend>
+      <!--
+        Two `grey-lighten-4` `v-toolbar`s - one above the table for refresh and
+        Add, one below it for the page range and the pager - become the ONE
+        `CardToolbar` the design draws. The range is the toolbar's own count
+        rather than a `text-font gray` caption; the pager keeps its model and
+        its `@update:value` emit, and Add keeps opening the same dialog.
+
+        This component mounts inside PM `settings.vue`'s "NFC Management"
+        expansion panel, which already draws that heading - so NO `PageHeader`
+        here, or the panel would read its name twice.
+      -->
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" @click="getNFCTagRefresh()">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
 
-          <template #append>
-            <v-btn
-              variant="flat"
-              color="primary"
-              class="text-none"
-              @click="dialogAdd = true"
-            >
-              Add
-            </v-btn>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="$emit('update:value', $event)"
+            />
+            <AppButton @click="dialogAdd = true">Add</AppButton>
           </template>
-        </v-toolbar>
-
-        <v-card-text class="pa-0">
-          <v-data-table
-            :headers="headers"
-            :items="items"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: 300px"
-          >
-          </v-data-table>
-        </v-card-text>
-
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="$emit('update:value', $event)"
-              />
-            </v-row>
+        </CardToolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          fixed-header
+          hide-default-footer
+          @click:row="handleRowClick"
+          style="max-height: 300px"
+        >
+          <!-- The status column printed the raw word as plain text. `StatusChip`
+               prints the SAME word - it is given the item's own value - and
+               only adds the design's tone from the shared map. -->
+          <template #item.status="{ item }">
+            <StatusChip :status="(item as any).status" />
           </template>
-        </v-toolbar>
-      </v-card>
+        </v-data-table>
+      </AppCard>
     </v-col>
 
     <!-- Add Dialog -->
@@ -79,7 +77,7 @@
     <!-- Preview Dialog -->
     <v-dialog v-model="dialogPreview" persistent width="540">
       <v-card width="100%">
-        <v-toolbar>
+        <v-toolbar class="screen-dialog-bar">
           <v-row no-gutters class="fill-height px-6" align="center">
             <span class="font-weight-bold text-h5 text-capitalize">
               NFC Tag Details
@@ -110,7 +108,7 @@
           </v-row>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -171,7 +169,7 @@
           Are you sure you want to delete this NFC Tag?
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -11,7 +11,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('route', $event)"
       />
     </v-col>
@@ -30,7 +29,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('timeRange', $event)"
       />
     </v-col>
@@ -47,7 +45,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('date', $event)"
       />
     </v-col>

package/components/NotificationSettings.vue

@@ -2,9 +2,11 @@
   <v-row no-gutters class="pa-8" justify="center">
     <v-col cols="12" md="10">
       <v-row no-gutters>
-        <v-col cols="12" class="text-h5">Notifications</v-col>
+        <v-col cols="12">
+          <PageHeader title="Notifications" />
+        </v-col>
 
-        <v-col cols="12" md="8" class="mt-4 font-weight-light">
+        <v-col cols="12" md="8" class="screen-hint intro-copy">
           Choose what you want to hear about, and how. These settings are yours
           alone and apply everywhere you use iService — on this site and on your
           phone.
@@ -33,81 +35,69 @@
         <template v-else>
           <!-- everything, at once -->
           <v-col cols="12" class="mt-8">
-            <v-card
-              width="100%"
-              border="grey-darken-3 sm"
-              variant="outlined"
-              rounded="lg"
-            >
+            <AppCard>
               <v-row no-gutters align="center" class="pa-6">
                 <v-col cols="12" sm="8">
-                  <div class="text-h6">Everything</div>
-                  <div class="text-body-2 text-medium-emphasis mt-1">
+                  <div class="screen-card-title">Everything</div>
+                  <div class="screen-hint summary-line mt-1">
                     {{ everythingSummary }}
                   </div>
                 </v-col>
                 <v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
-                  <v-btn
-                    variant="tonal"
-                    rounded="xl"
-                    class="text-none"
+                  <AppButton
+                    variant="ghost"
                     :disabled="saving"
                     @click="setAll(!allOn)"
                   >
                     {{ allOn ? "Turn everything off" : "Turn everything on" }}
-                  </v-btn>
+                  </AppButton>
                 </v-col>
               </v-row>
-            </v-card>
+            </AppCard>
           </v-col>
 
           <!-- one panel per module, collapsed by default so a person with many
                modules gets a short list rather than a wall of switches -->
           <v-col cols="12" class="mt-4">
-            <v-expansion-panels variant="accordion" multiple>
+            <v-expansion-panels variant="accordion" multiple class="screen-accordion">
               <v-expansion-panel
                 v-for="category in categories"
                 :key="category.key"
                 :value="category.key"
                 elevation="0"
-                class="border-sm rounded-lg mb-2"
               >
                 <v-expansion-panel-title>
                   <v-row no-gutters align="center">
                     <v-col cols="12" sm="6">
-                      <span class="text-subtitle-1 font-weight-medium">
-                        {{ category.label }}
-                      </span>
-                      <v-chip
+                      <span>{{ category.label }}</span>
+                      <!-- "Safety" is a TAG, not a status word, so it takes
+                           the handoff's tag chip - "small 7px-radius label" -
+                           which is the dotless shape, on the `info` tone the
+                           handoff assigns to "Role & info tags". A leading dot
+                           here would draw it as a status the screen does not
+                           have. -->
+                      <StatusChip
                         v-if="category.safety"
-                        size="x-small"
+                        tone="info"
+                        label="Safety"
+                        :dot="false"
                         class="ml-2"
-                        variant="tonal"
-                        color="info"
-                      >
-                        Safety
-                      </v-chip>
+                      />
                     </v-col>
-                    <v-col
-                      cols="12"
-                      sm="6"
-                      class="text-body-2 text-medium-emphasis"
-                    >
+                    <v-col cols="12" sm="6" class="screen-hint summary-line">
                       {{ summaryFor(category) }}
                     </v-col>
                   </v-row>
                 </v-expansion-panel-title>
 
                 <v-expansion-panel-text>
-                  <div class="text-body-2 text-medium-emphasis mb-4">
+                  <div class="screen-hint summary-line mb-4">
                     {{ category.description }}
                   </div>
 
-                  <v-btn
-                    size="small"
-                    variant="outlined"
-                    rounded="xl"
-                    class="text-none mb-4"
+                  <AppButton
+                    variant="ghost"
+                    class="mb-4"
                     :disabled="saving || !switchableIn(category).length"
                     @click="setCategory(category, !categoryAllOn(category))"
                   >
@@ -116,7 +106,7 @@
                         ? "Turn all off for " + category.label
                         : "Turn all on for " + category.label
                     }}
-                  </v-btn>
+                  </AppButton>
 
                   <!-- one channel per row: a switch must never sit beside the
                        NEXT channel's label, which is what a three-up grid does -->
@@ -132,8 +122,8 @@
                         :class="{ 'channel-unavailable': !channel.supported }"
                       >
                         <div class="pr-4">
-                          <div class="text-body-1">{{ channel.label }}</div>
-                          <div v-if="!channel.supported" class="text-caption mt-1">
+                          <div class="channel-label">{{ channel.label }}</div>
+                          <div v-if="!channel.supported" class="channel-note mt-1">
                             {{ channel.note }}
                           </div>
                         </div>
@@ -162,21 +152,18 @@
 
     <!-- switching a safety alert off: say plainly what stops arriving -->
     <v-dialog v-model="confirmOpen" max-width="460" persistent>
-      <v-card rounded="lg" class="pa-2">
-        <v-card-title class="text-h6">{{ confirmText.title }}</v-card-title>
-        <v-card-text class="text-body-1">{{ confirmText.body }}</v-card-text>
+      <v-card class="screen-modal pa-2">
+        <v-card-title>{{ confirmText.title }}</v-card-title>
+        <v-card-text class="screen-modal__body">
+          {{ confirmText.body }}
+        </v-card-text>
         <v-card-actions class="justify-end">
-          <v-btn variant="text" class="text-none" @click="cancelConfirm">
+          <AppButton variant="ghost" @click="cancelConfirm">
             {{ confirmText.cancel }}
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="tonal"
-            class="text-none"
-            @click="acceptConfirm"
-          >
+          </AppButton>
+          <AppButton @click="acceptConfirm">
             {{ confirmText.confirm }}
-          </v-btn>
+          </AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -346,6 +333,31 @@ onMounted(load);
 </script>
 
 <style scoped>
+/* The handoff names no type for long-form intro copy or a summary line, so
+   both take the design's own secondary sizes rather than Vuetify's `text-h6`
+   / `text-body-2` scale. */
+.intro-copy {
+  font-size: var(--fs-cell);
+  margin-top: 6px;
+}
+
+.summary-line {
+  font-size: var(--fs-breadcrumb);
+}
+
+.channel-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.channel-note {
+  font-family: var(--font-sans);
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
 /* Unavailable channels are shown and explained, never hidden.
  *
  * They are NOT faded. The disabled switch already says the control cannot be

package/components/OnlineFormsConfiguration.vue

@@ -1,29 +1,27 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters style="gap: 8px">
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setOnlineForm()"
-          v-if="canCreate && canCreateOnlineFormConfiguration"
-        >
-          Add Online Form
-        </v-btn>
-      </v-row>
+    <v-col cols="12">
+      <!--
+        The screen's name and its one primary action on the same line, which is
+        how the design opens every screen. "Configuration" is the app's own nav
+        label (Online Forms > Configuration), not invented copy. The page that
+        mounts this is a bare mount with no heading of its own.
+      -->
+      <PageHeader title="Configuration">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateOnlineFormConfiguration"
+            @click="setOnlineForm()"
+          >
+            Add Online Form
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
-          <template #prepend>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn
               fab
               icon
@@ -42,32 +40,25 @@
             >
               <v-icon>mdi-sort-alphabetical-ascending</v-icon>
             </v-btn>
-            <v-text-field
+            <AppField
               v-model="search"
-              density="compact"
-              variant="outlined"
+              search
+              compact
               placeholder="Search..."
-              prepend-inner-icon="mdi-magnify"
-              clearable
-              hide-details
-              style="width: 220px; margin-left: 12px;"
+              klass="online-forms-config__search"
             />
           </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="getOnlineFormConfigurations"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getOnlineFormConfigurations"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
         <v-data-table
+          :loading="loading"
           :headers="headers"
           :items="sortedItems"
           item-value="_id"
@@ -84,7 +75,7 @@
             {{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
           </template></v-data-table
         >
-      </v-card></v-col
+      </AppCard></v-col
     >
 
     <!-- Create Dialog -->
@@ -435,3 +426,11 @@ function successUpdate() {
 }
 
 </script>
+
+<style scoped>
+/* Same 240px cap the other in-toolbar search fields use, so the field does not
+   eat the toolbar's whole left side. */
+.online-forms-config__search {
+  max-width: 240px;
+}
+</style>