1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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
79
80
81
82
83
84
85
86
87
88
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
119
120
121
122
123
124
|
<template>
<div class="theming__preview">
<div class="theming__preview-image" :style="{ backgroundImage: 'url(' + img + ')' }" />
<div class="theming__preview-description">
<h3>{{ theme.title }}</h3>
<p>{{ theme.description }}</p>
<CheckboxRadioSwitch class="theming__preview-toggle"
:checked.sync="checked"
:name="name"
:type="switchType">
{{ theme.enableLabel }}
</CheckboxRadioSwitch>
</div>
</div>
</template>
<script>
import { generateFilePath} from '@nextcloud/router'
import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
export default {
name: 'ItemPreview',
components: {
CheckboxRadioSwitch,
},
props: {
theme: {
type: Object,
required: true,
},
selected: {
type: Boolean,
default: false,
},
type: {
type: String,
default: '',
},
themes: {
type: Array,
default: () => [],
},
},
computed: {
switchType() {
return this.themes.length === 1 ? 'switch' : 'radio'
},
name() {
return this.switchType === 'radio' ? this.type : null
},
img() {
return generateFilePath('theming', 'img', this.theme.id + '.jpg')
},
checked: {
get() {
return this.selected
},
set(checked) {
console.debug('Selecting theme', this.theme, checked)
// If this is a radio, we can only enable
if (this.switchType === 'radio') {
this.$emit('change', { enabled: true, id: this.theme.id })
return
}
// If this is a switch, we can disable the theme
this.$emit('change', { enabled: checked === true, id: this.theme.id })
},
},
},
}
</script>
<style lang="scss" scoped>
// We make previews on 16/10 screens
$ratio: 16;
.theming__preview {
--ratio: 16;
position: relative;
display: flex;
justify-content: flex-start;
max-width: 800px;
&,
* {
user-select: none;
}
&-image {
flex-basis: calc(16px * var(--ratio));
flex-shrink: 0;
height: calc(10px * var(--ratio));
margin-right: var(--gap);
border-radius: var(--border-radius);
background-repeat: no-repeat;
background-position: top left;
background-size: cover;
}
&-description {
display: flex;
flex-direction: column;
label {
padding: 12px 0;
}
}
}
@media (max-width: (1024px / 1.5)) {
.theming__preview {
flex-direction: column;
&-image {
margin: 0;
}
}
}
</style>
|
