Page MenuHomePhorge
Files F85825997

No OneTemporary
Actions

Authored By
Unknown
Size
37 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/activity_header/activity_header.vue b/src/components/activity_header/activity_header.vue
index 871d444b70..0bc7375421 100644
--- a/src/components/activity_header/activity_header.vue
+++ b/src/components/activity_header/activity_header.vue
@@ -1,150 +1,150 @@
<template>
<div
class="ActivityHeader"
:class="{ '-multiline': multiline }"
>
<template
v-if="user"
>
<RichContent
v-if="user.name_html"
class="user-title"
:html="user.name"
:emoji="user.emoji"
:allow-non-square-emoji="allowNonSquareEmoji"
:is-local="user.is_local"
:title="user.name"
/>
<span
v-else
class="status-username"
:title="user.name"
>
{{ user.name }}
</span>
{{ ' ' }}
<span class="user-handle">
<UserLink
:title="user.screen_name_ui"
:user="user"
:at="false"
/>
<img
v-if="!!(user && user.favicon)"
class="instance-favicon"
:title="$t('status.favicon')"
:alt="$t('status.favicon')"
:src="user.favicon"
>
</span>
</template>
<span class="misc" :class="{ '-has-actions': true }">
<span
v-if="!nonMention && status?.pinned"
class="pin"
>
<FAIcon
icon="thumbtack"
class="faint"
/>
<span class="faint">{{ $t('status.pinned') }}</span>
</span>
<router-link
v-if="status"
class="timeago faint"
:to="{ name: 'conversation', params: { statusId: status.id } }"
:aria-label="$t('status.open_in_thread_view')"
>
<Timeago
:time="time"
:auto-update="60"
/>
</router-link>
<span
v-else
class="timeago faint"
>
<Timeago
:time="time"
:auto-update="60"
/>
</span>
<span
v-if="!nonMention && status.visibility"
class="visibility-icon"
:title="visibilityLocalized"
>
<FAIcon
fixed-width
class="fa-scale-110"
:icon="visibilityIcon"
/>
</span>
<button
v-if="!nonMention && expandable && !expanded"
class="button-unstyled"
:title="$t('status.expand')"
@click.prevent="$emit('toggleExpanded')"
>
<FAIcon
fixed-width
class="fa-scale-110"
icon="plus-square"
/>
</button>
<button
v-if="unmuted"
class="button-unstyled"
@click.prevent="$emit('toggleMuted')"
:title="$t('tool_tip.toggle_mute')"
>
<FAIcon
fixed-width
icon="eye-slash"
class="fa-scale-110"
/>
</button>
<button
v-if="status && inThreadForest && replies?.size && !simpleTree"
class="button-unstyled"
:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
:aria-expanded="threadShowing ? 'true' : 'false'"
@click.prevent="$emit('toggleThreadDisplay')"
>
<FAIcon
fixed-width
class="fa-scale-110"
:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
/>
</button>
<button
v-if="!nonMention && expanded && isTreeView && !simpleTree"
class="button-unstyled"
:title="$t('status.show_only_conversation_under_this')"
@click.prevent="$emit('requestFocus')"
>
<FAIcon
fixed-width
class="fa-scale-110"
:icon="'angle-double-right'"
/>
</button>
<button
v-if="nonMention && status"
class="button-unstyled expand-icon"
:title="$t('tool_tip.toggle_expand')"
- :aria-expanded="expanded"
+ :aria-expanded="expanded ? 'true' : 'false'"
@click.prevent="$emit('toggleExpanded')"
>
<FAIcon
class="fa-scale-110"
fixed-width
:icon="expanded ? 'compress-alt' : 'expand-alt'"
/>
</button>
</span>
</div>
</template>
<script src="./activity_header.js"></script>
<style src="./activity_header.scss"></style>
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 2b5bfaf962..0c783e354e 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -1,171 +1,171 @@
<template>
<article class="Draft">
<div
v-if="!editing"
class="status-content"
>
<div>
<i18n-t
v-if="draft.type === 'reply' || draft.type === 'edit'"
tag="span"
:keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
>
<template #statusLink>
<router-link
class="faint-link"
:to="{ name: 'conversation', params: { statusId: draft.refId } }"
>
{{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
</router-link>
</template>
</i18n-t>
<StatusContent
v-if="draft.refId && refStatus"
class="status-content"
:status="refStatus"
:compact="true"
/>
</div>
<div class="status-preview">
<span class="status_content">
<p v-if="draft.spoilerText">
<i>
{{ draft.spoilerText }}:
</i>
</p>
<p v-if="draft.status">{{ draft.status }}</p>
<p
v-else
class="faint"
>{{ $t('drafts.empty') }}</p>
</span>
<Gallery
v-if="draft.files?.length !== 0"
class="attachments media-body"
:compact="true"
:nsfw="nsfwClickthrough"
:attachments="draft.files"
:limit="1"
size="small"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
:aria-label="$t('status.attachments')"
/>
<div
v-if="draft.poll?.options"
class="poll-indicator-container"
:title="$t('drafts.poll_tooltip')"
>
<div class="poll-indicator">
<FAIcon
icon="poll-h"
size="3x"
/>
</div>
</div>
</div>
</div>
<div v-if="editing">
<PostStatusForm
v-if="draft.type !== 'edit'"
ref="form"
:hide-draft="true"
v-bind="postStatusFormProps"
/>
<EditStatusForm
v-else
ref="form"
:hide-draft="true"
:params="postStatusFormProps"
/>
</div>
<teleport to="#modal">
<ConfirmModal
v-if="showingConfirmDialog"
:title="$t('drafts.abandon_confirm_title')"
:confirm-text="$t('drafts.abandon_confirm_accept_button')"
:cancel-text="$t('drafts.abandon_confirm_cancel_button')"
@accepted="doAbandon"
@cancelled="hideConfirmDialog"
>
{{ $t('drafts.abandon_confirm') }}
</ConfirmModal>
</teleport>
<div class="actions">
<button
class="btn button-default"
- :aria-expanded="editing"
+ :aria-expanded="editing ? 'true' : 'false'"
@click.prevent.stop="toggleEditing"
>
{{ editing ? $t('drafts.save') : $t('drafts.continue') }}
</button>
<button
class="btn button-default"
@click.prevent.stop="abandon"
>
{{ $t('drafts.abandon') }}
</button>
</div>
</article>
</template>
<script src="./draft.js"></script>
<style lang="scss">
.Draft {
position: relative;
.status-content {
padding: 0.5em;
margin: 0.5em 0;
}
.status-preview {
display: grid;
grid-template-columns: 1fr;
grid-auto-columns: 10em;
grid-auto-flow: column;
gap: 0.5em;
align-items: start;
max-width: 100%;
p {
white-space: normal;
overflow-x: hidden;
}
.poll-indicator-container {
border-radius: var(--roundness);
display: grid;
place-items: center center;
align-self: start;
height: 0;
padding-bottom: 62.5%;
position: relative;
}
.poll-indicator {
box-sizing: border-box;
border: 1px solid var(--border);
position: absolute;
inset: 0;
display: grid;
place-items: center center;
width: 100%;
height: 100%;
}
}
.actions {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.btn {
flex: 1;
margin-left: 1em;
margin-right: 1em;
}
}
}
</style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index b3086d6795..1d83a6dc52 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,190 +1,190 @@
<template>
<nav
class="NavPanel"
:aria-label="$t('nav.navigation')"
>
<div class="panel panel-default">
<div
v-if="!forceExpand"
class="panel-heading nav-panel-heading"
>
<NavigationPins :limit="6" />
<div class="spacer" />
<button
:title="$t('nav.expand_navigation')"
class="button-unstyled"
- :aria-expanded="!collapsed"
+ :aria-expanded="!collapsed ? 'true' : 'false'"
@click="toggleCollapse"
>
<FAIcon
class="navigation-chevron"
fixed-width
:icon="collapsed ? 'chevron-down' : 'chevron-up'"
/>
</button>
</div>
<ul
v-if="!collapsed || forceExpand"
class="panel-body"
:aria-label="$t('nav.all_navigation')"
>
<NavigationEntry
v-if="currentUser || !privateMode"
:show-pin="false"
:item="{ icon: 'stream', label: 'nav.timelines' }"
aria-controls="nav-timelines-list"
- :aria-expanded="showTimelines"
+ :aria-expanded="showTimelines ? 'true' : 'false'"
@click="toggleTimelines"
>
<FAIcon
class="timelines-chevron"
fixed-width
:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
/>
</NavigationEntry>
<div
v-show="showTimelines"
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showTimelines }"
id="nav-timelines-list"
:aria-label="$t('nav.timelines')"
- :aria-expanded="showTimelines"
+ :aria-expanded="showTimelines ? 'true' : 'false'"
role="group"
>
<div class="timelines">
<NavigationEntry
v-for="item in timelinesItems"
:key="item.name"
:show-pin="editMode || forceEditMode"
:item="item"
/>
</div>
</div>
<NavigationEntry
v-if="currentUser"
:show-pin="false"
:item="{ icon: 'list', label: 'nav.lists' }"
:aria-expanded="showLists ? 'true' : 'false'"
aria-controls="nav-lists-list"
:aria-label="$t('nav.lists')"
@click="toggleLists"
>
<router-link
:title="$t('lists.manage_lists')"
class="button-unstyled extra-button"
:to="{ name: 'lists' }"
@click.stop
>
<FAIcon
fixed-width
icon="wrench"
/>
</router-link>
<FAIcon
class="timelines-chevron"
fixed-width
:icon="showLists ? 'chevron-up' : 'chevron-down'"
/>
</NavigationEntry>
<div
v-show="showLists"
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showLists }"
id="nav-lists-list"
:aria-label="$t('nav.lists')"
- :aria-expanded="showLists"
+ :aria-expanded="showLists ? 'true' : 'false'"
role="group"
>
<ListsMenuContent
:show-pin="editMode || forceEditMode"
class="timelines"
/>
</div>
<NavigationEntry
v-if="currentUser && pleromaBookmarkFoldersAvailable"
:show-pin="false"
:item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
:aria-expanded="showBookmarkFolders ? 'true' : 'false'"
aria-controls="nav-bookmark-folders-list"
:aria-label="$t('nav.bookmarks')"
@click="toggleBookmarkFolders"
>
<router-link
:title="$t('bookmarks.manage_bookmark_folders')"
class="button-unstyled extra-button"
:to="{ name: 'bookmark-folders' }"
@click.stop
>
<FAIcon
fixed-width
icon="wrench"
/>
</router-link>
<FAIcon
class="timelines-chevron"
fixed-width
:icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
/>
</NavigationEntry>
<div
v-show="showBookmarkFolders"
class="timelines-background menu-item-collapsible"
:class="{ '-expanded': showBookmarkFolders }"
:aria-label="$t('nav.bookmark_folders')"
- :aria-expanded="showBookmarkFolders"
+ :aria-expanded="showBookmarkFolders ? 'true' : 'false'"
id="nav-bookmark-folders-list"
role="group"
>
<BookmarkFoldersMenuContent
:show-pin="editMode || forceEditMode"
class="timelines"
/>
</div>
<NavigationEntry
v-for="item in rootItems"
:key="item.name"
:show-pin="editMode || forceEditMode"
:item="item"
/>
<NavigationEntry
v-if="!forceEditMode && currentUser"
:show-pin="false"
:item="{ labelRaw: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
@click="toggleEditMode"
/>
</ul>
</div>
</nav>
</template>
<script src="./nav_panel.js"></script>
<style lang="scss">
.NavPanel {
.panel {
box-shadow: var(--shadow);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.navigation-chevron {
margin-left: 0.8em;
margin-right: 0.8em;
font-size: 1.1em;
}
.timelines-background {
padding: 0 0 0 0.6em;
}
.nav-panel-heading {
// breaks without a unit
// stylelint-disable-next-line length-zero-no-unit
--panel-heading-height-padding: 0px;
}
}
</style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 8eecdc29c4..3b094ee5df 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,211 +1,211 @@
<template>
<Status
v-if="notification.type === 'mention' || notification.type === 'status'"
ref="root"
class="Notification panel-body"
:compact="true"
:status-id="notification.status?.id"
@click="interacted"
width-efficient
/>
<article
v-else
ref="root"
class="NotificationParent panel-body"
:class="{ '-expandable': expandable }"
>
<div
v-if="needMute && !unmuted"
:id="'notif-' +notification.id"
- :aria-expanded="statusExpanded"
+ :aria-expanded="statusExpanded ? 'true' : 'false'"
:aria-controls="'notif-' +notification.id"
class="Notification container -muted"
>
<small>
<UserLink
:user="notification.from_profile"
:at="false"
/>
</small>
<button
class="button-unstyled unmute"
:title="$t('status.show_muted_status')"
@click.prevent="toggleMute"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="eye-slash"
/>
</button>
</div>
<div
v-else
class="Notification -non-mention activity-layout -width-efficient -compact"
:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
:style="[ userStyle ]"
>
<div class="activity-avatar">
<UserPopover
:user-id="notification.from_profile.id"
overlay-centers
link
>
<UserAvatar
class="post-avatar"
:compact="true"
:user-id="notification.from_profile.id"
/>
</UserPopover>
</div>
<ActivityHeader
class="activity-header"
:statusoid="status"
:time="notification.created_at"
:user-id="notification.from_profile.id"
:unmuted="unmuted"
:expanded="statusExpanded"
non-mention
multiline
@toggle-muted="toggleMute"
@toggle-expanded="toggleStatusExpanded"
/>
<div class="activity-subheader">
<span v-if="notification.type === 'like'">
<FAIcon
class="type-icon"
icon="star"
/>
{{ ' ' }}
{{ $t('notifications.favorited_you') }}
</span>
<span v-if="notification.type === 'repeat'">
<FAIcon
class="type-icon"
icon="retweet"
:title="$t('tool_tip.repeat')"
/>
{{ ' ' }}
{{ $t('notifications.repeated_you') }}
</span>
<span v-if="notification.type === 'follow'">
<FAIcon
class="type-icon"
icon="user-plus"
/>
{{ ' ' }}
{{ $t('notifications.followed_you') }}
</span>
<span v-if="notification.type === 'follow_request'">
<FAIcon
class="type-icon"
icon="user"
/>
{{ ' ' }}
{{ $t('notifications.follow_request') }}
</span>
<span v-if="notification.type === 'move'">
<FAIcon
class="type-icon"
icon="suitcase-rolling"
/>
{{ ' ' }}
{{ $t('notifications.migrated_to') }}
</span>
<span v-if="notification.type === 'pleroma:emoji_reaction'">
<i18n-t
scope="global"
keypath="notifications.reacted_with"
>
<img
v-if="notification.emoji_url"
class="emoji-reaction-emoji emoji-reaction-emoji-image"
:src="notification.emoji_url"
:alt="notification.emoji"
:title="notification.emoji"
:class="{ ['-wide']: allowNonSquareEmoji }"
>
<span
v-else
class="emoji-reaction-emoji"
>{{ notification.emoji }}</span>
</i18n-t>
</span>
<span v-if="notification.type === 'pleroma:report'">
{{ $t('notifications.submitted_report') }}
</span>
<span v-if="notification.type === 'poll'">
<FAIcon
class="type-icon"
icon="poll-h"
/>
{{ ' ' }}
{{ $t('notifications.poll_ended') }}
</span>
</div>
<div class="activity-content">
<div
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
class="follow-text activity-content"
>
<UserLink
class="follow-name"
:user="notification.from_profile"
/>
</div>
<div
v-else-if="notification.type === 'move'"
class="move-text activity-content"
>
<UserLink
:user="notification.target"
/>
</div>
<Report
class="avatar-container"
v-else-if="notification.type === 'pleroma:report'"
:report-id="notification.report.id"
/>
<small>
<StatusContent
v-if="status"
class="activity-container"
:compact="!statusExpanded"
:status="status"
:collapse="!statusExpanded"
@click="onContentClick"
/>
</small>
</div>
<div
v-if="notification.type === 'follow_request'"
style="white-space: nowrap;"
class="activity-actions"
>
<button
class="button-unstyled"
:title="$t('tool_tip.accept_follow_request')"
@click="() => approve(user.id)"
>
<FAIcon
icon="check"
class="fa-scale-110 fa-old-padding follow-request-accept"
/>
</button>
<button
class="button-unstyled"
:title="$t('tool_tip.reject_follow_request')"
@click="() => deny(user.id)"
>
<FAIcon
icon="times"
class="fa-scale-110 fa-old-padding follow-request-reject"
/>
</button>
</div>
</div>
</article>
</template>
<script src="./notification.js"></script>
<style src="./notification.scss" lang="scss"></style>
<style src="/src/components/status/activity-layout.scss" lang="scss"></style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index b5c2bd67ed..fef5f81d6e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -1,66 +1,66 @@
<template>
<component
ref="trigger"
:is="link ? 'a' : 'button'"
:type="link ? undefined : 'button'"
class="popover-trigger-button"
:class="triggerClass"
:aria-haspopup="ariaHasPopup"
:aria-owns="hidden ? undefined : `${idPrefix}content`"
- :aria-expanded="!hidden"
+ :aria-expanded="!hidden ? 'true' : 'false'"
:aria-label="label"
@mouseenter="onMouseenter"
@mouseleave="onMouseleave"
@click="onClick"
@focus="onFocus"
@blur="onBlur"
@keydown.tab.exact="onTab"
@keydown.tab.shift.exact="hidePopover"
v-bind="allTriggerAttrs"
>
<slot name="trigger" />
<teleport
:disabled="!teleport"
to="#popovers"
>
<transition name="fade">
<div
v-if="!hidden"
:id="($attrs.id ?? idPrefix) + 'content'"
ref="content"
:style="styles"
class="popover"
:role="tooltip ? 'tooltip' : 'dialog'"
:aria-label="$attrs['aria-label']"
:class="popoverClass || 'popover-default'"
@mouseenter="onMouseenterContent"
@mouseleave="onMouseleaveContent"
@click="onClickContent"
>
<span
class="focus-trap -before"
aria-hidden="1"
tabindex="0"
@focus="onReverseTabContentFocus"
/>
<slot
name="content"
class="popover-inner"
:close="hidePopover"
:resize="resizePopover"
/>
<span
class="focus-trap -after"
aria-hidden="1"
tabindex="0"
@focus="onForwardTabContentFocus"
/>
</div>
</transition>
</teleport>
</component>
</template>
<script src="./popover.js" />
<style src="./popover.scss" lang="scss"></style>
diff --git a/src/components/quote/quote.vue b/src/components/quote/quote.vue
index bdfc4f930c..fa5feb4ba5 100644
--- a/src/components/quote/quote.vue
+++ b/src/components/quote/quote.vue
@@ -1,82 +1,82 @@
<template>
<article
v-if="hasVisibleQuote"
class="quoted-status"
>
<button
class="button-unstyled -link display-quoted-status-button"
- :aria-expanded="shouldDisplayQuote"
+ :aria-expanded="shouldDisplayQuote ? 'true' : 'false'"
@click="toggleDisplayQuote"
>
{{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
<FAIcon
class="display-quoted-status-button-icon"
:icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
/>
</button>
<span
v-show="showSpinner"
class="loading-spinner"
>
<FAIcon
class="fa-old-padding"
spin
icon="circle-notch"
/>
</span>
<Status
v-if="shouldDisplayQuote"
:statusoid="quotedStatus"
in-quote
/>
</article>
<p
v-else-if="hasInvisibleQuote"
class="quoted-status -unavailable-prompt"
>
<i18n-t
scope="global"
keypath="status.invisible_quote"
>
<template #link>
<bdi>
<a
v-if="statusId"
:href="statusUrl"
target="_blank"
>
{{ statusUrl }}
</a>
<router-link
v-else
:to="{ name: 'search', query: { query: statusUrl } }"
>
{{ statusUrl }}
</router-link>
</bdi>
</template>
</i18n-t>
</p>
</template>
<script src="./quote.js"></script>
<style lang="scss">
.quoted-status {
margin-top: 0.5em;
border: 1px solid var(--border);
border-radius: var(--roundness);
&.-unavailable-prompt {
padding: 0.5em;
}
.display-quoted-status-button {
margin: 0.5em;
&-icon {
color: inherit;
}
}
}
</style>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 574ca5d77b..50d2394235 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -1,261 +1,261 @@
<template>
<div class="Search panel panel-default">
<div class="panel-heading">
<h1 class="title">
{{ $t('nav.search') }}
</h1>
</div>
<div class="panel-body search-input-container">
<input
ref="searchInput"
v-model="searchTerm"
class="input search-input"
:placeholder="$t('nav.search')"
:title="$t('nav.search')"
@keyup.enter="updateToQuery"
>
<button
class="btn button-default search-button"
type="submit"
@click="updateToQuery"
:aria-label="$t('nav.search')"
>
<FAIcon icon="search" />
</button>
<button
class="btn button-default"
@click="toogleAdvanced"
:aria-label="$t('search.advanced')"
- :aria-expanded="advancedMode"
+ :aria-expanded="advancedMode ? 'true' : 'false'"
>
<FAIcon :icon="advancedMode ? 'chevron-up' : 'chevron-down'" />
</button>
</div>
<div v-if="advancedMode" class="panel-body search-advanced">
<div class="search-advanced-criterion">
<UserSelectorInput
v-model="searchAuthor"
class="search-advanced-user-selector"
>
<span class="search-advanced-criterion-label">{{ $t('search.by_author') }}</span>
</UserSelectorInput>
</div>
</div>
<div
v-if="loading && statusesOffset == 0"
class="panel-body text-center loading-icon"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div>
<div v-else-if="loaded">
<div class="search-nav-heading">
<tab-switcher
ref="tabSwitcher"
:on-switch="onResultTabSwitch"
:active-tab="currenResultTab"
>
<span
key="statuses"
:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
/>
<span
key="people"
:label="$t('search.people') + resultCount('users')"
/>
<span
key="hashtags"
:label="$t('search.hashtags') + resultCount('hashtags')"
/>
</tab-switcher>
</div>
</div>
<div class="panel-body">
<div v-if="currenResultTab === 'statuses'">
<Status
v-for="status in visibleStatuses"
:key="status.id"
:expandable="false"
:compact="false"
class="search-result"
:statusoid="status"
/>
<button
v-if="!loading && loaded && lastStatusFetchCount > 0"
class="more-statuses-button button-unstyled -link"
@click.prevent="search(searchTerm, 'statuses')"
>
<div class="new-status-notification text-center">
{{ $t('search.load_more') }}
</div>
</button>
<div
v-else-if="loading && statusesOffset > 0"
class="text-center loading-icon"
>
<FAIcon
icon="circle-notch"
spin
size="lg"
/>
</div>
<div
v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loaded"
class="search-result-heading"
>
<h4>
{{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
</h4>
</div>
</div>
<div v-else-if="currenResultTab === 'people'">
<div
v-if="users.length === 0 && !loading && loaded"
class="search-result-heading"
>
<h4>{{ $t('search.no_results') }}</h4>
</div>
<FollowCard
v-for="user in users"
:key="user.id"
:user="user"
class="list-item search-result"
/>
</div>
<div v-else-if="currenResultTab === 'hashtags'">
<div
v-if="hashtags.length === 0 && !loading && loaded"
class="search-result-heading"
>
<h4>{{ $t('search.no_results') }}</h4>
</div>
<div
v-for="hashtag in hashtags"
:key="hashtag.url"
class="status trend search-result"
>
<router-link
class="list-item hashtag"
:to="{ name: 'tag-timeline', params: { id: hashtag.name } }"
>
<span class="name">
#{{ hashtag.name }}
</span>
<div v-if="lastHistoryRecord(hashtag)">
<span v-if="lastHistoryRecord(hashtag).accounts == 1">
{{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
</span>
<span v-else>
{{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
</span>
</div>
</router-link>
<div
v-if="lastHistoryRecord(hashtag)"
class="count"
>
{{ lastHistoryRecord(hashtag).uses }}
</div>
</div>
</div>
</div>
<div class="search-result-footer text-center panel-footer faint" />
</div>
</template>
<script src="./search.js"></script>
<style lang="scss">
.search-result-heading {
color: var(--faint);
padding: 0.75rem;
text-align: center;
}
@media all and (width <= 800px) {
.search-nav-heading {
.tab-switcher .tabs .tab-wrapper {
display: block;
justify-content: center;
flex: 1 1 auto;
text-align: center;
}
}
}
.search-result {
box-sizing: border-box;
border-bottom: 1px solid;
border-color: var(--border);
}
.search-input-container {
padding: 0.8rem;
display: flex;
justify-content: center;
.search-input {
width: 100%;
line-height: 1.125rem;
font-size: 1rem;
padding: 0.5rem;
box-sizing: border-box;
}
.search-button {
margin-left: 0.5em;
}
}
.search-advanced-criterion {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.8rem;
.search-advanced-user-selector {
flex: 1;
max-width: 100%;
}
}
.loading-icon {
padding: 1em;
}
.trend {
display: flex;
align-items: center;
.hashtag {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.name {
color: var(--link);
}
}
.count {
flex: 0 0 auto;
width: 2rem;
font-size: 1.5rem;
line-height: 2.25rem;
font-weight: 500;
text-align: center;
color: var(--text);
}
}
.more-statuses-button {
height: 3.5em;
line-height: 3.5em;
width: 100%;
}
</style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 00aadb0e7b..1209bf0d04 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,86 +1,86 @@
<template>
<div
class="SearchBar"
:class="{ '-expanded': !hidden }"
>
<button
v-if="hidden"
class="button-unstyled nav-icon"
:title="$t('nav.search')"
type="button"
- :aria-expanded="!hidden"
+ :aria-expanded="!hidden ? 'true' : 'false'"
@click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
/>
</button>
<template v-else>
<input
id="search-bar-input"
ref="searchInput"
v-model="searchTerm"
class="input search-bar-input"
:placeholder="$t('nav.search')"
:title="$t('nav.search')"
type="text"
@keyup.enter="find(searchTerm)"
>
<button
class="button-default search-button"
type="submit"
:title="$t('nav.search')"
@click="find(searchTerm)"
>
<FAIcon
fixed-width
icon="search"
/>
</button>
<button
class="button-unstyled cancel-search"
type="button"
:title="$t('nav.search_close')"
- :aria-expanded="!hidden"
+ :aria-expanded="!hidden ? 'true' : 'false'"
@click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
/>
</button>
</template>
</div>
</template>
<script src="./search_bar.js"></script>
<style lang="scss">
.SearchBar {
display: flex;
align-items: baseline;
vertical-align: baseline;
justify-content: flex-end;
.search-bar-input,
.search-button {
height: 2em;
}
.search-bar-input {
flex: 1 0 auto;
}
.cancel-search {
height: 50px;
}
.cancel-icon {
color: var(--text);
}
}
</style>
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index dc66ab95b8..33d49ca48c 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,78 +1,78 @@
<template>
<div
class="StatusBody"
:class="{ '-compact': compact, '-single-line': singleLine }"
>
<div class="body">
<component
v-if="hasSubject"
:is="headerTag"
class="summary-wrapper"
:class="{ '-tall': (hasLongSubject && !showingLongSubject) }"
>
<RichContent
class="media-body summary"
:faint="compact"
:html="status.summary_raw_html"
:emoji="status.emojis"
:is-local="status.isLocal"
:allow-non-square-emoji="allowNonSquareEmoji"
:pause-mfm="pauseMfm"
:scale-mfm="scaleMfm"
/>
<button
v-show="hasLongSubject && showingLongSubject"
class="button-unstyled -link tall-subject-hider"
@click.prevent="toggleShowingLongSubject"
>
{{ $t("status.hide_full_subject") }}
</button>
<button
v-show="hasLongSubject && !showingLongSubject"
class="button-unstyled -link tall-subject-hider"
@click.prevent="toggleShowingLongSubject"
>
{{ $t("status.show_full_subject") }}
</button>
</component>
<div
class="text-wrapper"
role="presentation"
:class="{'-tall-status': hideTallStatus, '-hidden': shouldHide, '-expanded': showingMore }"
>
<RichContent
v-if="!(singleLine && hasSubject) && !shouldHide"
:class="{ '-single-line': singleLine }"
class="text media-body"
:html="status.raw_html"
:collapse="collapse"
:emoji="status.emojis"
:handle-links="true"
:faint="compact"
:greentext="mergedConfig.greentext"
:attentions="status.attentions"
:is-local="status.is_local"
:allow-non-square-emoji="allowNonSquareEmoji"
:pause-mfm="pauseMfm"
:scale-mfm="scaleMfm"
@parse-ready="onParseReady"
/>
<div
v-show="shouldShowExpandToggle"
:class="toggleButtonClasses"
>
<button
class="btn button-default toggle-button"
- :aria-expanded="showingMore"
+ :aria-expanded="showingMore ? 'true' : 'false'"
@click.prevent="toggleShowMore"
>
{{ toggleText }}
</button>
</div>
</div>
</div>
<slot v-if="!hideSubjectStatus" />
</div>
</template>
<script src="./status_body.js"></script>
<style lang="scss" src="./status_body.scss" />

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 4:34 AM (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1799449
Default Alt Text
(37 KB)

Event Timeline