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

cleanup + fixes

Browse source
This commit is contained in:
Henry Jameson 2025-01-13 22:32:39 +02:00
commit 5a085d8e36
8 changed files with 119 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/status_action_buttons/action_button.scss Normal file
View file

@ -0,0 +1,56 @@
@import "../../mixins";
/* stylelint-disable declaration-no-important */
.action-button {
&.-quick {
display: grid;
grid-template-columns: max-content auto;
grid-gap: 1em;
align-items: center;
}
&.disabled {
cursor: not-allowed;
}
&:hover,
&.-active {
&.reply-button:not(.disabled) {
.svg-inline--fa {
color: var(--cBlue);
}
}
&.retweet-button:not(.disabled) {
.svg-inline--fa {
color: var(--cGreen);
}
}
&.favorite-button:not(.disabled) {
.svg-inline--fa {
color: var(--cOrange);
}
}
}
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
.active-marker {
visibility: visible;
}
}
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}
}
}

30
src/components/status_action_buttons/action_button.vue
View file

@ -2,10 +2,11 @@
<div>
<component
:is="getComponent(button)"
class="main-button"
class="main-button action-button"
:class="buttonClass"
role="menuitem"
:tabindex="0"
:disabled="getClass(button).disabled"
:disabled="buttonClass.disabled"
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
@click.stop="getComponent(button) === 'button' && doAction(button)"
@click="close"
@ -15,25 +16,25 @@
class="fa-scale-110"
:icon="button.icon(funcArg)"
:spin="!extra && button.animated?.() && animationState[button.name]"
:fixed-width="extra"
fixed-width
/>
<template v-if="!getClass(button).disabled && button.toggleable?.(funcArg) && button.active">
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
<FAIcon
v-if="button.active(funcArg)"
class="active-marker"
transform="shrink-6 up-9 right-12"
transform="shrink-6 up-9 right-15"
:icon="button.activeIndicator?.(funcArg) || 'check'"
/>
<FAIcon
v-if="!button.active(funcArg)"
class="focus-marker"
transform="shrink-6 up-9 right-12"
transform="shrink-6 up-9 right-15"
:icon="button.openIndicator?.(funcArg) || 'plus'"
/>
<FAIcon
v-else
class="focus-marker"
transform="shrink-6 up-9 right-12"
transform="shrink-6 up-9 right-15"
:icon="button.closeIndicator?.(funcArg) || 'minus'"
/>
</template>
@ -108,6 +109,19 @@ export default {
'getComponent',
'doAction',
'close'
]
],
computed: {
buttonClass () {
return {
[this.button.name + '-button']: true,
'-extra': this.extra,
'-quick': !this.extra,
'-active': this.button.active?.(this.funcArg),
disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
}
}
}
}
</script>
<style lang="scss" src="./action_button.scss"/>

10
src/components/status_action_buttons/status_action_buttons.js
View file

@ -159,8 +159,8 @@ const BUTTONS = [{
name: 'pin',
icon: 'thumbtack',
label: ({ status }) => status.pinned
? 'status.pin'
: 'status.unpin',
? 'status.unpin'
: 'status.pin',
if ({ status, loggedIn, currentUser }) {
return loggedIn &&
status.user.id === currentUser.id &&
@ -179,9 +179,11 @@ const BUTTONS = [{
// =========
name: 'bookmark',
icon: 'bookmark',
toggleable: true,
active: ({ status }) => status.bookmarked,
label: ({ status }) => status.bookmarked
? 'status.bookmark'
: 'status.unbookmark',
? 'status.unbookmark'
: 'status.bookmark',
if: ({ loggedIn }) => loggedIn,
action ({ status, dispatch, emit }) {
if (status.bookmarked) {

61
src/components/status_action_buttons/status_action_buttons.scss
View file

@ -13,17 +13,6 @@
display: grid;
grid-template-columns: 1fr auto;
.action-button {
display: grid;
grid-template-columns: max-content auto;
grid-gap: 1em;
align-items: center;
&.disabled {
cursor: not-allowed;
}
}
&.-pin {
margin: calc(-2px - 0.25em);
padding: 0.25em;
@ -106,56 +95,6 @@
padding: var(--__horizontal-gap) var(--__horizontal-gap);
}
}
> a,
> button {
@include unfocused-style {
.focus-marker {
visibility: hidden;
}
.active-marker {
visibility: visible;
}
}
@include focused-style {
.focus-marker {
visibility: visible;
}
.active-marker {
visibility: hidden;
}
}
}
.reply-button:not(.disabled) {
&:hover,
&.-active {
.svg-inline--fa {
color: var(--cBlue);
}
}
}
.retweet-button:not(.disabled) {
&:hover,
&.-active {
.svg-inline--fa {
color: var(--cGreen);
}
}
}
.favorite-button:not(.disabled) {
&:hover,
&.-active {
.svg-inline--fa {
color: var(--cOrange);
}
}
}
}
/* stylelint-enable no-descending-specificity */

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

@ -130,7 +130,24 @@
/>
</template>
<template #content>
<StatusBookmarkFolderMenu v-if="button.name === 'mute'" :status="funcArg.status" />
<template v-if="button.name === 'mute'">
<div
v-for="folder in folders"
:key="folder.id"
class="menu-item dropdown-item -icon"
>
<button
class="main-button"
@click="toggleFolder(folder.id)"
>
<span
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
/>
{{ folder.name }}
</button>
</div>
</template>
</template>
</Popover>
<Popover