aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/attachment/attachment.js2
-rw-r--r--src/components/attachment/attachment.vue21
-rw-r--r--src/components/conversation/conversation.vue9
-rw-r--r--src/components/nav_panel/nav_panel.vue10
-rw-r--r--src/components/notifications/notifications.scss3
-rw-r--r--src/components/settings/settings.js8
-rw-r--r--src/components/settings/settings.vue11
-rw-r--r--src/components/status/status.js14
-rw-r--r--src/components/status/status.vue18
-rw-r--r--src/components/timeline/timeline.vue4
-rw-r--r--src/components/user_card_content/user_card_content.vue12
-rw-r--r--src/lib/persisted_state.js34
-rw-r--r--src/main.js1
-rw-r--r--src/modules/config.js3
14 files changed, 110 insertions, 40 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 7715add5..ccf26b79 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -26,7 +26,7 @@ const Attachment = {
autoHeight () {
if (this.type === 'image' && this.nsfw) {
return {
- 'min-height': '311px'
+ 'min-height': '109px'
}
}
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8f51b891..1ba1c02a 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -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;
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 331cce99..726cfb65 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -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>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index b62b4148..d4339778 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5cce7a73..9bc2a5ec 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -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%;
}
}
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 3d373283..4d0528b6 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -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 })
}
}
}
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 478d761a..33d46e7e 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -9,6 +9,11 @@
<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">
<li>
@@ -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;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 87fff879..bb026fe1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -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 {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 62a55505..b471888a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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">
- <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
- </small>
</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">
<a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
</small>
@@ -162,8 +163,15 @@
border-left: 4px rgba(255, 48, 16, 0.65);
border-left-style: inherit;
}
- .muted button {
- margin-left: auto;
+ .muted {
+ padding: 0.1em 0.7em 0.1em 0.8em;
+ button {
+ margin-left: auto;
+ }
+
+ .muteWords {
+ margin-left: 10px;
+ }
}
a.unmute {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 84defac7..08733f4f 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -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);
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 3fa34773..8c971d53 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -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>
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index a47ad7d5..02349e13 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -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,7 +17,11 @@ const defaultStorage = (() => {
})()
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 ({
@@ -32,17 +38,23 @@ export default function createPersistedState ({
} = {}) {
return store => {
getState(key, storage).then((savedState) => {
- if (typeof savedState === 'object') {
- // build user cache
- const usersState = savedState.users || {}
- usersState.usersObject = {}
- const users = usersState.users || []
- each(users, (user) => { usersState.usersObject[user.id] = user })
- savedState.users = usersState
+ try {
+ if (typeof savedState === 'object') {
+ // build user cache
+ const usersState = savedState.users || {}
+ usersState.usersObject = {}
+ const users = usersState.users || []
+ each(users, (user) => { usersState.usersObject[user.id] = user })
+ savedState.users = usersState
- store.replaceState(
- merge({}, store.state, savedState)
- )
+ store.replaceState(
+ merge({}, store.state, savedState)
+ )
+ }
+ loaded = true
+ } catch (e) {
+ console.log("Couldn't load state")
+ loaded = true
}
})
diff --git a/src/main.js b/src/main.js
index 105e8d88..79ead587 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,7 @@ const persistedStateOptions = {
'config.hideAttachments',
'config.hideAttachmentsInConv',
'config.hideNsfw',
+ 'config.muteWords',
'statuses.notifications',
'users.users'
]
diff --git a/src/modules/config.js b/src/modules/config.js
index 05b4ab3b..f59dc6f0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -6,7 +6,8 @@ const defaultState = {
colors: {},
hideAttachments: false,
hideAttachmentsInConv: false,
- hideNsfw: true
+ hideNsfw: true,
+ muteWords: []
}
const config = {
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-12 10:28:35 +0000