aboutsummaryrefslogtreecommitdiff
path: root/src/components/style_switcher
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/style_switcher')
-rw-r--r--src/components/style_switcher/style_switcher.js12
-rw-r--r--src/components/style_switcher/style_switcher.vue45
2 files changed, 22 insertions, 35 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 8c3d4861..6e2a1d7b 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -10,6 +10,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import TabSwitcher from '../tab_switcher/tab_switcher.js'
import Preview from './preview.vue'
import ExportImport from '../export_import/export_import.vue'
+import Checkbox from '../checkbox/checkbox.vue'
// List of color values used in v1
const v1OnlyNames = [
@@ -27,7 +28,7 @@ export default {
data () {
return {
availableStyles: [],
- selected: this.$store.state.config.theme,
+ selected: this.$store.getters.mergedConfig.theme,
previewShadows: {},
previewColors: {},
@@ -111,7 +112,7 @@ export default {
})
},
mounted () {
- this.normalizeLocalState(this.$store.state.config.customTheme)
+ this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
if (typeof this.shadowSelected === 'undefined') {
this.shadowSelected = this.shadowsAvailable[0]
}
@@ -338,7 +339,8 @@ export default {
FontControl,
TabSwitcher,
Preview,
- ExportImport
+ ExportImport,
+ Checkbox
},
methods: {
setCustomTheme () {
@@ -365,9 +367,9 @@ export default {
return version >= 1 || version <= 2
},
clearAll () {
- const state = this.$store.state.config.customTheme
+ const state = this.$store.getters.mergedConfig.customTheme
const version = state.colors ? 2 : 'l1'
- this.normalizeLocalState(this.$store.state.config.customTheme, version)
+ this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
},
// Clears all the extra stuff when loading V1 theme
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index d24394a4..944debab 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -42,44 +42,29 @@
</div>
<div class="save-load-options">
<span class="keep-option">
- <input
- id="keep-color"
- v-model="keepColor"
- type="checkbox"
- >
- <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
+ <Checkbox v-model="keepColor">
+ {{ $t('settings.style.switcher.keep_color') }}
+ </Checkbox>
</span>
<span class="keep-option">
- <input
- id="keep-shadows"
- v-model="keepShadows"
- type="checkbox"
- >
- <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
+ <Checkbox v-model="keepShadows">
+ {{ $t('settings.style.switcher.keep_shadows') }}
+ </Checkbox>
</span>
<span class="keep-option">
- <input
- id="keep-opacity"
- v-model="keepOpacity"
- type="checkbox"
- >
- <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
+ <Checkbox v-model="keepOpacity">
+ {{ $t('settings.style.switcher.keep_opacity') }}
+ </Checkbox>
</span>
<span class="keep-option">
- <input
- id="keep-roundness"
- v-model="keepRoundness"
- type="checkbox"
- >
- <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
+ <Checkbox v-model="keepRoundness">
+ {{ $t('settings.style.switcher.keep_roundness') }}
+ </Checkbox>
</span>
<span class="keep-option">
- <input
- id="keep-fonts"
- v-model="keepFonts"
- type="checkbox"
- >
- <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
+ <Checkbox v-model="keepFonts">
+ {{ $t('settings.style.switcher.keep_fonts') }}
+ </Checkbox>
</span>
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
</div>