From c16f1d4e35f2d885d2aa4e5f1ee51af9e95c6bdc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 13 Feb 2024 02:27:53 +0200 Subject: more fixes --- src/components/conversation/conversation.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/components/conversation/conversation.vue') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 7577129e..aa5d041c 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -275,11 +275,11 @@ /* expanded conversation in timeline */ &.status-fadein.-expanded .thread-body { - border-left: 4px solid $fallback--cRed; - border-left-color: var(--cRed, $fallback--cRed); - border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; - border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - border-bottom: 1px solid var(--border, $fallback--border); + border-left: 4px solid var(--cRed); + border-radius: var(--roundness); + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom: 1px solid var(--border); } &.-expanded.status-fadein { -- cgit v1.2.3-70-g09d2 From 1bc1a83a1f7e67f19fb508502f798317186154b4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 19 Feb 2024 00:21:44 +0200 Subject: fix borders in statuses and linear view --- src/components/conversation/conversation.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components/conversation/conversation.vue') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index aa5d041c..64aa1351 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -262,7 +262,8 @@ } .thread-ancestor-has-other-replies .conversation-status, - &:last-child .conversation-status, + &:last-child:not(.-expanded) .conversation-status, + &.-expanded .conversation-status:last-child, .thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .thread-ancestor-dive-box, &.-expanded .thread-tree .conversation-status { -- cgit v1.2.3-70-g09d2 From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 18:24:29 +0200 Subject: panels/statuses are looking really good now even with transparency --- src/components/conversation/conversation.vue | 12 ++-- src/components/notification/notification.scss | 5 ++ src/components/panel.style.js | 1 + src/components/panel_header.style.js | 1 + src/components/status/post.style.js | 6 +- src/components/timeline/timeline.scss | 4 ++ src/components/user_card/user_card.scss | 8 --- src/components/user_card/user_card.vue | 5 +- src/components/user_panel/user_panel.vue | 13 +++- src/components/user_profile/user_profile.vue | 96 +++++++++++++++------------ src/panel.scss | 10 +++ src/services/theme_data/theme2_to_theme3.js | 3 + 12 files changed, 97 insertions(+), 67 deletions(-) (limited to 'src/components/conversation/conversation.vue') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 64aa1351..d3ebf791 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -28,7 +28,10 @@ class="rightside-button" /> -
+
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index ad05a2f3..2dbced09 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -5,6 +5,11 @@ word-wrap: break-word; word-break: break-word; + &.Status { + /* stylelint-disable-next-line declaration-no-important */ + background-color: transparent !important; + } + --emoji-size: 14px; &:hover { diff --git a/src/components/panel.style.js b/src/components/panel.style.js index d7459549..ad16c18f 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -23,6 +23,7 @@ export default { defaultRules: [ { directives: { + backgroundNoCssColor: 'yes', background: '--bg', roundness: 3, blur: '5px', diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js index 56879fba..32464bc5 100644 --- a/src/components/panel_header.style.js +++ b/src/components/panel_header.style.js @@ -15,6 +15,7 @@ export default { { component: 'PanelHeader', directives: { + backgroundNoCssColor: 'yes', background: '--fg', shadow: [] } diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js index 673f72e0..8dce527e 100644 --- a/src/components/status/post.style.js +++ b/src/components/status/post.style.js @@ -20,15 +20,13 @@ export default { defaultRules: [ { directives: { - background: '--bg', - opacity: 0 + background: '--bg' } }, { state: ['selected'], directives: { - background: '--inheritedBackground, 10', - opacity: 1 + background: '--inheritedBackground, 10' } } ] diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss index 7f886dc3..fccf28f4 100644 --- a/src/components/timeline/timeline.scss +++ b/src/components/timeline/timeline.scss @@ -1,6 +1,10 @@ @import "../../variables"; .Timeline { + .timeline-body { + background: none; + } + .alert-badge { font-size: 0.75em; line-height: 1; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 6dba3499..bf0ed5c2 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -21,14 +21,6 @@ position: relative; } - .panel-body { - word-wrap: break-word; - border-bottom-right-radius: inherit; - border-bottom-left-radius: inherit; - // create new stacking context - position: relative; - } - .background-image { position: absolute; top: 0; diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 0f627f62..70c4f67d 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -282,10 +282,7 @@ />
-
+
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 011f32da..2d8b33e7 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -4,52 +4,54 @@ v-if="user" class="user-profile panel panel-default" > - - - + - {{ $t('user_card.birthday', { birthday: formattedBirthday }) }} - -
-
+
{{ error }} diff --git a/src/panel.scss b/src/panel.scss index 5df9fee4..08339765 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -1,5 +1,8 @@ /* stylelint-disable no-descending-specificity */ .panel { + --__panel-background: var(--background); + --__panel-backdrop-filter: var(--backdrop-filter); + position: relative; display: flex; flex-direction: column; @@ -28,6 +31,8 @@ .panel-body { padding: var(--panel-body-padding, 0); + background: var(--background); + backdrop-filter: var(--__panel-backdrop-filter); &:empty::before { content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations @@ -50,6 +55,7 @@ --__panel-heading-height: 3.2em; --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0)); + backdrop-filter: var(--__panel-backdrop-filter); position: relative; box-sizing: border-box; display: grid; @@ -131,6 +137,9 @@ border-radius: var(--roundness) var(--roundness) 0 0; border-width: 0 0 1px; align-items: start; + background-image: + linear-gradient(to bottom, var(--background), var(--background)), + linear-gradient(to bottom, var(--__panel-background), var(--__panel-background)); &::after { background-color: var(--background); @@ -186,5 +195,6 @@ border-width: 1px 0 0; border-style: solid; border-color: var(--border); + background-color: var(--__panel-background); } /* stylelint-enable no-descending-specificity */ diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 8c623c69..75c82314 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => { newRules.push({ ...rule, component: 'Tab' }) newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } }) } + if (rule.component === 'Panel') { + newRules.push({ ...rule, component: 'Post' }) + } }) return newRules } -- cgit v1.2.3-70-g09d2 From 075f2cb903fa45ea8e7a52098fd7091b0b14a9fd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 19:45:42 +0200 Subject: remove all "fallback variables" --- src/App.scss | 1 - src/_variables.scss | 36 ----------------- src/components/account_actions/account_actions.vue | 2 - src/components/announcement/announcement.vue | 8 ++-- .../announcements_page/announcements_page.vue | 6 +-- src/components/attachment/attachment.scss | 18 +-------- src/components/autosuggest/autosuggest.vue | 6 +-- src/components/avatar_list/avatar_list.vue | 5 +-- src/components/chat/chat.vue | 1 - src/components/chat_list/chat_list.vue | 5 +-- src/components/chat_list_item/chat_list_item.vue | 1 - src/components/chat_new/chat_new.vue | 1 - src/components/chat_title/chat_title.vue | 5 +-- src/components/checkbox/checkbox.vue | 1 - src/components/color_input/color_input.scss | 4 -- src/components/conversation/conversation.vue | 34 ++++++++-------- src/components/desktop_nav/desktop_nav.scss | 2 - src/components/dialog_modal/dialog_modal.vue | 11 +----- src/components/emoji_input/emoji_input.vue | 2 - src/components/emoji_picker/emoji_picker.scss | 5 +-- src/components/emoji_reactions/emoji_reactions.vue | 16 +++----- src/components/extra_buttons/extra_buttons.vue | 4 +- .../extra_notifications/extra_notifications.vue | 5 +-- src/components/favorite_button/favorite_button.vue | 4 +- src/components/flash/flash.vue | 2 - src/components/font_control/font_control.vue | 2 - src/components/gallery/gallery.vue | 2 - .../global_notice_list/global_notice_list.vue | 2 - .../interface_language_switcher.vue | 2 - src/components/link-preview/link-preview.vue | 7 +--- src/components/lists_edit/lists_edit.vue | 2 - .../lists_user_search/lists_user_search.vue | 2 - src/components/login_form/login_form.vue | 2 - src/components/media_upload/media_upload.vue | 2 - src/components/mention_link/mention_link.scss | 10 ++--- src/components/mobile_nav/mobile_nav.vue | 8 +--- .../mobile_post_status_button.vue | 5 +-- .../moderation_tools/moderation_tools.vue | 2 - .../mrf_transparency_panel.vue | 1 - src/components/nav_panel/nav_panel.vue | 2 - src/components/navigation/navigation_pins.vue | 2 - src/components/notifications/notifications.scss | 2 - src/components/panel_loading/panel_loading.vue | 8 +--- src/components/password_reset/password_reset.vue | 9 +---- src/components/poll/poll.vue | 5 +-- src/components/poll/poll_form.vue | 2 - .../post_status_form/post_status_form.vue | 29 +++++--------- src/components/react_button/react_button.vue | 8 +--- src/components/registration/registration.vue | 6 +-- src/components/reply_button/reply_button.vue | 4 +- src/components/report/report.scss | 2 - src/components/retweet_button/retweet_button.vue | 4 +- src/components/scope_selector/scope_selector.vue | 2 - src/components/search_bar/search_bar.vue | 5 +-- src/components/select/select.vue | 3 -- src/components/settings_modal/settings_modal.scss | 2 - .../settings_modal_admin_content.scss | 7 +--- .../settings_modal_user_content.scss | 7 +--- .../settings_modal/tabs/profile_tab.scss | 2 - .../settings_modal/tabs/security_tab/mfa.vue | 5 +-- .../tabs/security_tab/mfa_backup_codes.vue | 2 - .../settings_modal/tabs/theme_tab/theme_tab.scss | 10 ++--- src/components/shout_panel/shout_panel.vue | 5 +-- src/components/side_drawer/side_drawer.vue | 2 - src/components/status/status.scss | 45 +++++++--------------- src/components/status_popover/status_popover.vue | 2 - src/components/sticker_picker/sticker_picker.vue | 4 +- src/components/still-image/still-image.vue | 5 +-- src/components/tab_switcher/tab_switcher.scss | 15 ++------ src/components/thread_tree/thread_tree.vue | 8 ++-- src/components/timeline/timeline.scss | 2 - src/components/timeline_menu/timeline_menu.vue | 2 - .../update_notification/update_notification.scss | 4 +- src/components/user_avatar/user_avatar.vue | 2 - src/components/user_card/user_card.scss | 2 - src/components/user_note/user_note.vue | 4 +- src/components/user_popover/user_popover.vue | 2 - src/components/user_profile/user_profile.vue | 2 - .../user_reporting_modal/user_reporting_modal.vue | 8 +--- src/hocs/with_load_more/with_load_more.scss | 5 +-- 80 files changed, 99 insertions(+), 382 deletions(-) delete mode 100644 src/_variables.scss (limited to 'src/components/conversation/conversation.vue') diff --git a/src/App.scss b/src/App.scss index 289add77..97d3f516 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,6 +1,5 @@ // stylelint-disable rscss/class-format /* stylelint-disable no-descending-specificity */ -@import "./variables"; @import "./panel"; :root { diff --git a/src/_variables.scss b/src/_variables.scss deleted file mode 100644 index 751fc9a4..00000000 --- a/src/_variables.scss +++ /dev/null @@ -1,36 +0,0 @@ -$main-color: #f58d2c; -$main-background: white; -$darkened-background: whitesmoke; - -$fallback--bg: #121a24; -$fallback--fg: #182230; -$fallback--faint: rgb(185 185 186 / 50%); -$fallback--text: #b9b9ba; -$fallback--link: #d8a070; -$fallback--icon: #666; -$fallback--lightBg: rgb(21 30 42); -$fallback--lightText: #b9b9ba; -$fallback--border: #222; -$fallback--cRed: #f00; -$fallback--cBlue: #0095ff; -$fallback--cGreen: #0fa00f; -$fallback--cOrange: orange; - -$fallback--alertError: rgb(211 16 20 / 50%); -$fallback--alertWarning: rgb(111 111 20 / 50%); - -$fallback--panelRadius: 10px; -$fallback--checkboxRadius: 2px; -$fallback--btnRadius: 4px; -$fallback--inputRadius: 4px; -$fallback--tooltipRadius: 5px; -$fallback--avatarRadius: 4px; -$fallback--avatarAltRadius: 10px; -$fallback--attachmentRadius: 10px; -$fallback--chatMessageRadius: 10px; - -$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%), - 0 1px 0 0 rgb(255 255 255 / 20%) inset, - 0 -1px 0 0 rgb(0 0 0 / 20%) inset; - -$status-margin: 0.75em; diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index cca7121c..9a7c6824 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -122,8 +122,6 @@ diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue index 27a475ed..b33ea67e 100644 --- a/src/components/chat_list/chat_list.vue +++ b/src/components/chat_list/chat_list.vue @@ -45,8 +45,6 @@ diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue index cbae2d11..0f9d5c5f 100644 --- a/src/components/chat_list_item/chat_list_item.vue +++ b/src/components/chat_list_item/chat_list_item.vue @@ -48,6 +48,5 @@ diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index 5a872b66..673ba56b 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -48,6 +48,5 @@ diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index 93db4fa7..68ee7a5a 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -26,8 +26,6 @@ diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 373cb2f2..61d2541c 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -1,5 +1,3 @@ -@import "../../variables"; - .DesktopNav { width: 100%; z-index: var(--ZI_navbar); diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 341cf105..b917c637 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -25,8 +25,6 @@ diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue index 3c44579a..3c2066f6 100644 --- a/src/components/lists_edit/lists_edit.vue +++ b/src/components/lists_edit/lists_edit.vue @@ -165,8 +165,6 @@ diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 6380deac..bf608936 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -103,8 +103,6 @@ diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue index 7ac6db74..037b859e 100644 --- a/src/components/password_reset/password_reset.vue +++ b/src/components/password_reset/password_reset.vue @@ -30,7 +30,7 @@

{{ $t('password_reset.password_reset_required') }}

@@ -77,8 +77,6 @@ diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 1b0674e6..e648e7e3 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -41,7 +41,6 @@ diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue index 3b2bbc45..413b254c 100644 --- a/src/components/user_popover/user_popover.vue +++ b/src/components/user_popover/user_popover.vue @@ -24,8 +24,6 @@ -- cgit v1.2.3-70-g09d2 From b925c32e67d05a958a980d94c2b0d467e2c73125 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 25 Mar 2024 16:38:03 +0200 Subject: Make unloaded statuses follow panel styling --- src/components/conversation/conversation.vue | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/components/conversation/conversation.vue') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 97443df3..ae7ae359 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -206,6 +206,7 @@
@@ -216,6 +217,11 @@ .Conversation { z-index: 1; + &.-hidden { + background: var(--__panel-background); + backdrop-filter: var(--__panel-backdrop-filter); + } + .conversation-dive-to-top-level-box { padding: var(--status-margin); border-bottom: 1px solid var(--border); -- cgit v1.2.3-70-g09d2 From 9bdc8d9b9ce8d5f30049201994014abb481e5367 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 29 Mar 2024 13:36:43 +0200 Subject: fix transparency blur in statuses on firefox --- src/components/conversation/conversation.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/conversation/conversation.vue') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index ae7ae359..171e6717 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -81,7 +81,7 @@ :replies="getReplies(status.id)" :in-profile="inProfile" :profile-user-id="profileUserId" - class="conversation-status status-fadein" + class="conversation-status status-fadein panel-body" :simple-tree="treeViewIsSimple" :toggle-thread-display="toggleThreadDisplay" @@ -186,7 +186,7 @@ :replies="getReplies(status.id)" :in-profile="inProfile" :profile-user-id="profileUserId" - class="conversation-status status-fadein" + class="conversation-status status-fadein panel-body" :toggle-thread-display="toggleThreadDisplay" :thread-display-status="threadDisplayStatus" -- cgit v1.2.3-70-g09d2 From b173741f870243c6ded3b6f400827f8c00f20bb7 Mon Sep 17 00:00:00 2001 From: tusooa Date: Sun, 14 Apr 2024 11:46:29 -0400 Subject: Display loading and error indicator for conversation page --- changelog.d/status-loading-indicator.add | 1 + src/components/conversation/conversation.js | 7 ++++++- src/components/conversation/conversation.vue | 17 +++++++++++++++++ src/i18n/en.json | 4 +++- 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 changelog.d/status-loading-indicator.add (limited to 'src/components/conversation/conversation.vue') diff --git a/changelog.d/status-loading-indicator.add b/changelog.d/status-loading-indicator.add new file mode 100644 index 00000000..d0725677 --- /dev/null +++ b/changelog.d/status-loading-indicator.add @@ -0,0 +1 @@ +Display loading and error indicator for conversation page diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 85e6d8ad..a94d2130 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -56,7 +56,8 @@ const conversation = { expanded: false, threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' statusContentPropertiesObject: {}, - inlineDivePosition: null + inlineDivePosition: null, + loadStatusError: null } }, props: [ @@ -392,11 +393,15 @@ const conversation = { this.setHighlight(this.originalStatusId) }) } else { + this.loadStatusError = null this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) .then((status) => { this.$store.dispatch('addNewStatuses', { statuses: [status] }) this.fetchConversation() }) + .catch((error) => { + this.loadStatusError = error + }) } }, getReplies (id) { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 171e6717..526de5c3 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -29,6 +29,23 @@ />
+

+ + {{ $t('status.loading') }} +

+

+ {{ $t('status.load_error', { error: loadStatusError }) }} +

+
+
diff --git a/src/i18n/en.json b/src/i18n/en.json index 8b7d6021..a011139a 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1110,7 +1110,9 @@ "hide_quote": "Hide the quoted status", "display_quote": "Display the quoted status", "invisible_quote": "Quoted status unavailable: {link}", - "more_actions": "More actions on this status" + "more_actions": "More actions on this status", + "loading": "Loading...", + "load_error": "Unable to load status: {error}" }, "user_card": { "approve": "Approve", -- cgit v1.2.3-70-g09d2