Clean up, use translations, persist theme, add more presets.

This commit is contained in:
shpuld 2017-11-18 13:13:51 +02:00
parent 21b31cf599
commit d65d6e5da4
8 changed files with 67 additions and 33 deletions

View file

@ -10,7 +10,7 @@ const settings = {
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming, streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview, hoverPreviewLocal: this.$store.state.config.hoverPreview
} }
}, },
components: { components: {
@ -21,8 +21,6 @@ const settings = {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
} }
}, },
watch: { watch: {
hideAttachmentsLocal (value) { hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value }) this.$store.dispatch('setOption', { name: 'hideAttachments', value })

View file

@ -1,5 +1,3 @@
import { map, compose } from 'lodash'
export default { export default {
data () { data () {
return { return {
@ -21,10 +19,11 @@ export default {
self.availableStyles = themes self.availableStyles = themes
}) })
}, },
mounted() { mounted () {
const rgbstr2hex = (rgb) => { const rgbstr2hex = (rgb) => {
if (rgb[0] === '#') if (rgb[0] === '#') {
return rgb return rgb
}
rgb = rgb.match(/\d+/g) rgb = rgb.match(/\d+/g)
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
} }
@ -41,11 +40,11 @@ export default {
// reset to picked themes // reset to picked themes
} }
const rgb = (hex) => { 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 ? { return result ? {
r: parseInt(result[1], 16), r: parseInt(result[1], 16),
g: parseInt(result[2], 16), g: parseInt(result[2], 16),
b: parseInt(result[3], 16) b: parseInt(result[3], 16)
} : null } : null
} }
const bgRgb = rgb(this.bgColorLocal) const bgRgb = rgb(this.bgColorLocal)
@ -54,23 +53,23 @@ export default {
const linkRgb = rgb(this.linkColorLocal) const linkRgb = rgb(this.linkColorLocal)
if (bgRgb && fgRgb && linkRgb) { if (bgRgb && fgRgb && linkRgb) {
console.log('all colors ok') console.log('all colors ok')
this.$store.dispatch('setOption', { name: 'customTheme', value: { this.$store.dispatch('setOption', {
fg: fgRgb, name: 'customTheme',
bg: bgRgb, value: {
text: textRgb, fg: fgRgb,
link: linkRgb bg: bgRgb,
}}) text: textRgb,
link: linkRgb
}})
} }
} }
}, },
watch: { watch: {
selected () { selected () {
console.log(this.selected)
this.bgColorLocal = this.selected[1] this.bgColorLocal = this.selected[1]
this.fgColorLocal = this.selected[2] this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3] this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4] this.linkColorLocal = this.selected[4]
//this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
} }
} }
} }

View file

@ -1,25 +1,25 @@
<template> <template>
<div> <div>
<p>{{$t('settings.presets')}}</p>
<select v-model="selected" class="style-switcher"> <select v-model="selected" class="style-switcher">
<option v-for="style in availableStyles" :value="style">{{style[0]}}</option> <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
</select> </select>
<h3>Custom theme</h3> <p>{{$t('settings.theme_help')}}</p>
<p>Enter hex color codes (#aabbcc) into the text fields.</p>
<div class="color-container"> <div class="color-container">
<div class="color-item"> <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"> <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
</div> </div>
<div class="color-item"> <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"> <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
</div> </div>
<div class="color-item"> <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"> <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
</div> </div>
<div class="color-item"> <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"> <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
</div> </div>
</div> </div>
@ -36,7 +36,7 @@
</div> </div>
</div> </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> </div>
</template> </template>

View file

@ -122,6 +122,12 @@ const fi = {
set_new_profile_background: 'Aseta uusi taustakuva', set_new_profile_background: 'Aseta uusi taustakuva',
settings: 'Asetukset', settings: 'Asetukset',
theme: 'Teema', 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: 'Suodatus',
filtering_explanation: 'Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.', filtering_explanation: 'Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.',
attachments: 'Liitteet', attachments: 'Liitteet',
@ -160,7 +166,8 @@ const fi = {
error_fetching_user: 'Virhe hakiessa käyttäjää' error_fetching_user: 'Virhe hakiessa käyttäjää'
}, },
general: { general: {
submit: 'Lähetä' submit: 'Lähetä',
apply: 'Aseta'
} }
} }
@ -206,6 +213,12 @@ const en = {
set_new_profile_background: 'Set new profile background', set_new_profile_background: 'Set new profile background',
settings: 'Settings', settings: 'Settings',
theme: 'Theme', 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: 'Filtering',
filtering_explanation: 'All statuses containing these words will be muted, one per line', filtering_explanation: 'All statuses containing these words will be muted, one per line',
attachments: 'Attachments', attachments: 'Attachments',
@ -244,7 +257,8 @@ const en = {
error_fetching_user: 'Error fetching user' error_fetching_user: 'Error fetching user'
}, },
general: { general: {
submit: 'Submit' submit: 'Submit',
apply: 'Apply'
} }
} }

View file

@ -51,6 +51,15 @@ export default function createPersistedState ({
merge({}, store.state, savedState) 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) { if (store.state.users.lastLoginName) {
store.dispatch('loginUser', {username: store.state.users.lastLoginName, password: 'xxx'}) store.dispatch('loginUser', {username: store.state.users.lastLoginName, password: 'xxx'})
} }

View file

@ -47,6 +47,7 @@ const persistedStateOptions = {
'config.hoverPreview', 'config.hoverPreview',
'config.streaming', 'config.streaming',
'config.muteWords', 'config.muteWords',
'config.customTheme',
'users.lastLoginName' 'users.lastLoginName'
] ]
} }

View file

@ -98,13 +98,14 @@ const setColors = (col, commit) => {
styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max') 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(`a { color: ${colors['base08']}`, 'index-max')
styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
styleSheet.insertRule(`.base05-border { border-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') styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
body.style.display = 'initial' body.style.display = 'initial'
commit('setOption', { name: 'colors', value: colors })
commit('setOption', { name: 'customTheme', value: col })
} }
const hex2rgb = (hex) => { const hex2rgb = (hex) => {
@ -131,8 +132,15 @@ const setPreset = (val, commit) => {
text: textRgb, text: textRgb,
link: linkRgb link: linkRgb
} }
console.log(col) // This is a hack, this function is only called during initial load.
setColors(col, commit) // 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)
}
}) })
} }

View file

@ -1,4 +1,9 @@
{ {
"pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ], "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" ]
} }