aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/settings/settings.js46
-rw-r--r--src/components/settings/settings.vue58
-rw-r--r--src/components/style_switcher/style_switcher.js65
-rw-r--r--src/components/style_switcher/style_switcher.vue64
4 files changed, 124 insertions, 109 deletions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 235ccfbb..3f619572 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -11,10 +11,6 @@ const settings = {
autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview,
- bgColorLocal: '',
- fgColorLocal: '',
- textColorLocal: '',
- linkColorLocal: ''
}
},
components: {
@@ -25,46 +21,8 @@ const settings = {
return this.$store.state.users.currentUser
}
},
- mounted() {
- const rgbstr2hex = (rgb) => {
- if (rgb[0] === '#')
- return rgb
- rgb = rgb.match(/\d+/g)
- return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
- }
- this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
- this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
- this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
- this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
- },
- methods: {
- setCustomTheme () {
- if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
- // reset to picked themes
- }
- const rgb = (hex) => {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null
- }
- const bgRgb = rgb(this.bgColorLocal)
- const fgRgb = rgb(this.fgColorLocal)
- const textRgb = rgb(this.textColorLocal)
- const linkRgb = rgb(this.linkColorLocal)
- if (bgRgb && fgRgb && linkRgb) {
- console.log('all colors ok')
- this.$store.dispatch('setOption', { name: 'customTheme', value: {
- fg: fgRgb,
- bg: bgRgb,
- text: textRgb,
- link: linkRgb
- }})
- }
- }
- },
+
+
watch: {
hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 8d9c3360..8fdd09de 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -9,42 +9,6 @@
<style-switcher></style-switcher>
</div>
<div class="setting-item">
- <h3>Custom theme</h3>
- <p>Enter hex color codes (#aabbcc) into the text fields.</p>
- <div class="color-container">
- <div class="color-item">
- <label for="bgcolor" class="base04">Background</label>
- <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
- </div>
- <div class="color-item">
- <label for="fgcolor" class="base04">Foreground</label>
- <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
- </div>
- <div class="color-item">
- <label for="textcolor" class="base04">Text</label>
- <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
- </div>
- <div class="color-item">
- <label for="linkcolor" class="base04">Links</label>
- <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
- </div>
- </div>
- <div>
- <div class="panel">
- <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
- <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
- <h4>Content</h4>
- <br>
- A bunch of more content and
- <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
- <br>
- <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
- </div>
- </div>
- </div>
- <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
- </div>
- <div class="setting-item">
<h2>{{$t('settings.filtering')}}</h2>
<p>{{$t('settings.filtering_explanation')}}</p>
<textarea id="muteWords" v-model="muteWordsString"></textarea>
@@ -114,26 +78,4 @@
.setting-list {
list-style-type: none;
}
-
- .color-container {
- display: flex;
- }
-
- .color-item {
- max-width: 7em;
- display:flex;
- flex-wrap:wrap;
- }
-
- .theme-color-in {
- max-width: 6em;
- border-radius: 2px;
- border: 0;
- padding: 5px;
- margin: 5px 0 5px 0;
- }
-
- .theme-preview-content {
- padding: 20px;
- }
</style>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d265572d..8b769494 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,19 +1,76 @@
+import { map, compose } from 'lodash'
+
export default {
data () {
return {
availableStyles: [],
- selected: this.$store.state.config.theme
+ selected: this.$store.state.config.theme,
+ bgColorLocal: '',
+ fgColorLocal: '',
+ textColorLocal: '',
+ linkColorLocal: ''
}
},
created () {
const self = this
- window.fetch('/static/css/themes.json')
+
+ window.fetch('/static/styles.json')
.then((data) => data.json())
- .then((themes) => { self.availableStyles = themes })
+ .then((themes) => {
+ console.log(themes)
+ self.availableStyles = themes
+ })
+ },
+ mounted() {
+ const rgbstr2hex = (rgb) => {
+ if (rgb[0] === '#')
+ return rgb
+ rgb = rgb.match(/\d+/g)
+ return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+ }
+ this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
+ this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
+ console.log(this.$store.state.config.colors['base02'])
+ console.log(this.fgColorLocal)
+ this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
+ this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
+ },
+ methods: {
+ setCustomTheme () {
+ if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
+ // reset to picked themes
+ }
+ const rgb = (hex) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+ const bgRgb = rgb(this.bgColorLocal)
+ const fgRgb = rgb(this.fgColorLocal)
+ const textRgb = rgb(this.textColorLocal)
+ const linkRgb = rgb(this.linkColorLocal)
+ if (bgRgb && fgRgb && linkRgb) {
+ console.log('all colors ok')
+ this.$store.dispatch('setOption', { name: 'customTheme', value: {
+ fg: fgRgb,
+ bg: bgRgb,
+ text: textRgb,
+ link: linkRgb
+ }})
+ }
+ }
},
watch: {
selected () {
- this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
+ console.log(this.selected)
+ this.bgColorLocal = this.selected[1]
+ this.fgColorLocal = this.selected[2]
+ this.textColorLocal = this.selected[3]
+ this.linkColorLocal = this.selected[4]
+ //this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
}
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index bfd8cf86..074b3830 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,7 +1,43 @@
<template>
- <select v-model="selected" class="style-switcher">
- <option v-for="style in availableStyles" >{{style}}</option>
- </select>
+ <div>
+ <select v-model="selected" class="style-switcher">
+ <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+ </select>
+ <h3>Custom theme</h3>
+ <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+ <div class="color-container">
+ <div class="color-item">
+ <label for="bgcolor" class="base04">Background</label>
+ <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="fgcolor" class="base04">Foreground</label>
+ <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="textcolor" class="base04">Text</label>
+ <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+ </div>
+ <div class="color-item">
+ <label for="linkcolor" class="base04">Links</label>
+ <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+ </div>
+ </div>
+ <div>
+ <div class="panel">
+ <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+ <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+ <h4>Content</h4>
+ <br>
+ A bunch of more content and
+ <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+ <br>
+ <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+ </div>
+ </div>
+ </div>
+ <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
+ </div>
</template>
<script src="./style_switcher.js"></script>
@@ -10,4 +46,26 @@
.style-switcher {
margin-right: 1em;
}
+
+ .color-container {
+ display: flex;
+ }
+
+ .color-item {
+ max-width: 7em;
+ display:flex;
+ flex-wrap:wrap;
+ }
+
+ .theme-color-in {
+ max-width: 6em;
+ border-radius: 2px;
+ border: 0;
+ padding: 5px;
+ margin: 5px 0 5px 0;
+ }
+
+ .theme-preview-content {
+ padding: 20px;
+ }
</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 17:52:51 +0000