Page MenuHomePhorge
Files F85829243

No OneTemporary
Actions

Authored By
Unknown
Size
12 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 120356bb3d..59dfaa6a8f 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,145 +1,141 @@
<template>
<OptionalRouterLink
v-slot="{ isActive, href, navigate } = {}"
:to="routeTo"
>
<li
class="NavigationEntry menu-item"
:class="{ '-active': isActive }"
role="menuitem"
:aria-label="item.labelRaw ?? $t(item.label)"
v-bind="$attrs"
>
<component
:is="routeTo ? 'a' : 'button'"
class="main-link"
:href="href"
@click="navigate"
>
<span>
<FAIcon
v-if="item.icon"
fixed-width
class="fa-scale-110 menu-icon"
:icon="item.icon"
/>
</span>
<img
v-if="item.iconEmojiUrl"
class="menu-icon iconEmoji iconEmoji-image"
:src="item.iconEmojiUrl"
:alt="item.iconEmoji"
:title="item.iconEmoji"
>
<span
v-else-if="item.iconEmoji"
class="menu-icon iconEmoji"
>
<span>
{{ item.iconEmoji }}
</span>
</span>
<span
v-else-if="item.iconLetter"
class="icon iconLetter fa-scale-110 menu-icon"
>{{ item.iconLetter }}</span>
<span class="label">
{{ item.labelRaw || $t(item.label) }}
</span>
</component>
<slot />
<div
v-if="item.badgeGetter && badges[item.badgeGetter]"
class="badge"
:class="[`-${item.badgeStyle}`]"
>
{{ badges[item.badgeGetter] }}
</div>
<button
v-if="showPin && currentUser"
type="button"
class="button-unstyled extra-button"
:title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
:aria-pressed="!!isPinned"
@click.stop.prevent="togglePin(item.name)"
>
<FAIcon
v-if="showPin && currentUser"
fixed-width
class="fa-scale-110"
:class="{ 'veryfaint': !isPinned(item.name) }"
:transform="!isPinned(item.name) ? 'rotate-45' : ''"
icon="thumbtack"
/>
</button>
</li>
</OptionalRouterLink>
</template>
<script src="./navigation_entry.js"></script>
<style lang="scss">
.NavigationEntry.menu-item {
--__line-height: 2.5em;
--__horizontal-gap: 0.5em;
--__vertical-gap: 0.4em;
padding: var(--__vertical-gap) var(--__horizontal-gap);
display: grid;
grid-template-columns: 1fr;
grid-auto-columns: var(--__line-height);
grid-auto-flow: column;
gap: var(--__horizontal-gap);
align-items: baseline;
&[aria-expanded] {
padding-right: var(--__horizontal-gap);
}
.main-link {
line-height: var(--__line-height);
box-sizing: border-box;
-
- &:focus-visible {
- outline: none;
- }
}
.menu-icon {
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
.timelines-chevron,
.extra-button {
line-height: var(--__line-height);
width: 100%;
padding: 0;
text-align: center;
}
.badge {
justify-self: center;
}
.iconEmoji {
display: inline-block;
text-align: center;
object-fit: contain;
vertical-align: middle;
height: var(--__line-height);
width: var(--__line-height);
> span {
font-size: 1.5rem;
}
}
img.iconEmoji {
padding: 0.25rem;
box-sizing: border-box;
}
}
</style>
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index b6ab50bf5c..ad096ebd37 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -1,113 +1,113 @@
<template>
<div
class="action-button"
:class="buttonClass"
role="presentation"
>
<component
:is="popoverTrigger ? 'span' : getComponent(button)"
class="action-button-inner"
:class="buttonInnerClass"
:role="popoverTrigger ? 'presentation' : 'button'"
:type="popoverTrigger ? undefined : 'button'"
placement="bottom"
:title="$t(button.label(funcArg))"
target="_blank"
- :tabindex="0"
+ :tabindex="popoverTrigger ? undefined : 0"
:disabled="button.interactive ? !button.interactive(funcArg) : false"
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
@click="popoverTrigger ? undefined : doActionWrap(button, outerClose)"
>
<FALayers role="presentation">
<FAIcon
class="fa-scale-110"
:icon="button.icon(funcArg)"
:spin="!extra && getComponent(button) == 'button' && button.animated?.() && animationState"
:style="{ '--fa-animation-duration': '750ms' }"
fixed-width
/>
<template v-if="!buttonClass.disabled && (!button.interactive || button?.interactive(funcArg)) && button.toggleable?.(funcArg) && button.active">
<FAIcon
v-if="button.active(funcArg) && button.activeIndicator?.() !== null"
class="active-marker"
transform="shrink-6 up-9 left-12"
:icon="button.activeIndicator?.(funcArg) || 'check'"
/>
<FAIcon
v-if="!button.active(funcArg)"
class="focus-marker"
transform="shrink-6 up-9 left-12"
:icon="button.openIndicator?.(funcArg) || 'plus'"
/>
<FAIcon
v-else
class="focus-marker"
transform="shrink-6 up-9 left-12"
:icon="button.closeIndicator?.(funcArg) || 'minus'"
/>
</template>
</FALayers>
<span
v-if="extra"
class="action-label"
>
{{ $t(button.label(funcArg)) }}
</span>
<FAIcon
v-if="button.dropdown?.()"
class="chevron-icon"
:icon="extra ? 'chevron-right' : 'chevron-down'"
fixed-width
/>
</component>
<span
v-if="!hidePostStats && button.counter?.(funcArg) > 0 && !hideLabel"
class="action-counter"
:aria-label="$t(`status.${button.counterLabel()}`, [button.counter?.(funcArg)])"
>
{{ button.counter?.(funcArg) }}
</span>
<span
v-if="!extra && button.name === 'bookmark'"
class="separator"
/>
<Popover
v-if="button.name === 'bookmark'"
class="extra-button"
:trigger="extra ? 'hover' : 'click'"
:placement="extra ? 'right' : 'bottom'"
:offset="extra ? { x: 10 } : { y: 10 }"
:aria-label="$t('nav.bookmark_folders')"
>
<template #trigger>
<FAIcon
class="chevron-icon"
:icon="extra ? 'chevron-right' : 'chevron-down'"
fixed-width
/>
</template>
<template #content="{close}">
<StatusBookmarkFolderMenu
v-if="button.name === 'bookmark'"
:status="status"
@close="() => { close(); outerClose?.() }"
/>
</template>
</Popover>
<EmojiPicker
v-if="button.name === 'emoji'"
ref="picker"
:enable-sticker-picker="false"
:hide-custom-emoji="hideCustomEmoji"
class="emoji-picker-panel"
@emoji="addReaction"
@show="onShowEmojiPicker"
@close="onHideEmojiPicker"
/>
</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 15fe0dc6b3..2fd6b45a68 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -1,163 +1,162 @@
<template>
<div role="presentation">
<Popover
v-if="button.dropdown?.()"
:trigger="$attrs.extra ? 'hover' : 'click'"
:offset="{ y: 5 }"
:placement="$attrs.extra ? 'right' : 'bottom'"
- :tabindex="-1"
>
<template #trigger>
<ActionButton
:button="button"
:status="status"
:hide-label="hideLabel"
popover-trigger
v-bind.prop="$attrs"
/>
</template>
<template #content>
<div
v-if="button.name === 'changeScope'"
:id="`popup-menu-scope-${randomSeed}`"
class="dropdown-menu"
role="menu"
>
<div
v-for="visibility in availableScopes"
:key="visibility"
class="menu-item dropdown-item extra-action -icon"
>
<button
class="main-button"
@click="() => setScope(visibility)"
>
<FAIcon
:icon="visibilityIcon(visibility)"
fixed-width
/>
{{ $t('general.scope_in_timeline.' + visibility) }}
</button>
</div>
<div
v-if="status.nsfw"
class="menu-item dropdown-item extra-action -icon"
>
<button
class="main-button"
@click="() => setSensitive(false)"
>
<FAIcon
icon="eye"
fixed-width
/>
{{ $t('status.mark_as_non-sensitive') }}
</button>
</div>
<div
v-else
class="menu-item dropdown-item extra-action -icon"
>
<button
class="main-button"
@click="() => setSensitive(true)"
>
<FAIcon
icon="eye-slash"
fixed-width
/>
{{ $t('status.mark_as_sensitive') }}
</button>
</div>
</div>
<div
v-if="button.name === 'mute'"
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu"
role="menu"
>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="toggleUserMute"
>
<FAIcon
icon="user"
fixed-width
/>
<template v-if="userIsMuted">
{{ $t('status.unmute_user') }}
</template>
<template v-else>
{{ $t('status.mute_user') }}
</template>
</button>
</div>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="toggleConversationMute"
>
<FAIcon
icon="folder-tree"
fixed-width
/>
<template v-if="conversationIsMuted">
{{ $t('status.unmute_conversation') }}
</template>
<template v-else>
{{ $t('status.mute_conversation') }}
</template>
</button>
</div>
<div class="menu-item dropdown-item extra-action -icon">
<button
class="main-button"
@click="toggleDomainMute"
>
<FAIcon
icon="globe"
fixed-width
/>
<template v-if="domainIsMuted">
{{ $t('status.unmute_domain') }}
</template>
<template v-else>
{{ $t('status.mute_domain') }}
</template>
</button>
</div>
</div>
</template>
</Popover>
<ActionButton
v-else
:button="button"
:status="status"
:hide-label="hideLabel"
v-bind="$attrs"
@emoji-picker-shown="e => $emit('emojiPickerShown', e)"
/>
<teleport to="#modal">
<MuteConfirm
ref="confirmConversation"
type="conversation"
:status="status"
:user="user"
/>
<MuteConfirm
ref="confirmDomain"
type="domain"
:status="status"
:user="user"
/>
<UserTimedFilterModal
ref="confirmUser"
:is-mute="true"
:user="user"
/>
</teleport>
</div>
</template>
<script src="./action_button_container.js" />

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 31, 5:23 PM (15 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1801618
Default Alt Text
(12 KB)

Event Timeline