commit: a190389f3c9f44072465560dce7203e9ce328f2c
parent a2f2a0e4090e9fdc9d227fe8fa13fad9ac529887
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 18:24:29 +0200
panels/statuses are looking really good now even with transparency
Diffstat:
12 files changed, 97 insertions(+), 67 deletions(-)
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -28,7 +28,10 @@
class="rightside-button"
/>
</div>
- <div class="conversation-body panel-body">
+ <div
+ class="conversation-body"
+ :class="{ 'panel-body': isExpanded }"
+ >
<div
v-if="isTreeView"
class="thread-body"
@@ -78,7 +81,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein panel-body"
+ class="conversation-status status-fadein"
:simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
- class="conversation-status status-fadein panel-body"
+ class="conversation-status status-fadein"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
@@ -284,7 +287,8 @@
}
&.-expanded.status-fadein {
- margin: calc(var(--status-margin, $status-margin) / 2);
+ background: var(--background);
+ padding: calc(var(--status-margin, $status-margin) / 2);
}
}
</style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -282,10 +282,7 @@
/>
</div>
</div>
- <div
- v-if="!hideBio"
- class="panel-body"
- >
+ <div v-if="!hideBio">
<div
v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
<script src="./user_panel.js"></script>
<style lang="scss">
-.user-panel .signed-in {
- overflow: visible;
- z-index: 10;
+.user-panel {
+ .panel {
+ background: var(--background);
+ backdrop-filter: var(--backdrop-filter);
+ }
+
+ .signed-in {
+ overflow: visible;
+ z-index: 10;
+ }
}
</style>
diff --git 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"
>
- <UserCard
- :user-id="userId"
- :switcher="true"
- :selected="timeline.viewing"
- avatar-action="zoom"
- rounded="top"
- :has-note-editor="true"
- />
- <span
- v-if="!!user.birthday"
- class="user-birthday"
- >
- <FAIcon
- class="fa-old-padding"
- icon="birthday-cake"
+ <div class="panel-body">
+ <UserCard
+ :user-id="userId"
+ :switcher="true"
+ :selected="timeline.viewing"
+ avatar-action="zoom"
+ rounded="top"
+ :has-note-editor="true"
/>
- {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
- </span>
- <div
- v-if="user.fields_html && user.fields_html.length > 0"
- class="user-profile-fields"
- >
- <dl
- v-for="(field, index) in user.fields_html"
- :key="index"
- class="user-profile-field"
+ <span
+ v-if="!!user.birthday"
+ class="user-birthday"
>
- <dt
- :title="user.fields_text[index].name"
- class="user-profile-field-name"
- >
- <RichContent
- :html="field.name"
- :emoji="user.emoji"
- />
- </dt>
- <dd
- :title="user.fields_text[index].value"
- class="user-profile-field-value"
+ <FAIcon
+ class="fa-old-padding"
+ icon="birthday-cake"
+ />
+ {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+ </span>
+ <div
+ v-if="user.fields_html && user.fields_html.length > 0"
+ class="user-profile-fields"
+ >
+ <dl
+ v-for="(field, index) in user.fields_html"
+ :key="index"
+ class="user-profile-field"
>
- <RichContent
- :html="field.value"
- :emoji="user.emoji"
- />
- </dd>
- </dl>
+ <dt
+ :title="user.fields_text[index].name"
+ class="user-profile-field-name"
+ >
+ <RichContent
+ :html="field.name"
+ :emoji="user.emoji"
+ />
+ </dt>
+ <dd
+ :title="user.fields_text[index].value"
+ class="user-profile-field-value"
+ >
+ <RichContent
+ :html="field.value"
+ :emoji="user.emoji"
+ />
+ </dd>
+ </dl>
+ </div>
</div>
<tab-switcher
:active-tab="tab"
@@ -136,7 +138,7 @@
{{ $t('settings.profile_tab') }}
</div>
</div>
- <div class="panel-body">
+ <div>
<span v-if="error">{{ error }}</span>
<FAIcon
v-else
@@ -160,6 +162,11 @@
// No sticky header on user profile
--currentPanelStack: 1;
+ .tab-switcher .tabs {
+ background: var(--__panel-background);
+ backdrop-filter: var(--__panel-backdrop-filter);
+ }
+
.user-birthday {
margin: 0 0.75em 0.5em;
}
@@ -228,4 +235,5 @@
padding: 7em;
}
}
+
</style>
diff --git 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
@@ -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
}
