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

Merge branch 'fixes-batch2' into 'develop'

Browse source 
Fixes batch2

Closes #1351 and #1350

See merge request pleroma/pleroma-fe!1968
This commit is contained in:
HJ 2025-01-14 07:52:11 +00:00
commit 582ec616b8
31 changed files with 190 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
changelog.d/batch2.skip Normal file
View file

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

@ -35,11 +35,11 @@ export default {
{
component: 'Root',
directives: {
'--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
'--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
'--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
'--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
'--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
'--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
'--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
'--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
'--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
}
},
{
@ -78,28 +78,28 @@ export default {
{
state: ['toggled'],
directives: {
background: '--inheritedBackground,-14.2',
background: '--accent,-24.2',
shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
}
},
{
state: ['toggled', 'hover'],
directives: {
background: '--inheritedBackground,-14.2',
background: '--accent,-24.2',
shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
}
},
{
state: ['toggled', 'disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
background: '$blend(--accent 0.25 --parent)',
shadow: ['--buttonPressedBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
background: '$blend(--accent 0.25 --parent)',
shadow: ['--buttonDefaultBevel']
}
},

1
src/components/chat_message/chat_message.js
View file

@ -66,7 +66,6 @@ const ChatMessage = {
return this.message.attachments.length > 0
},
...mapState({
betterShadow: state => state.interface.browserSupport.cssFilter,
currentUser: state => state.users.currentUser,
restrictedNicknames: state => state.instance.restrictedNicknames
}),

1
src/components/chat_message/chat_message.vue
View file

@ -20,7 +20,6 @@
>
<UserAvatar
:compact="true"
:better-shadow="betterShadow"
:user="author"
/>
</UserPopover>

5
src/components/dialog_modal/dialog_modal.js
View file

@ -8,6 +8,11 @@ const DialogModal = {
default: () => {},
type: Function
}
},
computed: {
mobileCenter () {
return this.$store.getters.mergedConfig.modalMobileCenter
}
}
}

7
src/components/dialog_modal/dialog_modal.vue
View file

@ -1,7 +1,7 @@
<template>
<span
class="dialog-container"
:class="{ 'dark-overlay': darkOverlay }"
:class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
@click.self.stop="onCancel()"
>
<div
@ -79,6 +79,7 @@
padding: 0.5em;
border-top: 1px solid var(--border);
display: grid;
justify-content: end;
grid-gap: 0.5em;
grid-template-columns: min-content;
grid-auto-columns: min-content;
@ -99,6 +100,10 @@
justify-content: stretch;
align-items: end;
justify-items: stretch;
&.-center-mobile {
align-items: center;
}
}
.dialog-modal.panel {

4
src/components/draft/draft.vue
View file

@ -64,12 +64,12 @@
<div v-if="editing">
<PostStatusForm
v-if="draft.type !== 'edit'"
:disable-draft="true"
:hide-draft="true"
v-bind="postStatusFormProps"
/>
<EditStatusForm
v-else
:disable-draft="true"
:hide-draft="true"
:params="postStatusFormProps"
/>
</div>

1
src/components/edit_status_modal/edit_status_modal.vue
View file

@ -15,6 +15,7 @@
class="panel-body"
:params="params"
@posted="doCloseModal"
@draft-done="doCloseModal"
@can-close="doCloseModal"
/>
</div>

9
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -99,11 +99,6 @@
display: inline-flex;
justify-content: center;
align-items: center;
&.-picked-reaction {
border: 1px solid var(--accent);
margin-right: -1px;
}
}
}
}
@ -154,10 +149,6 @@
}
&.-picked-reaction {
border: 1px solid var(--accent);
margin-left: -1px; // offset the border, can't use inset shadows either
margin-right: -1px;
.svg-inline--fa {
color: var(--accent);
}

19
src/components/font_control/font_control.vue
View file

@ -5,18 +5,22 @@
:for="manualEntry ? name : name + '-font-switcher'"
class="label"
>
{{ label }}
{{ $t('settings.style.themes3.font.label', { label }) }}
</label>
{{ ' ' }}
<Checkbox
v-if="typeof fallback !== 'undefined'"
class="font-checkbox"
:id="name + '-o'"
:model-value="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
{{ $t('settings.style.themes3.define') }}
</Checkbox>
<p v-if="modelValue?.family">
<div
v-if="modelValue?.family"
class="font-input"
>
<label
v-if="manualEntry"
:id="name + '-label'"
@ -122,7 +126,7 @@
</optgroup>
</Select>
</span>
</p>
</div>
</div>
</template>
@ -134,6 +138,15 @@
min-width: 20em;
max-width: 20em;
}
.font-input {
margin-left: 2em;
margin-top: 0.5em;
}
.font-checkbox {
margin-left: 1em;
}
}
.invalid-tooltip {

2
src/components/input.style.js
View file

@ -18,7 +18,7 @@ export default {
{
component: 'Root',
directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
'--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
'--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
}

1
src/components/notification/notification.js
View file

@ -43,7 +43,6 @@ const Notification = {
data () {
return {
statusExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
unmuted: false,
showingApproveConfirmDialog: false,
showingDenyConfirmDialog: false

1
src/components/notification/notification.vue
View file

@ -48,7 +48,6 @@
<UserAvatar
class="post-avatar"
:compact="true"
:better-shadow="betterShadow"
:user="notification.from_profile"
/>
</UserPopover>

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

@ -38,12 +38,20 @@ export default {
roundness: 3,
blur: '5px',
shadow: [{
x: 1,
y: 1,
blur: 4,
x: 0,
y: 0,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.6
alpha: 0.5
},
{
x: 0,
y: 4,
blur: 6,
spread: 3,
color: '#000000',
alpha: 0.3
}]
}
}

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

@ -17,7 +17,23 @@ export default {
directives: {
backgroundNoCssColor: 'yes',
background: '--fg',
shadow: []
shadow: [{
x: 0,
y: 1,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.4
},
{
x: 0,
y: 1,
blur: 0,
spread: 0,
color: '#ffffff',
alpha: 0.2,
inset: true
}]
}
}
]

20
src/components/post_status_form/post_status_form.js
View file

@ -101,6 +101,8 @@ const PostStatusForm = {
'disableSubmit',
'disablePreview',
'disableDraft',
'hideDraft',
'closeable',
'placeholder',
'maxHeight',
'postHandler',
@ -115,6 +117,7 @@ const PostStatusForm = {
],
emits: [
'posted',
'draft-done',
'resize',
'mediaplay',
'mediapause',
@ -232,6 +235,9 @@ const PostStatusForm = {
showAllScopes () {
return !this.mergedConfig.minimalScopesMode
},
hideExtraActions () {
return this.disableDraft || this.hideDraft
},
emojiUserSuggestor () {
return suggestor({
emoji: [
@ -353,10 +359,12 @@ const PostStatusForm = {
}
},
safeToSaveDraft () {
return this.newStatus.status ||
return (
this.newStatus.status ||
this.newStatus.spoilerText ||
this.newStatus.files?.length ||
this.newStatus.hasPoll
) && this.saveable
},
...mapGetters(['mergedConfig']),
...mapState({
@ -760,12 +768,20 @@ const PostStatusForm = {
this.newStatus.id = id
}
this.saveable = false
if (!this.shouldAutoSaveDraft) {
this.clearStatus()
this.$emit('draft-done')
}
})
} else if (this.newStatus.id) {
// There is a draft, but there is nothing in it, clear it
return this.abandonDraft()
.then(() => {
this.saveable = false
if (!this.shouldAutoSaveDraft) {
this.clearStatus()
this.$emit('draft-done')
}
})
}
}
@ -773,7 +789,7 @@ const PostStatusForm = {
},
maybeAutoSaveDraft () {
if (this.shouldAutoSaveDraft) {
this.saveDraft()
this.saveDraft(false)
}
},
abandonDraft () {

14
src/components/post_status_form/post_status_form.vue
View file

@ -316,13 +316,12 @@
</template>
</button>
<Popover
v-if="!disableDraft"
v-if="!hideExtraActions"
class="more-post-actions"
:normal-button="true"
trigger="click"
placement="bottom"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
>
<template #trigger>
<FAIcon
@ -336,15 +335,20 @@
role="menu"
>
<button
v-if="!disableDraft"
v-if="!hideDraft || !disableDraft"
class="menu-item dropdown-item dropdown-item-icon"
role="menu"
:disabled="!safeToSaveDraft"
:disabled="!safeToSaveDraft && saveable"
:class="{ disabled: !safeToSaveDraft }"
@click.prevent="saveDraft"
@click="close"
>
{{ $t('post_status.save_to_drafts_button') }}
<template v-if="closeable">
{{ $t('post_status.save_to_drafts_and_close_button') }}
</template>
<template v-else>
{{ $t('post_status.save_to_drafts_button') }}
</template>
</button>
</div>
</template>

2
src/components/post_status_modal/post_status_modal.vue
View file

@ -14,7 +14,9 @@
<PostStatusForm
class="panel-body"
v-bind="params"
:closeable="true"
@posted="resetAndClose"
@draft-done="resetAndClose"
/>
</div>
</Modal>

93
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -57,7 +57,7 @@
:key="style.key"
:data-theme-key="style.key"
class="button-default theme-preview"
:class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
:class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
@click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
:disabled="switchInProgress"
>
@ -206,51 +206,6 @@
</small>
</div>
</li>
<li>
<h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
<ul class="setting-list">
<li>
<FontControl
:model-value="mergedConfig.theme3hacks.fonts.interface"
name="ui"
:label="$t('settings.style.fonts.components.interface')"
:fallback="{ family: 'sans-serif' }"
no-inherit="1"
@update:modelValue="v => updateFont('interface', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.input"
name="input"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components.input')"
@update:modelValue="v => updateFont('input', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.post"
name="post"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components.post')"
@update:modelValue="v => updateFont('post', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.monospace"
name="postCode"
:fallback="{ family: 'monospace' }"
:label="$t('settings.style.fonts.components.monospace')"
@update:modelValue="v => updateFont('monospace', v)"
/>
</li>
</ul>
</li>
<li>
<UnitSetting
path="emojiSize"
@ -284,6 +239,47 @@
{{ $t('settings.navbar_size') }}
</UnitSetting>
</li>
<h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
<li>
<FontControl
:model-value="mergedConfig.theme3hacks.fonts.interface"
name="ui"
:label="$t('settings.style.fonts.components.interface')"
:fallback="{ family: 'sans-serif' }"
no-inherit="1"
@update:modelValue="v => updateFont('interface', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.input"
name="input"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components.input')"
@update:modelValue="v => updateFont('input', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.post"
name="post"
:fallback="{ family: 'inherit' }"
:label="$t('settings.style.fonts.components.post')"
@update:modelValue="v => updateFont('post', v)"
/>
</li>
<li>
<FontControl
v-if="expertLevel > 0"
:model-value="mergedConfig.theme3hacks.fonts.monospace"
name="postCode"
:fallback="{ family: 'monospace' }"
:label="$t('settings.style.fonts.components.monospace')"
@update:modelValue="v => updateFont('monospace', v)"
/>
</li>
<h3>{{ $t('settings.columns') }}</h3>
<li>
<UnitSetting
@ -345,6 +341,11 @@
<div class="setting-item">
<h2>{{ $t('settings.visual_tweaks') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="modalMobileCenter">
{{ $t('settings.mobile_center_dialog') }}
</BooleanSetting>
</li>
<li>
<ChoiceSetting
id="forcedRoundness"

3
src/components/status/status.js
View file

@ -416,9 +416,6 @@ const Status = {
currentUser () {
return this.$store.state.users.currentUser
},
betterShadow () {
return this.$store.state.interface.browserSupport.cssFilter
},
mergedConfig () {
return this.$store.getters.mergedConfig
},

4
src/components/status/status.vue
View file

@ -65,7 +65,6 @@
v-if="retweet"
class="left-side repeater-avatar"
:show-actor-type-indicator="showActorTypeIndicator"
:better-shadow="betterShadow"
:user="statusoid.user"
/>
<div class="right-side faint">
@ -120,7 +119,6 @@
class="post-avatar"
:show-actor-type-indicator="showActorTypeIndicator"
:compact="compact"
:better-shadow="betterShadow"
:user="status.user"
/>
</UserPopover>
@ -600,12 +598,14 @@
<PostStatusForm
ref="postStatusForm"
class="reply-body"
:closeable="true"
:reply-to="status.id"
:attentions="status.attentions"
:replied-user="status.user"
:copy-message-scope="status.visibility"
:subject="replySubject"
@posted="doToggleReplying"
@draft-done="doToggleReplying"
@can-close="doToggleReplying"
/>
</div>

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

@ -16,11 +16,19 @@ export default {
background: '--fg',
shadow: [{
x: 0,
y: 0,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
alpha: 0.4
},
{
x: 0,
y: 2,
blur: 7,
spread: 0,
color: '#000000',
alpha: 0.3
}]
}
},

4
src/components/user_avatar/avatar.style.js
View file

@ -11,10 +11,10 @@ export default {
shadow: [{
x: 0,
y: 1,
blur: 8,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.7
alpha: 0.2
}]
}
}

4
src/components/user_avatar/user_avatar.js
View file

@ -15,14 +15,14 @@ library.add(
const UserAvatar = {
props: [
'user',
'betterShadow',
'compact',
'showActorTypeIndicator'
],
data () {
return {
showPlaceholder: false,
defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
components: {

1
src/components/user_card/user_card.js
View file

@ -48,7 +48,6 @@ export default {
data () {
return {
followRequestInProgress: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
showingConfirmMute: false,
muteExpiryAmount: 0,
muteExpiryUnit: 'minutes'

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

@ -16,10 +16,7 @@
class="user-info-avatar -link"
@click="zoomAvatar"
>
<UserAvatar
:better-shadow="betterShadow"
:user="user"
/>
<UserAvatar :user="user" />
<div class="user-info-avatar -link -overlay">
<FAIcon
class="fa-scale-110 fa-old-padding"
@ -30,7 +27,6 @@
<UserAvatar
v-else-if="typeof avatarAction === 'function'"
class="user-info-avatar"
:better-shadow="betterShadow"
:user="user"
@click="avatarAction"
/>
@ -38,10 +34,7 @@
v-else
:to="userProfileLink(user)"
>
<UserAvatar
:better-shadow="betterShadow"
:user="user"
/>
<UserAvatar :user="user" />
</router-link>
<div class="user-summary">
<div class="top-line">

7
src/i18n/en.json
View file

@ -321,7 +321,8 @@
"auto_save_nothing_new": "Nothing new to save.",
"auto_save_saved": "Saved.",
"auto_save_saving": "Saving...",
"save_to_drafts_button": "Save to drafts"
"save_to_drafts_button": "Save to drafts",
"save_to_drafts_and_close_button": "Save to drafts and close"
},
"registration": {
"bio_optional": "Bio (optional)",
@ -381,6 +382,7 @@
"actor_type_Person": "a normal user",
"actor_type_Service": "a bot",
"actor_type_Group": "a group",
"mobile_center_dialog": "Vertically center dialogs on mobile",
"app_name": "App name",
"expert_mode": "Show advanced",
"save": "Save changes",
@ -867,7 +869,8 @@
"lookup_local_fonts": "Load list of fonts installed on this computer",
"enter_manually": "Enter font name family manually",
"entry": "Enter {fontFamily}",
"select": "Select font"
"select": "Select font",
"label": "{label} font"
}
},
"interface_font_user_override": "Override theme/browser font used",

1
src/modules/config.js
View file

@ -142,6 +142,7 @@ export const defaultState = {
modalOnApproveFollow: undefined, // instance default
modalOnDenyFollow: undefined, // instance default
modalOnRemoveUserFromFollowers: undefined, // instance default
modalMobileCenter: undefined,
playVideosInModal: false,
useOneClickNsfw: false,
useContainFit: true,

1
src/modules/instance.js
View file

@ -82,6 +82,7 @@ const defaultState = {
modalOnApproveFollow: false,
modalOnDenyFollow: false,
modalOnRemoveUserFromFollowers: false,
modalMobileCenter: false,
loginMethod: 'password',
logo: '/static/logo.svg',
logoMargin: '.2em',

21
src/services/theme_data/theme3_slot_functions.js
View file

@ -81,9 +81,27 @@ export const colorFunctions = {
return alphaBlend(background, amount, foreground)
}
},
boost: {
argsNeeded: 2,
documentation: 'If given color is dark makes it darker, if color is light - makes it lighter',
args: [
'color: source color',
'amount: how much darken/brighten the color'
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [colorArg, amountArg] = args
const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
const amount = Number(amountArg)
const isLight = relativeLuminance(color) < 0.5
const mod = isLight ? -1 : 1
return brightness(amount * mod, color).rgb
}
},
mod: {
argsNeeded: 2,
documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.',
args: [
'color: source color',
'amount: how much darken/brighten the color'
@ -109,6 +127,7 @@ export const shadowFunctions = {
args: [
'color: border color',
'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
'width: border width (thickness)',
'[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
'[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
],

2
static/styles/Redmond DX.iss
View file

@ -94,7 +94,7 @@ Button:toggled:pressed {
}
Input {
background: $mod(--bg -80);
background: $boost(--bg 20);
shadow: --defaultInputBevel;
roundness: 0
}