@7365admin1/layer-common 3.2.2-staging.97 → 3.2.2-staging.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/screens.css +41 -0
- package/components/AccessCardQrTagging.vue +1 -1
- package/components/DocumentManagement.vue +129 -93
- package/components/OnlineFormsConfiguration.vue +1 -1
- package/components/PageHeader.vue +4 -1
- package/components/TableList.vue +1 -1
- package/components/TableListSecondary.vue +1 -1
- package/components/TableMain.vue +60 -48
- package/components/TableV3.vue +61 -66
- package/package.json +1 -1
package/assets/css/screens.css
CHANGED
|
@@ -175,6 +175,22 @@
|
|
|
175
175
|
color: var(--muted);
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
+
/**
|
|
179
|
+
* `fontgray` is a legacy application-side Vuetify colour - a fixed `#7e7e7e`
|
|
180
|
+
* that is the SAME grey in both themes, so it neither darkens for the light
|
|
181
|
+
* page nor lightens for the dark one. Measured on the glass it reads 4.06:1 on
|
|
182
|
+
* a light card and 4.10:1 on a dark card: below AA on both, on labels that
|
|
183
|
+
* appear on 35 files across the layer and eleven applications.
|
|
184
|
+
*
|
|
185
|
+
* `--muted` is the design's own secondary ink and is a token, so it follows
|
|
186
|
+
* the theme: 4.77:1 light, 4.71:1 dark on the same surfaces. Redirected here,
|
|
187
|
+
* once, rather than renamed at 35 call sites - the layer's stylesheet ships to
|
|
188
|
+
* every application, so the class keeps working and simply reads correctly.
|
|
189
|
+
*/
|
|
190
|
+
.text-fontgray {
|
|
191
|
+
color: var(--muted) !important;
|
|
192
|
+
}
|
|
193
|
+
|
|
178
194
|
/* ------------------------------------------------------------------ */
|
|
179
195
|
/* 4. Dialogs. */
|
|
180
196
|
/* ------------------------------------------------------------------ */
|
|
@@ -343,6 +359,31 @@
|
|
|
343
359
|
/* The card. */
|
|
344
360
|
/* ------------------------------------------------------------------ */
|
|
345
361
|
|
|
362
|
+
/**
|
|
363
|
+
* THE WIDE-TABLE BLOWOUT.
|
|
364
|
+
*
|
|
365
|
+
* The card sits in a `v-col`, i.e. a flex item, and a flex item's automatic
|
|
366
|
+
* minimum size is its content's minimum - so a table with 8 columns set a
|
|
367
|
+
* ~686px floor the column could not shrink below, and the PAGE scrolled
|
|
368
|
+
* sideways at 360 and 768 instead of the table doing it. `min-width: 0` lets
|
|
369
|
+
* it shrink; the table then scrolls INSIDE the card, which is how the design
|
|
370
|
+
* draws it - the row is deliberately not restacked into key/value blocks,
|
|
371
|
+
* because a column carries meaning by its position. Same decision as
|
|
372
|
+
* `.app-table-scroll` in `primitives.css`.
|
|
373
|
+
*
|
|
374
|
+
* It is on BOTH of this component's own flex boxes - its root `v-row` (which
|
|
375
|
+
* is itself an item of the CALLER's row) and the column holding the card -
|
|
376
|
+
* because the content's minimum walks all the way up the chain, and stopping
|
|
377
|
+
* it at the inner column alone left the page still scrolling sideways.
|
|
378
|
+
*/
|
|
379
|
+
.table-card__shrink {
|
|
380
|
+
min-width: 0;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.table-card .v-table__wrapper {
|
|
384
|
+
overflow-x: auto;
|
|
385
|
+
}
|
|
386
|
+
|
|
346
387
|
.table-card {
|
|
347
388
|
font-family: var(--font-sans);
|
|
348
389
|
background: var(--card);
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
rounded="lg"
|
|
58
58
|
:loading="loading"
|
|
59
59
|
>
|
|
60
|
-
<v-toolbar density="compact"
|
|
60
|
+
<v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
|
|
61
61
|
<template #prepend>
|
|
62
62
|
<v-btn fab icon density="comfortable" @click="fetchItems">
|
|
63
63
|
<v-icon>mdi-refresh</v-icon>
|
|
@@ -1,77 +1,60 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters class="pa-0">
|
|
3
3
|
<v-col cols="12" class="mb-2">
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
<PageHeader title="Documents">
|
|
5
|
+
<template #actions>
|
|
6
|
+
<AppButton
|
|
7
|
+
v-if="canCreate && canCreateFolder"
|
|
8
|
+
variant="ghost"
|
|
9
|
+
icon="mdi-folder-plus-outline"
|
|
10
|
+
@click="openCreateFolderDialog()"
|
|
11
|
+
>
|
|
12
|
+
Create Folder
|
|
13
|
+
</AppButton>
|
|
14
|
+
|
|
15
|
+
<AppButton
|
|
12
16
|
v-if="canCreate && canCreateDocument"
|
|
17
|
+
icon="mdi-plus"
|
|
18
|
+
@click="setDocument()"
|
|
13
19
|
>
|
|
14
20
|
Add Document
|
|
15
|
-
</
|
|
21
|
+
</AppButton>
|
|
22
|
+
</template>
|
|
23
|
+
</PageHeader>
|
|
24
|
+
|
|
25
|
+
<div class="doc-filters">
|
|
26
|
+
<AppField
|
|
27
|
+
v-model="search"
|
|
28
|
+
search
|
|
29
|
+
icon="mdi-magnify"
|
|
30
|
+
placeholder="Search"
|
|
31
|
+
klass="doc-filters__search"
|
|
32
|
+
/>
|
|
16
33
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
>
|
|
25
|
-
Create Folder
|
|
26
|
-
</v-btn>
|
|
27
|
-
</v-col>
|
|
28
|
-
|
|
29
|
-
<v-col
|
|
30
|
-
cols="12"
|
|
31
|
-
md="6"
|
|
32
|
-
class="d-flex justify-end align-center mt-4 mt-md-0"
|
|
33
|
-
>
|
|
34
|
-
<v-text-field
|
|
35
|
-
v-model="search"
|
|
36
|
-
placeholder="Search"
|
|
37
|
-
density="comfortable"
|
|
38
|
-
variant="outlined"
|
|
39
|
-
hide-details
|
|
40
|
-
rounded="lg"
|
|
41
|
-
class="me-3"
|
|
42
|
-
style="max-width: 220px"
|
|
43
|
-
/>
|
|
44
|
-
|
|
45
|
-
<v-menu v-model="filterMenu" offset-y>
|
|
46
|
-
<template #activator="{ props }">
|
|
47
|
-
<v-btn
|
|
48
|
-
v-bind="props"
|
|
49
|
-
variant="outlined"
|
|
50
|
-
rounded="lg"
|
|
51
|
-
class="filtertype-btn text-none"
|
|
52
|
-
style="max-width: 220px"
|
|
53
|
-
>
|
|
54
|
-
{{ selectedFileType || "Filter by File Type" }}
|
|
55
|
-
</v-btn>
|
|
56
|
-
</template>
|
|
34
|
+
<v-menu v-model="filterMenu" offset-y>
|
|
35
|
+
<template #activator="{ props }">
|
|
36
|
+
<button v-bind="props" type="button" class="doc-filters__type">
|
|
37
|
+
<span>{{ selectedFileType || "Filter by File Type" }}</span>
|
|
38
|
+
<v-icon size="18">mdi-chevron-down</v-icon>
|
|
39
|
+
</button>
|
|
40
|
+
</template>
|
|
57
41
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
</v-row>
|
|
42
|
+
<v-card class="filtertype-card">
|
|
43
|
+
<v-list class="pa-0">
|
|
44
|
+
<v-list-item
|
|
45
|
+
v-for="(type, idx) in fileTypes"
|
|
46
|
+
:key="idx"
|
|
47
|
+
@click="selectFileType(type)"
|
|
48
|
+
class="filtertype-item"
|
|
49
|
+
>
|
|
50
|
+
<v-list-item-title class="text-subtitle-2">
|
|
51
|
+
{{ type }}
|
|
52
|
+
</v-list-item-title>
|
|
53
|
+
</v-list-item>
|
|
54
|
+
</v-list>
|
|
55
|
+
</v-card>
|
|
56
|
+
</v-menu>
|
|
57
|
+
</div>
|
|
75
58
|
</v-col>
|
|
76
59
|
|
|
77
60
|
<v-col cols="12" class="mb-2" v-if="isInsideFolder">
|
|
@@ -82,7 +65,7 @@
|
|
|
82
65
|
variant="text"
|
|
83
66
|
@click="goBackFolder"
|
|
84
67
|
/>
|
|
85
|
-
<v-icon size="18"
|
|
68
|
+
<v-icon size="18" style="color: var(--muted)">mdi-folder</v-icon>
|
|
86
69
|
<span class="text-body-2 font-weight-medium">{{
|
|
87
70
|
currentFolderPath
|
|
88
71
|
}}</span>
|
|
@@ -114,18 +97,18 @@
|
|
|
114
97
|
/>
|
|
115
98
|
|
|
116
99
|
<span
|
|
117
|
-
class="breadcrumb-segment text-body-2
|
|
100
|
+
class="breadcrumb-segment text-body-2 breadcrumb-segment--link cursor-pointer"
|
|
118
101
|
@click="navigateToRoot"
|
|
119
102
|
>Home</span
|
|
120
103
|
>
|
|
121
104
|
<template v-for="(folder, idx) in folderStack" :key="folder.id">
|
|
122
|
-
<v-icon size="14"
|
|
105
|
+
<v-icon size="14" style="color: var(--muted)">mdi-chevron-right</v-icon>
|
|
123
106
|
<span
|
|
124
107
|
:class="[
|
|
125
108
|
'breadcrumb-segment text-body-2 font-weight-medium',
|
|
126
109
|
idx === folderStack.length - 1
|
|
127
|
-
? '
|
|
128
|
-
: '
|
|
110
|
+
? 'breadcrumb-segment--current'
|
|
111
|
+
: 'breadcrumb-segment--link cursor-pointer',
|
|
129
112
|
]"
|
|
130
113
|
@click="
|
|
131
114
|
idx < folderStack.length - 1 && navigateToStackIndex(idx)
|
|
@@ -1197,36 +1180,87 @@ function selectFileType(type: string) {
|
|
|
1197
1180
|
</script>
|
|
1198
1181
|
|
|
1199
1182
|
<style scoped>
|
|
1183
|
+
/*
|
|
1184
|
+
* EVERY COLOUR IN THIS BLOCK WAS A LITERAL. `#fff` menus, `#fafafa` bars,
|
|
1185
|
+
* `#e0e0e0` rules and `#38475a` ink do not follow the theme, so in dark mode
|
|
1186
|
+
* this screen drew white slabs on the dark page. All of them are tokens now;
|
|
1187
|
+
* nothing about the layout, the flow or the actions changed.
|
|
1188
|
+
*/
|
|
1189
|
+
|
|
1190
|
+
/* The breadcrumb was `text-grey-darken-1` and `text-black` - the same two
|
|
1191
|
+
greys on the dark page, i.e. black lettering on a dark card. */
|
|
1192
|
+
.breadcrumb-segment--link {
|
|
1193
|
+
color: var(--muted);
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
.breadcrumb-segment--current {
|
|
1197
|
+
color: var(--text);
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
1200
|
.table-download-btn {
|
|
1201
1201
|
min-width: 106px;
|
|
1202
1202
|
height: 30px;
|
|
1203
|
-
border-radius:
|
|
1204
|
-
background-color:
|
|
1205
|
-
color:
|
|
1203
|
+
border-radius: var(--r-tag);
|
|
1204
|
+
background-color: var(--hover);
|
|
1205
|
+
color: var(--text2);
|
|
1206
1206
|
font-size: 12px;
|
|
1207
|
-
font-weight:
|
|
1207
|
+
font-weight: 600;
|
|
1208
1208
|
box-shadow: none;
|
|
1209
1209
|
}
|
|
1210
1210
|
|
|
1211
1211
|
.table-download-btn:hover {
|
|
1212
|
-
background-color:
|
|
1212
|
+
background-color: var(--thead);
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
/* The filter row under the title: the design puts search and filters on one
|
|
1216
|
+
line, right-aligned, rather than in a second full-width toolbar. */
|
|
1217
|
+
.doc-filters {
|
|
1218
|
+
display: flex;
|
|
1219
|
+
align-items: center;
|
|
1220
|
+
justify-content: flex-end;
|
|
1221
|
+
flex-wrap: wrap;
|
|
1222
|
+
gap: 8px;
|
|
1223
|
+
margin-top: 12px;
|
|
1213
1224
|
}
|
|
1214
1225
|
|
|
1215
|
-
.
|
|
1216
|
-
|
|
1226
|
+
.doc-filters :deep(.doc-filters__search) {
|
|
1227
|
+
flex: 0 0 auto;
|
|
1217
1228
|
width: 220px;
|
|
1229
|
+
min-width: 0;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
.doc-filters__type {
|
|
1233
|
+
display: flex;
|
|
1234
|
+
align-items: center;
|
|
1235
|
+
justify-content: space-between;
|
|
1236
|
+
gap: 8px;
|
|
1237
|
+
width: 220px;
|
|
1238
|
+
height: 38px;
|
|
1239
|
+
padding: 0 12px;
|
|
1240
|
+
border: 1px solid var(--border);
|
|
1241
|
+
border-radius: var(--r-inner);
|
|
1242
|
+
background: var(--card);
|
|
1243
|
+
color: var(--text);
|
|
1244
|
+
font-size: 13px;
|
|
1245
|
+
font-weight: 600;
|
|
1246
|
+
text-align: left;
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
.doc-filters__type:hover {
|
|
1250
|
+
background: var(--hover);
|
|
1218
1251
|
}
|
|
1219
1252
|
|
|
1220
1253
|
.filtertype-card {
|
|
1221
|
-
background:
|
|
1222
|
-
border
|
|
1254
|
+
background: var(--card);
|
|
1255
|
+
border: 1px solid var(--border);
|
|
1256
|
+
border-radius: var(--r-inner);
|
|
1223
1257
|
min-width: 160px;
|
|
1224
|
-
box-shadow:
|
|
1258
|
+
box-shadow: var(--shadow-menu);
|
|
1225
1259
|
overflow: hidden;
|
|
1226
1260
|
}
|
|
1227
1261
|
|
|
1228
1262
|
.filtertype-item {
|
|
1229
|
-
border-bottom: 1px solid
|
|
1263
|
+
border-bottom: 1px solid var(--border);
|
|
1230
1264
|
padding: 10px 16px;
|
|
1231
1265
|
}
|
|
1232
1266
|
|
|
@@ -1235,27 +1269,29 @@ function selectFileType(type: string) {
|
|
|
1235
1269
|
}
|
|
1236
1270
|
|
|
1237
1271
|
.folder-path-bar {
|
|
1238
|
-
border: 1px solid
|
|
1239
|
-
border-radius:
|
|
1240
|
-
background:
|
|
1272
|
+
border: 1px solid var(--border);
|
|
1273
|
+
border-radius: var(--r-inner);
|
|
1274
|
+
background: var(--thead);
|
|
1275
|
+
color: var(--text);
|
|
1241
1276
|
}
|
|
1242
1277
|
|
|
1243
1278
|
.folder-action-btn {
|
|
1244
|
-
color:
|
|
1279
|
+
color: var(--text2);
|
|
1245
1280
|
}
|
|
1246
1281
|
|
|
1247
1282
|
.folder-action-list {
|
|
1248
1283
|
min-width: 180px;
|
|
1249
|
-
border-radius:
|
|
1250
|
-
background:
|
|
1251
|
-
|
|
1284
|
+
border-radius: var(--r-inner);
|
|
1285
|
+
background: var(--card);
|
|
1286
|
+
border: 1px solid var(--border);
|
|
1287
|
+
box-shadow: var(--shadow-menu);
|
|
1252
1288
|
overflow: hidden;
|
|
1253
1289
|
}
|
|
1254
1290
|
|
|
1255
1291
|
.folder-action-item {
|
|
1256
1292
|
min-height: 40px;
|
|
1257
|
-
border-bottom: 1px solid
|
|
1258
|
-
color:
|
|
1293
|
+
border-bottom: 1px solid var(--border);
|
|
1294
|
+
color: var(--text2);
|
|
1259
1295
|
}
|
|
1260
1296
|
|
|
1261
1297
|
.folder-action-item:last-child {
|
|
@@ -1263,11 +1299,11 @@ function selectFileType(type: string) {
|
|
|
1263
1299
|
}
|
|
1264
1300
|
|
|
1265
1301
|
.folder-dialog-card {
|
|
1266
|
-
border-radius:
|
|
1302
|
+
border-radius: var(--r-inner);
|
|
1267
1303
|
overflow: hidden;
|
|
1268
1304
|
}
|
|
1269
1305
|
|
|
1270
1306
|
.folder-dialog-toolbar {
|
|
1271
|
-
border-bottom: 1px solid
|
|
1307
|
+
border-bottom: 1px solid var(--border);
|
|
1272
1308
|
}
|
|
1273
1309
|
</style>
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
-->
|
|
13
13
|
<template>
|
|
14
14
|
<div class="app-page-head">
|
|
15
|
-
|
|
15
|
+
<!-- A caller with actions but no page name (the shared table card, when the
|
|
16
|
+
screen has not given it a title) gets just the action group, at the
|
|
17
|
+
left, rather than an empty heading holding a line of blank space. -->
|
|
18
|
+
<div v-if="title || $slots.title || subtitle || $slots.subtitle">
|
|
16
19
|
<h1 class="app-page-head__title">
|
|
17
20
|
<slot name="title">{{ title }}</slot>
|
|
18
21
|
</h1>
|
package/components/TableList.vue
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
rounded="lg"
|
|
7
7
|
:loading="loading"
|
|
8
8
|
>
|
|
9
|
-
<v-toolbar density="compact"
|
|
9
|
+
<v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
|
|
10
10
|
<template #prepend>
|
|
11
11
|
<v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
|
|
12
12
|
|
package/components/TableMain.vue
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
passed its own `no-data` slot.
|
|
15
15
|
-->
|
|
16
16
|
<template>
|
|
17
|
-
<v-row no-gutters>
|
|
17
|
+
<v-row no-gutters class="table-card__shrink">
|
|
18
18
|
<!--
|
|
19
19
|
THE DESIGN'S PAGE TITLE (Phase 9).
|
|
20
20
|
|
|
@@ -29,57 +29,69 @@
|
|
|
29
29
|
Placement only. No caller changes, no slot moves, no behaviour: a screen
|
|
30
30
|
that passes no title renders exactly what it rendered before.
|
|
31
31
|
-->
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
<!--
|
|
33
|
+
The actions used to be drawn on a SECOND row underneath that heading,
|
|
34
|
+
which is not where the design puts them - the design's title row is the
|
|
35
|
+
page name on the left and the screen's actions on the right of the SAME
|
|
36
|
+
line, which is why every screen converted so far had to bypass this
|
|
37
|
+
component and draw its own `PageHeader` above it. They are on the title
|
|
38
|
+
row now, in `PageHeader`'s own `actions` slot.
|
|
35
39
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
40
|
+
Same buttons, same slot name, same content, same events - one row instead
|
|
41
|
+
of two. A screen with no title still gets its actions at the left, where
|
|
42
|
+
they have always been, because the title block is not drawn at all.
|
|
43
|
+
-->
|
|
44
|
+
<v-col cols="12" v-if="title || canCreate || $slots.actions">
|
|
45
|
+
<PageHeader :title="title">
|
|
46
|
+
<template v-if="canCreate || $slots.actions" #actions>
|
|
47
|
+
<slot name="actions">
|
|
48
|
+
<!--
|
|
49
|
+
The design's primary button: the accent fill that may carry a
|
|
50
|
+
white label (`--accent-strong`; white on `--accent` is 3.23:1),
|
|
51
|
+
40px, 10px radius, leading icon. Same click, same label.
|
|
52
|
+
-->
|
|
53
|
+
<v-btn
|
|
54
|
+
v-if="canCreate"
|
|
55
|
+
class="text-none table-card__primary"
|
|
56
|
+
variant="flat"
|
|
57
|
+
prepend-icon="mdi-plus"
|
|
58
|
+
@click="emits('create')"
|
|
59
|
+
>
|
|
60
|
+
{{ createLabel }}
|
|
61
|
+
</v-btn>
|
|
62
|
+
<v-text-field
|
|
63
|
+
v-if="canSearch"
|
|
64
|
+
v-model="searchInput"
|
|
65
|
+
density="compact"
|
|
66
|
+
placeholder="Search"
|
|
67
|
+
clearable
|
|
68
|
+
max-width="300"
|
|
69
|
+
append-inner-icon="mdi-magnify"
|
|
70
|
+
hide-details
|
|
71
|
+
class="table-card__search"
|
|
72
|
+
/>
|
|
73
|
+
<!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
|
|
74
|
+
<v-btn
|
|
75
|
+
v-if="canScanVisitorQRCode"
|
|
76
|
+
text="Scan QR Code"
|
|
77
|
+
class="text-none table-card__ghost"
|
|
78
|
+
variant="outlined"
|
|
79
|
+
@click="emits('scan')"
|
|
80
|
+
/>
|
|
81
|
+
</slot>
|
|
82
|
+
</template>
|
|
83
|
+
</PageHeader>
|
|
79
84
|
</v-col>
|
|
80
85
|
|
|
81
86
|
<!-- Table Card -->
|
|
82
|
-
|
|
87
|
+
<!--
|
|
88
|
+
`table-card__shrink` is the fix for the wide-table blowout: this column is a
|
|
89
|
+
flex item, and a flex item's automatic minimum size is its CONTENT's, so
|
|
90
|
+
a table with enough columns set a floor the column would not shrink below
|
|
91
|
+
and the whole page scrolled sideways at 360 and 768. The table scrolls
|
|
92
|
+
inside the card instead - see `.table-card__shrink` in `screens.css`.
|
|
93
|
+
-->
|
|
94
|
+
<v-col cols="12" class="table-card__shrink">
|
|
83
95
|
<!--
|
|
84
96
|
THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
|
|
85
97
|
|
package/components/TableV3.vue
CHANGED
|
@@ -5,43 +5,39 @@
|
|
|
5
5
|
border="thin"
|
|
6
6
|
rounded="lg"
|
|
7
7
|
:loading="loading"
|
|
8
|
-
class="table-v3"
|
|
8
|
+
class="table-v3 table-card"
|
|
9
9
|
>
|
|
10
|
-
<
|
|
11
|
-
<
|
|
10
|
+
<div class="app-toolbar app-toolbar--plain">
|
|
11
|
+
<v-btn
|
|
12
|
+
icon
|
|
13
|
+
variant="text"
|
|
14
|
+
density="comfortable"
|
|
15
|
+
class="table-v3__refresh-btn"
|
|
16
|
+
@click="emit('refresh')"
|
|
17
|
+
>
|
|
18
|
+
<v-icon size="24">mdi-history</v-icon>
|
|
19
|
+
</v-btn>
|
|
20
|
+
|
|
21
|
+
<div class="app-toolbar__spacer" />
|
|
22
|
+
|
|
23
|
+
<div class="app-toolbar__right">
|
|
24
|
+
<span class="table-card__range">{{ pageRange }}</span>
|
|
12
25
|
<v-btn
|
|
13
|
-
icon
|
|
26
|
+
icon="mdi-chevron-left"
|
|
14
27
|
variant="text"
|
|
15
28
|
density="comfortable"
|
|
16
|
-
|
|
17
|
-
@click="
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<v-btn
|
|
29
|
-
icon="mdi-chevron-left"
|
|
30
|
-
variant="text"
|
|
31
|
-
density="comfortable"
|
|
32
|
-
:disabled="!canGoPrev"
|
|
33
|
-
@click="goPrev"
|
|
34
|
-
/>
|
|
35
|
-
<v-btn
|
|
36
|
-
icon="mdi-chevron-right"
|
|
37
|
-
variant="text"
|
|
38
|
-
density="comfortable"
|
|
39
|
-
:disabled="!canGoNext"
|
|
40
|
-
@click="goNext"
|
|
41
|
-
/>
|
|
42
|
-
</v-row>
|
|
43
|
-
</template>
|
|
44
|
-
</v-toolbar>
|
|
29
|
+
:disabled="!canGoPrev"
|
|
30
|
+
@click="goPrev"
|
|
31
|
+
/>
|
|
32
|
+
<v-btn
|
|
33
|
+
icon="mdi-chevron-right"
|
|
34
|
+
variant="text"
|
|
35
|
+
density="comfortable"
|
|
36
|
+
:disabled="!canGoNext"
|
|
37
|
+
@click="goNext"
|
|
38
|
+
/>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
45
41
|
|
|
46
42
|
<div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
|
|
47
43
|
<slot name="breadcrumb" />
|
|
@@ -62,29 +58,27 @@
|
|
|
62
58
|
</template>
|
|
63
59
|
</v-data-table>
|
|
64
60
|
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</template>
|
|
87
|
-
</v-toolbar>
|
|
61
|
+
<div class="app-toolbar app-toolbar--plain table-v3__footer">
|
|
62
|
+
<div class="app-toolbar__spacer" />
|
|
63
|
+
|
|
64
|
+
<div class="app-toolbar__right">
|
|
65
|
+
<span class="table-card__range">{{ pageRange }}</span>
|
|
66
|
+
<v-btn
|
|
67
|
+
icon="mdi-chevron-left"
|
|
68
|
+
variant="text"
|
|
69
|
+
density="comfortable"
|
|
70
|
+
:disabled="!canGoPrev"
|
|
71
|
+
@click="goPrev"
|
|
72
|
+
/>
|
|
73
|
+
<v-btn
|
|
74
|
+
icon="mdi-chevron-right"
|
|
75
|
+
variant="text"
|
|
76
|
+
density="comfortable"
|
|
77
|
+
:disabled="!canGoNext"
|
|
78
|
+
@click="goNext"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
88
82
|
</v-card>
|
|
89
83
|
</template>
|
|
90
84
|
|
|
@@ -161,19 +155,20 @@ watch(
|
|
|
161
155
|
</script>
|
|
162
156
|
|
|
163
157
|
<style scoped>
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
158
|
+
/*
|
|
159
|
+
* The header row is no longer drawn here. It was `#f5f5f5` on `#6b7280`,
|
|
160
|
+
* both literal, so in the dark theme the fixed-header rule won the background
|
|
161
|
+
* and the header read 3.45:1. `.table-card` on the root gives this table the
|
|
162
|
+
* same tokenised header, cell and hover treatment as every other table in the
|
|
163
|
+
* product, which measures 4.77:1 light / 4.71:1 dark.
|
|
164
|
+
*/
|
|
171
165
|
.table-v3 :deep(tbody td) {
|
|
172
166
|
height: 54px;
|
|
173
167
|
}
|
|
174
168
|
|
|
175
169
|
.table-v3__footer {
|
|
176
|
-
border-top: 1px solid
|
|
170
|
+
border-top: 1px solid var(--border);
|
|
171
|
+
border-bottom: 0;
|
|
177
172
|
}
|
|
178
173
|
|
|
179
174
|
.table-v3__refresh-btn {
|
|
@@ -182,8 +177,8 @@ watch(
|
|
|
182
177
|
}
|
|
183
178
|
|
|
184
179
|
.table-v3__breadcrumb {
|
|
185
|
-
border-bottom: 1px solid
|
|
186
|
-
background-color:
|
|
180
|
+
border-bottom: 1px solid var(--border);
|
|
181
|
+
background-color: var(--card);
|
|
187
182
|
padding: 6px 12px;
|
|
188
183
|
}
|
|
189
184
|
</style>
|