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

package/components/RolePermissionFormCreate.vue

@@ -1,16 +1,11 @@
 <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">Create Role</span>
-        <v-spacer />
-        <v-btn icon density="comfortable" @click="cancel">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 75vh; overflow-y: auto">
+  <v-card width="100%" class="screen-modal role-create">
+    <div class="role-create__head">
+      <v-card-title>Create Role</v-card-title>
+      <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="cancel" />
+    </div>
+
+    <div class="screen-modal__body role-create__body filter-field">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
@@ -42,31 +37,30 @@
           </v-col>
 
           <v-col cols="12" class="mt-3">
-            <div class="d-flex align-center ga-4 text-caption">
+            <div class="role-create__legend">
               <span class="d-flex align-center ga-2">
-                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-create__dot--both" size="14">mdi-circle</v-icon>
                 Web and Mobile
               </span>
               <span class="d-flex align-center ga-2">
-                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-create__dot--web" size="14">mdi-circle</v-icon>
                 Web only
               </span>
             </div>
           </v-col>
 
           <v-col cols="12" class="mt-2">
-            <v-btn
-              size="small"
-              variant="tonal"
-              class="text-none mb-2"
+            <AppButton
+              variant="ghost"
+              class="mb-2"
               @click="() => toggleSelectAll(!isAllSelected)"
             >
               {{ isAllSelected ? "Unselect All" : "Select All" }}
-            </v-btn>
+            </AppButton>
           </v-col>
 
           <v-col cols="12" class="mt-3">
-            <v-card variant="outlined" border="thin" rounded="lg">
+            <div class="role-create__list">
               <template
                 v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
@@ -76,19 +70,15 @@
                 <!-- Category row -->
                 <v-list-item density="compact" :ripple="false">
                   <template #prepend>
-                    <v-chip
+                    <StatusChip
                       class="mr-3"
-                      size="small"
-                      label
-                      :color="resourceColor(String(resourceKey))"
-                    >
-                      {{ selectedActionCount(String(resourceKey)) }}
-                    </v-chip>
+                      :dot="false"
+                      :tone="isWebOnly(String(resourceKey)) ? 'info' : 'warn'"
+                      :label="String(selectedActionCount(String(resourceKey)))"
+                    />
                   </template>
                   <v-list-item-title>
-                    <span
-                      class="text-capitalize text-subtitle-2 font-weight-medium"
-                    >
+                    <span class="text-capitalize role-create__row-title">
                       {{ formatResourceLabel(String(resourceKey)) }}
                     </span>
                   </v-list-item-title>
@@ -98,7 +88,7 @@
                       @update:model-value="
                         toggleCategory(String(resourceKey), $event)
                       "
-                      color="green"
+                      color="accent"
                       density="compact"
                       hide-details
                       inset
@@ -128,72 +118,41 @@
                               $event
                             )
                           "
-                          color="primary"
+                          color="accent"
                           density="compact"
                           class="mr-2"
                         />
                       </template>
                       <v-list-item-title
-                        class="text-subtitle-2 font-weight-medium text-capitalize"
+                        class="text-capitalize role-create__row-title"
                       >
                         {{ String(actionKey).replace(/-/g, " ") }}
                       </v-list-item-title>
-                      <v-list-item-subtitle class="text-caption">
+                      <v-list-item-subtitle class="role-create__row-sub">
                         {{ action.description }}
                       </v-list-item-subtitle>
                     </v-list-item>
                   </template>
                 </template>
               </template>
-            </v-card>
+            </div>
           </v-col>
 
           <v-col cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-create__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </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"
-            height="48"
-            @click="cancel"
-          >
-            {{ props.cancelText }}
-          </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"
-            :disabled="!validForm"
-            :loading="disable"
-            @click="submit"
-          >
-            Submit
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="role-create__footer">
+      <AppButton variant="ghost" @click="cancel">{{ props.cancelText }}</AppButton>
+      <AppButton :disabled="!validForm || disable" @click="submit">Submit</AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -259,10 +218,8 @@ function formatResourceLabel(key: string): string {
   return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
 }
 
-function resourceColor(resource: string) {
-  return props.webOnlyResources.includes(resource)
-    ? "blue-darken-2"
-    : "amber-darken-2";
+function isWebOnly(resource: string) {
+  return props.webOnlyResources.includes(resource);
 }
 
 function isCategoryEnabled(resource: string) {
@@ -406,3 +363,72 @@ const isAllSelected = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.role-create__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.role-create__body {
+  padding: 0 20px;
+  max-height: calc(100vh - 160px);
+}
+
+.role-create__legend {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* Were `amber-darken-2` / `blue-darken-2` - fixed Vuetify hues that do not
+   follow the theme, and the same two the count chip used. Design tones now,
+   and the dot and the chip read the same `isWebOnly`, so they cannot drift. */
+.role-create__dot--both {
+  color: var(--warn);
+}
+
+.role-create__dot--web {
+  color: var(--info);
+}
+
+/* Was a `variant="outlined"` v-card inside the card - a card on a card. It is
+   the list frame, so it takes the design's border and radius and no second
+   surface. */
+.role-create__list {
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+
+.role-create__row-title {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.role-create__row-sub {
+  font-size: var(--fs-breadcrumb) !important;
+  color: var(--text2);
+}
+
+.role-create__error {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.role-create__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/RolePermissionFormPreviewUpdate.vue

@@ -1,36 +1,31 @@
 <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">
-          {{ props.name }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+  <v-card width="100%" class="screen-modal role-perm">
+    <div class="role-perm__head">
+      <v-card-title>{{ props.name }}</v-card-title>
+    </div>
+    <div class="screen-modal__body role-perm__body">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-4">
-            <div class="d-flex align-center ga-4 text-caption mb-3">
+            <div class="role-perm__legend">
               <span class="d-flex align-center ga-2">
-                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-perm__dot--both" size="14">mdi-circle</v-icon>
                 Web and Mobile
               </span>
               <span class="d-flex align-center ga-2">
-                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-perm__dot--web" size="14">mdi-circle</v-icon>
                 Web only
               </span>
             </div>
-            <v-btn
+            <AppButton
               v-if="edit"
-              size="small"
-              variant="tonal"
-              class="text-none mb-2"
+              variant="ghost"
+              class="mb-2"
               @click="toggleSelectAll(!isAllSelected)"
             >
               {{ isAllSelected ? "Unselect All" : "Select All" }}
-            </v-btn>
-            <v-card variant="outlined" border="thin" rounded="lg">
+            </AppButton>
+            <div class="role-perm__list">
               <template
                 v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
@@ -38,25 +33,21 @@
                 <v-divider v-if="resourceIndex > 0" />
                 <v-list-item density="compact" :ripple="false">
                   <template #prepend>
-                    <v-chip
+                    <StatusChip
                       class="mr-3"
-                      size="small"
-                      label
-                      :color="resourceColor(String(resourceKey))"
-                    >
-                      {{ selectedActionCount(String(resourceKey)) }}
-                    </v-chip>
+                      :dot="false"
+                      :tone="isWebOnly(String(resourceKey)) ? 'info' : 'warn'"
+                      :label="String(selectedActionCount(String(resourceKey)))"
+                    />
                   </template>
-                  <v-list-item-title
-                    class="text-capitalize text-subtitle-2 font-weight-medium"
-                  >
+                  <v-list-item-title class="text-capitalize role-perm__row-title">
                     {{ formatResourceLabel(String(resourceKey)) }}
                   </v-list-item-title>
                   <template #append>
                     <v-switch
                       :model-value="isCategoryEnabled(String(resourceKey))"
                       :disabled="!edit"
-                      color="green"
+                      color="accent"
                       density="compact"
                       hide-details
                       inset
@@ -81,7 +72,7 @@
                             )
                           "
                           :disabled="!edit"
-                          color="primary"
+                          color="accent"
                           density="compact"
                           class="mr-2"
                           @update:model-value="
@@ -93,20 +84,18 @@
                           "
                         />
                       </template>
-                      <v-list-item-title
-                        class="text-subtitle-2 font-weight-medium text-capitalize"
-                      >
+                      <v-list-item-title class="text-capitalize role-perm__row-title">
                         {{ String(actionKey).replace(/-/g, " ") }}
                       </v-list-item-title>
-                      <v-list-item-subtitle class="text-caption">
+                      <v-list-item-subtitle class="role-perm__row-sub">
                         {{ action.description }}
                       </v-list-item-subtitle>
                     </v-list-item>
                   </template>
                 </template>
               </template>
-            </v-card>
-            <div v-if="errorMessages" class="text-caption text-error mt-2">
+            </div>
+            <div v-if="errorMessages" class="role-perm__error mt-2">
               {{ errorMessages }}
             </div>
           </v-col>
@@ -114,11 +103,7 @@
           <v-col v-if="edit" cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-perm__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
@@ -126,74 +111,23 @@
           <v-col cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-perm__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-
-    <v-toolbar>
-      <v-row class="px-6">
-        <v-col v-if="!edit" cols="6">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('cancel')"
-          >
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col v-else cols="6">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="edit = false"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-
-        <v-col v-if="!edit" cols="6">
-          <v-btn
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
-            :disabled="disable"
-            @click="edit = true"
-          >
-            Edit
-          </v-btn>
-        </v-col>
-
-        <v-col v-else cols="6">
-          <v-btn
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
-            :disabled="Boolean(errorMessages) || disable"
-            :loading="disable"
-            @click="submit()"
-          >
-            Submit
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="role-perm__footer">
+      <AppButton v-if="!edit" variant="ghost" @click="emit('cancel')">Close</AppButton>
+      <AppButton v-else variant="ghost" @click="edit = false">Cancel</AppButton>
+
+      <AppButton v-if="!edit" :disabled="disable" @click="edit = true">Edit</AppButton>
+      <AppButton v-else :disabled="Boolean(errorMessages) || disable" @click="submit()">
+        Submit
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -242,10 +176,8 @@ function formatResourceLabel(key: string) {
   return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
 }
 
-function resourceColor(resource: string) {
-  return props.webOnlyResources.includes(resource)
-    ? "blue-darken-2"
-    : "amber-darken-2";
+function isWebOnly(resource: string) {
+  return props.webOnlyResources.includes(resource);
 }
 
 function selectedActionCount(resource: string) {
@@ -357,3 +289,74 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+.role-perm__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.role-perm__body {
+  padding: 0 20px;
+  max-height: calc(100vh - 160px);
+}
+
+.role-perm__legend {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* The two legend dots carried `amber-darken-2` and `blue-darken-2` - fixed
+   Vuetify hues that do not follow the theme, and the same two hues the count
+   chip beside each row used. Both are the design's tones now, and the chip and
+   the dot stay in step because they read the same `isWebOnly`. */
+.role-perm__dot--both {
+  color: var(--warn);
+}
+
+.role-perm__dot--web {
+  color: var(--info);
+}
+
+/* Was a `variant="outlined"` v-card, i.e. a card inside a card. It is the list
+   frame, so it takes the design's card border and radius without laying a
+   second surface over the first. */
+.role-perm__list {
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+
+.role-perm__row-title {
+  font-size: var(--fs-cell) !important;
+  font-weight: var(--fw-cell) !important;
+  color: var(--text);
+}
+
+.role-perm__row-sub {
+  font-size: var(--fs-breadcrumb) !important;
+  color: var(--text2);
+}
+
+.role-perm__error {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.role-perm__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>