* origin/develop: lint fix bugs Apply 1 suggestion(s) to 1 file(s) change icons Update dependency vue-i18n to v9.2.0 made quick settings into their own component, added quick view settings, added both to conversation viewmerge-requests/1699/head
commit
59d160a6dd
@ -0,0 +1,69 @@
|
||||
import Popover from '../popover/popover.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faList,
|
||||
faFolderTree,
|
||||
faBars,
|
||||
faWrench
|
||||
)
|
||||
|
||||
const QuickViewSettings = {
|
||||
props: {
|
||||
conversation: Boolean
|
||||
},
|
||||
components: {
|
||||
Popover
|
||||
},
|
||||
methods: {
|
||||
setConversationDisplay (visibility) {
|
||||
this.$store.dispatch('setOption', { name: 'conversationDisplay', value: visibility })
|
||||
},
|
||||
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.showUserAvatars
|
||||
console.log(value)
|
||||
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
|
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<Popover
|
||||
trigger="click"
|
||||
class="QuickViewSettings"
|
||||
:bound-to="{ x: 'container' }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="dropdown-menu">
|
||||
<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="list" /> {{ $t('settings.conversation_display_linear_quick') }}
|
||||
</button>
|
||||
<div
|
||||
role="separator"
|
||||
class="dropdown-divider"
|
||||
/>
|
||||
<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="bars" />
|
||||
</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>
|
Loading…
Reference in new issue