diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/App.scss | 6 | ||||
| -rw-r--r-- | src/App.vue | 7 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 20 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 7 | ||||
| -rw-r--r-- | src/main.js | 2 |
6 files changed, 42 insertions, 4 deletions
@@ -1,13 +1,15 @@ 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 }, computed: { currentUser () { return this.$store.state.users.currentUser }, diff --git a/src/App.scss b/src/App.scss index 85757bce..fd1182e0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -58,6 +58,12 @@ nav { position: fixed; height: 50px; + .inner-nav { + display: flex; + align-items: center; + flex-basis: 920px; + margin: auto; + } } .sidebar { diff --git a/src/App.vue b/src/App.vue index 18a8ad15..5da469b5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,11 @@ <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"> 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..8c32ed07 --- /dev/null +++ b/src/components/style_switcher/style_switcher.vue @@ -0,0 +1,7 @@ +<template> + <select v-model="selected"> + <option v-for="style in availableStyles" >{{style}}</option> + </select> +</template> + +<script src="./style_switcher.js"></script> diff --git a/src/main.js b/src/main.js index ce81ed4d..1c24b28c 100644 --- a/src/main.js +++ b/src/main.js @@ -61,4 +61,4 @@ new Vue({ components: { App } }) -StyleSetter.setStyle('/static/css/solarized-light.css') +StyleSetter.setStyle('/static/css/base16-solarized-light.css') |