Merge branch 'develop' into feature/hash-routed

This commit is contained in:
Roger Braun 2017-04-09 22:23:14 +02:00
commit 36655002d0
14 changed files with 110 additions and 40 deletions

View file

@ -26,7 +26,7 @@ const Attachment = {
autoHeight () { autoHeight () {
if (this.type === 'image' && this.nsfw) { if (this.type === 'image' && this.nsfw) {
return { return {
'min-height': '311px' 'min-height': '109px'
} }
} }
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="attachment" :class="{[type]: true, loading}" :style="autoHeight"> <div class="attachment base03-border" :class="{[type]: true, loading}" :style="autoHeight">
<a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"/> <img :key="nsfwImage" :src="nsfwImage"/>
</a> </a>
@ -8,7 +8,7 @@
</div> </div>
<a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank"> <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
<img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/> <img class="base03-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
</a> </a>
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video> <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@ -76,19 +76,18 @@
border-radius: 5px; border-radius: 5px;
} }
.oembed { .oembed {
border: 1px solid;
border-radius: 5px;
border-color: inherit;
width: 100%;
margin-right: 15px;
display: flex;
img { img {
width: 100%; width: 100%;
} }
margin-right: 15px;
}
.oembed {
border: 1px solid;
width: 100%;
display: flex;
.image { .image {
flex: 1; flex: 1;
img { img {
@ -117,8 +116,10 @@
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 5px; border-radius: 5px;
object-fit: contain;
width: 100%; width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */ height: 100%; /* If this isn't here, chrome will stretch the images */
max-height: 500px;
} }
} }
} }

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04"> <div class="panel-heading base01-background base04 base03-border conversation-heading">
Conversation Conversation
<span v-if="collapsable" style="float:right;"> <span v-if="collapsable" style="float:right;">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small> <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
@ -15,3 +15,10 @@
</template> </template>
<script src="./conversation.js"></script> <script src="./conversation.js"></script>
<style lang="scss">
.conversation-heading {
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>

View file

@ -1,24 +1,24 @@
<template> <template>
<div class="nav-panel"> <div class="nav-panel">
<div class="panel panel-default base02-background"> <div class="panel panel-default base01-background">
<ul class="base03-border"> <ul class="base03-border">
<li v-if='currentUser'> <li v-if='currentUser'>
<router-link class="base01-background" to='/main/friends'> <router-link class="base00-background" to='/main/friends'>
Timeline Timeline
</router-link> </router-link>
</li> </li>
<li v-if='currentUser'> <li v-if='currentUser'>
<router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
Mentions Mentions
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="base01-background" to='/main/public'> <router-link class="base00-background" to='/main/public'>
Public Timeline Public Timeline
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link class="base01-background" to='/main/all'> <router-link class="base00-background" to='/main/all'>
The Whole Known Network The Whole Known Network
</router-link> </router-link>
</li> </li>

View file

@ -8,8 +8,9 @@
position: relative; position: relative;
.read-button { .read-button {
position: absolute; position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em;
right: 0.7em; right: 0.7em;
height: 1.8em;
line-height: 100%;
} }
} }

View file

@ -1,11 +1,13 @@
import StyleSwitcher from '../style_switcher/style_switcher.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue'
import { filter, trim } from 'lodash'
const settings = { const settings = {
data () { data () {
return { return {
hideAttachmentsLocal: this.$store.state.config.hideAttachments, hideAttachmentsLocal: this.$store.state.config.hideAttachments,
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
hideNsfwLocal: this.$store.state.config.hideNsfw hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n')
} }
}, },
components: { components: {
@ -20,6 +22,10 @@ const settings = {
}, },
hideNsfwLocal (value) { hideNsfwLocal (value) {
this.$store.dispatch('setOption', { name: 'hideNsfw', value }) this.$store.dispatch('setOption', { name: 'hideNsfw', value })
},
muteWordsString (value) {
value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value })
} }
} }
} }

View file

@ -8,6 +8,11 @@
<h2>Theme</h2> <h2>Theme</h2>
<style-switcher></style-switcher> <style-switcher></style-switcher>
</div> </div>
<div class="setting-item">
<h2>Filtering</h2>
<p>All notices containing these words will be muted, one per line</p>
<textarea id="muteWords" v-model="muteWordsString"></textarea>
</div>
<div class="setting-item"> <div class="setting-item">
<h2>Attachments</h2> <h2>Attachments</h2>
<ul class="setting-list"> <ul class="setting-list">
@ -32,9 +37,13 @@
<script src="./settings.js"> <script src="./settings.js">
</script> </script>
<style> <style lang="scss">
.setting-item { .setting-item {
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
textarea {
width: 100%;
height: 100px;
}
} }
.setting-list { .setting-list {
list-style-type: none; list-style-type: none;

View file

@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue' import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCardContent from '../user_card_content/user_card_content.vue'
import { filter } from 'lodash'
const Status = { const Status = {
props: [ props: [
@ -19,6 +20,9 @@ const Status = {
userExpanded: false userExpanded: false
}), }),
computed: { computed: {
muteWords () {
return this.$store.state.config.muteWords
},
hideAttachments () { hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) || return (this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation) (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@ -35,7 +39,15 @@ const Status = {
loggedIn () { loggedIn () {
return !!this.$store.state.users.currentUser return !!this.$store.state.users.currentUser
}, },
muted () { return !this.unmuted && this.status.user.muted }, muteWordHits () {
const statusText = this.status.text.toLowerCase()
const hits = filter(this.muteWords, (muteWord) => {
return statusText.includes(muteWord.toLowerCase())
})
return hits
},
muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
isReply () { return !!this.status.in_reply_to_status_id }, isReply () { return !!this.status.in_reply_to_status_id },
borderColor () { borderColor () {
return { return {

View file

@ -3,6 +3,7 @@
<template v-if="muted"> <template v-if="muted">
<div class="media status container muted"> <div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
</div> </div>
</template> </template>
@ -52,10 +53,10 @@
<small> <small>
<a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a> <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
</small> </small>
<small v-if="status.user.muted">
<a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
</small>
</template> </template>
<small v-if="unmuted">
<a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
</small>
<small v-if="!status.is_local" class="source_url"> <small v-if="!status.is_local" class="source_url">
<a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a> <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
</small> </small>
@ -162,8 +163,15 @@
border-left: 4px rgba(255, 48, 16, 0.65); border-left: 4px rgba(255, 48, 16, 0.65);
border-left-style: inherit; border-left-style: inherit;
} }
.muted button { .muted {
margin-left: auto; padding: 0.1em 0.7em 0.1em 0.8em;
button {
margin-left: auto;
}
.muteWords {
margin-left: 10px;
}
} }
a.unmute { a.unmute {

View file

@ -43,8 +43,10 @@
.loadmore-button { .loadmore-button {
position: absolute; position: absolute;
right: 0.6em; right: 0.6em;
padding: 0.1em 0.3em 0.25em 0.3em;
min-width: 6em; min-width: 6em;
height: 1.8em;
line-height: 100%;
} }
.error { .error {
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);

View file

@ -40,7 +40,7 @@
<div class="user-counts"> <div class="user-counts">
<div class="user-count"> <div class="user-count">
<h5>Statuses</h5> <h5>Statuses</h5>
<span>{{user.statuses_count}}</span> <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
</div> </div>
<div class="user-count"> <div class="user-count">
<h5>Following</h5> <h5>Following</h5>
@ -77,6 +77,11 @@
}, },
loggedIn () { loggedIn () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
},
dailyAvg () {
return Math.round(
this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
)
} }
}, },
methods: { methods: {
@ -217,4 +222,9 @@
margin: 0 0 0.25em; margin: 0 0 0.25em;
} }
} }
.dailyAvg {
font-size: 0.8em;
opacity: 0.5;
}
</style> </style>

View file

@ -3,6 +3,8 @@ import objectPath from 'object-path'
import localforage from 'localforage' import localforage from 'localforage'
import { throttle, each } from 'lodash' import { throttle, each } from 'lodash'
let loaded = false
const defaultReducer = (state, paths) => ( const defaultReducer = (state, paths) => (
paths.length === 0 ? state : paths.reduce((substate, path) => { paths.length === 0 ? state : paths.reduce((substate, path) => {
objectPath.set(substate, path, objectPath.get(state, path)) objectPath.set(substate, path, objectPath.get(state, path))
@ -15,7 +17,11 @@ const defaultStorage = (() => {
})() })()
const defaultSetState = (key, state, storage) => { const defaultSetState = (key, state, storage) => {
return storage.setItem(key, state) if (!loaded) {
console.log('waiting for old state to be loaded...')
} else {
return storage.setItem(key, state)
}
} }
export default function createPersistedState ({ export default function createPersistedState ({
@ -32,17 +38,23 @@ export default function createPersistedState ({
} = {}) { } = {}) {
return store => { return store => {
getState(key, storage).then((savedState) => { getState(key, storage).then((savedState) => {
if (typeof savedState === 'object') { try {
// build user cache if (typeof savedState === 'object') {
const usersState = savedState.users || {} // build user cache
usersState.usersObject = {} const usersState = savedState.users || {}
const users = usersState.users || [] usersState.usersObject = {}
each(users, (user) => { usersState.usersObject[user.id] = user }) const users = usersState.users || []
savedState.users = usersState each(users, (user) => { usersState.usersObject[user.id] = user })
savedState.users = usersState
store.replaceState( store.replaceState(
merge({}, store.state, savedState) merge({}, store.state, savedState)
) )
}
loaded = true
} catch (e) {
console.log("Couldn't load state")
loaded = true
} }
}) })

View file

@ -33,6 +33,7 @@ const persistedStateOptions = {
'config.hideAttachments', 'config.hideAttachments',
'config.hideAttachmentsInConv', 'config.hideAttachmentsInConv',
'config.hideNsfw', 'config.hideNsfw',
'config.muteWords',
'statuses.notifications', 'statuses.notifications',
'users.users' 'users.users'
] ]

View file

@ -6,7 +6,8 @@ const defaultState = {
colors: {}, colors: {},
hideAttachments: false, hideAttachments: false,
hideAttachmentsInConv: false, hideAttachmentsInConv: false,
hideNsfw: true hideNsfw: true,
muteWords: []
} }
const config = { const config = {