diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 531 |
1 files changed, 67 insertions, 464 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 7ec29b28..282ad37d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -2,8 +2,8 @@ <!-- eslint-disable vue/no-v-html --> <div v-if="!hideStatus" - class="status-el" - :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]" + class="Status" + :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]" > <div v-if="error" @@ -16,8 +16,8 @@ /> </div> <template v-if="muted && !isPreview"> - <div class="media status container muted"> - <small class="username"> + <div class="status-csontainer muted"> + <small class="status-username"> <i v-if="muted && retweet" class="button-icon icon-retweet" @@ -54,7 +54,7 @@ <template v-else> <div v-if="showPinned" - class="status-pin" + class="pin" > <i class="fa icon-pin faint" /> <span class="faint">{{ $t('status.pinned') }}</span> @@ -63,16 +63,19 @@ v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" - class="media container retweet-info" + class="status-container repeat-info" > <UserAvatar v-if="retweet" - class="media-left" + class="left-side repeater-avatar" :better-shadow="betterShadow" :user="statusoid.user" /> - <div class="media-body faint"> - <span class="user-name"> + <div class="right-side faint"> + <span + class="status-username repeater-name" + :title="retweeter" + > <router-link v-if="retweeterHtml" :to="retweeterProfileLink" @@ -92,14 +95,14 @@ </div> <div - :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" + :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]" :style="[ userStyle ]" - class="media status" + class="status-container" :data-tags="tags" > <div v-if="!noHeading" - class="media-left" + class="left-side" > <router-link :to="userProfileLink" @@ -112,37 +115,45 @@ /> </router-link> </div> - <div class="status-body"> + <div class="right-side"> <UserCard v-if="userExpanded" :user-id="status.user.id" :rounded="true" :bordered="true" - class="status-usercard" + class="usercard" /> <div v-if="!noHeading" - class="media-heading" + class="status-heading" > <div class="heading-name-row"> - <div class="name-and-account-name"> + <div class="heading-left"> <h4 v-if="status.user.name_html" - class="user-name" + class="status-username" + :title="status.user.name" v-html="status.user.name_html" /> <h4 v-else - class="user-name" + class="status-username" + :title="status.user.name" > {{ status.user.name }} </h4> <router-link class="account-name" + :title="status.user.screen_name" :to="userProfileLink" > {{ status.user.screen_name }} </router-link> + <img + v-if="!!(status.user && status.user.favicon)" + class="status-favicon" + :src="status.user.favicon" + > </div> <span class="heading-right"> @@ -197,9 +208,10 @@ > <StatusPopover v-if="!isPreview" - :status-id="status.in_reply_to_status_id" + :status-id="status.parent_visible && status.in_reply_to_status_id" class="reply-to-popover" style="min-width: 0" + :class="{ '-strikethrough': !status.parent_visible }" > <a class="reply-to" @@ -207,17 +219,25 @@ :aria-label="$t('tool_tip.reply')" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > - <i class="button-icon icon-reply" /> - <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span> + <i class="button-icon reply-button icon-reply" /> + <span + class="faint-link reply-to-text" + > + {{ $t('status.reply_to') }} + </span> </a> </StatusPopover> <span v-else - class="reply-to" + class="reply-to-no-popover" > <span class="reply-to-text">{{ $t('status.reply_to') }}</span> </span> - <router-link :to="replyProfileLink"> + <router-link + class="reply-to-link" + :title="replyToName" + :to="replyProfileLink" + > {{ replyToName }} </router-link> <span @@ -260,24 +280,30 @@ class="favs-repeated-users" > <div class="stats"> - <div + <UserListPopover v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0" - class="stat-count" + :users="statusFromGlobalRepository.rebloggedBy" > - <a class="stat-title">{{ $t('status.repeats') }}</a> - <div class="stat-number"> - {{ statusFromGlobalRepository.rebloggedBy.length }} + <div class="stat-count"> + <a class="stat-title">{{ $t('status.repeats') }}</a> + <div class="stat-number"> + {{ statusFromGlobalRepository.rebloggedBy.length }} + </div> </div> - </div> - <div + </UserListPopover> + <UserListPopover v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0" - class="stat-count" + :users="statusFromGlobalRepository.favoritedBy" > - <a class="stat-title">{{ $t('status.favorites') }}</a> - <div class="stat-number"> - {{ statusFromGlobalRepository.favoritedBy.length }} + <div + class="stat-count" + > + <a class="stat-title">{{ $t('status.favorites') }}</a> + <div class="stat-number"> + {{ statusFromGlobalRepository.favoritedBy.length }} + </div> </div> - </div> + </UserListPopover> <div class="avatar-row"> <AvatarList :users="combinedFavsAndRepeatsUsers" /> </div> @@ -292,19 +318,19 @@ <div v-if="!noHeading && !isPreview" - class="status-actions media-body" + class="status-actions" > <div> <i v-if="loggedIn" - class="button-icon icon-reply" + class="button-icon button-reply icon-reply" :title="$t('tool_tip.reply')" - :class="{'button-icon-active': replying}" + :class="{'-active': replying}" @click.prevent="toggleReplying" /> <i v-else - class="button-icon button-icon-disabled icon-reply" + class="button-icon button-reply -disabled icon-reply" :title="$t('tool_tip.reply')" /> <span v-if="status.replies_count > 0">{{ status.replies_count }}</span> @@ -332,7 +358,7 @@ </div> <div v-if="replying" - class="container" + class="status-container reply-form" > <PostStatusForm class="reply-body" @@ -350,427 +376,4 @@ </template> <script src="./status.js" ></script> -<style lang="scss"> -@import '../../_variables.scss'; - -$status-margin: 0.75em; - -.status-body { - flex: 1; - min-width: 0; -} - -.status-pin { - padding: $status-margin $status-margin 0; - display: flex; - align-items: center; - justify-content: flex-end; -} - -.media-left { - margin-right: $status-margin; -} - -.status-el { - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - border-left-width: 0px; - min-width: 0; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - - border-left: 4px $fallback--cRed; - border-left: 4px var(--cRed, $fallback--cRed); - - &_focused { - background-color: $fallback--lightBg; - background-color: var(--selectedPost, $fallback--lightBg); - color: $fallback--text; - color: var(--selectedPostText, $fallback--text); - --lightText: var(--selectedPostLightText, $fallback--light); - --faint: var(--selectedPostFaintText, $fallback--faint); - --faintLink: var(--selectedPostFaintLink, $fallback--faint); - --postLink: var(--selectedPostPostLink, $fallback--faint); - --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint); - --icon: var(--selectedPostIcon, $fallback--icon); - } - - .timeline & { - border-bottom-width: 1px; - border-bottom-style: solid; - } - - .media-body { - flex: 1; - padding: 0; - } - - .status-usercard { - margin-bottom: $status-margin; - } - - .user-name { - white-space: nowrap; - font-size: 14px; - overflow: hidden; - flex-shrink: 0; - max-width: 85%; - font-weight: bold; - - img.emoji { - width: 14px; - height: 14px; - vertical-align: middle; - object-fit: contain - } - } - - .media-heading { - padding: 0; - vertical-align: bottom; - flex-basis: 100%; - margin-bottom: 0.5em; - - small { - font-weight: lighter; - } - - .heading-name-row { - padding: 0; - display: flex; - justify-content: space-between; - line-height: 18px; - - a { - display: inline-block; - word-break: break-all; - } - - .name-and-account-name { - display: flex; - min-width: 0; - } - - .user-name { - flex-shrink: 1; - margin-right: 0.4em; - overflow: hidden; - text-overflow: ellipsis; - } - - .account-name { - min-width: 1.6em; - margin-right: 0.4em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1 1 0; - } - } - - .heading-right { - display: flex; - flex-shrink: 0; - } - - .timeago { - margin-right: 0.2em; - } - - .heading-reply-row { - position: relative; - align-content: baseline; - font-size: 12px; - line-height: 18px; - max-width: 100%; - display: flex; - flex-wrap: wrap; - align-items: stretch; - - > .reply-to-and-accountname > a { - overflow: hidden; - max-width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - word-break: break-all; - } - } - - .reply-to-and-accountname { - display: flex; - height: 18px; - margin-right: 0.5em; - max-width: 100%; - .icon-reply { - transform: scaleX(-1); - } - } - - .reply-info { - display: flex; - } - - .reply-to-popover { - min-width: 0; - } - - .reply-to { - display: flex; - } - - .reply-to-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0 0.4em 0 0.2em; - } - - .replies-separator { - margin-left: 0.4em; - } - - .replies { - line-height: 18px; - font-size: 12px; - display: flex; - flex-wrap: wrap; - & > * { - margin-right: 0.4em; - } - } - - .reply-link { - height: 17px; - } - } - - .retweet-info { - padding: 0.4em $status-margin; - margin: 0; - - .avatar.still-image { - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); - margin-left: 28px; - width: 20px; - height: 20px; - } - - .media-body { - font-size: 1em; - line-height: 22px; - - display: flex; - align-content: center; - flex-wrap: wrap; - - .user-name { - font-weight: bold; - overflow: hidden; - text-overflow: ellipsis; - - img { - width: 14px; - height: 14px; - vertical-align: middle; - object-fit: contain - } - } - - i { - padding: 0 0.2em; - } - - a { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } -} - -.status-fadein { - animation-duration: 0.4s; - animation-name: fadein; -} - -@keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.status-conversation { - border-left-style: solid; -} - -.status-actions { - position: relative; - width: 100%; - display: flex; - margin-top: $status-margin; - - > * { - max-width: 4em; - flex: 1; - } -} - -.button-icon.icon-reply { - &:not(.button-icon-disabled):hover, - &.button-icon-active { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } -} - -.button-icon.icon-reply { - &:not(.button-icon-disabled) { - cursor: pointer; - } -} - -.status:hover .animated.avatar { - canvas { - display: none; - } - img { - visibility: visible; - } -} - -.status { - display: flex; - padding: $status-margin; - &.is-retweet { - padding-top: 0; - } -} - -.status-conversation:last-child { - border-bottom: none; -} - -.muted { - padding: .25em .6em; - height: 1.2em; - line-height: 1.2em; - text-overflow: ellipsis; - overflow: hidden; - display: flex; - flex-wrap: nowrap; - - .username, .mute-thread, .mute-words { - word-wrap: normal; - word-break: normal; - white-space: nowrap; - } - - .username, .mute-words { - text-overflow: ellipsis; - overflow: hidden; - } - - .username { - flex: 0 1 auto; - margin-right: .2em; - } - - .mute-thread { - flex: 0 0 auto; - } - - .mute-words { - flex: 1 0 5em; - margin-left: .2em; - &::before { - content: ' ' - } - } - - .unmute { - flex: 0 0 auto; - margin-left: auto; - display: block; - margin-left: auto; - } -} - -.reply-body { - flex: 1; -} - -.favs-repeated-users { - margin-top: $status-margin; - - .stats { - width: 100%; - display: flex; - line-height: 1em; - - .stat-count { - margin-right: $status-margin; - - .stat-title { - color: var(--faint, $fallback--faint); - font-size: 12px; - text-transform: uppercase; - position: relative; - } - - .stat-number { - font-weight: bolder; - font-size: 16px; - line-height: 1em; - } - } - - .avatar-row { - flex: 1; - overflow: hidden; - position: relative; - display: flex; - align-items: center; - - &::before { - content: ''; - position: absolute; - height: 100%; - width: 1px; - left: 0; - background-color: var(--faint, $fallback--faint); - } - } - } -} - -@media all and (max-width: 800px) { - .status-el { - .retweet-info { - .avatar.still-image { - margin-left: 20px; - } - } - } - .status { - max-width: 100%; - } - - .status .avatar.still-image { - width: 40px; - height: 40px; - - &.avatar-compact { - width: 32px; - height: 32px; - } - } -} - -</style> +<style src="./status.scss" lang="scss"></style> |