commit: 69394051733780924287d4d4f651d337ca427b29
parent 7259817a845de015c33be20c4a133af018842830
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 14 Jan 2025 19:43:47 +0200
cleanup + brought back quick actions styles
Diffstat:
6 files changed, 72 insertions(+), 39 deletions(-)
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
@@ -9,12 +9,14 @@ import {
faTimes,
faWrench,
+ faChevronRight,
+ faChevronUp,
+
faReply,
faRetweet,
faStar,
faSmileBeam,
- faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
@@ -33,13 +35,15 @@ library.add(
faTimes,
faWrench,
+ faChevronRight,
+ faChevronUp,
+
faReply,
faRetweet,
faStar,
faStarRegular,
faSmileBeam,
- faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
@@ -71,10 +75,19 @@ export default {
return [
this.button.name + '-button',
{
+ '-with-extra': this.button.name === 'bookmark',
+ '-extra': this.extra,
+ '-quick': !this.extra
+ }
+ ]
+ },
+ buttonInnerClass () {
+ if (!this.extra) console.log(this.button.name)
+ return [
+ this.button.name + '-button',
+ {
'main-button': this.extra,
'button-unstyled': !this.extra,
- '-extra': this.extra,
- '-quick': !this.extra,
'-active': this.button.active?.(this.funcArg),
disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
}
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
@@ -1,41 +1,63 @@
@import "../../mixins";
/* stylelint-disable declaration-no-important */
-.action-button {
+.quick-action {
display: grid;
+ grid-template-columns: max-content;
+ grid-gap: 0.25em;
+
+ &.-pin {
+ margin: calc(-2px - 0.25em);
+ padding: 0.25em;
+ border: 2px dashed var(--icon);
+ border-radius: var(--roundness);
+ grid-template-columns: 1fr auto;
+ }
- &.-with-extra {
- grid-template-columns: 1fr calc(var(--__line-height) + 2 * var(--__horizontal-gap));
+ .action-button-inner,
+ .extra-button {
+ margin: -0.5em;
+ padding: 0.5em;
}
- &.-quick {
+ .action-button-inner {
display: grid;
- grid-template-columns: max-content auto;
grid-gap: 1em;
+ grid-template-columns: max-content max-content;
+ grid-auto-flow: column;
+ grid-auto-columns: max-content;
align-items: center;
}
- &.disabled {
- cursor: not-allowed;
+ .extra-button {
+ border-left: 1px solid var(--icon);
}
+}
- &:hover,
- &.-active {
- &.reply-button:not(.disabled) {
- .svg-inline--fa {
- color: var(--cBlue);
+.action-button {
+ display: grid;
+ grid-auto-flow: column;
+ padding: 0;
+
+ .action-button-inner {
+ &:hover,
+ &.-active {
+ &.reply-button:not(.disabled) {
+ .svg-inline--fa {
+ color: var(--cBlue);
+ }
}
- }
- &.retweet-button:not(.disabled) {
- .svg-inline--fa {
- color: var(--cGreen);
+ &.retweet-button:not(.disabled) {
+ .svg-inline--fa {
+ color: var(--cGreen);
+ }
}
- }
- &.favorite-button:not(.disabled) {
- .svg-inline--fa {
- color: var(--cOrange);
+ &.favorite-button:not(.disabled) {
+ .svg-inline--fa {
+ color: var(--cOrange);
+ }
}
}
}
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
@@ -1,12 +1,12 @@
<template>
<div
class="action-button"
- :class="{ '-with-extra': button.name === 'bookmark' }"
+ :class="buttonClass"
>
<component
:is="getComponent(button)"
class="action-button-inner"
- :class="buttonClass"
+ :class="buttonInnerClass"
role="menuitem"
:tabindex="0"
:disabled="buttonClass.disabled"
@@ -58,13 +58,13 @@
v-if="button.dropdown?.()"
class="chevron-icon"
size="lg"
- icon="chevron-right"
+ :icon="extra ? 'chevron-right' : 'chevron-up'"
fixed-width
/>
</component>
<Popover
trigger="hover"
- placement="right"
+ :placement="extra ? 'right' : 'top'"
:trigger-attrs="{ class: 'extra-button' }"
v-if="button.name === 'bookmark'"
>
@@ -72,7 +72,7 @@
<FAIcon
class="chevron-icon"
size="lg"
- icon="chevron-right"
+ :icon="extra ? 'chevron-right' : 'chevron-up'"
fixed-width
/>
</template>
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
@@ -1,14 +1,14 @@
<template>
<Popover
trigger="hover"
- placement="right"
+ :placement="$attrs.extra ? 'right' : 'top'"
v-if="button.dropdown?.()"
>
<template #trigger>
{{ props }}
<ActionButton
:button="button"
- v-bind="$attrs"
+ v-bind.prop="$attrs"
/>
</template>
<template #content>
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
@@ -11,14 +11,11 @@
}
}
// popover
-/* stylelint-disable no-descending-specificity */
.extra-action-buttons {
.extra-action {
- .pin-action-button {
- margin: 0;
- padding: var(--__horizontal-gap) var(--__horizontal-gap);
- }
+ margin: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-right: 0;
}
}
-
-/* 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
@@ -8,6 +8,7 @@
:key="button.name"
>
<ActionButtonContainer
+ :class="{ '-pin': showPin }"
:button="button"
:status="status"
:extra="false"
@@ -92,7 +93,7 @@
<button
v-if="showPin && currentUser"
type="button"
- class="button-unstyled pin-action-button"
+ class="button-unstyled pin-action-button extra-button"
:title="$t('general.pin')"
:aria-pressed="false"
@click.stop.prevent="pin(button)"
