aboutsummaryrefslogtreecommitdiff
path: root/src/components/status
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/status')
-rw-r--r--src/components/status/status.js78
-rw-r--r--src/components/status/status.scss62
-rw-r--r--src/components/status/status.vue129
3 files changed, 184 insertions, 85 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d263da68..142e1fc6 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import ReplyButton from '../reply_button/reply_button.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -15,11 +16,48 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash'
-import { mapGetters, mapState } from 'vuex'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faEnvelope,
+ faLock,
+ faLockOpen,
+ faGlobe,
+ faTimes,
+ faRetweet,
+ faReply,
+ faExternalLinkSquareAlt,
+ faPlusSquare,
+ faSmileBeam,
+ faEllipsisH,
+ faStar,
+ faEyeSlash,
+ faEye,
+ faThumbtack
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faEnvelope,
+ faGlobe,
+ faLock,
+ faLockOpen,
+ faTimes,
+ faRetweet,
+ faReply,
+ faExternalLinkSquareAlt,
+ faPlusSquare,
+ faStar,
+ faSmileBeam,
+ faEllipsisH,
+ faEyeSlash,
+ faEye,
+ faThumbtack
+)
const Status = {
name: 'Status',
components: {
+ ReplyButton,
FavoriteButton,
ReactButton,
RetweetButton,
@@ -54,6 +92,8 @@ const Status = {
replying: false,
unmuted: false,
userExpanded: false,
+ mediaPlaying: [],
+ suspendable: true,
error: null
}
},
@@ -157,7 +197,7 @@ const Status = {
return this.mergedConfig.hideFilteredStatuses
},
hideStatus () {
- return this.deleted || (this.muted && this.hideFilteredStatuses)
+ return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
},
isFocused () {
// retweet or root of an expanded conversation
@@ -207,23 +247,30 @@ const Status = {
hidePostStats () {
return this.mergedConfig.hidePostStats
},
- ...mapGetters(['mergedConfig']),
- ...mapState({
- betterShadow: state => state.interface.browserSupport.cssFilter,
- currentUser: state => state.users.currentUser
- })
+ currentUser () {
+ return this.$store.state.users.currentUser
+ },
+ betterShadow () {
+ return this.$store.state.interface.browserSupport.cssFilter
+ },
+ mergedConfig () {
+ return this.$store.getters.mergedConfig
+ },
+ isSuspendable () {
+ return !this.replying && this.mediaPlaying.length === 0
+ }
},
methods: {
visibilityIcon (visibility) {
switch (visibility) {
case 'private':
- return 'icon-lock'
+ return 'lock'
case 'unlisted':
- return 'icon-lock-open-alt'
+ return 'lock-open'
case 'direct':
- return 'icon-mail-alt'
+ return 'envelope'
default:
- return 'icon-globe'
+ return 'globe'
}
},
showError (error) {
@@ -251,6 +298,12 @@ const Status = {
},
generateUserProfileLink (id, name) {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+ },
+ addMediaPlaying (id) {
+ this.mediaPlaying.push(id)
+ },
+ removeMediaPlaying (id) {
+ this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
}
},
watch: {
@@ -280,6 +333,9 @@ const Status = {
if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
this.$store.dispatch('fetchFavs', this.status.id)
}
+ },
+ 'isSuspendable': function (val) {
+ this.suspendable = val
}
},
filters: {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8d292d3f..0a94de32 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -7,8 +7,9 @@ $status-margin: 0.75em;
min-width: 0;
&:hover {
- --still-image-img: visible;
- --still-image-canvas: hidden;
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ --_still-image-label-visibility: hidden;
}
&.-focused {
@@ -25,6 +26,23 @@ $status-margin: 0.75em;
--icon: var(--selectedPostIcon, $fallback--icon);
}
+ &.-conversation {
+ border-left-width: 4px;
+ border-left-style: solid;
+ }
+
+ .gravestone {
+ padding: $status-margin;
+ color: $fallback--faint;
+ color: var(--faint, $fallback--faint);
+ display: flex;
+
+ .deleted-text {
+ margin: 0.5em 0;
+ align-items: center;
+ }
+ }
+
.status-container {
display: flex;
padding: $status-margin;
@@ -41,6 +59,15 @@ $status-margin: 0.75em;
justify-content: flex-end;
}
+ ._misclick-prevention & {
+ pointer-events: none;
+
+ .attachments {
+ pointer-events: initial;
+ cursor: initial;
+ }
+ }
+
.left-side {
margin-right: $status-margin;
}
@@ -139,11 +166,6 @@ $status-margin: 0.75em;
text-overflow: ellipsis;
overflow-x: hidden;
}
-
- .icon-reply {
- // mirror the icon
- transform: scaleX(-1);
- }
}
& .reply-to-popover,
@@ -183,7 +205,6 @@ $status-margin: 0.75em;
}
.reply-to {
- display: flex;
position: relative;
}
@@ -191,7 +212,6 @@ $status-margin: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin-left: 0.2em;
}
.replies-separator {
@@ -215,16 +235,10 @@ $status-margin: 0.75em;
.repeat-info {
padding: 0.4em $status-margin;
- line-height: 22px;
-
- .right-side {
- display: flex;
- align-content: center;
- flex-wrap: wrap;
- }
- i {
- padding: 0 0.2em;
+ .repeat-icon {
+ color: $fallback--cGreen;
+ color: var(--cGreen, $fallback--cGreen);
}
}
@@ -274,18 +288,6 @@ $status-margin: 0.75em;
}
}
- .button-reply {
- &:not(.-disabled) {
- cursor: pointer;
- }
-
- &:not(.-disabled):hover,
- &.-active {
- color: $fallback--cBlue;
- color: var(--cBlue, $fallback--cBlue);
- }
- }
-
.muted {
padding: 0.25em 0.6em;
height: 1.2em;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 282ad37d..21412faa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,17 +10,20 @@
class="alert error"
>
{{ error }}
- <i
- class="button-icon icon-cancel"
+ <span
+ class="fa-scale-110 fa-old-padding"
@click="clearError"
- />
+ >
+ <FAIcon icon="times" />
+ </span>
</div>
<template v-if="muted && !isPreview">
- <div class="status-csontainer muted">
+ <div class="status-container muted">
<small class="status-username">
- <i
+ <FAIcon
v-if="muted && retweet"
- class="button-icon icon-retweet"
+ class="fa-scale-110 fa-old-padding repeat-icon"
+ icon="retweet"
/>
<router-link :to="userProfileLink">
{{ status.user.screen_name }}
@@ -46,9 +49,14 @@
</small>
<a
href="#"
- class="unmute"
+ class="unmute fa-scale-110 fa-old-padding"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ >
+ <FAIcon
+ icon="eye-slash"
+ class="fa-scale-110 fa-old-padding"
+ />
+ </a>
</div>
</template>
<template v-else>
@@ -56,7 +64,10 @@
v-if="showPinned"
class="pin"
>
- <i class="fa icon-pin faint" />
+ <FAIcon
+ icon="thumbtack"
+ class="faint"
+ />
<span class="faint">{{ $t('status.pinned') }}</span>
</div>
<div
@@ -86,8 +97,9 @@
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span>
- <i
- class="fa icon-retweet retweeted"
+ <FAIcon
+ icon="retweet"
+ class="repeat-icon"
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
@@ -95,6 +107,7 @@
</div>
<div
+ v-if="!deleted"
:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
:style="[ userStyle ]"
class="status-container"
@@ -166,15 +179,16 @@
:auto-update="60"
/>
</router-link>
- <div
+ <span
v-if="status.visibility"
- class="button-icon visibility-icon"
+ class="visibility-icon"
+ :title="status.visibility | capitalize"
>
- <i
- :class="visibilityIcon(status.visibility)"
- :title="status.visibility | capitalize"
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ :icon="visibilityIcon(status.visibility)"
/>
- </div>
+ </span>
<a
v-if="!status.is_local && !isPreview"
:href="status.external_url"
@@ -182,22 +196,32 @@
class="source_url"
title="Source"
>
- <i class="button-icon icon-link-ext-alt" />
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="external-link-square-alt"
+ />
+ </a>
+ <a
+ v-if="expandable && !isPreview"
+ href="#"
+ title="Expand"
+ @click.prevent="toggleExpanded"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="plus-square"
+ />
</a>
- <template v-if="expandable && !isPreview">
- <a
- href="#"
- title="Expand"
- @click.prevent="toggleExpanded"
- >
- <i class="button-icon icon-plus-squared" />
- </a>
- </template>
<a
v-if="unmuted"
href="#"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ >
+ <FAIcon
+ icon="eye-slash"
+ class="fa-scale-110 fa-old-padding"
+ />
+ </a>
</span>
</div>
@@ -219,7 +243,11 @@
:aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
- <i class="button-icon reply-button icon-reply" />
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="reply"
+ flip="horizontal"
+ />
<span
class="faint-link reply-to-text"
>
@@ -227,6 +255,7 @@
</span>
</a>
</StatusPopover>
+
<span
v-else
class="reply-to-no-popover"
@@ -272,6 +301,8 @@
:no-heading="noHeading"
:highlight="highlight"
:focused="isFocused"
+ @mediaplay="addMediaPlaying($event)"
+ @mediapause="removeMediaPlaying($event)"
/>
<transition name="fade">
@@ -320,21 +351,11 @@
v-if="!noHeading && !isPreview"
class="status-actions"
>
- <div>
- <i
- v-if="loggedIn"
- class="button-icon button-reply icon-reply"
- :title="$t('tool_tip.reply')"
- :class="{'-active': replying}"
- @click.prevent="toggleReplying"
- />
- <i
- v-else
- class="button-icon button-reply -disabled icon-reply"
- :title="$t('tool_tip.reply')"
- />
- <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
- </div>
+ <reply-button
+ :replying="replying"
+ :status="status"
+ @toggle="toggleReplying"
+ />
<retweet-button
:visibility="status.visibility"
:logged-in="loggedIn"
@@ -357,6 +378,25 @@
</div>
</div>
<div
+ v-else
+ class="gravestone"
+ >
+ <div class="left-side">
+ <UserAvatar :compact="compact" />
+ </div>
+ <div class="right-side">
+ <div class="deleted-text">
+ {{ $t('status.status_deleted') }}
+ </div>
+ <reply-button
+ v-if="replying"
+ :replying="replying"
+ :status="status"
+ @toggle="toggleReplying"
+ />
+ </div>
+ </div>
+ <div
v-if="replying"
class="status-container reply-form"
>
@@ -376,4 +416,5 @@
</template>
<script src="./status.js" ></script>
+
<style src="./status.scss" lang="scss"></style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-19 16:46:35 +0000