Page MenuHomePhorge
Files F85830595

No OneTemporary
Actions

Authored By
Unknown
Size
62 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 39dff71a71..ab429ce922 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,162 +1,152 @@
<template>
<div
class="AccountActions"
role="presentation"
>
<Popover
trigger="click"
placement="bottom"
remove-padding
:aria-label="$t('user_card.other')"
>
<template #content>
- <div role="menu" class="dropdown-menu">
+ <div 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>
<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"
- >
+ <div class="menu-item dropdown-item">
<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"
- >
+ <div class="menu-item dropdown-item">
<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>
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 92f84b5821..b72e389dc8 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,243 +1,242 @@
<template>
<div
ref="root"
class="input emoji-input"
:class="{ '-with-picker': !hideEmojiButton, '-textarea': input?.tagName === 'TEXTAREA' }"
>
<slot
:id="'textbox-' + uniqueId"
:aria-owns="ariaOwns"
aria-autocomplete="list"
:aria-activedescendant="(!showSuggestions || highlighted === -1) ? undefined : suggestionItemId(highlighted)"
aria-haspopup="menu"
/>
<!-- TODO: make the 'x' disappear if at the end maybe? -->
<div
ref="hiddenOverlay"
class="hidden-overlay"
:style="overlayStyle"
:aria-hidden="true"
>
<span>{{ preText }}</span>
<span
ref="hiddenOverlayCaret"
class="caret"
>
x
<Popover
ref="suggest"
class="autocomplete-panel"
:aria-label="$t('general.suggestions')"
placement="bottom"
hide-trigger
@show="onSuggestShown"
@close="onSuggestClosed"
@forward-tab-content-focus="focusInput"
@reverse-tab-content-focus="focusInput"
>
<template #content>
<div
:id="suggestionListId"
ref="panel-body"
class="autocomplete-panel-body"
- role="menu"
>
<div
v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)"
:key="index"
class="menu-item autocomplete-item"
- role="menuitemradio"
+ role="radio"
:class="{ '-active': index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)"
:aria-checked="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)"
>
<span class="image">
<img
v-if="suggestion.img"
:src="suggestion.img"
:alt="suggestion.user ? $t('user_card.avatar') : $t('emoji.emoji')"
:title="suggestion.user ? $t('user_card.avatar') : $t('emoji.emoji')"
>
<span v-else>{{ suggestion.replacement }}</span>
</span>
<div class="label">
<span
v-if="suggestion.user"
class="displayText"
>
{{ suggestion.displayText }}<UnicodeDomainIndicator
:user="suggestion.user"
:at="false"
/>
</span>
<span
v-if="!suggestion.user"
class="displayText"
>
{{ maybeLocalizedEmojiName(suggestion) }}
</span>
<span class="detailText">{{ suggestion.detailText }}</span>
</div>
</div>
</div>
</template>
</Popover>
<EmojiPicker
v-if="enableEmojiPicker"
:id="emojiPickerId"
ref="picker"
:enable-sticker-picker="enableStickerPicker"
class="emoji-picker-panel"
hide-trigger
@emoji="insert"
@sticker-uploaded="onStickerUploaded"
@sticker-upload-failed="onStickerUploadFailed"
@show="onPickerShown"
@close="onPickerClosed"
@forward-tab-content-focus="focusInput"
@reverse-tab-content-focus="focusInput"
/>
</span>
<span>{{ postText }}</span>
</div>
<screen-reader-notice
ref="screenReaderNotice"
aria-live="assertive"
/>
<template v-if="enableEmojiPicker">
<button
v-if="!hideEmojiButton"
class="button-unstyled emoji-picker-icon"
type="button"
:title="$t('emoji.add_emoji')"
@click.prevent="togglePicker"
>
<FAIcon :icon="['far', 'face-smile-beam']" />
</button>
</template>
</div>
</template>
<script src="./emoji_input.js"></script>
<style lang="scss">
.input.emoji-input {
padding: 0;
display: flex;
flex-direction: column;
position: relative;
.emoji-picker-icon {
position: absolute;
bottom: 0;
right: 0;
height: 100%;
padding: 0 0.2em;
font-size: 1.3em;
cursor: pointer;
line-height: 1.2em;
&:hover i {
color: var(--text);
}
}
&.-textarea {
.emoji-picker-icon {
height: auto;
padding: 0.2em;
}
}
input,
textarea {
flex: 1 0 auto;
color: inherit;
/* stylelint-disable-next-line declaration-no-important */
background: none !important;
box-shadow: none;
border: none;
outline: none;
}
&.-with-picker {
textarea,
input {
padding-right: 2.4em;
}
}
.hidden-overlay {
opacity: 0;
pointer-events: none;
position: absolute;
inset: 0;
overflow: hidden;
/* DEBUG STUFF */
color: red;
/* set opacity to non-zero to see the overlay */
.caret {
width: 0;
margin-right: calc(-1ch - 1px);
border: 1px solid red;
.popover-trigger-button {
height: 100%;
position: absolute;
}
}
}
}
.autocomplete {
&-panel {
position: absolute;
}
&-item.menu-item {
display: flex;
padding-top: 0;
padding-bottom: 0;
.image {
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: var(--__line-height);
text-align: center;
margin-right: var(--__horizontal-gap);
img {
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain;
}
span {
font-size: var(--__line-height);
line-height: var(--__line-height);
}
}
.label {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0.1em 0 0.2em;
.displayText {
line-height: 1.5;
}
.detailText {
font-size: 0.6em;
line-height: 0.6em;
}
}
}
}
</style>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 20fe0d8a5f..f5c43bfbee 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,129 +1,128 @@
<template>
<div>
<Popover
trigger="click"
class="moderation-tools-popover"
:disabled="disabled"
placement="bottom"
:offset="{ y: 5 }"
@show="setOpen(true)"
@close="setOpen(false)"
normal-button
>
<template #content>
- <div role="menu" class="dropdown-menu">
+ <div class="dropdown-menu">
<template v-for="(entry, index) in entries">
<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/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 648cfaa13a..fa8a239919 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,452 +1,446 @@
<template>
<div
v-if="initialized"
ref="form"
class="post-status-form"
>
<form
autocomplete="off"
@submit.prevent
@dragover.prevent="fileDrag"
>
<div class="form-group">
<div
v-if="!currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
class="visibility-notice notice-dismissible"
>
<i18n-t
keypath="post_status.account_not_locked_warning"
tag="p"
class=""
scope="global"
>
<button
class="button-unstyled -link"
@click="openProfileTab"
>
{{ $t('post_status.account_not_locked_warning_link') }}
</button>
</i18n-t>
</div>
<p
v-if="!hideScopeNotice && newStatus.visibility === 'public'"
class="visibility-notice notice-dismissible"
>
<span>{{ $t('post_status.scope_notice.public') }}</span>
<button
class="button-unstyled fa-scale-110 fa-old-padding dismiss"
:title="$t('post_status.scope_notice_dismiss')"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
</button>
</p>
<p
v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
class="visibility-notice notice-dismissible"
>
<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
<button
class="button-unstyled fa-scale-110 fa-old-padding dismiss"
:title="$t('post_status.scope_notice_dismiss')"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
</button>
</p>
<p
v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && currentUser.locked"
class="visibility-notice notice-dismissible"
>
<span>{{ $t('post_status.scope_notice.private') }}</span>
<button
class="button-unstyled fa-scale-110 fa-old-padding dismiss"
:title="$t('post_status.scope_notice_dismiss')"
@click.prevent="dismissScopeNotice()"
>
<FAIcon icon="times" />
</button>
</p>
<p
v-else-if="!hideScopeNotice && newStatus.visibility === 'direct'"
class="visibility-notice notice-dismissible"
>
<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
</p>
<div
v-if="isEdit"
class="visibility-notice edit-warning"
>
<p>{{ $t('post_status.edit_remote_warning') }}</p>
<p>{{ $t('post_status.edit_unsupported_warning') }}</p>
</div>
<div
v-if="!disablePreview"
class="preview-heading"
>
<button
class="button-unstyled preview-toggle faint"
@click.stop.prevent="togglePreview"
>
{{ $t('post_status.preview') }}
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</button>
<div
v-show="previewLoading"
class="preview-spinner"
>
<FAIcon
class="fa-old-padding"
spin
icon="circle-notch"
/>
</div>
<div
v-if="quotable"
role="radiogroup"
class="reply-or-quote-selector"
>
<Checkbox
v-model="quoteThreadToggled"
:disabled="quoteFormVisible"
radio
>
{{ $t('post_status.quote_option') }}
</Checkbox>
<Checkbox
:model-value="!quoteThreadToggled"
:disabled="quoteFormVisible"
@update:model-value="e => quoteThreadToggled = !e"
radio
>
{{ $t('post_status.reply_option') }}
</Checkbox>
</div>
</div>
<div
v-if="showPreview"
class="preview-container"
>
<div
v-if="!preview"
class="preview-status"
>
{{ $t('general.loading') }}
</div>
<div
v-else-if="preview.error"
class="preview-status preview-error"
>
{{ preview.error }}
</div>
<StatusContent
v-else
:status="preview"
class="preview-status"
/>
</div>
<div class="input inputs-wrapper">
<EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
v-model="newStatus.spoilerText"
enable-emoji-picker
:suggest="emojiSuggestor"
class="input form-control subject-input unstyled"
>
<template #default="inputProps">
<input
v-model="newStatus.spoilerText"
type="text"
:placeholder="$t('post_status.content_warning')"
:disabled="posting && !optimisticPosting"
:title="$t('post_status.content_warning')"
v-bind="propsToNative(inputProps)"
size="1"
class="input form-post-subject unstyled"
>
</template>
</EmojiInput>
<input
v-if="mentionsLine"
:value="mentionsLineReadOnly ? mentionsString : newStatus.mentionsLine"
type="text"
:placeholder="$t('post_status.mentions_line')"
:title="$t('post_status.mentions_line')"
:disabled="mentionsLineReadOnly || (posting && !optimisticPosting)"
size="1"
class="input mentions-input form-post-mentions unstyled"
@change="onMentionsLineUpdate"
>
<EmojiInput
ref="emoji-input"
v-model="newStatus.status"
:suggest="emojiUserSuggestor"
:placement="emojiPickerPlacement"
class="input form-control main-input unstyled"
enable-sticker-picker
enable-emoji-picker
:newline-on-ctrl-enter="submitOnEnter"
@input="onEmojiInputInput"
@sticker-uploaded="addMediaFile"
@sticker-upload-failed="uploadFailed"
@shown="handleEmojiInputShow"
>
<template #default="inputProps">
<textarea
ref="textarea"
v-model="newStatus.status"
:placeholder="placeholder || $t('post_status.default')"
:title="$t('post_status.post_content')"
rows="1"
cols="1"
:disabled="posting && !optimisticPosting"
class="input form-post-body"
:class="{ 'scrollable-form': !!maxHeight }"
v-bind="propsToNative(inputProps)"
@keydown.exact.enter="submitOnEnter && postStatus($event)"
@keydown.meta.enter="postStatus($event, newStatus)"
@keydown.ctrl.enter="!submitOnEnter && postStatus($event)"
@input="resize"
@compositionupdate="resize"
@paste="paste"
/>
<p
v-if="hasStatusLengthLimit"
class="character-counter faint"
:class="{ error: isOverLengthLimit }"
>
{{ charactersLeft }}
</p>
</template>
</EmojiInput>
</div>
<div
v-if="!disableScopeSelector"
class="visibility-tray"
>
<scope-selector
v-if="!disableVisibilitySelector"
ref="scopeSelector"
:show-all="showAllScopes"
:user-default="userDefaultScope"
:original-scope="repliedStatus?.visibility"
:initial-scope="newStatus.visibility"
@change="changeVis"
/>
<div
v-if="postFormats.length > 1"
class="text-format"
>
<Select
v-model="newStatus.contentType"
class="input form-control unstyled"
:aria-label="$t('post_status.content_type_selection')"
unstyled
>
<option
v-for="postFormat in postFormats"
:key="postFormat"
:value="postFormat"
>
{{ $t(`post_status.content_type["${postFormat}"]`) }}
</option>
</Select>
</div>
<div
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
class="text-format"
>
<span class="only-format">
{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
</span>
</div>
</div>
</div>
<PollForm
v-if="pollsAvailable"
ref="pollForm"
v-model="newStatus.poll"
:visible="pollFormVisible"
/>
<QuoteForm
v-if="quotingAvailable"
:id="newStatus.quote?.id"
ref="quoteForm"
:visible="quoteFormVisible"
:url="newStatus.quote?.url"
@update:url="url => newStatus.quote.url = url"
@update:id="id => newStatus.quote.id = id"
/>
<span
v-if="!disableDraft && shouldAutoSaveDraft"
class="auto-save-status"
>
{{ autoSaveState }}
</span>
<div
ref="bottom"
class="form-bottom"
>
<div class="form-bottom-left">
<media-upload
ref="mediaUpload"
class="bottom-left-button media-upload-icon"
:drop-files="dropFiles"
:disabled="uploadFileLimitReached"
@uploading="startedUploadingFiles"
@uploaded="addMediaFile"
@upload-failed="uploadFailed"
@all-uploaded="finishedUploadingFiles"
/>
<button
v-if="pollsAvailable"
class="bottom-left-button poll-icon button-unstyled"
:class="{ toggled: pollFormVisible }"
:title="$t('polls.add_poll')"
@click="togglePollForm"
>
<FAIcon icon="poll-h" />
</button>
<button
v-if="quotingAvailable"
class="bottom-left-button quote-icon button-unstyled"
:disabled="quoteThreadToggled"
:class="{ toggled: quoteFormVisible }"
:title="$t('tool_tip.add_quote')"
@click="toggleQuoteForm"
>
<FAIcon icon="quote-right" />
</button>
</div>
<div class="btn-group post-button-group">
<button
class="btn button-default post-button"
:disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
@click.stop.prevent="postStatus($event)"
>
<template v-if="posting">
{{ $t('post_status.posting') }}
</template>
<template v-else>
{{ $t('post_status.post') }}
</template>
</button>
<Popover
v-if="!hideExtraActions"
trigger="click"
placement="bottom"
:offset="{ y: 5 }"
normal-button
:title="$t('post_status.more_post_actions')"
>
<template #trigger>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="chevron-down"
/>
</template>
<template #content="{close}">
- <div
- class="dropdown-menu"
- role="menu"
- >
- <div
- class="menu-item dropdown-item"
- role="menuitem"
- >
+ <div class="dropdown-menu">
+ <div class="menu-item dropdown-item">
<button
v-if="!hideDraft || !disableDraft"
class="main-button"
:disabled="!safeToSaveDraft"
@click.prevent="saveDraft"
@click="close"
>
<template v-if="closeable">
{{ $t('post_status.save_to_drafts_and_close_button') }}
</template>
<template v-else>
{{ $t('post_status.save_to_drafts_button') }}
</template>
</button>
</div>
</div>
</template>
</Popover>
</div>
</div>
<small
v-if="chatView"
class="keyboard-enter-hint faint"
>
<i v-if="submitOnEnter">
{{ $t('post_status.enter_submits') }}
</i>
<i v-else>
{{ $t('post_status.enter_newline') }}
</i>
</small>
<div
v-show="showDropIcon !== 'hide'"
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
class="drop-indicator"
@dragleave="fileDragStop"
@drop.stop="fileDrop"
>
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
</div>
<div
v-if="error"
class="alert error -dismissible"
>
<span>
{{ error }}
</span>
<button
class="button-unstyled"
@click="clearError"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
<Gallery
v-if="newStatus.files && newStatus.files.length > 0"
class="attachments"
:grid="true"
:nsfw="false"
:attachments="newStatus.files"
:descriptions="newStatus.mediaDescriptions"
:set-media="() => setMedia()"
:editable="true"
:edit-attachment="editAttachment"
:remove-attachment="removeMediaFile"
:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
@play="$emit('mediaplay', 'newStatus')"
@pause="$emit('mediapause', 'newStatus')"
:aria-label="$t('status.attachments')"
/>
<div
v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
class="upload_settings"
>
<Checkbox v-model="newStatus.nsfw">
{{ $t('post_status.attachments_sensitive') }}
</Checkbox>
</div>
</form>
<DraftCloser
ref="draftCloser"
@save="saveAndCloseDraft"
@discard="discardAndCloseDraft"
/>
</div>
</template>
<script src="./post_status_form.js"></script>
<style src="./post_status_form.scss" lang="scss"></style>
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 91c48f66c9..43cd938c2e 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -1,164 +1,160 @@
<template>
<Popover
:trigger="nested ? 'hover' : 'click'"
class="QuickFilterSettings"
:bound-to="{ x: 'container' }"
:position="nested ? 'right' : 'top'"
v-bind="triggerAttrs"
>
<template #content>
- <div
- class="dropdown-menu"
- role="menu"
- >
+ <div class="dropdown-menu">
<div
v-if="loggedIn"
- role="group"
+ role="radiogroup"
>
<div class="menu-item dropdown-item -icon">
<button
v-if="!conversation"
class="main-button"
:aria-checked="replyVisibilityAll"
- role="menuitemradio"
+ role="radio"
@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"
+ role="radio"
@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"
+ role="radio"
@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>
<hr
v-if="!conversation"
role="separator"
class="dropdown-divider"
/>
</div>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
- role="menuitemcheckbox"
+ role="checkbox"
: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"
+ role="checkbox"
: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"
+ role="checkbox"
: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"
+ role="checkbox"
: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 057d0a6aa9..8350dc51f7 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -1,134 +1,130 @@
<template>
<Popover
trigger="click"
class="QuickViewSettings"
:bound-to="{ x: 'container' }"
:title="$t('timeline.quick_view_settings')"
>
<template #content>
- <div
- class="dropdown-menu"
- role="menu"
- >
+ <div class="dropdown-menu">
<div
v-if="mobileLayout"
class="menu-item dropdown-item -icon"
>
<QuickFilterSettings :nested="true" />
</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"
+ role="radio"
@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"
+ role="radio"
@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>
<hr
role="separator"
class="dropdown-divider"
/>
<div class="menu-item dropdown-item -icon">
<button
class="main-button"
- role="menuitemcheckbox"
+ role="checkbox"
: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"
+ role="checkbox"
: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"
+ role="checkbox"
: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>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 8e794b4f33..843eb14664 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,451 +1,451 @@
<template>
<aside
class="side-drawer-container mobile-drawer"
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
:aria-label="$t('nav.navigation')"
>
<div
class="side-drawer-darken"
:class="{ 'side-drawer-darken-closed': closed}"
/>
<div
class="side-drawer"
:class="{'side-drawer-closed': closed}"
@touchstart="touchStart"
@touchmove="touchMove"
>
<div
class="side-drawer-heading"
@click="toggleDrawer"
>
<UserCard
v-if="currentUser"
:user-id="currentUser.id"
:hide-bio="true"
/>
<div
v-else
class="side-drawer-logo-wrapper"
>
<img :src="logo">
<span v-if="!hideSitename">{{ sitename }}</span>
</div>
</div>
<ul>
<li
v-if="!currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'login' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-in-alt"
/> {{ $t("login.login") }}
</router-link>
</li>
<li
v-if="currentUser || !privateMode"
@click="toggleDrawer"
>
<router-link
:to="timelinesRoute"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="home"
/> {{ $t("nav.timelines") }}
</router-link>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'lists' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="list"
/> {{ $t("nav.lists") }}
</router-link>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'bookmarks' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bookmark"
/> {{ $t("nav.bookmarks") }}
</router-link>
</li>
<li
v-if="currentUser && pleromaChatMessagesAvailable"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
style="position: relative;"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="comments"
/> {{ $t("nav.chats") }}
<span
v-if="unreadChatsCount"
class="badge -notification"
>
{{ unreadChatsCount }}
</span>
</router-link>
</li>
</ul>
- <ul role="menu" v-if="currentUser">
+ <ul v-if="currentUser">
<li @click="toggleDrawer">
<router-link
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bell"
/> {{ $t("nav.interactions") }}
</router-link>
</li>
<li
v-if="currentUser.locked"
@click="toggleDrawer"
>
<router-link
to="/friend-requests"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="user-plus"
/> {{ $t("nav.friend_requests") }}
<span
v-if="followRequestsCount > 0"
class="badge -notification"
>
{{ followRequestsCount }}
</span>
</router-link>
</li>
<li
v-if="shout"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'shout-panel' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bullhorn"
/> {{ $t("shoutbox.title") }}
</router-link>
</li>
</ul>
- <ul role="menu">
+ <ul>
<li
v-if="currentUser || !privateMode"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'search' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
/> {{ $t("nav.search") }}
</router-link>
</li>
<li
v-if="currentUser && suggestionsEnabled"
@click="toggleDrawer"
class="menu-item"
>
<router-link
:to="{ name: 'who-to-follow' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="user-plus"
/> {{ $t("nav.who_to_follow") }}
</router-link>
</li>
<li
@click="toggleDrawer"
>
<button
class="menu-item"
@click="openSettingsModal('user')"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="cog"
/> {{ $t("settings.settings") }}
</button>
</li>
<li
@click="toggleDrawer"
>
<router-link
:to="{ name: 'about'}"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="info-circle"
/> {{ $t("nav.about") }}
</router-link>
</li>
<li
v-if="currentUser?.role === 'admin'"
@click="toggleDrawer"
>
<button
class="menu-item"
@click.stop="openSettingsModal('admin')"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="tachometer-alt"
/> {{ $t("nav.administration") }}
</button>
</li>
<li
v-if="currentUser && supportsAnnouncements"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'announcements' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bullhorn"
/> {{ $t("nav.announcements") }}
<span
v-if="unreadAnnouncementsCount"
class="badge -notification"
>
{{ unreadAnnouncementsCount }}
</span>
</router-link>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'drafts' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="file-pen"
/> {{ $t('nav.drafts') }}
<span
v-if="draftsCount"
class="badge -neutral"
>
{{ draftsCount }}
</span>
</router-link>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<router-link
:to="{ name: 'edit-navigation' }"
class="menu-item"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="compass"
/> {{ $t("nav.edit_nav_mobile") }}
</router-link>
</li>
<li
v-if="currentUser"
@click="toggleDrawer"
>
<button
class="menu-item"
@click="doLogout"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
/> {{ $t("login.logout") }}
</button>
</li>
</ul>
</div>
<div
class="side-drawer-click-outside"
:class="{'side-drawer-click-outside-closed': closed}"
@click.stop.prevent="toggleDrawer"
/>
</aside>
</template>
<script src="./side_drawer.js"></script>
<style lang="scss">
.side-drawer-container {
position: fixed;
z-index: var(--ZI_navbar);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: stretch;
transition-duration: 0s;
transition-property: transform;
}
.side-drawer-container-open {
transform: translate(0%);
}
.side-drawer-container-closed {
transition-delay: 0.35s;
transform: translate(-100%);
}
.side-drawer-darken {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
transition: 0.35s;
transition-property: background-color;
background-color: rgb(0 0 0 / 50%);
}
.side-drawer-darken-closed {
background-color: rgb(0 0 0 / 0%);
}
.side-drawer-click-outside {
flex: 1 1 100%;
}
.side-drawer {
overflow-x: hidden;
transition: 0.35s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-property: transform;
margin: 0 0 0 -100px;
padding: 0 0 1em 100px;
width: 80%;
max-width: 20em;
flex: 0 0 80%;
box-shadow: var(--shadow);
background-color: var(--background);
.badge {
margin-left: 10px;
}
}
.side-drawer-logo-wrapper {
display: flex;
align-items: center;
padding: 0.85em;
img {
flex: none;
height: 50px;
margin-right: 0.85em;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.side-drawer-click-outside-closed {
flex: 0 0 0;
}
.side-drawer-closed {
transform: translate(-100%);
}
.side-drawer-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
display: flex;
padding: 0;
margin: 0;
.user-info {
margin: 1em;
}
}
.side-drawer ul {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid;
border-color: var(--border);
}
.side-drawer ul:last-child {
border: 0;
}
.side-drawer li {
padding: 0;
a,
button {
box-sizing: border-box;
display: block;
height: 3em;
line-height: 3em;
padding: 0 0.7em;
}
}
</style>
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 487aab53c1..d2268fe483 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -1,187 +1,185 @@
<template>
<EmojiPicker
v-if="button.name === 'emoji'"
ref="picker"
:enable-sticker-picker="false"
:hide-custom-emoji="hideCustomEmoji"
:placement="extra ? 'right' : 'bottom'"
:menuitem="extra"
class="ActionButtonContainer interactive-part emoji-picker-panel"
@emoji="addReaction"
@show="onShowEmojiPicker"
@close="onHideEmojiPicker"
@emoji-picker-shown="e => $emit('emojiPickerShown', e)"
>
<ActionButton
:button="button" :status="status"
:hide-label="hideLabel"
:extra="extra"
popover-trigger
v-bind.prop="$attrs"
/>
</EmojiPicker>
<Popover
v-else-if="button.dropdown?.()"
class="ActionButtonContainer interactive-part"
:trigger="extra ? 'hover' : 'click'"
:offset="{ y: 5 }"
:placement="extra ? 'right' : 'bottom'"
:menuitem="extra"
:title="$t(button.label(funcArg))"
>
<template #trigger>
<ActionButton
:button="button"
:status="status"
:hide-label="hideLabel"
:extra="extra"
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>
<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>
</Popover>
<ActionButton
v-else
class="ActionButtonContainer"
:extra="extra"
:button="button"
:status="status"
:hide-label="hideLabel"
v-bind="$attrs"
/>
</template>
<script src="./action_button_container.js" />
<style src="./action_button_container.scss" />
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 4cf996ce2c..f022a2a3a7 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -1,141 +1,140 @@
<template>
<div class="StatusActionButtons">
<span
class="quick-action-buttons"
:class="{ '-pin': showPin }"
role="toolbar"
:aria-label="$t('status.status_actions')"
>
<span
v-for="button in quickButtons"
:key="button.name"
class="quick-action"
role="presentation"
:class="quickButtonClass(button)"
>
<ActionButtonContainer
:class="{ '-pin': showPin }"
:button="button"
:status="status"
:extra="false"
:func-arg="funcArg"
:get-class="getClass"
:get-component="getComponent"
:close="() => { /* no-op */ }"
:do-action="doAction"
:default-button-style="useDefaultButtons"
:hide-label="hideLabels"
@emoji-picker-shown="onEmojiPickerShown"
/>
<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
icon="thumbtack"
/>
</button>
</span>
<Popover
trigger="click"
:title="$t('status.more_actions')"
:normal-button="useDefaultButtons"
class="quick-action -more-actions"
placement="bottom"
:offset="{ y: 5 }"
remove-padding
@close="onExtraClose"
>
<template #trigger>
<FAIcon
class="action-button-inner"
icon="ellipsis-h"
/>
</template>
<template #content="{close, resize}">
<div
:id="`popup-menu-${randomSeed}`"
class="dropdown-menu extra-action-buttons"
- role="menu"
>
<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"
:func-arg="funcArg"
:get-class="getClass"
:get-component="getComponent"
:outer-close="close"
:do-action="doAction"
:default-button-style="useDefaultButtons"
:hide-label="hideLabels"
/>
<button
v-if="showPin && currentUser"
type="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
v-if="currentUser"
class="menu-item dropdown-item extra-action -icon"
>
<button
class="main-button"
:tabindex="0"
@click.stop="() => { resize(); showPin = !showPin }"
>
<FAIcon
class="fa-scale-110"
fixed-width
icon="wrench"
/><span>{{ $t('nav.edit_pinned') }}</span>
</button>
</div>
</div>
</template>
</Popover>
</span>
<teleport to="#modal">
<ConfirmModal
v-if="showingConfirmDialog"
:title="currentConfirmTitle"
:confirm-text="currentConfirmOkText"
:cancel-text="currentConfirmCancelText"
@accepted="currentConfirmAction"
@cancelled="showingConfirmDialog = false"
>
{{ currentConfirmBody }}
</ConfirmModal>
</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
Sun, Nov 1, 5:33 AM (17 h, 12 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1802565
Default Alt Text
(62 KB)

Event Timeline