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'),
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 })

View file

@ -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 })
}
}
}

View file

@ -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>

View file

@ -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'
}
}

View file

@ -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'})
}

View file

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

View file

@ -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)
}
})
}

View file

@ -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" ]
}