commit: 9674320e0983fd35267115fe111711ba5e2ebec8 parent: 86e685ac3452e42c3276e6ea2d3e7988abf2941a Author: lambda <pleromagit@rogerbraun.net> Date: Sun, 19 Nov 2017 11:39:00 +0000 Merge branch 'feature/custom-theme' into 'develop' Customizable themes Closes #41 See merge request pleroma/pleroma-fe!165Diffstat:
19 files changed, 285 insertions(+), 44 deletions(-)
diff --git a/src/App.vue b/src/App.vue @@ -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"> diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue @@ -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> diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue @@ -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'> diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue @@ -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}'> diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue @@ -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 }} diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue @@ -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"> diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue @@ -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"> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js @@ -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] } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue @@ -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> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue @@ -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> diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue @@ -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> diff --git 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 @@ -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 @@ -47,6 +47,7 @@ const persistedStateOptions = { 'config.hoverPreview', 'config.streaming', 'config.muteWords', + 'config.customTheme', 'users.lastLoginName' ] } diff --git a/src/modules/config.js b/src/modules/config.js @@ -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) } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js @@ -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 diff --git a/static/config.json b/static/config.json @@ -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 diff --git a/static/css/base16-pleroma-dark.css b/static/css/base16-pleroma-dark.css @@ -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; } diff --git a/static/styles.json b/static/styles.json @@ -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" ] +}