forked from AkkomaGang/akkoma-fe
Merge branch 'develop' into feature/hash-routed
This commit is contained in:
Roger Braun
commit
36655002d0
14 changed files with 110 additions and 40 deletions
|
|
@ -26,7 +26,7 @@ const Attachment = {
|
|||
autoHeight () {
|
||||
if (this.type === 'image' && this.nsfw) {
|
||||
return {
|
||||
'min-height': '311px'
|
||||
'min-height': '109px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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()">
|
||||
<img :key="nsfwImage" :src="nsfwImage"/>
|
||||
</a>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
|
||||
|
|
@ -76,19 +76,18 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.oembed {
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
border-color: inherit;
|
||||
width: 100%;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.oembed {
|
||||
border: 1px solid;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
.image {
|
||||
flex: 1;
|
||||
img {
|
||||
|
|
@ -117,8 +116,10 @@
|
|||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 5px;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%; /* If this isn't here, chrome will stretch the images */
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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
|
||||
<span v-if="collapsable" style="float:right;">
|
||||
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
|
||||
|
|
@ -15,3 +15,10 @@
|
|||
</template>
|
||||
|
||||
<script src="./conversation.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.conversation-heading {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<div class="nav-panel">
|
||||
<div class="panel panel-default base02-background">
|
||||
<div class="panel panel-default base01-background">
|
||||
<ul class="base03-border">
|
||||
<li v-if='currentUser'>
|
||||
<router-link class="base01-background" to='/main/friends'>
|
||||
<router-link class="base00-background" to='/main/friends'>
|
||||
Timeline
|
||||
</router-link>
|
||||
</li>
|
||||
<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
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="base01-background" to='/main/public'>
|
||||
<router-link class="base00-background" to='/main/public'>
|
||||
Public Timeline
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="base01-background" to='/main/all'>
|
||||
<router-link class="base00-background" to='/main/all'>
|
||||
The Whole Known Network
|
||||
</router-link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@
|
|||
position: relative;
|
||||
.read-button {
|
||||
position: absolute;
|
||||
padding: 0.1em 0.3em 0.25em 0.3em;
|
||||
right: 0.7em;
|
||||
height: 1.8em;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import StyleSwitcher from '../style_switcher/style_switcher.vue'
|
||||
import { filter, trim } from 'lodash'
|
||||
|
||||
const settings = {
|
||||
data () {
|
||||
return {
|
||||
hideAttachmentsLocal: this.$store.state.config.hideAttachments,
|
||||
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: {
|
||||
|
|
@ -20,6 +22,10 @@ const settings = {
|
|||
},
|
||||
hideNsfwLocal (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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@
|
|||
<h2>Theme</h2>
|
||||
<style-switcher></style-switcher>
|
||||
</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">
|
||||
<h2>Attachments</h2>
|
||||
<ul class="setting-list">
|
||||
|
|
@ -32,9 +37,13 @@
|
|||
<script src="./settings.js">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.setting-item {
|
||||
margin: 1em 1em 1.4em;
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.setting-list {
|
||||
list-style-type: none;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
|
|||
import DeleteButton from '../delete_button/delete_button.vue'
|
||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||
import { filter } from 'lodash'
|
||||
|
||||
const Status = {
|
||||
props: [
|
||||
|
|
@ -19,6 +20,9 @@ const Status = {
|
|||
userExpanded: false
|
||||
}),
|
||||
computed: {
|
||||
muteWords () {
|
||||
return this.$store.state.config.muteWords
|
||||
},
|
||||
hideAttachments () {
|
||||
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
|
||||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
|
||||
|
|
@ -35,7 +39,15 @@ const Status = {
|
|||
loggedIn () {
|
||||
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 },
|
||||
borderColor () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<template v-if="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 class="muteWords">{{muteWordHits.join(', ')}}</small>
|
||||
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -52,10 +53,10 @@
|
|||
<small>
|
||||
<a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
|
||||
</small>
|
||||
<small v-if="status.user.muted">
|
||||
</template>
|
||||
<small v-if="unmuted">
|
||||
<a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
|
||||
</small>
|
||||
</template>
|
||||
<small v-if="!status.is_local" class="source_url">
|
||||
<a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
|
||||
</small>
|
||||
|
|
@ -162,10 +163,17 @@
|
|||
border-left: 4px rgba(255, 48, 16, 0.65);
|
||||
border-left-style: inherit;
|
||||
}
|
||||
.muted button {
|
||||
.muted {
|
||||
padding: 0.1em 0.7em 0.1em 0.8em;
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.muteWords {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a.unmute {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -43,8 +43,10 @@
|
|||
.loadmore-button {
|
||||
position: absolute;
|
||||
right: 0.6em;
|
||||
padding: 0.1em 0.3em 0.25em 0.3em;
|
||||
|
||||
min-width: 6em;
|
||||
height: 1.8em;
|
||||
line-height: 100%;
|
||||
}
|
||||
.error {
|
||||
background-color: rgba(255, 48, 16, 0.65);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="user-counts">
|
||||
<div class="user-count">
|
||||
<h5>Statuses</h5>
|
||||
<span>{{user.statuses_count}}</span>
|
||||
<span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
|
||||
</div>
|
||||
<div class="user-count">
|
||||
<h5>Following</h5>
|
||||
|
|
@ -77,6 +77,11 @@
|
|||
},
|
||||
loggedIn () {
|
||||
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: {
|
||||
|
|
@ -217,4 +222,9 @@
|
|||
margin: 0 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.dailyAvg {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import objectPath from 'object-path'
|
|||
import localforage from 'localforage'
|
||||
import { throttle, each } from 'lodash'
|
||||
|
||||
let loaded = false
|
||||
|
||||
const defaultReducer = (state, paths) => (
|
||||
paths.length === 0 ? state : paths.reduce((substate, path) => {
|
||||
objectPath.set(substate, path, objectPath.get(state, path))
|
||||
|
|
@ -15,8 +17,12 @@ const defaultStorage = (() => {
|
|||
})()
|
||||
|
||||
const defaultSetState = (key, state, storage) => {
|
||||
if (!loaded) {
|
||||
console.log('waiting for old state to be loaded...')
|
||||
} else {
|
||||
return storage.setItem(key, state)
|
||||
}
|
||||
}
|
||||
|
||||
export default function createPersistedState ({
|
||||
key = 'vuex-lz',
|
||||
|
|
@ -32,6 +38,7 @@ export default function createPersistedState ({
|
|||
} = {}) {
|
||||
return store => {
|
||||
getState(key, storage).then((savedState) => {
|
||||
try {
|
||||
if (typeof savedState === 'object') {
|
||||
// build user cache
|
||||
const usersState = savedState.users || {}
|
||||
|
|
@ -44,6 +51,11 @@ export default function createPersistedState ({
|
|||
merge({}, store.state, savedState)
|
||||
)
|
||||
}
|
||||
loaded = true
|
||||
} catch (e) {
|
||||
console.log("Couldn't load state")
|
||||
loaded = true
|
||||
}
|
||||
})
|
||||
|
||||
subscriber(store)((mutation, state) => {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const persistedStateOptions = {
|
|||
'config.hideAttachments',
|
||||
'config.hideAttachmentsInConv',
|
||||
'config.hideNsfw',
|
||||
'config.muteWords',
|
||||
'statuses.notifications',
|
||||
'users.users'
|
||||
]
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ const defaultState = {
|
|||
colors: {},
|
||||
hideAttachments: false,
|
||||
hideAttachmentsInConv: false,
|
||||
hideNsfw: true
|
||||
hideNsfw: true,
|
||||
muteWords: []
|
||||
}
|
||||
|
||||
const config = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue