hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into misc-style-fixes-or-changes

Browse source
This commit is contained in:
Henry Jameson 2025-08-14 16:14:41 +03:00
commit 00c3719618
25 changed files with 260 additions and 431 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/attachment/attachment.style.js
View file

@ -1,27 +0,0 @@
export default {
name: 'Attachment',
selector: '.Attachment',
notEditable: true,
validInnerComponents: [
'Border',
'Button',
'Input'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'Button',
parent: {
component: 'Attachment'
},
directives: {
background: '#FFFFFF',
opacity: 0.5
}
}
]
}

16
src/components/attachment/attachment.vue
View file

@ -23,7 +23,7 @@
>
<button
v-if="remove"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
@click.prevent="onRemove"
>
<FAIcon icon="trash-alt" />
@ -81,7 +81,7 @@
>
<button
v-if="type === 'flash' && flashLoaded"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.attachment_stop_flash')"
@click.prevent="stopFlash"
>
@ -89,7 +89,7 @@
</button>
<button
v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.show_attachment_description')"
@click.prevent="toggleDescription"
>
@ -97,7 +97,7 @@
</button>
<button
v-if="!useModal && type !== 'unknown'"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.show_attachment_in_modal')"
@click.prevent="openModalForce"
>
@ -105,7 +105,7 @@
</button>
<button
v-if="nsfw && hideNsfwLocal"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.hide_attachment')"
@click.prevent="toggleHidden"
>
@ -113,7 +113,7 @@
</button>
<button
v-if="shiftUp"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.move_up')"
@click.prevent="onShiftUp"
>
@ -121,7 +121,7 @@
</button>
<button
v-if="shiftDn"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.move_down')"
@click.prevent="onShiftDn"
>
@ -129,7 +129,7 @@
</button>
<button
v-if="remove"
class="button-default attachment-button"
class="button-default attachment-button -transparent"
:title="$t('status.remove_attachment')"
@click.prevent="onRemove"
>

17
src/components/button.style.js
View file

@ -10,7 +10,7 @@ export default {
// normal: '' // normal state is implicitly added, it is always included
toggled: '.toggled',
focused: ':focus-within',
pressed: ':focus:active',
pressed: ':active',
hover: ':is(:hover, :focus-visible):not(:disabled)',
disabled: ':disabled'
},
@ -18,7 +18,8 @@ export default {
variants: {
// Variants save on computation time since adding new variant just adds one more "set".
// normal: '', // you can override normal variant, it will be appenended to the main class
danger: '.danger'
danger: '.-danger',
transparent: '.-transparent'
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
// This (currently) is further multipled by number of places where component can exist.
},
@ -51,6 +52,18 @@ export default {
roundness: 3
}
},
{
variant: 'danger',
directives: {
background: '--cRed'
}
},
{
variant: 'transparent',
directives: {
opacity: 0.5
}
},
{
state: ['hover'],
directives: {

3
src/components/chat_message/chat_message.style.js
View file

@ -8,9 +8,6 @@ export default {
'Text',
'Icon',
'Border',
'Button',
'RichContent',
'Attachment',
'PollGraph'
],
defaultRules: [

48
src/components/list/list_item.style.js
View file

@ -1,48 +0,0 @@
export default {
name: 'ListItem',
selector: '.list-item',
states: {
active: '.-active',
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['active'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover', 'active'],
directives: {
background: '--inheritedBackground, 20',
opacity: 1
}
}
]
}

6
src/components/menu_item.style.js
View file

@ -4,11 +4,7 @@ export default {
validInnerComponents: [
'Text',
'Icon',
'Input',
'Border',
'ButtonUnstyled',
'Badge',
'Avatar'
'Border'
],
states: {
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

28
src/components/mobile_drawer.style.js
View file

@ -2,18 +2,7 @@ export default {
name: 'MobileDrawer',
selector: '.mobile-drawer',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Notification',
'Alert',
'UserCard'
'MenuItem'
],
defaultRules: [
{
@ -21,21 +10,6 @@ export default {
background: '--bg',
backgroundNoCssColor: 'yes'
}
},
{
component: 'PanelHeader',
parent: { component: 'MobileDrawer' },
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

5
src/components/notification/notification.style.js
View file

@ -6,12 +6,7 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment',
'PollGraph'
],
defaultRules: []

16
src/components/panel.style.js
View file

@ -6,29 +6,17 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Post',
'Notification',
'Alert',
'UserCard',
'Chat',
'Attachment',
'Tab',
'ListItem'
'MenuItem'
],
validInnerComponentsLite: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'Input',
'PanelHeader',
'Alert'
'PanelHeader'
],
defaultRules: [
{

4
src/components/panel_header.style.js
View file

@ -7,9 +7,7 @@ export default {
'Icon',
'Button',
'ButtonUnstyled',
'Badge',
'Alert',
'Avatar'
'Alert'
],
defaultRules: [
{

11
src/components/popover.style.js
View file

@ -6,16 +6,7 @@ export default {
modal: '.modal'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'MenuItem',
'Post',
'UserCard'
'MenuItem'
],
defaultRules: [
{

1
src/components/rich_content/rich_content.scss
View file

@ -2,6 +2,7 @@
font-family: var(--font);
&.-faint {
color: var(--text);
/* stylelint-disable declaration-no-important */
--text: var(--textFaint) !important;
--link: var(--linkFaint) !important;

20
src/components/rich_content/rich_content.style.js
View file

@ -1,20 +0,0 @@
export default {
name: 'RichContent',
selector: '.RichContent',
notEditable: true,
transparent: true,
validInnerComponents: [
'Text',
'FunText',
'Link'
],
defaultRules: [
{
directives: {
'--font': 'generic | inherit',
'--monoFont': 'generic | monospace',
textNoCssColor: 'yes'
}
}
]
}

14
src/components/status/post.style.js
View file

@ -9,23 +9,9 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment',
'PollGraph'
],
validInnerComponentsLite: [
'Text',
'Link',
'Icon',
'Border',
'ButtonUnstyled',
'RichContent',
'Avatar'
],
defaultRules: [
{
directives: {

1
src/components/top_bar.style.js
View file

@ -5,6 +5,7 @@ export default {
'Link',
'Text',
'Icon',
// Optimization: don't put heavy components unless needed
'Button',
'ButtonUnstyled',
'Input',

12
src/components/user_card/user_card.scss
View file

@ -111,15 +111,20 @@
}
}
.banner-overlay,
.banner-image {
.header-overlay {
position: absolute;
inset: 0;
right: -1.2em;
left: -1.2em;
top: -1.4em;
padding: 0;
mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
}
.banner-overlay,
.banner-image {
position: absolute;
inset: 0;
padding: 0;
border-top-left-radius: calc(var(--roundness) - 1px);
border-top-right-radius: calc(var(--roundness) - 1px);
}
@ -136,6 +141,7 @@
.banner-overlay {
background-color: var(--profileTint);
opacity: 0.5;
pointer-events: none; // let user copy bg url
z-index: -1;
}

32
src/components/user_card/user_card.style.js
View file

@ -2,40 +2,10 @@ export default {
name: 'UserCard',
selector: '.user-card',
notEditable: true,
validInnerComponents: [
'Text',
'Link',
'Icon',
'Button',
'ButtonUnstyled',
'Input',
'RichContent',
'Alert'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0,
roundness: 3,
shadow: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
'--profileTint': 'color | $alpha(--background 0.5)'
}
},
{
parent: {
component: 'UserCard'
},
component: 'RichContent',
directives: {
opacity: 0
'--profileTint': 'color | $alpha(--background 1)'
}
}
]

18
src/components/user_card/user_card.vue
View file

@ -3,16 +3,18 @@
<div class="user-card-inner">
<div class="user-info">
<div class="user-identity">
<div class="banner-image">
<img
:src="bannerImgSrc"
<div class="header-overlay">
<div class="banner-image">
<img
:src="bannerImgSrc"
:class="{ 'hide-bio': hideBio }"
>
</div>
<div
class="banner-overlay"
:class="{ 'hide-bio': hideBio }"
>
/>
</div>
<div
class="banner-overlay"
:class="{ 'hide-bio': hideBio }"
/>
<a
v-if="avatarAction === 'zoom'"
class="user-info-avatar -link"