diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 12 | ||||
| -rw-r--r-- | src/App.scss | 49 | ||||
| -rw-r--r-- | src/App.vue | 15 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 20 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 13 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 2 | ||||
| -rw-r--r-- | src/main.js | 4 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 45 |
8 files changed, 145 insertions, 15 deletions
@@ -1,16 +1,26 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' +import StyleSwitcher from './components/style_switcher/style_switcher.vue' export default { name: 'app', components: { UserPanel, NavPanel, - Notifications + Notifications, + StyleSwitcher }, + data: () => ({ + mobileActivePanel: 'timeline' + }), computed: { currentUser () { return this.$store.state.users.currentUser }, style () { return { 'background-image': `url(${this.currentUser.background_image})` } } + }, + methods: { + activatePanel (panelName) { + this.mobileActivePanel = panelName + } } } diff --git a/src/App.scss b/src/App.scss index 377c6297..c820779a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -58,11 +58,12 @@ nav { position: fixed; height: 50px; -} - -.sidebar { - flex: 1; - flex-basis: 300px; + .inner-nav { + display: flex; + align-items: center; + flex-basis: 920px; + margin: auto; + } } main-router { @@ -111,10 +112,9 @@ main-router { #content { margin: auto; max-width: 920px; -} - -.media-left { - width: 10% !important; + border-radius: 1em; + padding-bottom: 1em; + background-color: rgba(0,0,0,0.1); } .media-body { @@ -225,3 +225,34 @@ nav { flex: 2; flex-basis: 500px; } + +.sidebar { + flex: 1; + flex-basis: 300px; +} + +.mobile-shown { + display: none; +} + +.panel-switcher { + display: none; + width: 100%; + + button { + display: block; + flex: 1; + margin: 0.5em; + padding: 0.5em; + } +} + +@media all and (max-width: 959px) { + .mobile-hidden { + display: none; + } + + .panel-switcher { + display: flex; + } +} diff --git a/src/App.vue b/src/App.vue index 18a8ad15..5d5463fb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,17 +1,24 @@ <template> <div id="app" v-bind:style="style" class="base02-background"> <nav class='container base01-background base04'> - <div class='item'> - <a route-to='friends-timeline' href="#">Pleroma FE</a> + <div class='inner-nav'> + <div class='item'> + <a route-to='friends-timeline' href="#">Pleroma FE</a> + </div> + <style-switcher></style-switcher> </div> </nav> <div class="container" id="content"> - <div class="sidebar"> + <div class="panel-switcher"> + <button @click="activatePanel('sidebar')">Sidebar</button> + <button @click="activatePanel('timeline')">Timeline</button> + </div> + <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }"> <user-panel></user-panel> <nav-panel></nav-panel> <notifications v-if="currentUser"></notifications> </div> - <div class="main"> + <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }"> <transition name="fade"> <router-view></router-view> </transition> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js new file mode 100644 index 00000000..8a8cc2a0 --- /dev/null +++ b/src/components/style_switcher/style_switcher.js @@ -0,0 +1,20 @@ +import StyleSetter from '../../services/style_setter/style_setter.js' + +export default { + data: () => ({ + availableStyles: [], + selected: false + }), + created () { + const self = this + window.fetch('/static/css/themes.json') + .then((data) => data.json()) + .then((themes) => { self.availableStyles = themes }) + }, + watch: { + selected () { + const fullPath = `/static/css/${this.selected}` + StyleSetter.setStyle(fullPath) + } + } +} diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue new file mode 100644 index 00000000..bfd8cf86 --- /dev/null +++ b/src/components/style_switcher/style_switcher.vue @@ -0,0 +1,13 @@ +<template> + <select v-model="selected" class="style-switcher"> + <option v-for="style in availableStyles" >{{style}}</option> + </select> +</template> + +<script src="./style_switcher.js"></script> + +<style lang="scss"> + .style-switcher { + margin-right: 1em; + } +</style> diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index fb121e3c..9a21f404 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -1,6 +1,6 @@ <template> <div> - <div class="panel-heading text-center" v-bind:style="style"> + <div class="base00-background panel-heading text-center" v-bind:style="style"> <div class='user-info'> <img :src="user.profile_image_url"> <span class="glyphicon glyphicon-user"></span> diff --git a/src/main.js b/src/main.js index c673dbe5..42db8a19 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,8 @@ import apiModule from './modules/api.js' import VueTimeago from 'vue-timeago' +import StyleSetter from './services/style_setter/style_setter.js' + Vue.use(Vuex) Vue.use(VueRouter) Vue.use(VueTimeago, { @@ -57,3 +59,5 @@ new Vue({ template: '<App/>', components: { App } }) + +StyleSetter.setStyle('/static/css/base16-solarized-light.css') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js new file mode 100644 index 00000000..b8c978b4 --- /dev/null +++ b/src/services/style_setter/style_setter.js @@ -0,0 +1,45 @@ +const setStyle = (href) => { + /*** + What's going on here? + I want to make it easy for admins to style this application. To have + a good set of default themes, I chose the system from base16 + (https://chriskempson.github.io/base16/) to style all elements. They + all have the base00..0F classes. So the only thing an admin needs to + do to style Pleroma is to change these colors in that one css file. + Some default things (body text color, link color) need to be set dy- + namically, so this is done here by waiting for the stylesheet to be + loaded and then creating an element with the respective classes. + + It is a bit weird, but should make life for admins somewhat easier. + ***/ + const head = document.head + const body = document.body + body.style.display = 'none' + const cssEl = document.createElement('link') + cssEl.setAttribute('rel', 'stylesheet') + cssEl.setAttribute('href', href) + head.appendChild(cssEl) + + const setDynamic = () => { + const baseEl = document.createElement('div') + baseEl.setAttribute('class', 'base05') + const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') + baseEl.setAttribute('class', 'base08') + const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') + const styleEl = document.createElement('style') + head.appendChild(styleEl) + const styleSheet = styleEl.sheet + + styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') + styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') + styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max') + body.style.display = 'initial' + } + cssEl.addEventListener('load', setDynamic) +} + +const StyleSetter = { + setStyle +} + +export default StyleSetter |