diff options
| -rw-r--r-- | src/components/settings/settings.js | 4 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 31 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 14 | ||||
| -rw-r--r-- | src/i18n/messages.js | 18 | ||||
| -rw-r--r-- | src/lib/persisted_state.js | 9 | ||||
| -rw-r--r-- | src/main.js | 1 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 16 | ||||
| -rw-r--r-- | static/styles.json | 7 |
8 files changed, 67 insertions, 33 deletions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 3f619572..b88937bb 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -10,7 +10,7 @@ const settings = { muteWordsString: this.$store.state.config.muteWords.join('\n'), autoLoadLocal: this.$store.state.config.autoLoad, streamingLocal: this.$store.state.config.streaming, - hoverPreviewLocal: this.$store.state.config.hoverPreview, + hoverPreviewLocal: this.$store.state.config.hoverPreview } }, components: { @@ -21,8 +21,6 @@ const settings = { return this.$store.state.users.currentUser } }, - - watch: { hideAttachmentsLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachments', value }) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 8b769494..8bed17cc 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,5 +1,3 @@ -import { map, compose } from 'lodash' - export default { data () { return { @@ -21,10 +19,11 @@ export default { self.availableStyles = themes }) }, - mounted() { + mounted () { const rgbstr2hex = (rgb) => { - if (rgb[0] === '#') + if (rgb[0] === '#') { return rgb + } rgb = rgb.match(/\d+/g) return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` } @@ -41,11 +40,11 @@ export default { // reset to picked themes } const rgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(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) + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) } : null } const bgRgb = rgb(this.bgColorLocal) @@ -54,23 +53,23 @@ export default { 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 - }}) + this.$store.dispatch('setOption', { + name: 'customTheme', + value: { + fg: fgRgb, + bg: bgRgb, + text: textRgb, + link: linkRgb + }}) } } }, watch: { 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 074b3830..30dfdf8d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,25 +1,25 @@ <template> <div> + <p>{{$t('settings.presets')}}</p> <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> + <p>{{$t('settings.theme_help')}}</p> <div class="color-container"> <div class="color-item"> - <label for="bgcolor" class="base04">Background</label> + <label for="bgcolor" class="base04">{{$t('settings.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> + <label for="fgcolor" class="base04">{{$t('settings.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> + <label for="textcolor" class="base04">{{$t('settings.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> + <label for="linkcolor" class="base04">{{$t('settings.links')}}</label> <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> </div> @@ -36,7 +36,7 @@ </div> </div> </div> - <button class="btn base02-background base04" @click="setCustomTheme">Submit</button> + <button class="btn base02-background base04" @click="setCustomTheme">{{$t('general.apply')}}</button> </div> </template> diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 2b828f18..697eb659 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -122,6 +122,12 @@ const fi = { set_new_profile_background: 'Aseta uusi taustakuva', settings: 'Asetukset', theme: 'Teema', + presets: 'Valmiit teemat', + theme_help: 'Käytä heksadesimaalivärejä muokataksesi väriteemaasi.', + background: 'Tausta', + foreground: 'Korostus', + text: 'Teksti', + links: 'Linkit', filtering: 'Suodatus', filtering_explanation: 'Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.', attachments: 'Liitteet', @@ -160,7 +166,8 @@ const fi = { error_fetching_user: 'Virhe hakiessa käyttäjää' }, general: { - submit: 'Lähetä' + submit: 'Lähetä', + apply: 'Aseta' } } @@ -206,6 +213,12 @@ const en = { set_new_profile_background: 'Set new profile background', settings: 'Settings', theme: 'Theme', + presets: 'Presets', + theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.', + background: 'Background', + foreground: 'Foreground', + text: 'Text', + links: 'Links', filtering: 'Filtering', filtering_explanation: 'All statuses containing these words will be muted, one per line', attachments: 'Attachments', @@ -244,7 +257,8 @@ const en = { error_fetching_user: 'Error fetching user' }, general: { - submit: 'Submit' + submit: 'Submit', + apply: 'Apply' } } diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js index 09b5e987..60811e65 100644 --- a/src/lib/persisted_state.js +++ b/src/lib/persisted_state.js @@ -51,6 +51,15 @@ export default function createPersistedState ({ merge({}, store.state, savedState) ) } + if (store.state.config.customTheme) { + // This is a hack to deal with async loading of config.json and themes + // See: style_setter.js, setPreset() + window.themeLoaded = true + store.dispatch('setOption', { + name: 'customTheme', + value: store.state.config.customTheme + }) + } if (store.state.users.lastLoginName) { store.dispatch('loginUser', {username: store.state.users.lastLoginName, password: 'xxx'}) } diff --git a/src/main.js b/src/main.js index 87a46ee9..b6544a5a 100644 --- a/src/main.js +++ b/src/main.js @@ -47,6 +47,7 @@ const persistedStateOptions = { 'config.hoverPreview', 'config.streaming', 'config.muteWords', + 'config.customTheme', 'users.lastLoginName' ] } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index bbb2c510..92ba9440 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -98,13 +98,14 @@ const setColors = (col, commit) => { styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max') }) - commit('setOption', { name: 'colors', value: colors }) - styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max') styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max') styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max') body.style.display = 'initial' + + commit('setOption', { name: 'colors', value: colors }) + commit('setOption', { name: 'customTheme', value: col }) } const hex2rgb = (hex) => { @@ -131,8 +132,15 @@ const setPreset = (val, commit) => { text: textRgb, link: linkRgb } - console.log(col) - setColors(col, commit) + // This is a hack, this function is only called during initial load. + // We want to cancel loading the theme from config.json if we're already + // loading a theme from the persisted state. + // Needed some way of dealing with the async way of things. + // load config -> set preset -> wait for styles.json to load -> + // load persisted state -> set colors -> styles.json loaded -> set colors + if (!window.themeLoaded) { + setColors(col, commit) + } }) } diff --git a/static/styles.json b/static/styles.json index 229cde39..92715565 100644 --- a/static/styles.json +++ b/static/styles.json @@ -1,4 +1,9 @@ { "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ], - "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ] + "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f" ], + "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c" ], + "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8"], + "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60" ], + "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672" ], + "mammal": [ "Mammal", "#272c37", "#444b5d", "#f8f8f8", "#9bacc8" ] } |