#31 finalize setup wizard process
parent
56cdeffb81
commit
f08b13851e
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
@ -1,18 +1,24 @@
|
|||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" _width="561px" _height="527px" viewBox="0 0 5610 5270" preserveAspectRatio="xMidYMid meet">
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" _width="561px" _height="527px" viewBox="0 0 5610 5270" preserveAspectRatio="xMidYMid meet">
|
||||||
|
|
||||||
<defs>
|
<defs>
|
||||||
<pattern id="pattern_b" width="100%" height="100%">
|
<pattern id="pattern_b_weather" width="100%" height="100%">
|
||||||
<image x="0" y="0" height="84%" href="/face-weather-b.png"/>
|
<image x="0" y="0" height="84%" href="/face-weather-b.png"/>
|
||||||
</pattern>
|
</pattern>
|
||||||
<pattern id="pattern_w" width="100%" height="100%">
|
<pattern id="pattern_w_weather" width="100%" height="100%">
|
||||||
<image x="0" y="0" height="84%" href="/face-weather-w.png"/>
|
<image x="0" y="0" height="84%" href="/face-weather-w.png"/>
|
||||||
</pattern>
|
</pattern>
|
||||||
|
<pattern id="pattern_b_calendar" width="100%" height="100%">
|
||||||
|
<image x="0" y="0" height="84%" href="/face-calendar-b.png"/>
|
||||||
|
</pattern>
|
||||||
|
<pattern id="pattern_w_calendar" width="100%" height="100%">
|
||||||
|
<image x="0" y="0" height="84%" href="/face-calendar-w.png"/>
|
||||||
|
</pattern>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<g id="border" fill="#262626" stroke="none">
|
<g id="border" fill="#262626" stroke="none">
|
||||||
<path d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"/>
|
<path d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"/>
|
||||||
</g>
|
</g>
|
||||||
<g fill="#f3f3f3" stroke="none">
|
<g id="draft" fill="#f3f3f3" stroke="none">
|
||||||
<path id="front" d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"/>
|
<path id="front" d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"/>
|
||||||
<path id="image" d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"/>
|
<path id="image" d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"/>
|
||||||
<path id="case" d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"/>
|
<path id="case" d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"/>
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<svg-case
|
||||||
|
id="device"
|
||||||
|
:class="cssClass"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const SvgCase = () => import('@/assets/case_editor.svg?inline')
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DeviceSimulator',
|
||||||
|
components: { SvgCase },
|
||||||
|
props: {
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: 'black',
|
||||||
|
validator (value) {
|
||||||
|
return ['black', 'white'].includes(value)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
face: {
|
||||||
|
type: String,
|
||||||
|
default: 'calendar',
|
||||||
|
validator (value) {
|
||||||
|
return ['weather', 'calendar'].includes(value)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
front: {
|
||||||
|
type: String,
|
||||||
|
default: 'black',
|
||||||
|
validator (value) {
|
||||||
|
return ['black', 'white', 'orange'].includes(value)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
frame: {
|
||||||
|
type: String,
|
||||||
|
default: 'black',
|
||||||
|
validator (value) {
|
||||||
|
return ['black', 'white', 'orange'].includes(value)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// data: () => ({}),
|
||||||
|
computed: {
|
||||||
|
cssClass () {
|
||||||
|
return [
|
||||||
|
'theme_' + this.theme,
|
||||||
|
'face_' + this.face,
|
||||||
|
'front_' + this.front,
|
||||||
|
'frame_' + this.frame,
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#device * {
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
#device #border {
|
||||||
|
fill: #343434;
|
||||||
|
}
|
||||||
|
|
||||||
|
#device.theme_white.face_weather #image {
|
||||||
|
fill: url(#pattern_w_weather);
|
||||||
|
}
|
||||||
|
#device.theme_black.face_weather #image {
|
||||||
|
fill: url(#pattern_b_weather);
|
||||||
|
}
|
||||||
|
#device.theme_white.face_calendar #image {
|
||||||
|
fill: url(#pattern_w_calendar);
|
||||||
|
}
|
||||||
|
#device.theme_black.face_calendar #image {
|
||||||
|
fill: url(#pattern_b_calendar);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* front color */
|
||||||
|
#device.front_black #front {
|
||||||
|
fill: #000;
|
||||||
|
}
|
||||||
|
#device.front_white #front {
|
||||||
|
fill: #f3f3f3;
|
||||||
|
}
|
||||||
|
#device.front_orange #front {
|
||||||
|
fill: #ee8816;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* case color */
|
||||||
|
#device.frame_black #case {
|
||||||
|
fill: #000;
|
||||||
|
}
|
||||||
|
#device.frame_white #case {
|
||||||
|
fill: #f3f3f3;
|
||||||
|
}
|
||||||
|
#device.frame_orange #case {
|
||||||
|
fill: #ee8816;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue