Merge branch 'develop' into feature/hash-routed

This commit is contained in:
Roger Braun 2017-02-18 01:19:44 +01:00
commit 9d0d1f7de1
20 changed files with 92 additions and 33 deletions

View file

@ -1,15 +1,13 @@
import UserPanel from './components/user_panel/user_panel.vue' import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue' import Notifications from './components/notifications/notifications.vue'
import StyleSwitcher from './components/style_switcher/style_switcher.vue'
export default { export default {
name: 'app', name: 'app',
components: { components: {
UserPanel, UserPanel,
NavPanel, NavPanel,
Notifications, Notifications
StyleSwitcher
}, },
data: () => ({ data: () => ({
mobileActivePanel: 'timeline' mobileActivePanel: 'timeline'

View file

@ -59,6 +59,8 @@ nav {
height: 50px; height: 50px;
.inner-nav { .inner-nav {
padding-left: 20px;
padding-right: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-basis: 920px; flex-basis: 920px;
@ -260,3 +262,8 @@ nav {
display: flex; display: flex;
} }
} }
.item.right {
text-align: right;
padding-right: 20px;
}

View file

@ -3,9 +3,11 @@
<nav class='container base01-background base04'> <nav class='container base01-background base04'>
<div class='inner-nav' :style="logoStyle"> <div class='inner-nav' :style="logoStyle">
<div class='item'> <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> </div>
<style-switcher></style-switcher>
</div> </div>
</nav> </nav>
<div class="container" id="content"> <div class="container" id="content">

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="attachment"> <div class="attachment" :class="type">
<a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"></img> <img :key="nsfwImage" :src="nsfwImage"></img>
</a> </a>
@ -42,6 +42,10 @@
margin: 0.2em; margin: 0.2em;
align-self: flex-start; align-self: flex-start;
&.html {
flex-basis: 100%;
}
.hider { .hider {
position: absolute; position: absolute;
margin: 10px; margin: 10px;
@ -74,12 +78,11 @@
.oembed { .oembed {
img { img {
width: 100%; width: 100%;
height: 100%;
} }
} }
.oembed { .oembed {
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid;
width: 100%; width: 100%;
display: flex; display: flex;

View file

@ -0,0 +1,9 @@
import StyleSwitcher from '../style_switcher/style_switcher.vue'
const settings = {
components: {
StyleSwitcher
}
}
export default settings

View file

@ -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>

View file

@ -1,8 +1,10 @@
export default { export default {
data: () => ({ data () {
return {
availableStyles: [], availableStyles: [],
selected: false selected: this.$store.state.config.theme
}), }
},
created () { created () {
const self = this const self = this
window.fetch('/static/css/themes.json') window.fetch('/static/css/themes.json')

View file

@ -8,6 +8,7 @@ import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
import ConversationPage from './components/conversation-page/conversation-page.vue' import ConversationPage from './components/conversation-page/conversation-page.vue'
import Mentions from './components/mentions/mentions.vue' import Mentions from './components/mentions/mentions.vue'
import UserProfile from './components/user_profile/user_profile.vue' import UserProfile from './components/user_profile/user_profile.vue'
import Settings from './components/settings/settings.vue'
import statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
@ -43,13 +44,14 @@ const store = new Vuex.Store({
}) })
const routes = [ const routes = [
{ path: '/', redirect: '/main/all' }, { name: 'root', path: '/', redirect: '/main/all' },
{ path: '/main/all', component: PublicAndExternalTimeline }, { path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline }, { path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline }, { path: '/main/friends', component: FriendsTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage }, { name: 'conversation', path: '/notice/:id', component: ConversationPage },
{ name: 'user-profile', path: '/users/:id', component: UserProfile }, { 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({ const router = new VueRouter({

View file

@ -71,6 +71,12 @@
"css": "plus-squared", "css": "plus-squared",
"code": 59398, "code": 59398,
"src": "entypo" "src": "entypo"
},
{
"uid": "e99461abfef3923546da8d745372c995",
"css": "cog",
"code": 59399,
"src": "fontawesome"
} }
] ]
} }

View file

@ -6,6 +6,7 @@
.icon-retweet:before { content: '\e804'; } /* '' */ .icon-retweet:before { content: '\e804'; } /* '' */
.icon-eye-off:before { content: '\e805'; } /* '' */ .icon-eye-off:before { content: '\e805'; } /* '' */
.icon-plus-squared:before { content: '\e806'; } /* '' */ .icon-plus-squared:before { content: '\e806'; } /* '' */
.icon-cog:before { content: '\e807'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */ .icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */ .icon-spin4:before { content: '\e834'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */ .icon-reply:before { content: '\f112'; } /* '' */

File diff suppressed because one or more lines are too long

View file

@ -6,6 +6,7 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); } .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); } .icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); } .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); } .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); } .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); } .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -17,6 +17,7 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); } .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); } .icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); } .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); } .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); } .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); } .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -1,11 +1,11 @@
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.eot?69621097'); src: url('../font/fontello.eot?90538621');
src: url('../font/fontello.eot?69621097#iefix') format('embedded-opentype'), src: url('../font/fontello.eot?90538621#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?69621097') format('woff2'), url('../font/fontello.woff2?90538621') format('woff2'),
url('../font/fontello.woff?69621097') format('woff'), url('../font/fontello.woff?90538621') format('woff'),
url('../font/fontello.ttf?69621097') format('truetype'), url('../font/fontello.ttf?90538621') format('truetype'),
url('../font/fontello.svg?69621097#fontello') format('svg'); url('../font/fontello.svg?90538621#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.svg?69621097#fontello') format('svg'); src: url('../font/fontello.svg?90538621#fontello') format('svg');
} }
} }
*/ */
@ -62,6 +62,7 @@
.icon-retweet:before { content: '\e804'; } /* '' */ .icon-retweet:before { content: '\e804'; } /* '' */
.icon-eye-off:before { content: '\e805'; } /* '' */ .icon-eye-off:before { content: '\e805'; } /* '' */
.icon-plus-squared:before { content: '\e806'; } /* '' */ .icon-plus-squared:before { content: '\e806'; } /* '' */
.icon-cog:before { content: '\e807'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */ .icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */ .icon-spin4:before { content: '\e834'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */ .icon-reply:before { content: '\f112'; } /* '' */

View file

@ -229,11 +229,11 @@ body {
} }
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('./font/fontello.eot?5004941'); src: url('./font/fontello.eot?15442171');
src: url('./font/fontello.eot?5004941#iefix') format('embedded-opentype'), src: url('./font/fontello.eot?15442171#iefix') format('embedded-opentype'),
url('./font/fontello.woff?5004941') format('woff'), url('./font/fontello.woff?15442171') format('woff'),
url('./font/fontello.ttf?5004941') format('truetype'), url('./font/fontello.ttf?15442171') format('truetype'),
url('./font/fontello.svg?5004941#fontello') format('svg'); url('./font/fontello.svg?15442171#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -310,9 +310,10 @@ body {
<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div> <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
<div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe805;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div> <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe805;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div>
<div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-plus-squared">&#xe806;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe806</span></div> <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-plus-squared">&#xe806;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe806</span></div>
<div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div> <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-cog">&#xe807;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe807</span></div>
</div> </div>
<div class="row"> <div class="row">
<div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
<div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div> <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
<div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div> <div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
<div title="Code: 0xf1e5" class="the-icons span3"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div> <div title="Code: 0xf1e5" class="the-icons span3"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>

Binary file not shown.

View file

@ -20,6 +20,8 @@
<glyph glyph-name="plus-squared" unicode="&#xe806;" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-200 0 0 200-100 0 0-200-200 0 0-100 200 0 0-200 100 0 0 200 200 0z" horiz-adv-x="800" /> <glyph glyph-name="plus-squared" unicode="&#xe806;" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-200 0 0 200-100 0 0-200-200 0 0-100 200 0 0-200 100 0 0 200 200 0z" horiz-adv-x="800" />
<glyph glyph-name="cog" unicode="&#xe807;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" /> <glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
<glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" /> <glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.