sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

made quick settings into their own component, added quick view settings,

Browse source 
added both to conversation view
This commit is contained in:
Henry Jameson 2022-08-01 23:20:27 +03:00
parent 3fc9673a7d
commit f4276f7241
9 changed files with 203 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/conversation/conversation.js
View file

@ -1,6 +1,8 @@
import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue'
import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -343,7 +345,9 @@ const conversation = {
},
components: {
Status,
ThreadTree
ThreadTree,
QuickFilterSettings,
QuickViewSettings
},
watch: {
statusId (newVal, oldVal) {

8
src/components/conversation/conversation.vue
View file

@ -17,6 +17,14 @@
>
{{ $t('timeline.collapse') }}
</button>
<QuickFilterSettings
v-if="!collapsable"
:conversation="true"
/>
<QuickViewSettings
v-if="!collapsable"
:conversation="true"
/>
</div>
<div class="conversation-body panel-body">
<div

7
src/components/timeline/timeline_quick_settings.js → src/components/quick_filter_settings/quick_filter_settings.js
View file

@ -9,7 +9,10 @@ library.add(
faWrench
)
const TimelineQuickSettings = {
const QuickFilterSettings = {
props: {
conversation: Boolean
},
components: {
Popover
},
@ -64,4 +67,4 @@ const TimelineQuickSettings = {
}
}
export default TimelineQuickSettings
export default QuickFilterSettings

18
src/components/timeline/timeline_quick_settings.vue → src/components/quick_filter_settings/quick_filter_settings.vue
View file

@ -1,13 +1,14 @@
<template>
<Popover
trigger="click"
class="TimelineQuickSettings"
class="QuickFilterSettings"
:bound-to="{ x: 'container' }"
>
<template #content>
<div class="dropdown-menu">
<div v-if="loggedIn">
<button
v-if="!conversation"
class="button-default dropdown-item"
@click="replyVisibilityAll = true"
>
@ -17,6 +18,7 @@
/>{{ $t('settings.reply_visibility_all') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
@click="replyVisibilityFollowing = true"
>
@ -26,6 +28,7 @@
/>{{ $t('settings.reply_visibility_following_short') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
@click="replyVisibilitySelf = true"
>
@ -35,6 +38,7 @@
/>{{ $t('settings.reply_visibility_self_short') }}
</button>
<div
v-if="!conversation"
role="separator"
class="dropdown-divider"
/>
@ -70,13 +74,7 @@
class="button-default dropdown-item dropdown-item-icon"
@click="openTab('filtering')"
>
<FAIcon icon="font" />{{ $t('settings.word_filter') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click="openTab('general')"
>
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
<FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
</button>
</div>
</template>
@ -88,11 +86,11 @@
</Popover>
</template>
<script src="./timeline_quick_settings.js"></script>
<script src="./quick_filter_settings.js"></script>
<style lang="scss">
.TimelineQuickSettings {
.QuickFilterSettings {
> button {
line-height: 100%;

69
src/components/quick_view_settings/quick_view_settings.js Normal file
View file

@ -0,0 +1,69 @@
import Popover from '../popover/popover.vue'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTableList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
library.add(
faTableList,
faFolderTree,
faBars,
faWrench
)
const QuickViewSettings = {
props: {
conversation: Boolean
},
components: {
Popover
},
methods: {
setConversationDisplay (visibility) {
this.$store.dispatch('setOption', { name: 'conversationDisplay', value: visibility })
this.$store.dispatch('queueFlushAll')
},
openTab (tab) {
this.$store.dispatch('openSettingsModalTab', tab)
}
},
computed: {
...mapGetters(['mergedConfig']),
loggedIn () {
return !!this.$store.state.users.currentUser
},
conversationDisplay: {
get () { return this.mergedConfig.conversationDisplay },
set (newVal) { this.setConversationDisplay(newVal) }
},
autoUpdate: {
get () { return this.mergedConfig.streaming },
set () {
const value = !this.autoUpdate
this.$store.dispatch('setOption', { name: 'streaming', value })
}
},
collapseWithSubjects: {
get () { return this.mergedConfig.collapseMessageWithSubject },
set () {
const value = !this.collapseWithSubjects
this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
}
},
showUserAvatars: {
get () { return this.mergedConfig.mentionLinkShowAvatar },
set () {
const value = !this.mentionLinkShowAvatar
this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
}
},
muteBotStatuses: {
get () { return this.mergedConfig.muteBotStatuses },
set () {
const value = !this.muteBotStatuses
this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
}
}
}
}
export default QuickViewSettings

96
src/components/quick_view_settings/quick_view_settings.vue Normal file
View file

@ -0,0 +1,96 @@
<template>
<Popover
trigger="click"
class="QuickViewSettings"
:bound-to="{ x: 'container' }"
>
<template #content>
<div class="dropdown-menu">
<div v-if="loggedIn">
<button
class="button-default dropdown-item"
@click="conversationDisplay = 'tree'"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
/><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
</button>
<button
class="button-default dropdown-item"
@click="conversationDisplay = 'linear'"
>
<span
class="menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
/><FAIcon icon="bars"/> {{ $t('settings.conversation_display_linear_quick') }}
</button>
<div
role="separator"
class="dropdown-divider"
/>
</div>
<button
class="button-default dropdown-item"
@click="showUserAvatars = !showUserAvatars"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }"
/>{{ $t('settings.mention_link_show_avatar_quick') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
@click="autoUpdate = !autoUpdate"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }"
/>{{ $t('settings.auto_update') }}
</button>
<button
v-if="!conversation"
class="button-default dropdown-item"
@click="collapseWithSubjects = !collapseWithSubjects"
>
<span
class="menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
/>{{ $t('settings.collapse_subject') }}
</button>
<button
class="button-default dropdown-item dropdown-item-icon"
@click="openTab('general')"
>
<FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
</button>
</div>
</template>
<template #trigger>
<button class="button-unstyled">
<FAIcon icon="table-list" />
</button>
</template>
</Popover>
</template>
<script src="./quick_view_settings.js"></script>
<style lang="scss">
.QuickViewSettings {
> button {
line-height: 100%;
height: 100%;
width: var(--__panel-heading-height-inner);
text-align: center;
svg {
font-size: 1.2em;
}
}
}
</style>

6
src/components/timeline/timeline.js
View file

@ -2,7 +2,8 @@ import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
import TimelineQuickSettings from './timeline_quick_settings.vue'
import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
import { debounce, throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
@ -38,7 +39,8 @@ const Timeline = {
Status,
Conversation,
TimelineMenu,
TimelineQuickSettings
QuickFilterSettings,
QuickViewSettings
},
computed: {
filteredVisibleStatuses () {

3
src/components/timeline/timeline.vue
View file

@ -16,7 +16,8 @@
>
{{ $t('timeline.up_to_date') }}
</div>
<TimelineQuickSettings v-if="!embedded" />
<QuickFilterSettings v-if="!embedded" />
<QuickViewSettings v-if="!embedded" />
</div>
<div :class="classes.body">
<div

7
src/i18n/en.json
View file

@ -375,7 +375,7 @@
"filtering": "Filtering",
"wordfilter": "Wordfilter",
"filtering_explanation": "All statuses containing these words will be muted, one per line",
"word_filter": "Word filter",
"word_filter_and_more": "Word filter and more...",
"follow_export": "Follow export",
"follow_export_button": "Export your follows to a csv file",
"follow_import": "Follow import",
@ -509,6 +509,7 @@
"subject_line_noop": "Do not copy",
"conversation_display": "Conversation display style",
"conversation_display_tree": "Tree-style",
"conversation_display_tree_quick": "Tree view",
"disable_sticky_headers": "Don't stick column headers to top of the screen",
"show_scrollbars": "Show side column's scrollbars",
"third_column_mode": "When there's enough space, show third column containing",
@ -518,6 +519,7 @@
"tree_advanced": "Allow more flexible navigation in tree view",
"tree_fade_ancestors": "Display ancestors of the current status in faint text",
"conversation_display_linear": "Linear-style",
"conversation_display_linear_quick": "Linear view",
"conversation_other_replies_button": "Show the \"other replies\" button",
"conversation_other_replies_button_below": "Below statuses",
"conversation_other_replies_button_inside": "Inside statuses",
@ -526,8 +528,10 @@
"sensitive_by_default": "Mark posts as sensitive by default",
"stop_gifs": "Pause animated images until you hover on them",
"streaming": "Automatically show new posts when scrolled to the top",
"auto_update": "Show new posts automatically",
"user_mutes": "Users",
"useStreamingApi": "Receive posts and notifications real-time",
"use_websockets": "Use websockets (Realtime updates)",
"text": "Text",
"theme": "Theme",
"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
@ -549,6 +553,7 @@
"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
"mention_link_use_tooltip": "Show user card when clicking mention links",
"mention_link_show_avatar": "Show user avatar beside the link",
"mention_link_show_avatar_quick": "Show user avatar next to mentions",
"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
"user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",