From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 9 Jan 2023 13:02:16 -0500 Subject: Use stylelint --- src/components/notification/notification.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'src/components/notification') diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 38978137..654aca3c 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -1,13 +1,14 @@ -@import '../../_variables.scss'; +@import "../../variables"; // TODO Copypaste from Status, should unify it somehow .Notification { - 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; + 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; &:hover { --_still-image-img-visibility: visible; @@ -54,7 +55,7 @@ margin-left: 0.2em; &::before { - content: ' '; + content: " "; } } -- cgit v1.2.3-70-g09d2 From 547e85c7c6f9bf8779cc06344c4eebaaa8f9d775 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 7 Jun 2022 12:37:16 -0400 Subject: Add confirm dialogs for accept & deny follow requests --- .../follow_request_card/follow_request_card.js | 49 +++++++++++++++++++++- .../follow_request_card/follow_request_card.vue | 22 ++++++++++ src/components/notification/notification.js | 43 ++++++++++++++++++- src/components/notification/notification.vue | 22 ++++++++++ src/components/settings_modal/tabs/general_tab.vue | 10 +++++ src/modules/config.js | 2 + src/modules/instance.js | 2 + 7 files changed, 147 insertions(+), 3 deletions(-) (limited to 'src/components/notification') diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js index cbd75311..b0873bb1 100644 --- a/src/components/follow_request_card/follow_request_card.js +++ b/src/components/follow_request_card/follow_request_card.js @@ -1,10 +1,18 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import ConfirmModal from '../confirm_modal/confirm_modal.vue' import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js' const FollowRequestCard = { props: ['user'], components: { - BasicUserCard + BasicUserCard, + ConfirmModal + }, + data () { + return { + showingApproveConfirmDialog: false, + showingDenyConfirmDialog: false + } }, methods: { findFollowRequestNotificationId () { @@ -13,7 +21,26 @@ const FollowRequestCard = { ) return notif && notif.id }, + showApproveConfirmDialog () { + this.showingApproveConfirmDialog = true + }, + hideApproveConfirmDialog () { + this.showingApproveConfirmDialog = false + }, + showDenyConfirmDialog () { + this.showingDenyConfirmDialog = true + }, + hideDenyConfirmDialog () { + this.showingDenyConfirmDialog = false + }, approveUser () { + if (this.shouldConfirmApprove) { + this.showApproveConfirmDialog() + } else { + this.doApprove() + } + }, + doApprove () { this.$store.state.api.backendInteractor.approveUser({ id: this.user.id }) this.$store.dispatch('removeFollowRequest', this.user) @@ -25,14 +52,34 @@ const FollowRequestCard = { notification.type = 'follow' } }) + this.hideApproveConfirmDialog() }, denyUser () { + if (this.shouldConfirmDeny) { + this.showDenyConfirmDialog() + } else { + this.doDeny() + } + }, + doDeny () { const notifId = this.findFollowRequestNotificationId() this.$store.state.api.backendInteractor.denyUser({ id: this.user.id }) .then(() => { this.$store.dispatch('dismissNotificationLocal', { id: notifId }) this.$store.dispatch('removeFollowRequest', this.user) }) + this.hideDenyConfirmDialog() + } + }, + computed: { + mergedConfig () { + return this.$store.getters.mergedConfig + }, + shouldConfirmApprove () { + return this.mergedConfig.modalOnApproveFollow + }, + shouldConfirmDeny () { + return this.mergedConfig.modalOnDenyFollow } } } diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue index eb222cc7..55b65112 100644 --- a/src/components/follow_request_card/follow_request_card.vue +++ b/src/components/follow_request_card/follow_request_card.vue @@ -14,6 +14,28 @@ {{ $t('user_card.deny') }} + + + {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }} + + + {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }} + + diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 265aaee0..0ce8892e 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -8,6 +8,7 @@ import Report from '../report/report.vue' import UserLink from '../user_link/user_link.vue' import RichContent from 'src/components/rich_content/rich_content.jsx' import UserPopover from '../user_popover/user_popover.vue' +import ConfirmModal from '../confirm_modal/confirm_modal.vue' import { isStatusNotification } from '../../services/notification_utils/notification_utils.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -43,7 +44,9 @@ const Notification = { return { statusExpanded: false, betterShadow: this.$store.state.interface.browserSupport.cssFilter, - unmuted: false + unmuted: false, + showingApproveConfirmDialog: false, + showingDenyConfirmDialog: false } }, props: ['notification'], @@ -56,7 +59,8 @@ const Notification = { Report, RichContent, UserPopover, - UserLink + UserLink, + ConfirmModal }, methods: { toggleStatusExpanded () { @@ -71,7 +75,26 @@ const Notification = { toggleMute () { this.unmuted = !this.unmuted }, + showApproveConfirmDialog () { + this.showingApproveConfirmDialog = true + }, + hideApproveConfirmDialog () { + this.showingApproveConfirmDialog = false + }, + showDenyConfirmDialog () { + this.showingDenyConfirmDialog = true + }, + hideDenyConfirmDialog () { + this.showingDenyConfirmDialog = false + }, approveUser () { + if (this.shouldConfirmApprove) { + this.showApproveConfirmDialog() + } else { + this.doApprove() + } + }, + doApprove () { this.$store.state.api.backendInteractor.approveUser({ id: this.user.id }) this.$store.dispatch('removeFollowRequest', this.user) this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id }) @@ -83,6 +106,13 @@ const Notification = { }) }, denyUser () { + if (this.shouldConfirmDeny) { + this.showDenyConfirmDialog() + } else { + this.doDeny() + } + }, + doDeny () { this.$store.state.api.backendInteractor.denyUser({ id: this.user.id }) .then(() => { this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id }) @@ -117,6 +147,15 @@ const Notification = { isStatusNotification () { return isStatusNotification(this.notification.type) }, + mergedConfig () { + return this.$store.getters.mergedConfig + }, + shouldConfirmApprove () { + return this.mergedConfig.modalOnApproveFollow + }, + shouldConfirmDeny () { + return this.mergedConfig.modalOnDenyFollow + }, ...mapState({ currentUser: state => state.users.currentUser }) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index f1aa5420..e1ea42ad 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -243,6 +243,28 @@ + + + {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }} + + + {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }} + + diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 906c3758..9de3ed81 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -181,6 +181,16 @@ {{ $t('settings.confirm_dialogs_logout') }} +
  • + + {{ $t('settings.confirm_dialogs_approve_follow') }} + +
    • +
  • + + {{ $t('settings.confirm_dialogs_deny_follow') }} + +
    • diff --git a/src/modules/config.js b/src/modules/config.js index a8949030..1df279a2 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -84,6 +84,8 @@ export const defaultState = { modalOnMute: undefined, // instance default modalOnDelete: undefined, // instance default modalOnLogout: undefined, // instance default + modalOnApproveFollow: undefined, // instance default + modalOnDenyFollow: undefined, // instance default playVideosInModal: false, useOneClickNsfw: false, useContainFit: true, diff --git a/src/modules/instance.js b/src/modules/instance.js index 6fc3830c..fcb6eecc 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -77,6 +77,8 @@ const defaultState = { modalOnMute: false, modalOnDelete: true, modalOnLogout: true, + modalOnApproveFollow: false, + modalOnDenyFollow: false, loginMethod: 'password', logo: '/static/logo.svg', logoMargin: '.2em', -- cgit v1.2.3-70-g09d2 From 1856eeda40e76618717a66b51ffc49a1ecf8c967 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Fri, 10 Jun 2022 15:55:31 -0400 Subject: Auto close confirm dialog after approve/deny --- src/components/notification/notification.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/notification') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 0ce8892e..420db4f0 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -104,6 +104,7 @@ const Notification = { notification.type = 'follow' } }) + this.hideApproveConfirmDialog() }, denyUser () { if (this.shouldConfirmDeny) { @@ -118,6 +119,7 @@ const Notification = { this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id }) this.$store.dispatch('removeFollowRequest', this.user) }) + this.hideDenyConfirmDialog() } }, computed: { -- cgit v1.2.3-70-g09d2 From 4d23d31fecf480abfccc4db3ac79c6640078dc3b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 14 Mar 2023 21:50:43 +0200 Subject: initial admin settings prototype (WIP) --- src/components/admin_modal/admin_modal.js | 68 ++++++++++++ src/components/admin_modal/admin_modal.scss | 80 ++++++++++++++ src/components/admin_modal/admin_modal.vue | 121 +++++++++++++++++++++ src/components/admin_modal/admin_modal_content.js | 88 +++++++++++++++ .../admin_modal/admin_modal_content.scss | 56 ++++++++++ src/components/admin_modal/tabs/general_tab.js | 33 ++++++ src/components/desktop_nav/desktop_nav.js | 5 +- src/components/desktop_nav/desktop_nav.vue | 9 +- src/components/notification/notification.vue | 2 +- .../settings_modal/admin_tabs/instance_tab.js | 29 +++++ .../settings_modal/admin_tabs/instance_tab.vue | 35 ++++++ src/components/settings_modal/helpers/setting.js | 14 ++- .../settings_modal/helpers/string_setting.js | 9 ++ .../settings_modal/helpers/string_setting.vue | 25 +++++ src/components/settings_modal/settings_modal.js | 23 +++- src/components/settings_modal/settings_modal.vue | 3 +- .../settings_modal/settings_modal_admin_content.js | 76 +++++++++++++ .../settings_modal_admin_content.scss | 56 ++++++++++ .../settings_modal_admin_content.vue | 21 ++++ .../settings_modal/settings_modal_content.js | 88 --------------- .../settings_modal/settings_modal_content.scss | 56 ---------- .../settings_modal/settings_modal_content.vue | 83 -------------- .../settings_modal/settings_modal_user_content.js | 88 +++++++++++++++ .../settings_modal_user_content.scss | 56 ++++++++++ .../settings_modal/settings_modal_user_content.vue | 83 ++++++++++++++ src/components/tab_switcher/tab_switcher.jsx | 8 +- src/modules/adminSettings.js | 5 +- src/modules/interface.js | 21 +++- 28 files changed, 985 insertions(+), 256 deletions(-) create mode 100644 src/components/admin_modal/admin_modal.js create mode 100644 src/components/admin_modal/admin_modal.scss create mode 100644 src/components/admin_modal/admin_modal.vue create mode 100644 src/components/admin_modal/admin_modal_content.js create mode 100644 src/components/admin_modal/admin_modal_content.scss create mode 100644 src/components/admin_modal/tabs/general_tab.js create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.js create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.vue create mode 100644 src/components/settings_modal/helpers/string_setting.js create mode 100644 src/components/settings_modal/helpers/string_setting.vue create mode 100644 src/components/settings_modal/settings_modal_admin_content.js create mode 100644 src/components/settings_modal/settings_modal_admin_content.scss create mode 100644 src/components/settings_modal/settings_modal_admin_content.vue delete mode 100644 src/components/settings_modal/settings_modal_content.js delete mode 100644 src/components/settings_modal/settings_modal_content.scss delete mode 100644 src/components/settings_modal/settings_modal_content.vue create mode 100644 src/components/settings_modal/settings_modal_user_content.js create mode 100644 src/components/settings_modal/settings_modal_user_content.scss create mode 100644 src/components/settings_modal/settings_modal_user_content.vue (limited to 'src/components/notification') diff --git a/src/components/admin_modal/admin_modal.js b/src/components/admin_modal/admin_modal.js new file mode 100644 index 00000000..525f09aa --- /dev/null +++ b/src/components/admin_modal/admin_modal.js @@ -0,0 +1,68 @@ +import Modal from 'src/components/modal/modal.vue' +import PanelLoading from 'src/components/panel_loading/panel_loading.vue' +import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue' +import getResettableAsyncComponent from 'src/services/resettable_async_component.js' +import Popover from '../popover/popover.vue' +import Checkbox from 'src/components/checkbox/checkbox.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + newImporter, + newExporter +} from 'src/services/export_import/export_import.js' +import { + faTimes, + faFileUpload, + faFileDownload, + faChevronDown +} from '@fortawesome/free-solid-svg-icons' +import { + faWindowMinimize +} from '@fortawesome/free-regular-svg-icons' + +library.add( + faTimes, + faWindowMinimize, + faFileUpload, + faFileDownload, + faChevronDown +) + +const AdminModal = { + data () { + return {} + }, + components: { + Modal, + Popover, + Checkbox, + AdminModalContent: getResettableAsyncComponent( + () => import('./admin_modal_content.vue'), + { + loadingComponent: PanelLoading, + errorComponent: AsyncComponentError, + delay: 0 + } + ) + }, + methods: { + closeModal () { + this.$store.dispatch('closeAdminModal') + }, + peekModal () { + this.$store.dispatch('togglePeekAdminModal') + } + }, + computed: { + modalActivated () { + return this.$store.state.interface.adminModalState !== 'hidden' + }, + modalOpenedOnce () { + return this.$store.state.interface.adminModalLoaded + }, + modalPeeked () { + return this.$store.state.interface.adminModalState === 'minimized' + } + } +} + +export default AdminModal diff --git a/src/components/admin_modal/admin_modal.scss b/src/components/admin_modal/admin_modal.scss new file mode 100644 index 00000000..0d916f32 --- /dev/null +++ b/src/components/admin_modal/admin_modal.scss @@ -0,0 +1,80 @@ +@import "src/variables"; + +.admin-modal { + overflow: hidden; + + .setting-list, + .option-list { + list-style-type: none; + padding-left: 2em; + + li { + margin-bottom: 0.5em; + } + + .suboptions { + margin-top: 0.3em; + } + } + + .admin-modal-panel { + overflow: hidden; + transition: transform; + transition-timing-function: ease-in-out; + transition-duration: 300ms; + width: 1000px; + max-width: 90vw; + height: 90vh; + + @media all and (max-width: 800px) { + max-width: 100vw; + height: 100%; + } + + >.panel-body { + height: 100%; + overflow-y: hidden; + + .btn { + min-height: 2em; + min-width: 10em; + padding: 0 2em; + } + } + } + + .admin-footer { + display: flex; + + >* { + margin-right: 0.5em; + } + + .extra-content { + display: flex; + flex-grow: 1; + } + } + + &.peek { + .admin-modal-panel { + /* Explanation: + * Modal is positioned vertically centered. + * 100vh - 100% = Distance between modal's top+bottom boundaries and screen + * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen + * + 100% - we move modal completely off-screen, it's top boundary touches + * bottom of the screen + * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible + */ + transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); + + @media all and (max-width: 800px) { + /* For mobile, the modal takes 100% of the available screen. + This ensures the minimized modal is always 50px above the browser bottom + bar regardless of whether or not it is visible. + */ + transform: translateY(calc(100% - 50px)); + } + } + } +} diff --git a/src/components/admin_modal/admin_modal.vue b/src/components/admin_modal/admin_modal.vue new file mode 100644 index 00000000..d7e5a80f --- /dev/null +++ b/src/components/admin_modal/admin_modal.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/src/components/admin_modal/admin_modal_content.js b/src/components/admin_modal/admin_modal_content.js new file mode 100644 index 00000000..897cc163 --- /dev/null +++ b/src/components/admin_modal/admin_modal_content.js @@ -0,0 +1,88 @@ +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' + +import DataImportExportTab from './tabs/data_import_export_tab.vue' +import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' +import NotificationsTab from './tabs/notifications_tab.vue' +import FilteringTab from './tabs/filtering_tab.vue' +import SecurityTab from './tabs/security_tab/security_tab.vue' +import ProfileTab from './tabs/profile_tab.vue' +import GeneralTab from './tabs/general_tab.vue' +import VersionTab from './tabs/version_tab.vue' +import ThemeTab from './tabs/theme_tab/theme_tab.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +) + +const AdminModalContent = { + components: { + TabSwitcher, + + DataImportExportTab, + MutesAndBlocksTab, + NotificationsTab, + FilteringTab, + SecurityTab, + ProfileTab, + GeneralTab, + VersionTab, + ThemeTab + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + open () { + return this.$store.state.interface.AdminModalState !== 'hidden' + }, + bodyLock () { + return this.$store.state.interface.AdminModalState === 'visible' + } + }, + methods: { + onOpen () { + const targetTab = this.$store.state.interface.AdminModalTargetTab + // We're being told to open in specific tab + if (targetTab) { + const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => { + return elm.props && elm.props['data-tab-name'] === targetTab + }) + if (tabIndex >= 0) { + this.$refs.tabSwitcher.setTab(tabIndex) + } + } + // Clear the state of target tab, so that next time Admin is opened + // it doesn't force it. + this.$store.dispatch('clearAdminModalTargetTab') + } + }, + mounted () { + this.onOpen() + }, + watch: { + open: function (value) { + if (value) this.onOpen() + } + } +} + +export default AdminModalContent diff --git a/src/components/admin_modal/admin_modal_content.scss b/src/components/admin_modal/admin_modal_content.scss new file mode 100644 index 00000000..2db7b2f8 --- /dev/null +++ b/src/components/admin_modal/admin_modal_content.scss @@ -0,0 +1,56 @@ +@import "src/variables"; + +.admin_tab-switcher { + height: 100%; + + .setting-item { + border-bottom: 2px solid var(--fg, $fallback--fg); + margin: 1em 1em 1.4em; + padding-bottom: 1.4em; + + > div, + > label { + display: block; + margin-bottom: 0.5em; + + &:last-child { + margin-bottom: 0; + } + } + + .select-multiple { + display: flex; + + .option-list { + margin: 0; + padding-left: 0.5em; + } + } + + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; + } + + textarea { + width: 100%; + max-width: 100%; + height: 100px; + } + + .unavailable, + .unavailable svg { + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; + } + + .number-input { + max-width: 6em; + } + } +} diff --git a/src/components/admin_modal/tabs/general_tab.js b/src/components/admin_modal/tabs/general_tab.js new file mode 100644 index 00000000..8c166f19 --- /dev/null +++ b/src/components/admin_modal/tabs/general_tab.js @@ -0,0 +1,33 @@ +import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue' +import ChoiceSetting from '../settings_modal/helpers/choice_setting.vue' +import IntegerSetting from '../settings_modal/helpers/integer_setting.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faGlobe +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faGlobe +) + +const GeneralTab = { + components: { + BooleanSetting, + ChoiceSetting, + IntegerSetting, + }, + computed: { + mergedConfig () { + console.log(this.$store.state) + return this.$store.state + } + }, + methods: { + changeDefaultScope (value) { + this.$store.dispatch('setProfileOption', { name: 'defaultScope', value }) + } + } +} + +export default GeneralTab diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js index 745b1a81..f6a2e294 100644 --- a/src/components/desktop_nav/desktop_nav.js +++ b/src/components/desktop_nav/desktop_nav.js @@ -107,7 +107,10 @@ export default { this.searchBarHidden = hidden }, openSettingsModal () { - this.$store.dispatch('openSettingsModal') + this.$store.dispatch('openSettingsModal', 'user') + }, + openAdminModal () { + this.$store.dispatch('openSettingsModal', 'admin') } } } diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue index dc8bbfd3..49382f8e 100644 --- a/src/components/desktop_nav/desktop_nav.vue +++ b/src/components/desktop_nav/desktop_nav.vue @@ -48,20 +48,19 @@ icon="cog" /> - - +
    - + +
    { + return elm.props && elm.props['data-tab-name'] === targetTab + }) + if (tabIndex >= 0) { + this.$refs.tabSwitcher.setTab(tabIndex) + } + } + // Clear the state of target tab, so that next time settings is opened + // it doesn't force it. + this.$store.dispatch('clearSettingsModalTargetTab') + } + }, + mounted () { + this.onOpen() + }, + watch: { + open: function (value) { + if (value) this.onOpen() + } + } +} + +export default SettingsModalAdminContent diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss new file mode 100644 index 00000000..87df7982 --- /dev/null +++ b/src/components/settings_modal/settings_modal_admin_content.scss @@ -0,0 +1,56 @@ +@import "src/variables"; + +.settings_tab-switcher { + height: 100%; + + .setting-item { + border-bottom: 2px solid var(--fg, $fallback--fg); + margin: 1em 1em 1.4em; + padding-bottom: 1.4em; + + > div, + > label { + display: block; + margin-bottom: 0.5em; + + &:last-child { + margin-bottom: 0; + } + } + + .select-multiple { + display: flex; + + .option-list { + margin: 0; + padding-left: 0.5em; + } + } + + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; + } + + textarea { + width: 100%; + max-width: 100%; + height: 100px; + } + + .unavailable, + .unavailable svg { + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; + } + + .number-input { + max-width: 6em; + } + } +} diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue new file mode 100644 index 00000000..9873b127 --- /dev/null +++ b/src/components/settings_modal/settings_modal_admin_content.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js deleted file mode 100644 index 9ac0301f..00000000 --- a/src/components/settings_modal/settings_modal_content.js +++ /dev/null @@ -1,88 +0,0 @@ -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' - -import DataImportExportTab from './tabs/data_import_export_tab.vue' -import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' -import NotificationsTab from './tabs/notifications_tab.vue' -import FilteringTab from './tabs/filtering_tab.vue' -import SecurityTab from './tabs/security_tab/security_tab.vue' -import ProfileTab from './tabs/profile_tab.vue' -import GeneralTab from './tabs/general_tab.vue' -import VersionTab from './tabs/version_tab.vue' -import ThemeTab from './tabs/theme_tab/theme_tab.vue' - -import { library } from '@fortawesome/fontawesome-svg-core' -import { - faWrench, - faUser, - faFilter, - faPaintBrush, - faBell, - faDownload, - faEyeSlash, - faInfo -} from '@fortawesome/free-solid-svg-icons' - -library.add( - faWrench, - faUser, - faFilter, - faPaintBrush, - faBell, - faDownload, - faEyeSlash, - faInfo -) - -const SettingsModalContent = { - components: { - TabSwitcher, - - DataImportExportTab, - MutesAndBlocksTab, - NotificationsTab, - FilteringTab, - SecurityTab, - ProfileTab, - GeneralTab, - VersionTab, - ThemeTab - }, - computed: { - isLoggedIn () { - return !!this.$store.state.users.currentUser - }, - open () { - return this.$store.state.interface.settingsModalState !== 'hidden' - }, - bodyLock () { - return this.$store.state.interface.settingsModalState === 'visible' - } - }, - methods: { - onOpen () { - const targetTab = this.$store.state.interface.settingsModalTargetTab - // We're being told to open in specific tab - if (targetTab) { - const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => { - return elm.props && elm.props['data-tab-name'] === targetTab - }) - if (tabIndex >= 0) { - this.$refs.tabSwitcher.setTab(tabIndex) - } - } - // Clear the state of target tab, so that next time settings is opened - // it doesn't force it. - this.$store.dispatch('clearSettingsModalTargetTab') - } - }, - mounted () { - this.onOpen() - }, - watch: { - open: function (value) { - if (value) this.onOpen() - } - } -} - -export default SettingsModalContent diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss deleted file mode 100644 index 87df7982..00000000 --- a/src/components/settings_modal/settings_modal_content.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import "src/variables"; - -.settings_tab-switcher { - height: 100%; - - .setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); - margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - - > div, - > label { - display: block; - margin-bottom: 0.5em; - - &:last-child { - margin-bottom: 0; - } - } - - .select-multiple { - display: flex; - - .option-list { - margin: 0; - padding-left: 0.5em; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - - textarea { - width: 100%; - max-width: 100%; - height: 100px; - } - - .unavailable, - .unavailable svg { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .number-input { - max-width: 6em; - } - } -} diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue deleted file mode 100644 index 0be76d22..00000000 --- a/src/components/settings_modal/settings_modal_content.vue +++ /dev/null @@ -1,83 +0,0 @@ - - - - - diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js new file mode 100644 index 00000000..9ac0301f --- /dev/null +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -0,0 +1,88 @@ +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' + +import DataImportExportTab from './tabs/data_import_export_tab.vue' +import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' +import NotificationsTab from './tabs/notifications_tab.vue' +import FilteringTab from './tabs/filtering_tab.vue' +import SecurityTab from './tabs/security_tab/security_tab.vue' +import ProfileTab from './tabs/profile_tab.vue' +import GeneralTab from './tabs/general_tab.vue' +import VersionTab from './tabs/version_tab.vue' +import ThemeTab from './tabs/theme_tab/theme_tab.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +) + +const SettingsModalContent = { + components: { + TabSwitcher, + + DataImportExportTab, + MutesAndBlocksTab, + NotificationsTab, + FilteringTab, + SecurityTab, + ProfileTab, + GeneralTab, + VersionTab, + ThemeTab + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + open () { + return this.$store.state.interface.settingsModalState !== 'hidden' + }, + bodyLock () { + return this.$store.state.interface.settingsModalState === 'visible' + } + }, + methods: { + onOpen () { + const targetTab = this.$store.state.interface.settingsModalTargetTab + // We're being told to open in specific tab + if (targetTab) { + const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => { + return elm.props && elm.props['data-tab-name'] === targetTab + }) + if (tabIndex >= 0) { + this.$refs.tabSwitcher.setTab(tabIndex) + } + } + // Clear the state of target tab, so that next time settings is opened + // it doesn't force it. + this.$store.dispatch('clearSettingsModalTargetTab') + } + }, + mounted () { + this.onOpen() + }, + watch: { + open: function (value) { + if (value) this.onOpen() + } + } +} + +export default SettingsModalContent diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss new file mode 100644 index 00000000..87df7982 --- /dev/null +++ b/src/components/settings_modal/settings_modal_user_content.scss @@ -0,0 +1,56 @@ +@import "src/variables"; + +.settings_tab-switcher { + height: 100%; + + .setting-item { + border-bottom: 2px solid var(--fg, $fallback--fg); + margin: 1em 1em 1.4em; + padding-bottom: 1.4em; + + > div, + > label { + display: block; + margin-bottom: 0.5em; + + &:last-child { + margin-bottom: 0; + } + } + + .select-multiple { + display: flex; + + .option-list { + margin: 0; + padding-left: 0.5em; + } + } + + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; + } + + textarea { + width: 100%; + max-width: 100%; + height: 100px; + } + + .unavailable, + .unavailable svg { + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; + } + + .number-input { + max-width: 6em; + } + } +} diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue new file mode 100644 index 00000000..0221cccb --- /dev/null +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index a7ef8560..b444da43 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -60,13 +60,7 @@ export default { const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName return this.$slots.default().findIndex(isWanted) === this.activeIndex } - }, - settingsModalVisible () { - return this.settingsModalState === 'visible' - }, - ...mapState({ - settingsModalState: state => state.interface.settingsModalState - }) + } }, beforeUpdate () { const currentSlot = this.slots()[this.active] diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js index 01e9a49e..8006717d 100644 --- a/src/modules/adminSettings.js +++ b/src/modules/adminSettings.js @@ -10,7 +10,7 @@ export const newUserFlags = { ...defaultState.flagStorage } -const serverSideStorage = { +const adminSettingsStorage = { state: { ...cloneDeep(defaultState) }, @@ -40,9 +40,10 @@ const serverSideStorage = { } set(config, path, convert(c.value)) }) + console.log(config) commit('updateAdminSettings', { config, modifiedPaths }) } } } -export default serverSideStorage +export default adminSettingsStorage diff --git a/src/modules/interface.js b/src/modules/interface.js index a86193ea..2d012f1b 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -1,7 +1,9 @@ const defaultState = { settingsModalState: 'hidden', - settingsModalLoaded: false, + settingsModalLoadedUser: false, + settingsModalLoadedAdmin: false, settingsModalTargetTab: null, + settingsModalMode: 'user', settings: { currentSaveStateNotice: null, noticeClearTimeout: null, @@ -54,10 +56,17 @@ const interfaceMod = { throw new Error('Illegal minimization state of settings modal') } }, - openSettingsModal (state) { + openSettingsModal (state, value) { + state.settingsModalMode = value state.settingsModalState = 'visible' - if (!state.settingsModalLoaded) { - state.settingsModalLoaded = true + if (value === 'user') { + if (!state.settingsModalLoadedUser) { + state.settingsModalLoadedUser = true + } + } else if (value === 'admin') { + if (!state.settingsModalLoadedAdmin) { + state.settingsModalLoadedAdmin = true + } } }, setSettingsModalTargetTab (state, value) { @@ -92,8 +101,8 @@ const interfaceMod = { closeSettingsModal ({ commit }) { commit('closeSettingsModal') }, - openSettingsModal ({ commit }) { - commit('openSettingsModal') + openSettingsModal ({ commit }, value = 'user') { + commit('openSettingsModal', value) }, togglePeekSettingsModal ({ commit }) { commit('togglePeekSettingsModal') -- cgit v1.2.3-70-g09d2 From 998aa8f732bbf9d074abeb5916ceb5effd8afe5c Mon Sep 17 00:00:00 2001 From: Alexander Tumin Date: Sun, 18 Dec 2022 22:04:58 +0300 Subject: Allow custom emoji reactions --- src/components/emoji_reactions/emoji_reactions.vue | 27 +++++- src/components/notification/notification.vue | 15 ++- src/components/notifications/notifications.scss | 7 ++ src/components/react_button/react_button.js | 92 ++---------------- src/components/react_button/react_button.vue | 108 +++++++-------------- .../entity_normalizer/entity_normalizer.service.js | 1 + 6 files changed, 89 insertions(+), 161 deletions(-) (limited to 'src/components/notification') diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index a63daa97..12783114 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -2,7 +2,7 @@
    @@ -46,9 +60,18 @@ .reaction-emoji { width: 1.25em; + height: 1.25em; margin-right: 0.25em; } + .reaction-emoji-content { + max-width: 1.25em; + max-height: 1.25em; + width: auto; + height: auto; + overflow: hidden; + } + &:focus { outline: none; } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index e1ea42ad..4d801c5e 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -121,7 +121,16 @@ scope="global" keypath="notifications.reacted_with" > - {{ notification.emoji }} + + {{ notification.emoji }} @@ -153,9 +162,9 @@