@7365admin1/layer-common 3.2.2-staging.149 → 3.2.2-staging.151
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.
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-dialog v-model="showDialog" max-width="450" persistent>
|
|
3
|
-
<v-card>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
</v-
|
|
11
|
-
|
|
12
|
-
<v-card-text class="
|
|
3
|
+
<v-card class="screen-modal">
|
|
4
|
+
<!-- Was a bare `v-toolbar` at each end of the card, which Vuetify paints
|
|
5
|
+
from its own `surface` - two grey slabs visibly lighter than the card
|
|
6
|
+
on the dark theme - carrying a `text-h6` (20px/500) heading. The
|
|
7
|
+
design's modal heading is the card's own `v-card-title` row. -->
|
|
8
|
+
<v-card-title>
|
|
9
|
+
{{ action === "checkIn" ? "Check In" : "Check Out" }}
|
|
10
|
+
</v-card-title>
|
|
11
|
+
|
|
12
|
+
<v-card-text class="screen-modal__body">
|
|
13
13
|
<v-form ref="formRef" v-model="valid">
|
|
14
14
|
<v-row no-gutters class="pa-0">
|
|
15
15
|
<v-col cols="12" class="pa-0">
|
|
16
|
-
<v-card
|
|
17
|
-
variant="outlined"
|
|
18
|
-
class="mb-2"
|
|
19
|
-
style="height: 400px; position: relative; overflow: hidden"
|
|
20
|
-
>
|
|
16
|
+
<v-card variant="outlined" class="mb-2 attendance-capture__stage">
|
|
21
17
|
<div
|
|
22
18
|
v-if="loadingCamera"
|
|
23
19
|
class="d-flex align-center justify-center"
|
|
@@ -56,17 +52,15 @@
|
|
|
56
52
|
"
|
|
57
53
|
/>
|
|
58
54
|
|
|
55
|
+
<!-- `background: #f5f5f5` was a literal light grey, so on the
|
|
56
|
+
dark theme this placeholder was a white slab inside a dark
|
|
57
|
+
card. It follows the theme now. -->
|
|
59
58
|
<div
|
|
60
59
|
v-else-if="!loadingCamera"
|
|
61
|
-
class="d-flex align-center justify-center flex-column"
|
|
62
|
-
style="height: 100%; background: #f5f5f5"
|
|
60
|
+
class="d-flex align-center justify-center flex-column attendance-capture__placeholder"
|
|
63
61
|
>
|
|
64
|
-
<v-icon size="64"
|
|
65
|
-
|
|
66
|
-
>
|
|
67
|
-
<span class="text-caption text-grey"
|
|
68
|
-
>Initializing camera...</span
|
|
69
|
-
>
|
|
62
|
+
<v-icon size="64" class="mb-2">mdi-camera-off</v-icon>
|
|
63
|
+
<span>Initializing camera...</span>
|
|
70
64
|
</div>
|
|
71
65
|
</v-card>
|
|
72
66
|
</v-col>
|
|
@@ -86,71 +80,47 @@
|
|
|
86
80
|
</v-form>
|
|
87
81
|
</v-card-text>
|
|
88
82
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
</v-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
>
|
|
131
|
-
<v-icon class="mr-2">mdi-camera-retake</v-icon>
|
|
132
|
-
Retake
|
|
133
|
-
</v-btn>
|
|
134
|
-
</v-col>
|
|
135
|
-
|
|
136
|
-
<v-col cols="6" class="pa-0">
|
|
137
|
-
<v-btn
|
|
138
|
-
block
|
|
139
|
-
variant="flat"
|
|
140
|
-
color="black"
|
|
141
|
-
class="text-none font-weight-bold rounded-0"
|
|
142
|
-
height="56"
|
|
143
|
-
size="large"
|
|
144
|
-
:loading="submitting"
|
|
145
|
-
@click="submit"
|
|
146
|
-
>
|
|
147
|
-
<v-icon class="mr-2">mdi-check</v-icon>
|
|
148
|
-
Submit
|
|
149
|
-
</v-btn>
|
|
150
|
-
</v-col>
|
|
151
|
-
</template>
|
|
152
|
-
</v-row>
|
|
153
|
-
</v-toolbar>
|
|
83
|
+
<!-- `color="black"` was a literal, not a token: a pure-black 56px slab
|
|
84
|
+
with `rounded-0`, on both themes. `.screen-btn-primary` is the fill
|
|
85
|
+
the design draws, and the footer gives the pair the design's 40px
|
|
86
|
+
height and 10px radius. -->
|
|
87
|
+
<div class="screen-modal__footer">
|
|
88
|
+
<template v-if="!capturedImage">
|
|
89
|
+
<v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
|
|
90
|
+
Cancel
|
|
91
|
+
</v-btn>
|
|
92
|
+
<v-btn
|
|
93
|
+
class="text-none screen-btn-primary"
|
|
94
|
+
variant="flat"
|
|
95
|
+
prepend-icon="mdi-camera"
|
|
96
|
+
:disabled="!showCamera"
|
|
97
|
+
@click="capturePhoto"
|
|
98
|
+
>
|
|
99
|
+
Capture Photo
|
|
100
|
+
</v-btn>
|
|
101
|
+
</template>
|
|
102
|
+
|
|
103
|
+
<template v-else>
|
|
104
|
+
<v-btn
|
|
105
|
+
class="text-none screen-btn-ghost"
|
|
106
|
+
variant="flat"
|
|
107
|
+
prepend-icon="mdi-camera-retake"
|
|
108
|
+
:disabled="submitting"
|
|
109
|
+
@click="retakePhoto"
|
|
110
|
+
>
|
|
111
|
+
Retake
|
|
112
|
+
</v-btn>
|
|
113
|
+
<v-btn
|
|
114
|
+
class="text-none screen-btn-primary"
|
|
115
|
+
variant="flat"
|
|
116
|
+
prepend-icon="mdi-check"
|
|
117
|
+
:loading="submitting"
|
|
118
|
+
@click="submit"
|
|
119
|
+
>
|
|
120
|
+
Submit
|
|
121
|
+
</v-btn>
|
|
122
|
+
</template>
|
|
123
|
+
</div>
|
|
154
124
|
</v-card>
|
|
155
125
|
</v-dialog>
|
|
156
126
|
</template>
|
|
@@ -418,3 +388,30 @@ watch(showDialog, async (newVal) => {
|
|
|
418
388
|
}
|
|
419
389
|
});
|
|
420
390
|
</script>
|
|
391
|
+
|
|
392
|
+
<style scoped>
|
|
393
|
+
/* The camera stage. `height: 400px` and the rest were inline styles; the box is
|
|
394
|
+
the design's inner radius on the card's own border. */
|
|
395
|
+
.attendance-capture__stage {
|
|
396
|
+
position: relative;
|
|
397
|
+
height: 400px;
|
|
398
|
+
overflow: hidden;
|
|
399
|
+
border-radius: var(--r-inner);
|
|
400
|
+
border-color: var(--border);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* Was `background: #f5f5f5` with `text-grey` / `text-caption` on it - a literal
|
|
404
|
+
light slab that stayed light on the dark theme. Both ends follow the theme. */
|
|
405
|
+
.attendance-capture__placeholder {
|
|
406
|
+
height: 100%;
|
|
407
|
+
background: var(--thead);
|
|
408
|
+
font-family: var(--font-sans);
|
|
409
|
+
font-size: var(--fs-cell);
|
|
410
|
+
font-weight: 500;
|
|
411
|
+
color: var(--muted);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.attendance-capture__placeholder .v-icon {
|
|
415
|
+
color: var(--muted);
|
|
416
|
+
}
|
|
417
|
+
</style>
|
|
@@ -5,21 +5,23 @@
|
|
|
5
5
|
persistent
|
|
6
6
|
@update:model-value="emit('update:modelValue', $event)"
|
|
7
7
|
>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
<!-- `rounded="lg"` is dropped, not replaced. Measured on the glass, the card
|
|
9
|
+
read 16px BEFORE and after: the `.rounded-lg` utility it compiled to was
|
|
10
|
+
already being overridden, so the prop stated a radius the card never
|
|
11
|
+
had. `.screen-modal` states the same 16px as `--r-modal`, on purpose. -->
|
|
12
|
+
<v-card class="camera-dialog screen-modal">
|
|
13
|
+
<v-card-title class="d-flex align-center justify-space-between">
|
|
14
|
+
<span>Take Facial Photo</span>
|
|
11
15
|
<v-btn
|
|
12
16
|
icon="mdi-close"
|
|
13
17
|
variant="text"
|
|
14
|
-
|
|
18
|
+
class="screen-modal__close"
|
|
15
19
|
aria-label="Close camera"
|
|
16
20
|
@click="close"
|
|
17
21
|
/>
|
|
18
22
|
</v-card-title>
|
|
19
23
|
|
|
20
|
-
<v-
|
|
21
|
-
|
|
22
|
-
<v-card-text class="pa-4">
|
|
24
|
+
<v-card-text class="screen-modal__body">
|
|
23
25
|
<div class="camera-viewport">
|
|
24
26
|
<video
|
|
25
27
|
ref="videoElement"
|
|
@@ -42,18 +44,20 @@
|
|
|
42
44
|
|
|
43
45
|
<canvas ref="canvasElement" class="d-none" />
|
|
44
46
|
|
|
45
|
-
<div class="
|
|
47
|
+
<div class="camera-dialog__hint text-center">
|
|
46
48
|
Keep your face centered and make sure the area is well lit.
|
|
47
49
|
</div>
|
|
48
50
|
</v-card-text>
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<v-
|
|
52
|
+
<!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token - the
|
|
53
|
+
link ink - not a fill, so the capture button was accent-on-accent.
|
|
54
|
+
`.screen-btn-primary` states the fill the design does draw. -->
|
|
55
|
+
<div class="screen-modal__footer">
|
|
56
|
+
<v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
|
|
57
|
+
Cancel
|
|
58
|
+
</v-btn>
|
|
55
59
|
<v-btn
|
|
56
|
-
|
|
60
|
+
class="text-none screen-btn-primary"
|
|
57
61
|
variant="flat"
|
|
58
62
|
prepend-icon="mdi-camera"
|
|
59
63
|
:disabled="starting || !!cameraError || !stream"
|
|
@@ -61,7 +65,7 @@
|
|
|
61
65
|
>
|
|
62
66
|
Take Photo
|
|
63
67
|
</v-btn>
|
|
64
|
-
</
|
|
68
|
+
</div>
|
|
65
69
|
</v-card>
|
|
66
70
|
</v-dialog>
|
|
67
71
|
</template>
|
|
@@ -175,10 +179,23 @@ onBeforeUnmount(stopCamera);
|
|
|
175
179
|
width: 100%;
|
|
176
180
|
overflow: hidden;
|
|
177
181
|
aspect-ratio: 3 / 4;
|
|
178
|
-
border-radius:
|
|
182
|
+
border-radius: var(--r-inner);
|
|
183
|
+
/* Deliberately NOT a theme surface: this is the stage a video sits on, and it
|
|
184
|
+
stays dark in both themes so the preview does not flash white on light.
|
|
185
|
+
Its own `#ffffff` text below is paired with it, not with the theme. */
|
|
179
186
|
background: #111722;
|
|
180
187
|
}
|
|
181
188
|
|
|
189
|
+
/* The design's small helper line, not Vuetify's `text-caption` /
|
|
190
|
+
`text-medium-emphasis` pair. */
|
|
191
|
+
.camera-dialog__hint {
|
|
192
|
+
margin-top: 12px;
|
|
193
|
+
font-family: var(--font-sans);
|
|
194
|
+
font-size: var(--fs-cell);
|
|
195
|
+
font-weight: 500;
|
|
196
|
+
color: var(--muted);
|
|
197
|
+
}
|
|
198
|
+
|
|
182
199
|
.camera-preview {
|
|
183
200
|
width: 100%;
|
|
184
201
|
height: 100%;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@7365admin1/layer-common",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"version": "3.2.2-staging.
|
|
5
|
+
"version": "3.2.2-staging.151",
|
|
6
6
|
"author": "7365admin1",
|
|
7
7
|
"main": "./nuxt.config.ts",
|
|
8
8
|
"//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",
|