commit: 0263834faa59229e0290828798a9b8f61836c72c
parent 6bff7cc6efd1a7def75f4eef316fdcd84f0d3209
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 14:01:26 +0300
mentions on same line as replies
Diffstat:
2 files changed, 62 insertions(+), 48 deletions(-)
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -1,4 +1,3 @@
-
@import '../../_variables.scss';
$status-margin: 0.75em;
@@ -151,6 +150,11 @@ $status-margin: 0.75em;
}
}
+ .glued-label {
+ display: inline-flex;
+ white-space: nowrap;
+ }
+
.timeago {
margin-right: 0.2em;
}
@@ -161,8 +165,6 @@ $status-margin: 0.75em;
font-size: 12px;
line-height: 160%;
max-width: 100%;
- display: flex;
- flex-wrap: wrap;
align-items: stretch;
}
@@ -206,6 +208,7 @@ $status-margin: 0.75em;
& .reply-to {
white-space: nowrap;
position: relative;
+ padding-right: 0.25em;
}
& .reply-to-text {
@@ -215,7 +218,7 @@ $status-margin: 0.75em;
}
.mentions-line {
- display: inline-block;
+ display: inline;
}
.replies {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -225,65 +225,76 @@
class="heading-reply-row"
v-if="isReply || hasMentionsLine"
>
- <StatusPopover
- v-if="isReply && !isPreview"
- :status-id="status.parent_visible && status.in_reply_to_status_id"
- class="reply-to-popover"
- style="min-width: 0"
- :class="{ '-strikethrough': !status.parent_visible }"
+ <span
+ class="glued-label"
+ v-if="isReply"
>
- <button
- class="button-unstyled reply-to"
- :aria-label="$t('tool_tip.reply')"
- @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+ <StatusPopover
+ v-if="!isPreview"
+ :status-id="status.parent_visible && status.in_reply_to_status_id"
+ class="reply-to-popover"
+ style="min-width: 0"
+ :class="{ '-strikethrough': !status.parent_visible }"
>
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="reply"
- flip="horizontal"
- />
- <span
- class="faint-link reply-to-text"
+ <button
+ class="button-unstyled reply-to"
+ :aria-label="$t('tool_tip.reply')"
+ @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
- {{ $t('status.reply_to') }}
- </span>
- </button>
- </StatusPopover>
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="reply"
+ flip="horizontal"
+ />
+ <span
+ class="faint-link reply-to-text"
+ >
+ {{ $t('status.reply_to') }}
+ </span>
+ </button>
+ </StatusPopover>
- <span
- v-else-if="isReply"
- class="reply-to-no-popover"
- >
- <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+ <span
+ v-else
+ class="reply-to-no-popover"
+ >
+ <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+ </span>
+ <MentionLink
+ :content="replyToName"
+ :url="replyProfileLink"
+ :user-id="status.in_reply_to_user_id"
+ :user-screen-name="status.in_reply_to_screen_name"
+ :first-mention="false"
+ />
</span>
- <MentionLink
- :content="replyToName"
- :url="replyProfileLink"
- :user-id="status.in_reply_to_user_id"
- :user-screen-name="status.in_reply_to_screen_name"
- :first-mention="false"
- />
-
+ <!-- This little wrapper is made for sole purpose of "gluing" -->
+ <!-- "Mentions" label to the first mention -->
<span
v-if="hasMentionsLine"
- class="mentions"
- :aria-label="$t('tool_tip.mentions')"
- @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+ class="glued-label"
>
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="at"
- />
<span
- class="faint-link mentions-text"
+ class="mentions"
+ :aria-label="$t('tool_tip.mentions')"
+ @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
- {{ $t('status.mentions') }}
+ <span
+ class="faint-link mentions-text"
+ >
+ {{ $t('status.mentions') }}
+ </span>
</span>
+ <MentionsLine
+ v-if="hasMentionsLine"
+ :mentions="mentionsLine.slice(0, 1)"
+ class="mentions-line-first"
+ />
</span>
<MentionsLine
v-if="hasMentionsLine"
- :mentions="mentionsLine"
+ :mentions="mentionsLine.slice(1)"
class="mentions-line"
/>
</div>