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
|
<template>
<div class="theme-list">
<h2>{{ $gettext('Farbeinstellungen') }}</h2>
<div class="theme-categories">
<div class="theme-category">
<ul class="theme-list">
<li
v-for="theme in filteredThemes('light')"
:key="theme.id"
:class="{ active: theme.attributes.active }"
>
<div class="theme-info">
<div class="theme-meta">
<strong class="theme-name">{{ theme.attributes.name }}</strong>
<p class="theme-description">{{ theme.attributes.description }}</p>
</div>
<div class="theme-colors">
<div
v-for="color in colorKeys"
:key="color"
class="theme-color"
:title="theme.attributes.values?.[color]"
:style="{ backgroundColor: theme.attributes.values?.[color] || 'transparent' }"
/>
</div>
</div>
<div class="theme-actions">
<button class="button" @click="$emit('select', theme)">
{{ $gettext('Bearbeiten') }}
</button>
<button
v-if="!theme.attributes.active"
class="button"
@click="$emit('activate', theme)"
>
{{ $gettext('Aktivieren') }}
</button>
</div>
</li>
<li class="theme-add">
<button @click="showThemeAddDialog(true)">
<StudipIcon shape="add" :size="24" />
{{ $gettext('Neues Theme hinzufügen') }}
</button>
</li>
</ul>
</div>
</div>
<ThemeAddDialog @add="$emit('add')"/>
<ThemeAddImportDialog />
<ThemeAddCopyDialog :themes="filteredThemes('light')" />
</div>
</template>
<script setup>
import StudipIcon from '../StudipIcon.vue';
import ThemeAddDialog from './ThemeAddDialog.vue';
import ThemeAddImportDialog from './ThemeAddImportDialog.vue';
import ThemeAddCopyDialog from './ThemeAddCopyDialog.vue';
import { useStore } from 'vuex';
const props = defineProps({
themes: {
type: Array,
required: true,
},
});
defineEmits(['add', 'select', 'activate']);
const store = useStore();
const colorKeys = [
'--color--brand-primary',
'--color--main-navigation-item',
'--color--sidebar-item',
'--color--highlight',
'--color--content-link',
];
const filteredThemes = (type) => {
return props.themes
.filter((theme) => theme.attributes.type === type)
.sort((a, b) => Number(b.attributes.active) - Number(a.attributes.active));
};
const showThemeAddDialog = (show) => {
store.dispatch('theme-settings-module/setShowThemeAddDialog', show);
};
</script>
|
