diff options
Diffstat (limited to 'src/components/status')
| -rw-r--r-- | src/components/status/status.js | 18 | ||||
| -rw-r--r-- | src/components/status/status.scss | 21 | ||||
| -rw-r--r-- | src/components/status/status.vue | 18 |
3 files changed, 34 insertions, 23 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js index 4c0ef3e0..a925f30b 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -69,7 +69,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => { const controlledName = `controlled${camelized}` const uncontrolledName = `uncontrolled${camelized}` res[name] = function () { - return this[toggle] ? this[controlledName] : this[uncontrolledName] + return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName] } return res }, {}) @@ -225,12 +225,18 @@ const Status = { muteWordHits () { return muteWordHits(this.status, this.muteWords) }, + rtBotStatus () { + return this.statusoid.user.bot + }, botStatus () { return this.status.user.bot }, botIndicator () { return this.botStatus && !this.hideBotIndication }, + rtBotIndicator () { + return this.rtBotStatus && !this.hideBotIndication + }, mentionsLine () { if (!this.headTailLinks) return [] const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url)) @@ -305,7 +311,7 @@ const Status = { return this.mergedConfig.hideWordFilteredPosts }, hideStatus () { - return (this.virtualHidden || !this.shouldNotMute) && ( + return (!this.shouldNotMute) && ( (this.muted && this.hideFilteredStatuses) || (this.userIsMuted && this.hideMutedUsers) || (this.status.thread_muted && this.hideMutedThreads) || @@ -383,6 +389,9 @@ const Status = { }, threadShowing () { return this.controlledThreadDisplayStatus === 'showing' + }, + visibilityLocalized () { + return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility) } }, methods: { @@ -472,11 +481,6 @@ const Status = { 'isSuspendable': function (val) { this.suspendable = val } - }, - filters: { - capitalize: function (str) { - return str.charAt(0).toUpperCase() + str.slice(1) - } } } diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 3f647b25..b3ad3818 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -42,6 +42,10 @@ display: flex; padding: var(--status-margin, $status-margin); + > * { + min-width: 0; + } + &.-repeat { padding-top: 0; } @@ -78,7 +82,6 @@ .status-username { white-space: nowrap; - font-size: 14px; overflow: hidden; max-width: 85%; font-weight: bold; @@ -103,7 +106,7 @@ .heading-name-row { display: flex; justify-content: space-between; - line-height: 18px; + line-height: 1.3; a { display: inline-block; @@ -156,7 +159,7 @@ & .heading-reply-row { position: relative; align-content: baseline; - font-size: 12px; + font-size: 0.85em; margin-top: 0.2em; line-height: 130%; max-width: 100%; @@ -224,8 +227,8 @@ .replies { margin-top: 0.25em; - line-height: 18px; - font-size: 12px; + line-height: 1.3; + font-size: 0.85em; display: flex; flex-wrap: wrap; @@ -385,14 +388,14 @@ .stat-title { color: var(--faint, $fallback--faint); - font-size: 12px; + font-size: 0.85em; text-transform: uppercase; position: relative; } .stat-number { font-weight: bolder; - font-size: 16px; + font-size: 1.1em; line-height: 1em; } @@ -406,13 +409,13 @@ margin-left: 20px; } - .avatar:not(.repeater-avatar) { + .post-avatar { width: 40px; height: 40px; // TODO define those other way somehow? // stylelint-disable rscss/class-format - &.avatar-compact { + &.-compact { width: 32px; height: 32px; } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1679834e..67ce999a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,6 +1,7 @@ <template> <div v-if="!hideStatus" + ref="root" class="Status" :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]" > @@ -77,7 +78,7 @@ <UserAvatar v-if="retweet" class="left-side repeater-avatar" - :bot="botIndicator" + :bot="rtBotIndicator" :better-shadow="betterShadow" :user="statusoid.user" /> @@ -100,6 +101,7 @@ :to="retweeterProfileLink" >{{ retweeter }}</router-link> </span> + {{ ' ' }} <FAIcon icon="retweet" class="repeat-icon" @@ -120,17 +122,18 @@ v-if="!noHeading" class="left-side" > - <router-link - :to="userProfileLink" - @click.stop.prevent.capture.native="toggleUserExpanded" + <a + :href="$router.resolve(userProfileLink).href" + @click.stop.prevent.capture="toggleUserExpanded" > <UserAvatar + class="post-avatar" :bot="botIndicator" :compact="compact" :better-shadow="betterShadow" :user="status.user" /> - </router-link> + </a> </div> <div class="right-side"> <UserCard @@ -190,7 +193,7 @@ <span v-if="status.visibility" class="visibility-icon" - :title="status.visibility | capitalize" + :title="visibilityLocalized" > <FAIcon fixed-width @@ -273,6 +276,7 @@ icon="reply" flip="horizontal" /> + {{ ' ' }} <span class="reply-to-text" > @@ -292,7 +296,6 @@ :url="replyProfileLink" :user-id="status.in_reply_to_user_id" :user-screen-name="status.in_reply_to_screen_name" - :first-mention="false" /> </span> @@ -454,6 +457,7 @@ > <div class="left-side"> <UserAvatar + class="post-avatar" :compact="compact" :bot="botIndicator" /> |