AkkomaGang/akkoma-fe
4
13
Fork 56
Code Issues 74 Pull requests 14 Projects Releases 1 Wiki Activity

Merge branch 'settings-and-filtering' into 'develop'

Browse source 
Settings rearrange and filtering improvements

See merge request pleroma/pleroma-fe!1394
This commit is contained in:
HJ 2022-01-24 18:18:27 +00:00
parent 182fcca5da f7e2ac1c48
commit 3cf7f9e3c8
10 changed files with 272 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/notification/notification.scss
View file

@ -2,7 +2,12 @@
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
--emoji-size: 14px; border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
--emoji-size: 14px;
&.-muted { &.-muted {
padding: 0.25em 0.6em; padding: 0.25em 0.6em;

1
src/components/notification/notification.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<Status <Status
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
class="Notification"
:compact="true" :compact="true"
:statusoid="notification.status" :statusoid="notification.status"
/> />

5
src/components/notifications/notifications.scss
View file

@ -37,11 +37,6 @@
.notification { .notification {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
&:hover .animated.Avatar { &:hover .animated.Avatar {
canvas { canvas {

195
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -1,73 +1,138 @@
<template> <template>
<div :label="$t('settings.filtering')"> <div :label="$t('settings.filtering')">
<div class="setting-item"> <div class="setting-item">
<div class="select-multiple"> <h2>{{ $t('settings.posts') }}</h2>
<span class="label">{{ $t('settings.notification_visibility') }}</span> <ul class="setting-list">
<ul class="option-list"> <li>
<li> <BooleanSetting path="hideFilteredStatuses">
<BooleanSetting path="notificationVisibility.likes"> {{ $t('settings.hide_filtered_statuses') }}
{{ $t('settings.notification_visibility_likes') }} </BooleanSetting>
</BooleanSetting> <ul
</li> class="setting-list suboptions"
<li> :class="[{disabled: !streaming}]"
<BooleanSetting path="notificationVisibility.repeats"> >
{{ $t('settings.notification_visibility_repeats') }} <li>
</BooleanSetting> <BooleanSetting
</li> :disabled="hideFilteredStatuses"
<li> path="hideWordFilteredPosts"
<BooleanSetting path="notificationVisibility.follows"> >
{{ $t('settings.notification_visibility_follows') }} {{ $t('settings.hide_wordfiltered_statuses') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting path="notificationVisibility.mentions"> <BooleanSetting
{{ $t('settings.notification_visibility_mentions') }} :disabled="hideFilteredStatuses"
</BooleanSetting> path="hideMutedThreads"
</li> >
<li> {{ $t('settings.hide_muted_threads') }}
<BooleanSetting path="notificationVisibility.moves"> </BooleanSetting>
{{ $t('settings.notification_visibility_moves') }} </li>
</BooleanSetting> <li>
</li> <BooleanSetting
<li> :disabled="hideFilteredStatuses"
<BooleanSetting path="notificationVisibility.emojiReactions"> path="hideMutedPosts"
{{ $t('settings.notification_visibility_emoji_reactions') }} >
</BooleanSetting> {{ $t('settings.hide_muted_posts') }}
</li> </BooleanSetting>
</ul> </li>
</div> </ul>
<ChoiceSetting </li>
id="replyVisibility" <li>
path="replyVisibility" <BooleanSetting path="hidePostStats">
:options="replyVisibilityOptions" {{ $t('settings.hide_post_stats') }}
> </BooleanSetting>
{{ $t('settings.replies_in_timeline') }} </li>
</ChoiceSetting> <ChoiceSetting
<div> id="replyVisibility"
<BooleanSetting path="hidePostStats"> path="replyVisibility"
{{ $t('settings.hide_post_stats') }} :options="replyVisibilityOptions"
</BooleanSetting> >
</div> {{ $t('settings.replies_in_timeline') }}
<div> </ChoiceSetting>
<BooleanSetting path="hideUserStats"> <li>
{{ $t('settings.hide_user_stats') }} <h3>{{ $t('settings.wordfilter') }}</h3>
</BooleanSetting> <textarea
</div> id="muteWords"
v-model="muteWordsString"
class="resize-height"
/>
<div>{{ $t('settings.filtering_explanation') }}</div>
</li>
<h3>{{ $t('settings.attachments') }}</h3>
<li>
<label for="maxThumbnails">
{{ $t('settings.max_thumbnails') }}
</label>
<input
id="maxThumbnails"
path.number="maxThumbnails"
class="number-input"
type="number"
min="0"
step="1"
>
</li>
<li>
<BooleanSetting path="hideAttachments">
{{ $t('settings.hide_attachments_in_tl') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="hideAttachmentsInConv">
{{ $t('settings.hide_attachments_in_convo') }}
</BooleanSetting>
</li>
</ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<div> <h2>{{ $t('settings.user_profiles') }}</h2>
<p>{{ $t('settings.filtering_explanation') }}</p> <ul class="setting-list">
<textarea <li>
id="muteWords" <BooleanSetting path="hideUserStats">
v-model="muteWordsString" {{ $t('settings.hide_user_stats') }}
class="resize-height" </BooleanSetting>
/> </li>
</div> </ul>
<div> </div>
<BooleanSetting path="hideFilteredStatuses"> <div class="setting-item">
{{ $t('settings.hide_filtered_statuses') }} <h2>{{ $t('settings.notifications') }}</h2>
</BooleanSetting> <ul class="setting-list">
</div> <li class="select-multiple">
<span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list">
<li>
<BooleanSetting path="notificationVisibility.likes">
{{ $t('settings.notification_visibility_likes') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="notificationVisibility.repeats">
{{ $t('settings.notification_visibility_repeats') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="notificationVisibility.follows">
{{ $t('settings.notification_visibility_follows') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="notificationVisibility.mentions">
{{ $t('settings.notification_visibility_mentions') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="notificationVisibility.moves">
{{ $t('settings.notification_visibility_moves') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="notificationVisibility.emojiReactions">
{{ $t('settings.notification_visibility_emoji_reactions') }}
</BooleanSetting>
</li>
</ul>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>

209
src/components/settings_modal/tabs/general_tab.vue
View file

@ -21,24 +21,9 @@
{{ $t('settings.hide_wallpaper') }} {{ $t('settings.hide_wallpaper') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li v-if="instanceShoutboxPresent">
<BooleanSetting path="hideShoutbox">
{{ $t('settings.hide_shoutbox') }}
</BooleanSetting>
</li>
</ul>
</div>
<div class="setting-item">
<h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list">
<li> <li>
<BooleanSetting path="hideMutedPosts"> <BooleanSetting path="stopGifs">
{{ $t('settings.hide_muted_posts') }} {{ $t('settings.stop_gifs') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
@ -68,14 +53,98 @@
</small> </small>
</BooleanSetting> </BooleanSetting>
</li> </li>
<li>
<BooleanSetting path="virtualScrolling">
{{ $t('settings.virtual_scrolling') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="autohideFloatingPostButton">
{{ $t('settings.autohide_floating_post_button') }}
</BooleanSetting>
</li>
<li v-if="instanceShoutboxPresent">
<BooleanSetting path="hideShoutbox">
{{ $t('settings.hide_shoutbox') }}
</BooleanSetting>
</li>
</ul>
</div>
<div class="setting-item">
<h2>{{ $t('settings.post_look_feel') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }}
</BooleanSetting>
</li>
<li> <li>
<BooleanSetting path="emojiReactionsOnTimeline"> <BooleanSetting path="emojiReactionsOnTimeline">
{{ $t('settings.emoji_reactions_on_timeline') }} {{ $t('settings.emoji_reactions_on_timeline') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<h3>{{ $t('settings.attachments') }}</h3>
<li> <li>
<BooleanSetting path="virtualScrolling"> <BooleanSetting path="useContainFit">
{{ $t('settings.virtual_scrolling') }} {{ $t('settings.use_contain_fit') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="hideNsfw">
{{ $t('settings.nsfw_clickthrough') }}
</BooleanSetting>
</li>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="preloadImage"
:disabled="!hideNsfw"
>
{{ $t('settings.preload_images') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="useOneClickNsfw"
:disabled="!hideNsfw"
>
{{ $t('settings.use_one_click_nsfw') }}
</BooleanSetting>
</li>
</ul>
<li>
<BooleanSetting path="loopVideo">
{{ $t('settings.loop_video') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li>
<BooleanSetting
path="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable"
>
{{ $t('settings.loop_video_silent_only') }}
</BooleanSetting>
<div
v-if="!loopSilentAvailable"
class="unavailable"
>
<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
</div>
</li>
</ul>
</li>
<li>
<BooleanSetting path="playVideosInModal">
{{ $t('settings.play_videos_in_modal') }}
</BooleanSetting>
</li>
<h3>{{ $t('settings.fun') }}</h3>
<li>
<BooleanSetting path="greentext">
{{ $t('settings.greentext') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
</ul> </ul>
@ -140,97 +209,6 @@
</ul> </ul>
</div> </div>
<div class="setting-item">
<h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="hideAttachments">
{{ $t('settings.hide_attachments_in_tl') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="hideAttachmentsInConv">
{{ $t('settings.hide_attachments_in_convo') }}
</BooleanSetting>
</li>
<li>
<label for="maxThumbnails">
{{ $t('settings.max_thumbnails') }}
</label>
<input
id="maxThumbnails"
path.number="maxThumbnails"
class="number-input"
type="number"
min="0"
step="1"
>
</li>
<li>
<BooleanSetting path="hideNsfw">
{{ $t('settings.nsfw_clickthrough') }}
</BooleanSetting>
</li>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="preloadImage"
:disabled="!hideNsfw"
>
{{ $t('settings.preload_images') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="useOneClickNsfw"
:disabled="!hideNsfw"
>
{{ $t('settings.use_one_click_nsfw') }}
</BooleanSetting>
</li>
</ul>
<li>
<BooleanSetting path="stopGifs">
{{ $t('settings.stop_gifs') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="loopVideo">
{{ $t('settings.loop_video') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li>
<BooleanSetting
path="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable"
>
{{ $t('settings.loop_video_silent_only') }}
</BooleanSetting>
<div
v-if="!loopSilentAvailable"
class="unavailable"
>
<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
</div>
</li>
</ul>
</li>
<li>
<BooleanSetting path="playVideosInModal">
{{ $t('settings.play_videos_in_modal') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="useContainFit">
{{ $t('settings.use_contain_fit') }}
</BooleanSetting>
</li>
</ul>
</div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.notifications') }}</h2> <h2>{{ $t('settings.notifications') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
@ -241,17 +219,6 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-item">
<h2>{{ $t('settings.fun') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="greentext">
{{ $t('settings.greentext') }}
</BooleanSetting>
</li>
</ul>
</div>
</div> </div>
</template> </template>

44
src/components/status/status.js
View file

@ -186,26 +186,32 @@ const Status = {
return this.mentionsLine.length > 0 return this.mentionsLine.length > 0
}, },
muted () { muted () {
if (this.statusoid.user.id === this.currentUser.id) return false
const reasonsToMute = this.userIsMuted ||
// Thread is muted
status.thread_muted ||
// Wordfiltered
this.muteWordHits.length > 0
return !this.unmuted && !this.shouldNotMute && reasonsToMute
},
userIsMuted () {
if (this.statusoid.user.id === this.currentUser.id) return false if (this.statusoid.user.id === this.currentUser.id) return false
const { status } = this const { status } = this
const { reblog } = status const { reblog } = status
const relationship = this.$store.getters.relationship(status.user.id) const relationship = this.$store.getters.relationship(status.user.id)
const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id) const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
const reasonsToMute = ( return status.muted ||
// Post is muted according to BE
status.muted ||
// Reprööt of a muted post according to BE // Reprööt of a muted post according to BE
(reblog && reblog.muted) || (reblog && reblog.muted) ||
// Muted user // Muted user
relationship.muting || relationship.muting ||
// Muted user of a reprööt // Muted user of a reprööt
(relationshipReblog && relationshipReblog.muting) || (relationshipReblog && relationshipReblog.muting)
// Thread is muted },
status.thread_muted || shouldNotMute () {
// Wordfiltered const { status } = this
this.muteWordHits.length > 0 const { reblog } = status
) return (
const excusesNotToMute = (
( (
this.inProfile && ( this.inProfile && (
// Don't mute user's posts on user timeline (except reblogs) // Don't mute user's posts on user timeline (except reblogs)
@ -218,14 +224,26 @@ const Status = {
(this.inConversation && status.thread_muted) (this.inConversation && status.thread_muted)
// No excuses if post has muted words // No excuses if post has muted words
) && !this.muteWordHits.length > 0 ) && !this.muteWordHits.length > 0
},
return !this.unmuted && !excusesNotToMute && reasonsToMute hideMutedUsers () {
return this.mergedConfig.hideMutedPosts
},
hideMutedThreads () {
return this.mergedConfig.hideMutedThreads
}, },
hideFilteredStatuses () { hideFilteredStatuses () {
return this.mergedConfig.hideFilteredStatuses return this.mergedConfig.hideFilteredStatuses
}, },
hideWordFilteredPosts () {
return this.mergedConfig.hideWordFilteredPosts
},
hideStatus () { hideStatus () {
return (this.muted && this.hideFilteredStatuses) || this.virtualHidden return (this.virtualHidden || !this.shouldNotMute) && (
(this.muted && this.hideFilteredStatuses) ||
(this.userIsMuted && this.hideMutedUsers) ||
(this.status.thread_muted && this.hideMutedThreads) ||
(this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
)
}, },
isFocused () { isFocused () {
// retweet or root of an expanded conversation // retweet or root of an expanded conversation

3
src/components/timeline/timeline_quick_settings.js
View file

@ -48,10 +48,9 @@ const TimelineQuickSettings = {
} }
}, },
hideMutedPosts: { hideMutedPosts: {
get () { return this.mergedConfig.hideMutedPosts || this.mergedConfig.hideFilteredStatuses }, get () { return this.mergedConfig.hideFilteredStatuses },
set () { set () {
const value = !this.hideMutedPosts const value = !this.hideMutedPosts
this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value }) this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
} }
} }

16
src/i18n/en.json
View file

@ -262,8 +262,7 @@
"security": "Security", "security": "Security",
"setting_changed": "Setting is different from default", "setting_changed": "Setting is different from default",
"enter_current_password_to_confirm": "Enter your current password to confirm your identity", "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
"mentions_new_style": "Fancier mention links", "post_look_feel": "Posts Look & Feel",
"mentions_new_place": "Put mentions on a separate line",
"mfa": { "mfa": {
"otp": "OTP", "otp": "OTP",
"setup_otp": "Setup OTP", "setup_otp": "Setup OTP",
@ -336,6 +335,7 @@
"emoji_reactions_on_timeline": "Show emoji reactions on timeline", "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
"export_theme": "Save preset", "export_theme": "Save preset",
"filtering": "Filtering", "filtering": "Filtering",
"wordfilter": "Wordfilter",
"filtering_explanation": "All statuses containing these words will be muted, one per line", "filtering_explanation": "All statuses containing these words will be muted, one per line",
"word_filter": "Word filter", "word_filter": "Word filter",
"follow_export": "Follow export", "follow_export": "Follow export",
@ -351,7 +351,7 @@
"hide_media_previews": "Hide media previews", "hide_media_previews": "Hide media previews",
"hide_muted_posts": "Hide posts of muted users", "hide_muted_posts": "Hide posts of muted users",
"hide_all_muted_posts": "Hide muted posts", "hide_all_muted_posts": "Hide muted posts",
"max_thumbnails": "Maximum amount of thumbnails per post", "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
"hide_isp": "Hide instance-specific panel", "hide_isp": "Hide instance-specific panel",
"hide_shoutbox": "Hide instance shoutbox", "hide_shoutbox": "Hide instance shoutbox",
"right_sidebar": "Show sidebar on the right side", "right_sidebar": "Show sidebar on the right side",
@ -361,7 +361,9 @@
"use_one_click_nsfw": "Open NSFW attachments with just one click", "use_one_click_nsfw": "Open NSFW attachments with just one click",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
"hide_user_stats": "Hide user statistics (e.g. the number of followers)", "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
"hide_filtered_statuses": "Hide filtered statuses", "hide_filtered_statuses": "Hide all filtered posts",
"hide_wordfiltered_statuses": "Hide word-filtered statuses",
"hide_muted_threads": "Hide muted threads",
"import_blocks_from_a_csv_file": "Import blocks from a csv file", "import_blocks_from_a_csv_file": "Import blocks from a csv file",
"import_followers_from_a_csv_file": "Import follows from a csv file", "import_followers_from_a_csv_file": "Import follows from a csv file",
"import_theme": "Load preset", "import_theme": "Load preset",
@ -402,6 +404,8 @@
"name_bio": "Name & bio", "name_bio": "Name & bio",
"new_email": "New email", "new_email": "New email",
"new_password": "New password", "new_password": "New password",
"posts": "Posts",
"user_profiles": "User Profiles",
"notification_visibility": "Types of notifications to show", "notification_visibility": "Types of notifications to show",
"notification_visibility_follows": "Follows", "notification_visibility_follows": "Follows",
"notification_visibility_likes": "Favorites", "notification_visibility_likes": "Favorites",
@ -418,7 +422,7 @@
"hide_followers_count_description": "Don't show follower count", "hide_followers_count_description": "Don't show follower count",
"show_admin_badge": "Show \"Admin\" badge in my profile", "show_admin_badge": "Show \"Admin\" badge in my profile",
"show_moderator_badge": "Show \"Moderator\" badge in my profile", "show_moderator_badge": "Show \"Moderator\" badge in my profile",
"nsfw_clickthrough": "Enable clickthrough attachment and link preview image hiding for NSFW statuses", "nsfw_clickthrough": "Hide sensitive/NSFW media",
"oauth_tokens": "OAuth tokens", "oauth_tokens": "OAuth tokens",
"token": "Token", "token": "Token",
"refresh_token": "Refresh token", "refresh_token": "Refresh token",
@ -462,7 +466,7 @@
"subject_line_noop": "Do not copy", "subject_line_noop": "Do not copy",
"post_status_content_type": "Post status content type", "post_status_content_type": "Post status content type",
"sensitive_by_default": "Mark posts as sensitive by default", "sensitive_by_default": "Mark posts as sensitive by default",
"stop_gifs": "Play-on-hover GIFs", "stop_gifs": "Pause animated images until you hover on them",
"streaming": "Enable automatic streaming of new posts when scrolled to the top", "streaming": "Enable automatic streaming of new posts when scrolled to the top",
"user_mutes": "Users", "user_mutes": "Users",
"useStreamingApi": "Receive posts and notifications real-time", "useStreamingApi": "Receive posts and notifications real-time",

2
src/modules/config.js
View file

@ -24,6 +24,8 @@ export const defaultState = {
hideShoutbox: false, hideShoutbox: false,
// bad name: actually hides posts of muted USERS // bad name: actually hides posts of muted USERS
hideMutedPosts: undefined, // instance default hideMutedPosts: undefined, // instance default
hideMutedThreads: undefined, // instance default
hideWordFilteredPosts: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default collapseMessageWithSubject: undefined, // instance default
padEmoji: true, padEmoji: true,
hideAttachments: false, hideAttachments: false,

3
src/modules/instance.js
View file

@ -21,7 +21,10 @@ const defaultState = {
collapseMessageWithSubject: false, collapseMessageWithSubject: false,
greentext: false, greentext: false,
hideFilteredStatuses: false, hideFilteredStatuses: false,
// bad name: actually hides posts of muted USERS
hideMutedPosts: false, hideMutedPosts: false,
hideMutedThreads: true,
hideWordFilteredPosts: false,
hidePostStats: false, hidePostStats: false,
hideSitename: false, hideSitename: false,
hideUserStats: false, hideUserStats: false,