Page MenuHomePhorge
Files F85825878

No OneTemporary
Actions

Authored By
Unknown
Size
14 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index 27a894015f..df4d95ca2f 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -1,84 +1,97 @@
import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
import Popover from 'src/components/popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faPlus,
faMinus,
faCheck,
faTimes,
faWrench,
+ faChevronRight,
+ faChevronUp,
+
faReply,
faRetweet,
faStar,
faSmileBeam,
- faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt,
faExternalLinkAlt,
faHistory
} from '@fortawesome/free-solid-svg-icons'
import {
faStar as faStarRegular
} from '@fortawesome/free-regular-svg-icons'
library.add(
faPlus,
faMinus,
faCheck,
faTimes,
faWrench,
+ faChevronRight,
+ faChevronUp,
+
faReply,
faRetweet,
faStar,
faStarRegular,
faSmileBeam,
- faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt,
faExternalLinkAlt,
faHistory
)
export default {
props: [
'button',
'status',
'extra',
'status',
'funcArg',
'animationState',
'getClass',
'getComponent',
'doAction',
'close'
],
components: {
StatusBookmarkFolderMenu,
Popover
},
computed: {
buttonClass () {
+ if (!this.extra) console.log(this.button.name)
+ 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
index 4827c9c8e1..f269a3b7cc 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/src/components/status_action_buttons/action_button.scss
@@ -1,62 +1,84 @@
@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);
+ }
}
}
}
@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
index 50dce14bd5..9e645bc2a7 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -1,88 +1,88 @@
<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"
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
@click.stop="getComponent(button) === 'button' && doAction(button)"
@click="close"
>
<FALayers>
<FAIcon
class="fa-scale-110"
:icon="button.icon(funcArg)"
:spin="!extra && button.animated?.() && animationState[button.name]"
fixed-width
/>
<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-15"
:icon="button.activeIndicator?.(funcArg) || 'check'"
/>
<FAIcon
v-if="!button.active(funcArg)"
class="focus-marker"
transform="shrink-6 up-9 right-15"
:icon="button.openIndicator?.(funcArg) || 'plus'"
/>
<FAIcon
v-else
class="focus-marker"
transform="shrink-6 up-9 right-15"
:icon="button.closeIndicator?.(funcArg) || 'minus'"
/>
</template>
</FALayers>
<span
v-if="extra"
class="action-label"
>
{{ $t(button.label(funcArg)) }}
</span>
<span
v-if="!extra && button.counter?.(funcArg) > 0"
class="action-counter"
>
{{ button.counter?.(funcArg) }}
</span>
<FAIcon
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'"
>
<template #trigger>
<FAIcon
class="chevron-icon"
size="lg"
- icon="chevron-right"
+ :icon="extra ? 'chevron-right' : 'chevron-up'"
fixed-width
/>
</template>
<template #content>
<StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="status" />
</template>
</Popover>
</div>
</template>
<script src="./action_button.js"/>
<style lang="scss" src="./action_button.scss"/>
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 6363b2b2d7..91324b5ba2 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -1,58 +1,58 @@
<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>
<div
v-if="button.name === 'mute'"
class="dropdown-menu"
:id="`popup-menu-${randomSeed}`"
role="menu"
>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="() => {}"
>
<FAIcon icon="user" fixed-width />
{{ $t('status.mute_user') }}
</button>
</div>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="() => {}"
>
<FAIcon icon="folder-tree" fixed-width />
{{ $t('status.mute_conversation') }}
</button>
</div>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="() => {}"
>
<FAIcon icon="globe" fixed-width />
{{ $t('status.mute_domain') }}
</button>
</div>
</div>
</template>
</Popover>
<ActionButton
v-else
:button="button"
v-bind="$attrs"
/>
</template>
<script src="./action_button_container.js"/>
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 0b9d92ebba..3a5dae33f8 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -1,24 +1,21 @@
@import "../../mixins";
.StatusActionButtons {
.quick-action-buttons {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-gap: 1em;
margin-top: var(--status-margin);
}
}
// 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
index ba93c730da..a3b50975aa 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -1,131 +1,132 @@
<template>
<div class="StatusActionButtons">
<span class="quick-action-buttons">
<span
class="quick-action"
:class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
v-for="button in quickButtons"
:key="button.name"
>
<ActionButtonContainer
+ :class="{ '-pin': showPin }"
:button="button"
:status="status"
:extra="false"
:funcArg="funcArg"
:get-class="getClass"
:get-component="getComponent"
:animation-state="animationState"
:close="close"
:do-action="doAction"
/>
<button
v-if="showPin && currentUser"
type="button"
class="button-unstyled pin-action-button"
:title="$t('general.unpin')"
:aria-pressed="true"
@click.stop.prevent="unpin(button)"
>
<FAIcon
v-if="showPin && currentUser"
fixed-width
class="fa-scale-110"
icon="thumbtack"
/>
</button>
</span>
<Popover
trigger="click"
:trigger-attrs="triggerAttrs"
:tabindex="0"
placement="top"
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
@show="onShow"
@close="onClose"
>
<template #trigger>
<FAIcon
class="fa-scale-110 "
icon="ellipsis-h"
/>
</template>
<template #content="{close}">
<div
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu extra-action-buttons"
role="menu"
>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
role="menuitem"
:tabindex="0"
@click.stop="showPin = !showPin"
>
<FAIcon
class="fa-scale-110"
fixed-width
icon="wrench"
/><span>{{ $t('nav.edit_pinned') }}</span>
</button>
</div>
<div
v-for="button in extraButtons"
:key="button.name"
class="menu-item dropdown-item extra-action -icon"
:disabled="getClass(button).disabled"
:class="{ disabled: getClass(button).disabled }"
>
<ActionButtonContainer
:button="button"
:status="status"
:extra="true"
:funcArg="funcArg"
:get-class="getClass"
:get-component="getComponent"
:animation-state="animationState"
:close="close"
:do-action="doAction"
/>
<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)"
>
<FAIcon
v-if="showPin && currentUser"
fixed-width
class="fa-scale-110"
transform="rotate-45"
icon="thumbtack"
/>
</button>
</div>
</div>
</template>
</Popover>
</span>
<teleport to="#modal">
<confirm-modal
v-if="showingConfirmDialog"
:title="currentConfirmTitle"
:confirm-text="currentConfirmOkText"
:cancel-text="currentConfirmCancelText"
@accepted="currentConfirmAction"
@cancelled="showingConfirmDialog = false"
>
{{ currentConfirmBody }}
</confirm-modal>
</teleport>
</div>
</template>
<script src="./status_action_buttons.js"></script>
<style lang="scss" src="./status_action_buttons.scss"></style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 3:44 AM (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1799361
Default Alt Text
(14 KB)

Event Timeline