Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

mentions on same line as replies

Browse source
This commit is contained in:
Henry Jameson 2021-06-10 14:01:26 +03:00
parent 6bff7cc6ef
commit 0263834faa
2 changed files with 64 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/status/status.scss
View file

@ -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 {

103
src/components/status/status.vue
View file

@ -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 }"
>
<button
class="button-unstyled reply-to"
:aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<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"
class="glued-label"
v-if="isReply"
>
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
<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 }"
>
<button
class="button-unstyled reply-to"
:aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<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
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>