Skip to content

Commit 22cb862

Browse files
akila-iakila-i
committed
Modify addNewTheme to use the color picker
1 parent be492c6 commit 22cb862

File tree

2 files changed

+81
-79
lines changed

2 files changed

+81
-79
lines changed

‎kolibri/plugins/epub_viewer/assets/src/views/CustomThemeColorsModal.vue‎

Lines changed: 77 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,72 @@
11
<template>
22

3-
<KModal
4-
:title="title"
5-
:submitText="coreString('saveAction')"
6-
:cancelText="coreString('cancelAction')"
7-
@submit="$emit('submit')"
8-
@cancel="$emit('cancel')"
9-
>
10-
<div class="theme-name">
11-
<!-- need to configure the input box -->
12-
<ThemeNameTextbox
13-
:value="themeName"
14-
/>
15-
</div>
16-
17-
<div
18-
class="theme-preview"
19-
:style="{ backgroundColor: tempTheme.backgroundColor, color: tempTheme.textColor }"
20-
>
21-
<p>
22-
The quick brown fox jumps over the lazy dog.
23-
<a :style="{ color: tempTheme.linkColor }">This is a link</a>
24-
<!-- do this need translations too? -->
25-
</p>
26-
</div>
27-
28-
<div :class="{ 'color-select-container-mobile': windowIsSmall }">
29-
<div class="theme-option">
30-
<div class="color-box">
31-
<KButton
32-
:appearanceOverrides="generateStyle(tempTheme.backgroundColor)"
33-
@click="pickThemeColor('background')"
3+
<div>
4+
<div v-if="colorPicker === null">
5+
<KModal
6+
:title="title"
7+
:submitText="coreString('saveAction')"
8+
:cancelText="coreString('cancelAction')"
9+
@submit="$emit('submit', tempTheme)"
10+
@cancel="$emit('cancel')"
11+
>
12+
<div class="theme-name">
13+
<!-- need to configure the input box -->
14+
<ThemeNameTextbox
15+
:value="themeName"
3416
/>
3517
</div>
36-
<p>{{ $tr('buttonBackground') }}</p>
37-
</div>
38-
<div class="theme-option">
39-
<div class="color-box">
40-
<KButton
41-
:appearanceOverrides="generateStyle(tempTheme.textColor)"
42-
@click="pickThemeColor('text')"
43-
/>
44-
</div>
45-
<p>{{ $tr('buttonText') }}</p>
46-
</div>
47-
<div class="theme-option">
48-
<div class="color-box">
49-
<KButton
50-
:appearanceOverrides="generateStyle(tempTheme.linkColor)"
51-
@click="pickThemeColor('link')"
52-
/>
18+
19+
<div
20+
class="theme-preview"
21+
:style="{ backgroundColor: tempTheme.backgroundColor, color: tempTheme.textColor }"
22+
>
23+
<p>
24+
The quick brown fox jumps over the lazy dog.
25+
<a :style="{ color: tempTheme.linkColor }">This is a link</a>
26+
<!-- do this need translations too? -->
27+
</p>
5328
</div>
54-
<p>{{ $tr('buttonLink') }}</p>
55-
</div>
29+
30+
<div :class="{ 'color-select-container-mobile': windowIsSmall }">
31+
<div class="theme-option">
32+
<div class="color-box">
33+
<KButton
34+
:appearanceOverrides="generateStyle(tempTheme.backgroundColor)"
35+
@click="colorPicker = 'background'"
36+
/>
37+
</div>
38+
<p>{{ $tr('buttonBackground') }}</p>
39+
</div>
40+
<div class="theme-option">
41+
<div class="color-box">
42+
<KButton
43+
:appearanceOverrides="generateStyle(tempTheme.textColor)"
44+
@click="colorPicker = 'text'"
45+
/>
46+
</div>
47+
<p>{{ $tr('buttonText') }}</p>
48+
</div>
49+
<div class="theme-option">
50+
<div class="color-box">
51+
<KButton
52+
:appearanceOverrides="generateStyle(tempTheme.linkColor)"
53+
@click="colorPicker = 'link'"
54+
/>
55+
</div>
56+
<p>{{ $tr('buttonLink') }}</p>
57+
</div>
58+
</div>
59+
</KModal>
5660
</div>
57-
58-
</KModal>
59-
61+
<div v-if="colorPicker !== null">
62+
<ColorPickerModal
63+
:colorPicker="colorPicker"
64+
:color="tempTheme[colorPicker]"
65+
@submit="setThemeColor($event)"
66+
@cancel="colorPicker = null"
67+
/>
68+
</div>
69+
</div>
6070
</template>
6171

6272

@@ -65,11 +75,13 @@
6575
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
6676
import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
6777
import ThemeNameTextbox from './ThemeNameTextBox.vue';
78+
import ColorPickerModal from './ColorPickerModal.vue';
6879
6980
export default {
7081
name: 'CustomThemeColorsModal',
7182
components: {
7283
ThemeNameTextbox,
84+
ColorPickerModal,
7385
},
7486
mixins: [commonCoreStrings],
7587
setup() {
@@ -103,10 +115,12 @@
103115
data(){
104116
return {
105117
tempTheme: {
118+
name: 'theme' + Math.floor(Math.random() * 100),
106119
backgroundColor: this.theme.backgroundColor,
107120
textColor: this.theme.textColor,
108121
linkColor: this.theme.linkColor,
109-
}
122+
},
123+
colorPicker: null
110124
}
111125
},
112126
computed: {
@@ -137,20 +151,18 @@
137151
},
138152
};
139153
},
140-
pickThemeColor(type) {
141-
if (type == 'background') {
142-
// pops the color picker
143-
this.tempTheme.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
154+
setThemeColor(color) {
155+
if (this.colorPicker == 'background') {
156+
this.tempTheme.backgroundColor = color.hex;
144157
}
145-
else if (type == 'text') {
146-
// pops the color picker
147-
this.tempTheme.textColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
158+
else if (this.colorPicker == 'text') {
159+
this.tempTheme.textColor = color.hex;
148160
}
149-
else if (type == 'link') {
150-
// pops the color picker
151-
this.tempTheme.linkColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
161+
else if (this.colorPicker == 'link') {
162+
this.tempTheme.linkColor = color.hex;
152163
}
153-
}
164+
this.colorPicker = null;
165+
},
154166
},
155167
$trs: {
156168
titleAddTheme: {

‎kolibri/plugins/epub_viewer/assets/src/views/SettingsSideBar.vue‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
:modalMode="addCustomTheme ? 'add' : 'edit'"
134134
:themeName="editCustomThemeName"
135135
:theme="editCustomThemeName ? editCustomTheme : theme"
136-
@submit="addNewTheme"
136+
@submit="addNewTheme($event)"
137137
@cancel="addCustomTheme = null, editCustomThemeName = null, editCustomTheme = null"
138138
/>
139139
</div>
@@ -229,21 +229,11 @@
229229
},
230230
};
231231
},
232-
addNewTheme(){
233-
// TODO: Add new theme logic
234-
console.log("add new theme");
232+
addNewTheme(tempTheme){
233+
// console.log(tempTheme);
235234
this.addCustomTheme = null
236-
237-
// generate a random new theme
238-
const randomTheme = {
239-
name: 'theme' + Math.floor(Math.random() * 100),
240-
backgroundColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16),
241-
textColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16),
242-
hoverColor: '#'+(Math.random()*0xFFFFFF<<0).toString(16)
243-
};
244-
245235
const savedCustomThemes = Lockr.get('kolibriEpubRendererCustomThemes') || {};
246-
savedCustomThemes[randomTheme.name] = randomTheme;
236+
savedCustomThemes[tempTheme.name] = tempTheme;
247237
Lockr.set('kolibriEpubRendererCustomThemes', {...savedCustomThemes});
248238
this.customThemes = savedCustomThemes;
249239
},

0 commit comments

Comments
 (0)