commit: 5a085d8e36f593fbd7ba901ed05274d749b82325
parent 4887d371106aa5a745d8bec94c14c54ad29b4431
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2025 22:32:39 +0200
cleanup + fixes
Diffstat:
8 files changed, 119 insertions(+), 81 deletions(-)
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
@@ -48,13 +48,15 @@
border-top: 1px solid var(--border);
}
- .dropdown-item:not(button, a) {
+ .dropdown-item {
padding: 0;
- }
- a.dropdown-item,
- button.dropdown-item,
- .dropdown-item:not(button, a) {
+ .popover-wrapper {
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
.extra-button {
border-left: 1px solid var(--icon);
padding-left: calc(var(--__horizontal-gap) - 1px);
@@ -64,6 +66,7 @@
}
.main-button {
+ width: 100%;
padding: var(--__horizontal-gap) var(--__horizontal-gap);
grid-gap: var(--__horizontal-gap);
grid-template-columns: 1fr var(--__line-height);
@@ -125,5 +128,11 @@
padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
}
}
+
+ &.-icon-double {
+ .main-button {
+ grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
+ }
+ }
}
}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -1,5 +1,6 @@
<template>
<span
+ class="popover-wrapper"
@mouseenter="onMouseenter"
@mouseleave="onMouseleave"
>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
@@ -11,7 +11,7 @@
role="menu"
>
<div role="group">
- <div class="menu-item dropdown-item -icon">
+ <div class="menu-item dropdown-item -icon-double">
<button
class="main-button"
:aria-checked="conversationDisplay === 'tree'"
@@ -29,7 +29,7 @@
/> {{ $t('settings.conversation_display_tree_quick') }}
</button>
</div>
- <div class="menu-item dropdown-item -icon">
+ <div class="menu-item dropdown-item -icon-double">
<button
class="main-button"
:aria-checked="conversationDisplay === 'linear'"
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
@@ -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;
+ }
+ }
+}
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
@@ -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"/>
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
@@ -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) {
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
@@ -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 */
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
@@ -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
