Page MenuHomePhorge
Files F85804296

No OneTemporary
Actions

Size
22 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 72e983c6c3..91138aa134 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,165 +1,165 @@
<template>
<div
class="AccountActions"
role="presentation"
>
<Popover
trigger="click"
placement="bottom"
remove-padding
:trigger-attrs="{ 'aria-label': $t('user_card.other'), role: 'menuitem' }"
>
<template #content>
<div role="menu" class="dropdown-menu">
<template v-if="relationship.following">
<div
v-if="relationship.showing_reblogs"
class="menu-item dropdown-item"
role="menuitem"
>
<button
class="main-button"
@click="hideRepeats"
>
{{ $t('user_card.hide_repeats') }}
</button>
</div>
<div
v-if="!relationship.showing_reblogs"
class="menu-item dropdown-item"
role="menuitem"
>
<button
class="main-button"
@click="showRepeats"
>
{{ $t('user_card.show_repeats') }}
</button>
</div>
- <div
+ <hr
role="separator"
class="dropdown-divider"
/>
</template>
<UserListMenu :user="user" />
<div
v-if="relationship.followed_by"
class="menu-item dropdown-item"
role="menuitem"
>
<button
class="main-button"
@click="removeUserFromFollowers"
>
{{ $t('user_card.remove_follower') }}
</button>
</div>
<div
class="menu-item dropdown-item"
role="menuitem"
>
<button
v-if="relationship.blocking"
class="main-button"
@click="unblockUser"
>
{{ $t('user_card.unblock') }}
</button>
<button
v-else
class="main-button"
@click="blockUser"
>
{{ $t('user_card.block') }}
</button>
</div>
<div
class="menu-item dropdown-item"
role="menuitem"
>
<button
class="main-button"
@click="reportUser"
>
{{ $t('user_card.report') }}
</button>
</div>
<div
v-if="pleromaChatMessagesAvailable"
class="menu-item dropdown-item"
role="menuitem"
>
<button
class="main-button"
@click="openChat"
>
{{ $t('user_card.message') }}
</button>
</div>
</div>
</template>
<template #trigger>
<FAIcon
class="icon"
icon="ellipsis-v"
/>
</template>
</Popover>
<teleport to="#modal">
<ConfirmModal
v-if="showingConfirmBlock && !blockExpiration"
ref="blockDialog"
:title="$t('user_card.block_confirm_title')"
:confirm-text="$t('user_card.block_confirm_accept_button')"
:cancel-text="$t('user_card.block_confirm_cancel_button')"
@accepted="doBlockUser"
@cancelled="hideConfirmBlock"
>
<i18n-t
keypath="user_card.block_confirm"
tag="span"
scope="global"
>
<template #user>
<span
v-text="user.screen_name_ui"
/>
</template>
</i18n-t>
</ConfirmModal>
</teleport>
<teleport to="#modal">
<ConfirmModal
v-if="showingConfirmRemoveFollower"
:title="$t('user_card.remove_follower_confirm_title')"
:confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
:cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
@accepted="doRemoveUserFromFollowers"
@cancelled="hideConfirmRemoveUserFromFollowers"
>
<i18n-t
keypath="user_card.remove_follower_confirm"
tag="span"
scope="global"
>
<template #user>
<span
v-text="user.screen_name_ui"
/>
</template>
</i18n-t>
</ConfirmModal>
<UserTimedFilterModal
v-if="blockExpiration"
ref="timedBlockDialog"
:is-mute="false"
:user="user"
/>
</teleport>
</div>
</template>
<script src="./account_actions.js"></script>
<style lang="scss">
</style>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 309cd70458..53b26f67ab 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,130 +1,130 @@
<template>
<div>
<Popover
trigger="click"
class="moderation-tools-popover"
:disabled="disabled"
placement="bottom"
:offset="{ y: 5 }"
@show="setOpen(true)"
@close="setOpen(false)"
:trigger-attrs="{ role: 'menuitem' }"
normal-button
>
<template #content>
<div role="menu" class="dropdown-menu">
<template v-for="(entry, index) in entries">
- <div
+ <hr
v-if="entry === 'separator'"
:key="index"
role="separator"
class="dropdown-divider"
/>
<div
v-else
:key="entry.label"
role="menuitem"
class="menu-item dropdown-item"
:class="entry.checkbox ? '-icon' : '-icon-space'"
>
<button
class="main-button"
@click="() => maybeShowConfirm(entry)"
>
<span
v-if="entry.checkbox"
class="input menu-checkbox"
:class="entry.checkboxClass"
/>
{{ $t(entry.label) }}
</button>
</div>
</template>
</div>
</template>
<template #trigger>
{{ $t('user_card.admin_menu.moderation') }}
<FAIcon
v-if="ready"
icon="chevron-down"
/>
<span
v-else
class="loading-spinner"
>
<FAIcon
class="fa-old-padding"
spin
icon="circle-notch"
/>
</span>
</template>
</Popover>
<teleport to="#modal">
<ConfirmModal
v-if="confirmDialogShow"
:title="$t(confirmDialogTitle)"
:confirm-text="confirmDialogConfirm"
:confirm-danger="confirmDialogDanger"
:cancel-text="$t('general.cancel')"
@accepted="doConfirmDialogAction"
@cancelled="clearConfirmDialog"
>
<i18n-t
:plural="users.length"
scope="global"
:keypath="confirmDialogContent"
tag="p"
>
<template #user>
<span
v-text="users[0].screen_name_ui"
/>
</template>
<template #count>
{{ users.length }}
</template>
<template #name>
<code>
{{ confirmDialogName }}
</code>
</template>
</i18n-t>
<p v-if="confirmDialogContent2">
{{ $t(confirmDialogContent2) }}
</p>
<ul v-if="users.length > 1">
<li
v-for="user in users"
:key="user.screen_name"
>
{{ user.screen_name }}
</li>
</ul>
</ConfirmModal>
</teleport>
</div>
</template>
<script src="./moderation_tools.js"></script>
<style lang="scss">
.moderation-tools-popover {
height: 100%;
.trigger {
/* stylelint-disable-next-line declaration-no-important */
display: flex !important;
height: 100%;
}
}
.moderation-tools-button {
white-space: nowrap;
svg,
i {
font-size: 0.8em;
}
}
</style>
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index baf95d9e72..4b750faa43 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -1,153 +1,154 @@
.popover-trigger-button {
display: inline-block;
}
.popover {
z-index: var(--ZI_popover_override, var(--ZI_popovers));
position: fixed;
min-width: 0;
max-width: calc(100vw - 20px);
--_shadow: var(--shadow);
}
.popover-default {
&::after {
content: "";
position: absolute;
inset: -1px;
box-shadow: var(--_shadow);
pointer-events: none;
}
border-radius: var(--roundness);
border-color: var(--border);
border-style: solid;
border-width: 1px;
background-color: var(--background);
}
.dropdown-menu {
display: block;
padding: 0;
font-size: 1em;
text-align: left;
list-style: none;
max-width: 100vw;
z-index: var(--ZI_popover_override, var(--ZI_popovers));
white-space: nowrap;
background-color: var(--background);
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
+ border: 0;
border-top: 1px solid var(--border);
}
.dropdown-item {
padding: 0;
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: column;
grid-auto-columns: auto;
gap: 0.5em;
.popover-wrapper {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr;
}
.extra-button {
border-left: 1px solid;
border-image-source: linear-gradient(to bottom, transparent 0%, var(--icon) var(--__horizontal-gap) calc(100% - var(--__horizontal-gap)), transparent 100%);
border-image-slice: 1;
padding-left: calc(var(--__horizontal-gap) - 1px);
padding-right: var(--__horizontal-gap);
padding-top: var(--__horizontal-gap);
padding-bottom: var(--__horizontal-gap);
max-width: fit-content;
}
.main-button {
width: 100%;
padding: var(--__horizontal-gap) var(--__horizontal-gap);
gap: var(--__horizontal-gap);
grid-template-columns: 1fr var(--__line-height);
grid-auto-flow: column;
grid-auto-columns: auto;
.menu-checkbox {
display: inline-block;
vertical-align: middle;
min-width: calc(var(--__line-height) + 1px);
max-width: calc(var(--__line-height) + 1px);
min-height: calc(var(--__line-height) + 1px);
max-height: calc(var(--__line-height) + 1px);
line-height: var(--__line-height);
text-align: center;
border-radius: 0;
box-shadow: var(--shadow);
margin-right: var(--__horizontal-gap);
&.menu-checkbox-checked::after {
font-size: 1.25em;
content: "✓";
}
&.menu-checkbox-indeterminate::after {
font-size: 1.25em;
content: "–";
}
&.-radio {
border-radius: 9999px;
&.menu-checkbox-checked::after {
font-size: 2em;
content: "•";
}
&.menu-checkbox-indeterminate::after {
font-size: 2em;
content: "–";
}
}
}
}
.main-button,
.extra-button {
display: grid;
box-sizing: border-box;
align-items: center;
&.disabled {
cursor: not-allowed;
}
&:not(.disabled) {
cursor: pointer;
}
}
&.-icon {
.main-button {
grid-template-columns: var(--__line-height) 1fr;
}
}
&.-icon-space {
.main-button {
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/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 79820ff38f..532b3bde52 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -1,164 +1,164 @@
<template>
<Popover
:trigger="nested ? 'hover' : 'click'"
class="QuickFilterSettings"
:bound-to="{ x: 'container' }"
:position="nested ? 'right' : 'top'"
:trigger-attrs="triggerAttrs"
>
<template #content>
<div
class="dropdown-menu"
role="menu"
>
<div
v-if="loggedIn"
role="group"
>
<div class="menu-item dropdown-item -icon">
<button
v-if="!conversation"
class="main-button"
:aria-checked="replyVisibilityAll"
role="menuitemradio"
@click="replyVisibilityAll = true"
>
<span
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }}
</button>
</div>
<div
v-if="!conversation"
class="menu-item dropdown-item -icon"
>
<button
class="main-button"
:aria-checked="replyVisibilityFollowing"
role="menuitemradio"
@click="replyVisibilityFollowing = true"
>
<span
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }}
</button>
</div>
<div
v-if="!conversation"
class="menu-item dropdown-item -icon"
>
<button
class="main-button"
:aria-checked="replyVisibilitySelf"
role="menuitemradio"
@click="replyVisibilitySelf = true"
>
<span
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }}
</button>
</div>
- <div
+ <hr
v-if="!conversation"
role="separator"
class="dropdown-divider"
/>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="muteBotStatuses"
@click="muteBotStatuses = !muteBotStatuses"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }"
:aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }}
</button>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="muteSensitiveStatuses"
@click="muteSensitiveStatuses = !muteSensitiveStatuses"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
:aria-hidden="true"
/>{{ $t('settings.mute_sensitive_posts') }}
</button>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="hideMedia"
@click="hideMedia = !hideMedia"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }"
:aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }}
</button>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="hideMutedPosts"
@click="hideMutedPosts = !hideMutedPosts"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }"
:aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }}
</button>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitem"
@click="openTab('filtering')"
>
<FAIcon
fixed-width
icon="font"
/>{{ $t('settings.word_filter_and_more') }}
</button>
</div>
</div>
</template>
<template #trigger>
<div :class="mobileLayout ? 'main-button' : ''">
<FAIcon
icon="filter"
:fixed-width="nested"
/>
<template v-if="nested">
{{ $t('timeline.filter_settings') }}
</template>
<FAIcon
v-if="nested"
class="chevron-icon"
size="lg"
icon="chevron-right"
fixed-width
/>
</div>
</template>
</Popover>
</template>
<script src="./quick_filter_settings.js"></script>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 40eea94072..368bf9e795 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -1,134 +1,134 @@
<template>
<Popover
trigger="click"
class="QuickViewSettings"
:bound-to="{ x: 'container' }"
:trigger-attrs="{ title: $t('timeline.quick_view_settings')}"
>
<template #content>
<div
class="dropdown-menu"
role="menu"
>
<div
v-if="mobileLayout"
class="menu-item dropdown-item -icon"
>
<QuickFilterSettings :nested="true" />
</div>
- <div
+ <hr
v-if="mobileLayout"
role="separator"
class="dropdown-divider"
/>
<div role="group">
<div class="menu-item dropdown-item -icon-double">
<button
class="main-button"
:aria-checked="conversationDisplay === 'tree'"
role="menuitemradio"
@click="conversationDisplay = 'tree'"
>
<span
class="input menu-checkbox -radio"
:aria-hidden="true"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
/><FAIcon
icon="folder-tree"
:aria-hidden="true"
fixed-width
/> {{ $t('settings.conversation_display_tree_quick') }}
</button>
</div>
<div class="menu-item dropdown-item -icon-double">
<button
class="main-button"
:aria-checked="conversationDisplay === 'linear'"
role="menuitemradio"
@click="conversationDisplay = 'linear'"
>
<span
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
:aria-hidden="true"
/><FAIcon
icon="list"
:aria-hidden="true"
fixed-width
/> {{ $t('settings.conversation_display_linear_quick') }}
</button>
</div>
</div>
- <div
+ <hr
role="separator"
class="dropdown-divider"
/>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="showUserAvatars"
@click="showUserAvatars = !showUserAvatars"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }"
:aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }}
</button>
</div>
<div
v-if="!conversation"
class="menu-item dropdown-item -icon"
>
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="autoUpdate"
@click="autoUpdate = !autoUpdate"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }"
:aria-hidden="true"
/>{{ $t('settings.auto_update') }}
</button>
</div>
<div
v-if="!conversation"
class="menu-item dropdown-item -icon"
>
<button
class="main-button"
role="menuitemcheckbox"
:aria-checked="collapseWithSubjects"
@click="collapseWithSubjects = !collapseWithSubjects"
>
<span
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
:aria-hidden="true"
/>{{ $t('settings.collapse_subject') }}
</button>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
role="menuitem"
@click="openTab('general')"
>
<FAIcon
icon="wrench"
fixed-width
/>{{ $t('settings.more_settings') }}
</button>
</div>
</div>
</template>
<template #trigger>
<FAIcon icon="bars" />
</template>
</Popover>
</template>
<script src="./quick_view_settings.js"></script>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 10, 2:07 AM (1 d, 11 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1784991
Default Alt Text
(22 KB)

Event Timeline