diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/App.scss | 7 | ||||
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 9 | ||||
| -rw-r--r-- | src/components/settings/settings.js | 9 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 22 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 10 | ||||
| -rw-r--r-- | src/main.js | 6 |
8 files changed, 59 insertions, 14 deletions
@@ -1,15 +1,13 @@ 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, - StyleSwitcher + Notifications }, data: () => ({ mobileActivePanel: 'timeline' diff --git a/src/App.scss b/src/App.scss index d39fc749..5c14c17b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -59,6 +59,8 @@ nav { height: 50px; .inner-nav { + padding-left: 20px; + padding-right: 20px; display: flex; align-items: center; flex-basis: 920px; @@ -260,3 +262,8 @@ nav { display: flex; } } + +.item.right { + text-align: right; + padding-right: 20px; +} diff --git a/src/App.vue b/src/App.vue index a22307a6..d8e1d3e8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,9 +3,11 @@ <nav class='container base01-background base04'> <div class='inner-nav' :style="logoStyle"> <div class='item'> - <a route-to='friends-timeline' href="#">{{sitename}}</a> + <router-link :to="{ name: 'root'}">{{sitename}}</router-link> + </div> + <div class='item right'> + <router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link> </div> - <style-switcher></style-switcher> </div> </nav> <div class="container" id="content"> diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 505182c6..311e36b8 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,5 +1,5 @@ <template> - <div class="attachment"> + <div class="attachment" :class="type"> <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"></img> </a> @@ -42,6 +42,10 @@ margin: 0.2em; align-self: flex-start; + &.html { + flex-basis: 100%; + } + .hider { position: absolute; margin: 10px; @@ -74,12 +78,11 @@ .oembed { img { width: 100%; - height: 100%; } } .oembed { - border: 1px solid rgba(0, 0, 0, 0.14); + border: 1px solid; width: 100%; display: flex; diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js new file mode 100644 index 00000000..f979e7ab --- /dev/null +++ b/src/components/settings/settings.js @@ -0,0 +1,9 @@ +import StyleSwitcher from '../style_switcher/style_switcher.vue' + +const settings = { + components: { + StyleSwitcher + } +} + +export default settings diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue new file mode 100644 index 00000000..8bb0ffb1 --- /dev/null +++ b/src/components/settings/settings.vue @@ -0,0 +1,22 @@ +<template> + <div class="settings panel panel-default base00-background"> + <div class="panel-heading base01-background base04"> + Settings + </div> + <div class="panel-body"> + <div class="setting-item"> + <h2>Theme</h2> + <style-switcher></style-switcher> + </div> + </div> + </div> +</template> + +<script src="./settings.js"> +</script> + +<style> + .setting-item { + margin: 1em + } +</style> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 954e2ff0..d265572d 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,8 +1,10 @@ export default { - data: () => ({ - availableStyles: [], - selected: false - }), + data () { + return { + availableStyles: [], + selected: this.$store.state.config.theme + } + }, created () { const self = this window.fetch('/static/css/themes.json') diff --git a/src/main.js b/src/main.js index 17aeb863..c11217d4 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,7 @@ import FriendsTimeline from './components/friends_timeline/friends_timeline.vue' import ConversationPage from './components/conversation-page/conversation-page.vue' import Mentions from './components/mentions/mentions.vue' import UserProfile from './components/user_profile/user_profile.vue' +import Settings from './components/settings/settings.vue' import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' @@ -43,13 +44,14 @@ const store = new Vuex.Store({ }) const routes = [ - { path: '/', redirect: '/main/all' }, + { name: 'root', path: '/', redirect: '/main/all' }, { path: '/main/all', component: PublicAndExternalTimeline }, { path: '/main/public', component: PublicTimeline }, { path: '/main/friends', component: FriendsTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage }, { name: 'user-profile', path: '/users/:id', component: UserProfile }, - { name: 'mentions', path: '/:username/mentions', component: Mentions } + { name: 'mentions', path: '/:username/mentions', component: Mentions }, + { name: 'settings', path: '/settings', component: Settings } ] const router = new VueRouter({ |