From b5ded67c0608724fe23be15e346dd6842819635f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 7 Apr 2022 15:11:23 +0300 Subject: options to enable scrollbars and disable sticky headers --- src/components/settings_modal/tabs/general_tab.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'src/components/settings_modal/tabs') diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index a2c6bffa..e29bc7cf 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -60,6 +60,16 @@ {{ $t('settings.virtual_scrolling') }} +
  • + + {{ $t('settings.disable_sticky_headers') }} + +
    • +
  • + + {{ $t('settings.show_scrollbars') }} + +
  • Date: Tue, 12 Apr 2022 21:18:06 +0300 Subject: unified layout-setting code and made an option to control or disable third column behavior --- src/App.js | 20 +++++++++--------- src/boot/after_store.js | 9 +++----- src/components/settings_modal/tabs/general_tab.js | 5 +++++ src/components/settings_modal/tabs/general_tab.vue | 9 ++++++++ src/modules/config.js | 4 ++++ src/modules/interface.js | 24 +++++++++++++++++++--- 6 files changed, 52 insertions(+), 19 deletions(-) (limited to 'src/components/settings_modal/tabs') diff --git a/src/App.js b/src/App.js index 9cfaf4fa..19c58595 100644 --- a/src/App.js +++ b/src/App.js @@ -98,22 +98,22 @@ export default { }, layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, - reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, + reverseLayout () { + const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig + if (this.layoutType !== 'wide') { + return reverseSetting + } else { + return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting + } + }, noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, ...mapGetters(['mergedConfig']) }, methods: { updateMobileState () { - const mobileLayout = windowWidth() <= 800 - const wideLayout = windowWidth() >= 1300 - const layoutHeight = windowHeight() - const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') - const changed = layoutType !== this.layoutType - if (changed) { - this.$store.dispatch('setLayoutType', layoutType) - } - this.$store.dispatch('setLayoutHeight', layoutHeight) + this.$store.dispatch('setLayoutWidth', windowWidth()) + this.$store.dispatch('setLayoutHeight', windowHeight()) } } } diff --git a/src/boot/after_store.js b/src/boot/after_store.js index ce96141d..f655c38f 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -8,7 +8,7 @@ import App from '../App.vue' import routes from './routes' import VBodyScrollLock from 'src/directives/body_scroll_lock' -import { windowWidth } from '../services/window_utils/window_utils' +import { windowWidth, windowHeight } from '../services/window_utils/window_utils' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' @@ -332,11 +332,8 @@ const checkOAuthToken = async ({ store }) => { } const afterStoreSetup = async ({ store, i18n }) => { - // TODO cleanup copypasta - const mobileLayout = windowWidth() <= 800 - const wideLayout = windowWidth() >= 1300 - const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') - store.dispatch('setLayoutType', layoutType) + store.dispatch('setLayoutWidth', windowWidth()) + store.dispatch('setLayoutHeight', windowHeight()) FaviconService.initFaviconService() diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 62d86176..89505cb3 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -38,6 +38,11 @@ const GeneralTab = { value: mode, label: this.$t(`settings.mention_link_display_${mode}`) })), + thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ + key: mode, + value: mode, + label: this.$t(`settings.conversation_display_${mode}`) + })), loopSilentAvailable: // Firefox Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index e29bc7cf..db8718cf 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -70,6 +70,15 @@ {{ $t('settings.show_scrollbars') }}
    • +
  • + + {{ $t('settings.third_column_mode') }} + +
  • = 1300 + commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile) + } + }, setLastTimeline ({ commit }, value) { commit('setLastTimeline', value) } -- cgit v1.2.3-70-g09d2 From 28556f7c277ea96ac7216e019f448480108fba5d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 12 Apr 2022 22:01:04 +0300 Subject: localization updates --- src/components/settings_modal/tabs/general_tab.js | 2 +- src/i18n/en.json | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'src/components/settings_modal/tabs') diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 89505cb3..c97b3410 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -41,7 +41,7 @@ const GeneralTab = { thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({ key: mode, value: mode, - label: this.$t(`settings.conversation_display_${mode}`) + label: this.$t(`settings.third_column_mode_${mode}`) })), loopSilentAvailable: // Firefox diff --git a/src/i18n/en.json b/src/i18n/en.json index f8336e5c..d04df325 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -367,7 +367,7 @@ "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)", "hide_isp": "Hide instance-specific panel", "hide_shoutbox": "Hide instance shoutbox", - "right_sidebar": "Show sidebar on the right side", + "right_sidebar": "Reverse order of columns", "always_show_post_button": "Always show floating New Post button", "hide_wallpaper": "Hide instance wallpaper", "preload_images": "Preload images", @@ -481,6 +481,12 @@ "subject_line_noop": "Do not copy", "conversation_display": "Conversation display style", "conversation_display_tree": "Tree-style", + "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", + "third_column_mode_none": "Don't show third column at all", + "third_column_mode_notifications": "Notifications column", + "third_column_mode_postform": "Main post form and navigation", "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", -- cgit v1.2.3-70-g09d2 From 631b8b93a4a8dd548bae5ab9fa7bc4d6e892ae3f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 19:44:31 +0300 Subject: tons of fixes mainly aimed at panel headings --- src/App.scss | 6 +- src/components/account_actions/account_actions.vue | 4 - src/components/popover/popover.vue | 12 +- .../settings_modal/tabs/theme_tab/theme_tab.scss | 17 -- src/components/timeline/timeline.js | 2 +- src/components/timeline/timeline.scss | 22 +- src/components/timeline/timeline.vue | 2 +- .../timeline/timeline_quick_settings.vue | 16 +- src/components/user_card/user_card.vue | 325 +-------------------- src/components/user_profile/user_profile.vue | 18 -- .../user_reporting_modal/user_reporting_modal.vue | 11 - src/panel.scss | 77 ++--- 12 files changed, 73 insertions(+), 439 deletions(-) (limited to 'src/components/settings_modal/tabs') diff --git a/src/App.scss b/src/App.scss index 0ee1c610..bc792263 100644 --- a/src/App.scss +++ b/src/App.scss @@ -641,12 +641,10 @@ option { } .alert { - margin: 0.35em; - padding: 0.25em; + margin: 0 0.35em; + padding: 0 0.25em; border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - min-height: 28px; - line-height: 28px; &.error { background-color: $fallback--alertError; diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 1e31151c..c35d01af 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -74,10 +74,6 @@ diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 43a660e1..67837845 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -284,327 +284,4 @@ - + diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 9f2e8846..657a2710 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -336,7 +336,7 @@ display: flex; justify-content: space-between; padding: 0.5em; - height: 32px; + height: 2.5em; button { width: 10em; @@ -411,10 +411,12 @@ } .media-upload-icon, .poll-icon, .emoji-icon { - font-size: 26px; + font-size: 1.85em; line-height: 1.1; flex: 1; padding: 0 0.1em; + display: flex; + align-items: center; &.selected, &:hover { // needs to be specific to override icon default color @@ -441,21 +443,17 @@ // Order is not necessary but a good indicator .media-upload-icon { order: 1; - text-align: left; + justify-content: left; } .emoji-icon { order: 2; - text-align: center; + justify-content: center; } .poll-icon { order: 3; - text-align: right; - } - - .poll-icon { - cursor: pointer; + justify-content: right; } .error { @@ -489,10 +487,6 @@ flex-direction: column; } - .btn { - cursor: pointer; - } - .btn[disabled] { cursor: not-allowed; } @@ -551,10 +545,6 @@ } } - .btn { - cursor: pointer; - } - .btn[disabled] { cursor: not-allowed; } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 1e735c69..1c83a47e 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -297,8 +297,8 @@ $validations-cRed: #f04124; .form-group { display: flex; flex-direction: column; - padding: 0.3em 0.0em 0.3em; - line-height:24px; + padding: 0.3em 0; + line-height: 2; margin-bottom: 1em; } @@ -344,7 +344,7 @@ $validations-cRed: #f04124; .btn { margin-top: 0.6em; - height: 28px; + height: 2em; } .error { diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue index be827400..e17aa2e9 100644 --- a/src/components/remote_follow/remote_follow.vue +++ b/src/components/remote_follow/remote_follow.vue @@ -32,7 +32,7 @@ .remote-button { width: 100%; - min-height: 28px; + min-height: 2em; } } diff --git a/src/components/select/select.vue b/src/components/select/select.vue index ea8c8b69..92493b0b 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -39,10 +39,10 @@ label.Select { padding: 0 2em 0 .2em; font-family: sans-serif; font-family: var(--inputFont, sans-serif); - font-size: 14px; + font-size: 1em; width: 100%; z-index: 1; - height: 28px; + height: 2em; line-height: 16px; } @@ -55,7 +55,7 @@ label.Select { width: 0.875em; color: $fallback--text; color: var(--inputText, $fallback--text); - line-height: 28px; + line-height: 2; z-index: 0; pointer-events: none; } diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index f3738a8c..13cb0e65 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -54,7 +54,7 @@ overflow-y: hidden; .btn { - min-height: 28px; + min-height: 2em; min-width: 10em; padding: 0 2em; } diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss index ceb64efb..2adff847 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss @@ -8,7 +8,7 @@ .bulk-actions { text-align: right; padding: 0 1em; - min-height: 28px; + min-height: 2em; } .bulk-action-button { diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index 3c9683cd..201f1a76 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -89,7 +89,7 @@ &-bulk-actions { text-align: right; padding: 0 1em; - min-height: 28px; + min-height: 2em; button { width: 10em; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index cb8e477c..bad6f51b 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -325,7 +325,7 @@ .btn { flex-grow: 1; - min-height: 28px; + min-height: 2em; min-width: 0; max-width: 10em; padding: 0; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 575d41e1..7a086b26 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -25,8 +25,9 @@ border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } + .tab-wrapper { - height: 28px; + height: 2em; &:not(.active)::after { left: 0; diff --git a/src/panel.scss b/src/panel.scss index 167c60a6..637ea17c 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -176,7 +176,7 @@ flex: none; padding: 0.6em 0.6em; text-align: left; - line-height: 28px; + line-height: 2; align-items: baseline; border-width: 1px 0 0 0; border-style: solid; -- cgit v1.2.3-70-g09d2 From edbbbaad48311d5d791183f724e819926c09e638 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 9 May 2022 23:24:35 +0300 Subject: don't use wide mode for anon viewers --- src/components/settings_modal/tabs/general_tab.vue | 1 + src/modules/interface.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/settings_modal/tabs') diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index db8718cf..79c69449 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -72,6 +72,7 @@
  • = 1300 -- cgit v1.2.3-70-g09d2