fix themes (#199)

Fixes #194
This commit is contained in:
Nolan Lawson 2018-04-21 00:33:42 -07:00 committed by GitHub
parent ec138f94ce
commit e4d2934c67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 5 deletions

View file

@ -17,7 +17,7 @@ window.__themeColors = {
if (localStorage.store_currentInstance && localStorage.store_instanceThemes) { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str) let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str)
let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)] let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
if (theme !== 'default') { if (theme && theme !== 'default') {
document.body.classList.add(`theme-${theme}`) document.body.classList.add(`theme-${theme}`)
let link = document.createElement('link') let link = document.createElement('link')
link.rel = 'stylesheet' link.rel = 'stylesheet'

View file

@ -120,13 +120,13 @@
}, },
computed: { computed: {
instanceName: (params) => params.instanceName, instanceName: (params) => params.instanceName,
selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName], selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName] || 'default',
verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName] verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
}, },
methods: { methods: {
onThemeChange () { onThemeChange () {
let { newTheme, instanceName } = this.get() let { selectedTheme, instanceName } = this.get()
changeTheme(instanceName, newTheme) changeTheme(instanceName, selectedTheme)
}, },
onSwitchToThisInstance (e) { onSwitchToThisInstance (e) {
e.preventDefault() e.preventDefault()

View file

@ -60,7 +60,7 @@ window.__themeColors = {
if (localStorage.store_currentInstance && localStorage.store_instanceThemes) { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str) let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str)
let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)] let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
if (theme !== 'default') { if (theme && theme !== 'default') {
document.body.classList.add(`theme-${theme}`) document.body.classList.add(`theme-${theme}`)
let link = document.createElement('link') let link = document.createElement('link')
link.rel = 'stylesheet' link.rel = 'stylesheet'

20
tests/spec/020-themes.js Normal file
View file

@ -0,0 +1,20 @@
import {
settingsNavButton
} from '../utils'
import { foobarRole } from '../roles'
import { Selector as $ } from 'testcafe'
fixture`020-themes.js`
.page`http://localhost:4002`
test('can set a theme', async t => {
await t.useRole(foobarRole)
.click(settingsNavButton)
.click($('a[href="/settings/instances"]'))
.click($('a[href="/settings/instances/localhost:3000"]'))
.expect($('body').getAttribute('class')).eql(undefined)
.click($('input[value="scarlet"]'))
.expect($('body').getAttribute('class')).eql('theme-scarlet')
.click($('input[value="default"]'))
.expect($('body').getAttribute('class')).eql('')
})

View file

@ -14,6 +14,7 @@ export const homeNavButton = $('nav a[href="/"]')
export const localTimelineNavButton = $('nav a[href="/local"]') export const localTimelineNavButton = $('nav a[href="/local"]')
export const searchNavButton = $('nav a[href="/search"]') export const searchNavButton = $('nav a[href="/search"]')
export const communityNavButton = $('nav a[href="/community"]') export const communityNavButton = $('nav a[href="/community"]')
export const settingsNavButton = $('nav a[href="/settings"]')
export const formError = $('.form-error-user-error') export const formError = $('.form-error-user-error')
export const composeInput = $('.compose-box-input') export const composeInput = $('.compose-box-input')
export const composeContentWarning = $('.content-warning-input') export const composeContentWarning = $('.content-warning-input')