From 1293bec77e5137acf64d3536c286f8ba3df284f4 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 2 Jul 2020 10:40:41 +0300 Subject: [PATCH] change storage error one-off into a global notice system --- src/App.js | 10 +-- src/App.scss | 9 --- src/App.vue | 11 +-- .../global_notice_list/global_notice_list.js | 15 ++++ .../global_notice_list/global_notice_list.vue | 77 +++++++++++++++++++ src/main.js | 16 ++-- src/modules/interface.js | 33 ++++++-- src/services/theme_data/pleromafe.js | 36 ++++++++- 8 files changed, 167 insertions(+), 40 deletions(-) create mode 100644 src/components/global_notice_list/global_notice_list.js create mode 100644 src/components/global_notice_list/global_notice_list.vue diff --git a/src/App.js b/src/App.js index da66fe21..92c4e2f5 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import MobilePostStatusButton from './components/mobile_post_status_button/mobil import MobileNav from './components/mobile_nav/mobile_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' +import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import { windowWidth } from './services/window_utils/window_utils' export default { @@ -32,7 +33,8 @@ export default { MobileNav, SettingsModal, UserReportingModal, - PostStatusModal + PostStatusModal, + GlobalNoticeList }, data: () => ({ mobileActivePanel: 'timeline', @@ -107,9 +109,6 @@ export default { return { 'order': this.$store.state.instance.sidebarRight ? 99 : 0 } - }, - showStorageError () { - return this.$store.state.interface.storageError === 'show' } }, methods: { @@ -132,9 +131,6 @@ export default { if (changed) { this.$store.dispatch('setMobileLayout', mobileLayout) } - }, - hideStorageError () { - this.$store.dispatch('setStorageError', 'hide') } } } diff --git a/src/App.scss b/src/App.scss index db447f1c..f2972eda 100644 --- a/src/App.scss +++ b/src/App.scss @@ -806,15 +806,6 @@ nav { } } -.storage-error-notice { - text-align: center; - i { - cursor: pointer; - color: $fallback--text; - color: var(--alertErrorText, $fallback--text); - } -} - .button-icon { font-size: 1.2em; } diff --git a/src/App.vue b/src/App.vue index 23991eac..03b632ec 100644 --- a/src/App.vue +++ b/src/App.vue @@ -101,16 +101,6 @@
-
- {{ $t("errors.storage_unavailable") }} - -
diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js new file mode 100644 index 00000000..3af29c23 --- /dev/null +++ b/src/components/global_notice_list/global_notice_list.js @@ -0,0 +1,15 @@ + +const GlobalNoticeList = { + computed: { + notices () { + return this.$store.state.interface.globalNotices + } + }, + methods: { + closeNotice (notice) { + this.$store.dispatch('removeGlobalNotice', notice) + } + } +} + +export default GlobalNoticeList diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue new file mode 100644 index 00000000..0e4285cc --- /dev/null +++ b/src/components/global_notice_list/global_notice_list.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/main.js b/src/main.js index a7294ea0..5bddc76e 100644 --- a/src/main.js +++ b/src/main.js @@ -62,14 +62,14 @@ const persistedStateOptions = { }; (async () => { - let persistedState - let storageError = 'none' + let storageError = false + const plugins = [pushNotifications] try { - persistedState = await createPersistedState(persistedStateOptions) + const persistedState = await createPersistedState(persistedStateOptions) + plugins.push(persistedState) } catch (e) { console.error(e) - storageError = 'show' - persistedState = _ => _ + storageError = true } const store = new Vuex.Store({ modules: { @@ -93,11 +93,13 @@ const persistedStateOptions = { polls: pollsModule, postStatus: postStatusModule }, - plugins: [persistedState, pushNotifications], + plugins, strict: false // Socket modifies itself, let's ignore this for now. // strict: process.env.NODE_ENV !== 'production' }) - store.dispatch('setStorageError', storageError) + if (storageError) { + store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' }) + } afterStoreSetup({ store, i18n }) })() diff --git a/src/modules/interface.js b/src/modules/interface.js index 4b5b5b5d..338ef651 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -8,14 +8,14 @@ const defaultState = { noticeClearTimeout: null, notificationPermission: null }, - storageError: 'none', browserSupport: { cssFilter: window.CSS && window.CSS.supports && ( window.CSS.supports('filter', 'drop-shadow(0 0)') || window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') ) }, - mobileLayout: false + mobileLayout: false, + globalNotices: [] } const interfaceMod = { @@ -60,8 +60,11 @@ const interfaceMod = { state.settingsModalLoaded = true } }, - setStorageError (state, value) { - state.storageError = value + pushGlobalNotice (state, notice) { + state.globalNotices.push(notice) + }, + removeGlobalNotice (state, notice) { + state.globalNotices = state.globalNotices.filter(n => n !== notice) } }, actions: { @@ -86,8 +89,26 @@ const interfaceMod = { togglePeekSettingsModal ({ commit }) { commit('togglePeekSettingsModal') }, - setStorageError ({ commit }, value) { - commit('setStorageError', value) + pushGlobalNotice ( + { commit, dispatch }, + { + messageKey, + messageArgs = {}, + level = 'error', + timeout = 0 + }) { + const notice = { + messageKey, + messageArgs, + level + } + if (timeout) { + setTimeout(() => dispatch('removeGlobalNotice', notice), timeout) + } + commit('pushGlobalNotice', notice) + }, + removeGlobalNotice ({ commit }, notice) { + commit('removeGlobalNotice', notice) } } } diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index b577cfab..83c878ed 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -34,7 +34,8 @@ export const DEFAULT_OPACITY = { alert: 0.5, input: 0.5, faint: 0.5, - underlay: 0.15 + underlay: 0.15, + alertPopup: 0.85 } /** SUBJECT TO CHANGE IN THE FUTURE, this is all beta @@ -627,6 +628,39 @@ export const SLOT_INHERITANCE = { textColor: true }, + alertPopupError: { + depends: ['alertError'], + opacity: 'alertPopup' + }, + alertPopupErrorText: { + depends: ['alertErrorText'], + layer: 'popover', + variant: 'alertPopupError', + textColor: true + }, + + alertPopupWarning: { + depends: ['alertWarning'], + opacity: 'alertPopup' + }, + alertPopupWarningText: { + depends: ['alertWarningText'], + layer: 'popover', + variant: 'alertPopupWarning', + textColor: true + }, + + alertPopupNeutral: { + depends: ['alertNeutral'], + opacity: 'alertPopup' + }, + alertPopupNeutralText: { + depends: ['alertNeutralText'], + layer: 'popover', + variant: 'alertPopupNeutral', + textColor: true + }, + badgeNotification: '--cRed', badgeNotificationText: { depends: ['text', 'badgeNotification'],