From 06042569f1d2f2c7217917459df007adbb113e53 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Feb 2022 22:10:45 +0200 Subject: fix alignment issues --- src/components/popover/popover.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 2e78a09e..8588b351 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -33,7 +33,7 @@ @import '../../_variables.scss'; .popover-trigger-button { - display: block; + display: inline-block; } .popover { -- cgit v1.2.3-70-g09d2 From 041c72b07c7d0559bd5b97c49503e69707aa08b2 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Wed, 6 Apr 2022 20:04:36 -0400 Subject: Fix dropdown menu style inside panel header --- src/components/popover/popover.vue | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 8588b351..1502c30c 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -149,5 +149,30 @@ } } + + .button-default.dropdown-item { + &, + i[class*=icon-] { + color: $fallback--text; + color: var(--btnText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnPressed, $fallback--fg); + color: $fallback--text; + color: var(--btnPressedText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnDisabledText, $fallback--text); + } + + &.toggled { + color: $fallback--text; + color: var(--btnToggledText, $fallback--text); + } + } } -- cgit v1.2.3-70-g09d2 From fce9c5eeb2092a3c66609afbed81f933b6bec069 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Wed, 6 Apr 2022 22:50:01 -0400 Subject: Fix active popover style --- src/components/popover/popover.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 1502c30c..332a0398 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -158,10 +158,10 @@ } &:active { - background-color: $fallback--fg; - background-color: var(--btnPressed, $fallback--fg); - color: $fallback--text; - color: var(--btnPressedText, $fallback--text); + background-color: $fallback--lightBg; + background-color: var(--selectedMenuPopover, $fallback--lightBg); + color: $fallback--link; + color: var(--selectedMenuPopoverText, $fallback--link); } &:disabled { -- cgit v1.2.3-70-g09d2 From 51c996bd7e964802233f031090a97b6e3786794d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 7 Apr 2022 16:18:39 +0300 Subject: boost z-index of popover --- src/components/popover/popover.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 332a0398..4b3ad7da 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -37,7 +37,7 @@ } .popover { - z-index: 8; + z-index: 90; position: absolute; min-width: 0; } -- cgit v1.2.3-70-g09d2 From 282e6812b38b5354b1f5a77297cf77ca7365397e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 8 Apr 2022 13:31:29 +0300 Subject: fix chats, boost popover's z-index some more --- src/components/chat/chat.scss | 43 -------------------------------------- src/components/popover/popover.vue | 2 +- 2 files changed, 1 insertion(+), 44 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 85e9f59d..34a335fe 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -108,47 +108,4 @@ } } } - - @media all and (max-width: 800px) { - height: 100%; - overflow: hidden; - - .chat-view-inner { - overflow: hidden; - height: 100%; - margin-top: 0; - margin-left: 0; - margin-right: 0; - } - - .chat-view-body { - display: flex; - min-height: auto; - overflow: hidden; - height: 100%; - margin: 0; - border-radius: 0; - } - - .chat-view-heading { - box-sizing: border-box; - position: static; - top: 0; - margin-top: 0; - border-radius: 0; - height: 50px; - } - - .scrollable-message-list { - display: unset; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - } - - .footer { - position: sticky; - bottom: auto; - } - } } diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 4b3ad7da..3f2a81f5 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -37,7 +37,7 @@ } .popover { - z-index: 90; + z-index: 500; position: absolute; min-width: 0; } -- cgit v1.2.3-70-g09d2 From f27226b55cefe6e351e562bbc908f5517e236804 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 22:09:46 +0300 Subject: improvements to relative font sizes --- src/App.scss | 6 +++--- src/components/popover/popover.vue | 2 +- src/panel.scss | 13 +++++++------ 3 files changed, 11 insertions(+), 10 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/App.scss b/src/App.scss index cc8ef592..1025bb50 100644 --- a/src/App.scss +++ b/src/App.scss @@ -301,7 +301,7 @@ nav { cursor: pointer; box-shadow: $fallback--buttonShadow; box-shadow: var(--buttonShadow); - font-size: 1rem; + font-size: 1em; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); @@ -429,7 +429,7 @@ textarea, color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-family: var(--inputFont, sans-serif); - font-size: 1rem; + font-size: 1em; margin: 0; box-sizing: border-box; display: inline-block; @@ -730,7 +730,7 @@ i[class*=icon-], } .btn.button-default { - min-height: 28px; + min-height: 2em; } .new-status-notification { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 3f2a81f5..973625d1 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -65,7 +65,7 @@ .dropdown-menu { display: block; padding: .5rem 0; - font-size: 1rem; + font-size: 1em; text-align: left; list-style: none; max-width: 100vw; diff --git a/src/panel.scss b/src/panel.scss index 049144ba..b23ec4bb 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -28,7 +28,8 @@ .panel-body:empty::before { content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations - display: block; margin: 1em; + display: block; + margin: 1em; text-align: center; } @@ -42,18 +43,18 @@ background-size: cover; padding: 0.6em 0.6em; text-align: left; - line-height: 28px; + line-height: calc(var(--panel-heading-height) / 2); color: var(--panelText); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); align-items: baseline; - height: var(--panelHeadingHeight); + height: var(--panel-heading-height); z-index: -2; - --panelHeadingHeight: 45px; + --panel-heading-height: 3.2em; &.-flexible-height { - --panelHeadingHeight: auto; + --panel-heading-height: auto; &::after, &::before { @@ -92,7 +93,7 @@ z-index: -1; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; - mask: linear-gradient(to bottom, white var(--panelHeadingHeight), transparent var(--panelHeadingHeight)); + mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height)); } .title { -- cgit v1.2.3-70-g09d2 From df18a74adc4dbad7ca0daf38c041f9ac482a29c8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 11 Apr 2022 23:18:46 +0300 Subject: fixes for z-indexes --- src/components/popover/popover.vue | 2 +- src/components/post_status_form/post_status_form.vue | 4 ++-- src/panel.scss | 16 +++++----------- 3 files changed, 8 insertions(+), 14 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 973625d1..91939ee7 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -69,7 +69,7 @@ text-align: left; list-style: none; max-width: 100vw; - z-index: 10; + z-index: 200; white-space: nowrap; .dropdown-divider { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 47b8a213..f052e4de 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -509,7 +509,7 @@ flex-direction: column; padding: 0.25em 0.5em 0.5em; line-height:24px; - z-index: 50; + z-index: 10; } form textarea.form-cw { @@ -572,7 +572,7 @@ .drop-indicator { position: absolute; - z-index: 100; + z-index: 11; width: 100%; height: 100%; font-size: 5em; diff --git a/src/panel.scss b/src/panel.scss index 57059cb9..175d2181 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -2,7 +2,6 @@ position: relative; display: flex; flex-direction: column; - z-index: 0; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); @@ -19,7 +18,7 @@ bottom: 0; left: 0; right: 0; - z-index: 100; + z-index: 3; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: var(--panelShadow); pointer-events: none; @@ -53,7 +52,6 @@ background-color: var(--bg, $fallback--bg); align-items: baseline; height: var(--panel-heading-height); - z-index: -2; &.-flexible-height { --panel-heading-height: auto; @@ -90,14 +88,6 @@ box-shadow: var(--panelHeaderShadow); } - &::before { - bottom: -20px; - z-index: -1; - border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; - border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; - mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height)); - } - .title { flex: 1 0 auto; font-size: 1.3em; @@ -202,3 +192,7 @@ padding: 1em; margin: 0; } + +.panel-body { + padding: var(--panel-body-padding, 0); +} -- cgit v1.2.3-70-g09d2 From e744775ce8a5ca5f5fbad63e207ce75dbde04e63 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 11 Apr 2022 23:49:46 +0300 Subject: fix dropdown menus --- src/components/popover/popover.vue | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 91939ee7..e1eb2c21 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -45,8 +45,19 @@ .popover-default { transition: opacity 0.3s; - box-shadow: 1px 1px 4px rgba(0,0,0,.6); - box-shadow: var(--panelShadow); + &:after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 3; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + box-shadow: var(--panelShadow); + pointer-events: none; + } + border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); @@ -110,14 +121,15 @@ &:active, &:hover { background-color: $fallback--lightBg; background-color: var(--selectedMenuPopover, $fallback--lightBg); - color: $fallback--link; - color: var(--selectedMenuPopoverText, $fallback--link); + box-shadow: none; + --btnText: var(--selectedMenuPopoverText, $fallback--link); --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --icon: var(--selectedMenuPopoverIcon, $fallback--icon); svg { color: var(--selectedMenuPopoverIcon, $fallback--icon); + --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } } -- cgit v1.2.3-70-g09d2 From d87a1fda591a972571ce45dbb21bd193ef892555 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 00:37:08 +0300 Subject: fix scrollbars in dropdowns --- src/components/notifications/notification_filters.vue | 8 ++------ src/components/popover/popover.vue | 2 +- src/panel.scss | 6 +++--- 3 files changed, 6 insertions(+), 10 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue index ba0e90a0..7418fc7c 100644 --- a/src/components/notifications/notification_filters.vue +++ b/src/components/notifications/notification_filters.vue @@ -64,7 +64,7 @@ @@ -106,17 +106,13 @@ export default { .NotificationFilters { align-self: stretch; - > button { + .filter-trigger-button { font-size: 1.2em; padding-left: 0.7em; padding-right: 0.2em; line-height: 100%; height: 100%; } - - .dropdown-item { - margin: 0; - } } diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index e1eb2c21..044b887d 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -95,7 +95,7 @@ line-height: 21px; overflow: auto; display: block; - padding: .5em 0.75em; + padding: 0.25em 0.75em; clear: both; font-weight: 400; text-align: inherit; diff --git a/src/panel.scss b/src/panel.scss index f3e51d39..147b17a9 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -110,8 +110,8 @@ overflow-x: hidden; } - .button-default, - .alert { + > .button-default, + > .alert { height: var(--__panel-heading-height-inner); min-height: 0; box-sizing: border-box; @@ -122,7 +122,7 @@ padding-bottom: 0; } - .button-default { + > .button-default { flex-shrink: 0; &, -- 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/popover/popover.vue') 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/popover/popover.js b/src/components/popover/popover.js index dd332c35..60c42f0f 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -51,6 +51,10 @@ const Popover = { // lockReEntry is a flag that is set when mouse cursor is leaving the popover's content // so that if mouse goes back into popover it won't be re-shown again to prevent annoyance // with popovers refusing to be hidden when user wants to interact with something in below popover + anchorEl: null, + // There's an issue where having teleport enabled by default causes things just... + // not render at all, i.e. main post status form and its emoji inputs + teleport: false, lockReEntry: false, hidden: true, styles: {}, @@ -63,6 +67,10 @@ const Popover = { } }, methods: { + setAnchorEl (el) { + this.anchorEl = el + this.updateStyles() + }, containerBoundingClientRect () { const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent return container.getBoundingClientRect() @@ -75,7 +83,7 @@ const Popover = { // Popover will be anchored around this element, trigger ref is the container, so // its children are what are inside the slot. Expect only one v-slot:trigger. - const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el + const anchorEl = this.anchorEl || (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el // SVGs don't have offsetWidth/Height, use fallback const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth @@ -319,6 +327,7 @@ const Popover = { } }, mounted () { + this.teleport = true let scrollable = this.$refs.trigger.closest('.column.-scrollable') || this.$refs.trigger.closest('.mobile-notifications') if (!scrollable) scrollable = window diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 623af8d2..217eba7c 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -11,7 +11,7 @@ > - +
Date: Mon, 7 Nov 2022 13:22:40 -0500 Subject: Add labels for timeline header --- src/components/popover/popover.js | 7 ++++++- src/components/popover/popover.vue | 1 + src/components/quick_filter_settings/quick_filter_settings.vue | 5 ++--- src/components/quick_view_settings/quick_view_settings.vue | 5 ++--- src/components/timeline/timeline.vue | 1 + src/i18n/en.json | 4 +++- 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index dd332c35..72b7c511 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -43,7 +43,12 @@ const Popover = { overlayCentersSelector: String, // Lets hover popover stay when clicking inside of it - stayOnClick: Boolean + stayOnClick: Boolean, + + triggerAttrs: { + type: Object, + default: {} + } }, inject: ['popoversZLayer'], // override popover z layer data () { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 623af8d2..9506728e 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -7,6 +7,7 @@ ref="trigger" class="button-unstyled popover-trigger-button" type="button" + v-bind="triggerAttrs" @click="onClick" > diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue index 54ea037e..87fcd716 100644 --- a/src/components/quick_filter_settings/quick_filter_settings.vue +++ b/src/components/quick_filter_settings/quick_filter_settings.vue @@ -3,6 +3,7 @@ trigger="click" class="QuickFilterSettings" :bound-to="{ x: 'container' }" + :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }" > diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue index b0413cac..d7c9bf3b 100644 --- a/src/components/quick_view_settings/quick_view_settings.vue +++ b/src/components/quick_view_settings/quick_view_settings.vue @@ -3,6 +3,7 @@ trigger="click" class="QuickViewSettings" :bound-to="{ x: 'container' }" + :triggerAttrs="{ title: $t('timeline.quick_view_settings') }" > diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8a036fd0..15cf043e 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -47,6 +47,7 @@ v-else-if="!embedded" class="loadmore-text faint veryfaint rightside-icon" :title="$t('timeline.up_to_date')" + :aria-disabled="true" @click.prevent > Date: Mon, 21 Nov 2022 22:17:33 +0200 Subject: lint --- src/components/emoji_input/emoji_input.vue | 13 ++++++++++--- src/components/emoji_picker/emoji_picker.vue | 4 ++-- src/components/mobile_nav/mobile_nav.vue | 6 +++--- src/components/notifications/notifications.vue | 2 +- src/components/popover/popover.vue | 5 ++++- .../quick_filter_settings/quick_filter_settings.vue | 2 +- src/components/quick_view_settings/quick_view_settings.vue | 2 +- src/components/search/search.js | 4 ++-- src/components/timeline/timeline.vue | 14 ++++++++++---- 9 files changed, 34 insertions(+), 18 deletions(-) (limited to 'src/components/popover/popover.vue') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 63bf856e..c9bbc18f 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -6,9 +6,16 @@ > -
+
{{ preText }} - x + x {{ postText }}