Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

panels/statuses are looking really good now even with transparency

Browse Source
This commit is contained in:
Henry Jameson 2024-03-04 18:24:29 +02:00
parent a2f2a0e409
commit a190389f3c
12 changed files with 97 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/conversation/conversation.vue
View File

@ -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>

5
src/components/notification/notification.scss
View File

@ -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 {

1
src/components/panel.style.js
View File

@ -23,6 +23,7 @@ export default {
defaultRules: [
{
directives: {
backgroundNoCssColor: 'yes',
background: '--bg',
roundness: 3,
blur: '5px',

1
src/components/panel_header.style.js
View File

@ -15,6 +15,7 @@ export default {
{
component: 'PanelHeader',
directives: {
backgroundNoCssColor: 'yes',
background: '--fg',
shadow: []
}

6
src/components/status/post.style.js
View File

@ -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'
}
}
]

4
src/components/timeline/timeline.scss
View File

@ -1,6 +1,10 @@
@import "../../variables";
.Timeline {
.timeline-body {
background: none;
}
.alert-badge {
font-size: 0.75em;
line-height: 1;

8
src/components/user_card/user_card.scss
View File

@ -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;

5
src/components/user_card/user_card.vue
View File

@ -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"

13
src/components/user_panel/user_panel.vue
View File

@ -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>

96
src/components/user_profile/user_profile.vue
View File

@ -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"
<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.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>
<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>

10
src/panel.scss
View File

@ -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 */

3
src/services/theme_data/theme2_to_theme3.js
View File

@ -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
}