From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 18:24:29 +0200 Subject: [PATCH 01/10] 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(-) diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 64aa13515..d3ebf791a 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 ad05a2f38..2dbced099 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 d7459549a..ad16c18ff 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 56879fba0..32464bc50 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 673f72e0d..8dce527ec 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 7f886dc36..fccf28f47 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 6dba34994..bf0ed5c23 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 0f627f62f..70c4f67df 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 011f32da6..2d8b33e76 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 5df9fee41..083397654 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 8c623c698..75c823143 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 } From 545c875a857c129207624b4251cd7cdae1c24c67 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 19:03:29 +0200 Subject: [PATCH 02/10] process chunks strictly sequentially to avoid overloading the event queue --- src/services/style_setter/style_setter.js | 26 ++++++++++++++++------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 69619a500..d875f0f0f 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -50,15 +50,25 @@ export const applyTheme = async (input) => { // Optimization - instead of processing all lazy rules in one go, process them in small chunks // so that UI can do other things and be somewhat responsive while less important rules are being // processed - chunk(themes3.lazy, 5).forEach(chunk => { - setTimeout(() => { - Promise.all(chunk.map(x => x())).then(result => { - getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => { - styleSheet.insertRule(rule, 'index-max') - }) + let counter = 0 + const chunks = chunk(themes3.lazy, 200) + // let t0 = performance.now() + const processChunk = () => { + const chunk = chunks[counter] + Promise.all(chunk.map(x => x())).then(result => { + getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => { + styleSheet.insertRule(rule, 'index-max') }) - }, 200) - }) + // const t1 = performance.now() + // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms') + // t0 = t1 + counter += 1 + if (counter < chunks.length) { + setTimeout(processChunk, 0) + } + }) + } + setTimeout(processChunk, 0) return Promise.resolve() } From 7238b218f9a0aa60a74eb49a3581aa25e0f1d3f2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 19:10:23 +0200 Subject: [PATCH 03/10] fix badgeNotification for themes2 --- src/services/theme_data/theme2_to_theme3.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 75c823143..e150369f2 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -126,7 +126,6 @@ export const convertTheme2To3 = (data) => { data.colors.link = data.colors.link || data.colors.accent const generateRoot = () => { const directives = {} - console.log(data.colors) basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex }) return { component: 'Root', @@ -506,7 +505,6 @@ export const convertTheme2To3 = (data) => { { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' } ] - console.log(newRule) if (newRule.state?.indexOf('toggled') >= 0) { rules.push({ ...newRule, state: [...newRule.state, 'focused'] }) rules.push({ ...newRule, state: [...newRule.state, 'hover'] }) @@ -516,6 +514,12 @@ export const convertTheme2To3 = (data) => { rules.push({ ...newRule, state: [...newRule.state, 'focused'] }) } return rules + } else if (newRule.component === 'Badge') { + if (newRule.variant === 'notification') { + return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }] + } else { + return [newRule] + } } else if (newRule.component === 'TopBar') { return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }] } else { From 50a9c077fbf6d403caa4c383e5502eeda47f2ef8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 19:24:18 +0200 Subject: [PATCH 04/10] fix new chat window --- src/components/chat_new/chat_new.scss | 5 ---- src/components/chat_new/chat_new.vue | 43 ++++++++++++++------------- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss index b145ecf9a..b84e0beba 100644 --- a/src/components/chat_new/chat_new.scss +++ b/src/components/chat_new/chat_new.scss @@ -16,11 +16,6 @@ padding-bottom: 0.7rem; } - .basic-user-card:hover { - cursor: pointer; - background-color: var(--selectedPost, $fallback--lightBg); - } - .go-back-button { text-align: center; line-height: 1; diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue index 34c85a279..5a872b66d 100644 --- a/src/components/chat_new/chat_new.vue +++ b/src/components/chat_new/chat_new.vue @@ -16,28 +16,29 @@ />
-
-
- +
+
+
+ +
+
- -
-
-
-
+
+
From 075f2cb903fa45ea8e7a52098fd7091b0b14a9fd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Mar 2024 19:45:42 +0200 Subject: [PATCH 05/10] remove all "fallback variables" --- src/App.scss | 1 - src/_variables.scss | 36 --------------- .../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 +-- .../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 +-- .../emoji_reactions/emoji_reactions.vue | 16 +++---- .../extra_buttons/extra_buttons.vue | 4 +- .../extra_notifications.vue | 5 +-- .../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 - .../notifications/notifications.scss | 2 - .../panel_loading/panel_loading.vue | 8 +--- .../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 - .../retweet_button/retweet_button.vue | 4 +- .../scope_selector/scope_selector.vue | 2 - src/components/search_bar/search_bar.vue | 5 +-- src/components/select/select.vue | 3 -- .../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 - .../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 ++++++------------- .../status_popover/status_popover.vue | 2 - .../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 - .../timeline_menu/timeline_menu.vue | 2 - .../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.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 diff --git a/src/App.scss b/src/App.scss index 289add77e..97d3f5161 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 751fc9a46..000000000 --- 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 cca7121cf..9a7c6824a 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 27a475edf..b33ea67ec 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 cbae2d11a..0f9d5c5fa 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 5a872b66d..673ba56b6 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 93db4fa7f..68ee7a5ab 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 373cb2f2a..61d2541ca 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 341cf1054..b917c6371 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 3c44579af..3c2066f69 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 6380deac4..bf608936f 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 7ac6db748..037b859e8 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 1b0674e6d..e648e7e3b 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 3b2bbc452..413b254cc 100644 --- a/src/components/user_popover/user_popover.vue +++ b/src/components/user_popover/user_popover.vue @@ -24,8 +24,6 @@