aboutsummaryrefslogtreecommitdiff
path: root/src/components/status
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/status')
-rw-r--r--src/components/status/status.js44
-rw-r--r--src/components/status/status.scss61
-rw-r--r--src/components/status/status.vue112
3 files changed, 135 insertions, 82 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e48b2eb8..2bf93a9e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,6 +17,41 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
import { muteWordHits } from '../../services/status_parser/status_parser.js'
import { unescape, uniqBy } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faEnvelope,
+ faLock,
+ faLockOpen,
+ faGlobe,
+ faTimes,
+ faRetweet,
+ faReply,
+ faPlusSquare,
+ faSmileBeam,
+ faEllipsisH,
+ faStar,
+ faEyeSlash,
+ faEye,
+ faThumbtack
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faEnvelope,
+ faGlobe,
+ faLock,
+ faLockOpen,
+ faTimes,
+ faRetweet,
+ faReply,
+ faPlusSquare,
+ faStar,
+ faSmileBeam,
+ faEllipsisH,
+ faEyeSlash,
+ faEye,
+ faThumbtack
+)
+
const Status = {
name: 'Status',
components: {
@@ -122,6 +157,7 @@ const Status = {
return muteWordHits(this.status, this.muteWords)
},
muted () {
+ if (this.statusoid.user.id === this.currentUser.id) return false
const { status } = this
const { reblog } = status
const relationship = this.$store.getters.relationship(status.user.id)
@@ -227,13 +263,13 @@ const Status = {
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) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 66a91c1e..58b55bc8 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 {
@@ -28,6 +29,8 @@ $status-margin: 0.75em;
&.-conversation {
border-left-width: 4px;
border-left-style: solid;
+ border-left-color: $fallback--cRed;
+ border-left-color: var(--cRed, $fallback--cRed);
}
.gravestone {
@@ -58,6 +61,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;
}
@@ -127,6 +139,20 @@ $status-margin: 0.75em;
.heading-right {
display: flex;
flex-shrink: 0;
+
+ .button-unstyled {
+ padding: 5px;
+ margin: -5px;
+
+ &:hover svg {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
+ }
+
+ .svg-inline--fa {
+ margin-left: 0.25em;
+ }
}
.timeago {
@@ -156,11 +182,6 @@ $status-margin: 0.75em;
text-overflow: ellipsis;
overflow-x: hidden;
}
-
- .icon-reply {
- // mirror the icon
- transform: scaleX(-1);
- }
}
& .reply-to-popover,
@@ -200,7 +221,6 @@ $status-margin: 0.75em;
}
.reply-to {
- display: flex;
position: relative;
}
@@ -208,7 +228,6 @@ $status-margin: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin-left: 0.2em;
}
.replies-separator {
@@ -232,16 +251,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);
}
}
@@ -291,18 +304,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 ffae32fc..6ee8117f 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-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 }}
@@ -44,11 +47,15 @@
>
{{ muteWordHits.join(', ') }}
</small>
- <a
- href="#"
- class="unmute"
+ <button
+ class="unmute button-unstyled"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ >
+ <FAIcon
+ icon="eye-slash"
+ class="fa-scale-110 fa-old-padding"
+ />
+ </button>
</div>
</template>
<template v-else>
@@ -56,7 +63,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 +96,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') }}
@@ -167,38 +178,40 @@
: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
+ fixed-width
+ class="fa-scale-110"
+ :icon="visibilityIcon(status.visibility)"
/>
- </div>
- <a
- v-if="!status.is_local && !isPreview"
- :href="status.external_url"
- target="_blank"
- class="source_url"
- title="Source"
+ </span>
+ <button
+ v-if="expandable && !isPreview"
+ class="button-unstyled"
+ :title="$t('status.expand')"
+ @click.prevent="toggleExpanded"
>
- <i class="button-icon icon-link-ext-alt" />
- </a>
- <template v-if="expandable && !isPreview">
- <a
- href="#"
- title="Expand"
- @click.prevent="toggleExpanded"
- >
- <i class="button-icon icon-plus-squared" />
- </a>
- </template>
- <a
+ <FAIcon
+ fixed-width
+ class="fa-scale-110"
+ icon="plus-square"
+ />
+ </button>
+ <button
v-if="unmuted"
- href="#"
+ class="button-unstyled"
@click.prevent="toggleMute"
- ><i class="button-icon icon-eye-off" /></a>
+ >
+ <FAIcon
+ fixed-width
+ icon="eye-slash"
+ class="fa-scale-110"
+ />
+ </button>
</span>
</div>
@@ -214,19 +227,22 @@
style="min-width: 0"
:class="{ '-strikethrough': !status.parent_visible }"
>
- <a
- class="reply-to"
- href="#"
+ <button
+ class="button-unstyled reply-to"
: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"
>
{{ $t('status.reply_to') }}
</span>
- </a>
+ </button>
</StatusPopover>
<span
@@ -259,11 +275,12 @@
:key="reply.id"
:status-id="reply.id"
>
- <a
- href="#"
- class="reply-link"
+ <button
+ class="button-unstyled -link reply-link"
@click.prevent="gotoOriginal(reply.id)"
- >{{ reply.name }}</a>
+ >
+ {{ reply.name }}
+ </button>
</StatusPopover>
</div>
</div>
@@ -348,7 +365,6 @@
@onSuccess="clearError"
/>
</div>
-
</div>
</div>
<div
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-12-01 12:16:22 +0000