sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'feature/custom-theme' into 'develop'

Browse source 
Customizable themes

Closes #41

See merge request pleroma/pleroma-fe!165
This commit is contained in:
lambda 2017-11-19 11:39:00 +00:00
commit 9674320e09
19 changed files with 285 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="app" v-bind:style="style" class="base02-background">
<nav class='container base01-background base04' @click="scrollToTop()" id="nav">
<nav class='container base02-background base05' @click="scrollToTop()" id="nav">
<div class='inner-nav' :style="logoStyle">
<div class='item'>
<router-link :to="{ name: 'root'}">{{sitename}}</router-link>
@ -14,8 +14,8 @@
</nav>
<div class="container" id="content">
<div class="panel-switcher">
<button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
<button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
<button @click="activatePanel('sidebar')" class="base02-background base05">Sidebar</button>
<button @click="activatePanel('timeline')" class="base02-background base05">Timeline</button>
</div>
<div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
<div class="sidebar-bounds">

2
src/components/conversation/conversation.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading base01-background base04 base03-border conversation-heading">
<div class="panel-heading base02-background base04 base03-border conversation-heading">
{{ $t('timeline.conversation') }}
<span v-if="collapsable" style="float:right;">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>

4
src/components/login_form/login_form.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('login.login')}}
</div>
<div class="panel-body">
@ -17,7 +17,7 @@
<div class='form-group'>
<div class='login-bottom'>
<div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
<button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>{{$t('login.login')}}</button>
<button :disabled="loggingIn" type='submit' class='btn btn-default base04 base02-background'>{{$t('login.login')}}</button>
</div>
</div>
<div v-if="authError" class='form-group'>

4
src/components/notifications/notifications.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="notifications">
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
{{$t('notifications.notifications')}}
<button @click.prevent="markAsSeen" class="base05 base01-background read-button">{{$t('notifications.read')}}</button>
<button @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
</div>
<div class="panel-body base03-border">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>

6
src/components/post_status_form/post_status_form.vue
View file

@ -6,7 +6,7 @@
</div>
<div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel base05-background">
<div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base01">
<div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base02">
<img :src="candidate.img"></img>
<span>
{{candidate.screen_name}}
@ -17,8 +17,8 @@
</div>
<div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
<button v-if="posting" disabled class="btn btn-default base05 base01-background">{{$t('post_status.posting')}}</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">{{$t('general.submit')}}</button>
<button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
</div>
<div class='error' v-if="error">
Error: {{ error }}

4
src/components/registration/registration.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('registration.registration')}}
</div>
<div class="panel-body">
@ -39,7 +39,7 @@
</div>
-->
<div class='form-group'>
<button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>{{$t('general.submit')}}</button>
<button :disabled="registering" type='submit' class='btn btn-default base05 base02-background'>{{$t('general.submit')}}</button>
</div>
</div>
<div class='terms-of-service' v-html="termsofservice">

2
src/components/settings/settings.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('settings.settings')}}
</div>
<div class="panel-body">

60
src/components/style_switcher/style_switcher.js
View file

@ -2,18 +2,70 @@ 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) => {
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'])
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) {
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 })
this.bgColorLocal = this.selected[1]
this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4]
}
}
}

65
src/components/style_switcher/style_switcher.vue
View file

@ -1,7 +1,43 @@
<template>
<select v-model="selected" class="style-switcher">
<option v-for="style in availableStyles" >{{style}}</option>
</select>
<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>
<p>{{$t('settings.theme_help')}}</p>
<div class="color-container">
<div class="color-item">
<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">{{$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">{{$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">{{$t('settings.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">{{$t('general.apply')}}</button>
</div>
</template>
<script src="./style_switcher.js"></script>
@ -10,4 +46,27 @@
.style-switcher {
margin-right: 1em;
}
.color-container {
display: flex;
flex-wrap: wrap;
}
.color-item {
max-width: 9em;
display:flex;
flex-wrap:wrap;
}
.theme-color-in {
max-width: 8em;
border-radius: 2px;
border: 0;
padding: 5px;
margin: 5px 0 5px 0;
}
.theme-preview-content {
padding: 20px;
}
</style>

20
src/components/timeline/timeline.vue
View file

@ -1,48 +1,48 @@
<template>
<div class="timeline panel panel-default" v-if="viewing == 'statuses'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{title}}
</div>
<button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
<button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
</button>
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
{{$t('timeline.error_fetching')}}
</div>
<div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
<div @click.prevent class="base04 base02-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.up_to_date')}}
</div>
</div>
<div class="panel-body base02-background">
<div class="panel-body base01-background">
<div class="timeline">
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="base01-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
<div class="base02-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
</a>
<div class="base01-background base03-border new-status-notification text-center" v-else>...</div>
<div class="base02-background base03-border new-status-notification text-center" v-else>...</div>
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{$t('user_card.followers')}}
</div>
</div>
<div class="panel-body base02-background">
<div class="panel-body base01-background">
<div class="timeline">
<user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{$t('user_card.followees')}}
</div>
</div>
<div class="panel-body base02-background">
<div class="panel-body base01-background">
<div class="timeline">
<user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
</div>

10
src/components/user_settings/user_settings.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="settings panel panel-default base00-background">
<div class="panel-heading base01-background base04">
<div class="panel-heading base02-background base04">
{{$t('settings.user_settings')}}
</div>
<div class="panel-body profile-edit">
@ -10,7 +10,7 @@
<input class='name-changer base03-border' id='username' v-model="newname" :value="user.screen_name"></input>
<p>{{$t('settings.bio')}}</p>
<textarea class="bio base03-border" v-model="newbio"></textarea>
<button :disabled='newname.length <= 0' class="btn btn-default base05 base01-background" @click="updateProfile">{{$t('general.submit')}}</button>
<button :disabled='newname.length <= 0' class="btn btn-default base05 base02-background" @click="updateProfile">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.avatar')}}</h3>
@ -23,7 +23,7 @@
<input type="file" @change="uploadFile(0, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.profile_banner')}}</h3>
@ -36,7 +36,7 @@
<input type="file" @change="uploadFile(1, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
</div>
<div class="setting-item">
<h3>{{$t('settings.profile_background')}}</h3>
@ -47,7 +47,7 @@
<input type="file" @change="uploadFile(2, $event)" ></input>
</div>
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
<button class="btn btn-default base05 base01-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
<button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
</div>
</div>
</div>

18
src/i18n/messages.js
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'
}
}

9
src/lib/persisted_state.js
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'})
}

1
src/main.js
View file

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

6
src/modules/config.js
View file

@ -31,8 +31,10 @@ const config = {
dispatch('setPageTitle')
break
case 'theme':
const fullPath = `/static/css/${value}`
StyleSetter.setStyle(fullPath, commit)
StyleSetter.setPreset(value, commit)
break
case 'customTheme':
StyleSetter.setColors(value, commit)
}
}
}

99
src/services/style_setter/style_setter.js
View file

@ -1,4 +1,8 @@
import { times } from 'lodash'
import { times, map } from 'lodash'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
// styles as well as set their own colors in the future.
const setStyle = (href, commit) => {
/***
@ -48,11 +52,102 @@ const setStyle = (href, commit) => {
styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
body.style.display = 'initial'
}
cssEl.addEventListener('load', setDynamic)
}
const rgb2hex = (r, g, b) => {
[r, g, b] = map([r, g, b], (val) => {
val = Math.ceil(val)
val = val < 0 ? 0 : val
val = val > 255 ? 255 : val
return val
})
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
}
const setColors = (col, commit) => {
const head = document.head
const body = document.body
body.style.display = 'none'
const styleEl = document.createElement('style')
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
let colors = {}
let mod = 10
if (isDark) {
mod = mod * -1
}
colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
colors['base04'] = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text
colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b) // text
colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
times(9, (n) => {
const color = colors[`base0${8 - n}`]
styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
})
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) => {
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 setPreset = (val, commit) => {
window.fetch('/static/styles.json')
.then((data) => data.json())
.then((themes) => {
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
const bgRgb = hex2rgb(theme[1])
const fgRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3])
const linkRgb = hex2rgb(theme[4])
const col = {
bg: bgRgb,
fg: fgRgb,
text: textRgb,
link: linkRgb
}
// 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)
}
})
}
const StyleSetter = {
setStyle
setStyle,
setPreset,
setColors
}
export default StyleSetter

2
static/config.json
View file

@ -1,6 +1,6 @@
{
"name": "Pleroma FE",
"theme": "base16-pleroma-dark.css",
"theme": "pleroma-dark",
"background": "/static/bg.jpg",
"logo": "/static/logo.png",
"registrationOpen": false

2
static/css/base16-pleroma-dark.css
View file

@ -17,7 +17,7 @@
.base00 { color: #161c20; }
.base01 { color: #282e32; }
.base02 { color: #36393e; }
.base02 { color: #343a3f; }
.base03 { color: #4e5256; }
.base04 { color: #ababab; }
.base05 { color: #b9b9b9; }

9
static/styles.json Normal file
View file

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