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

stylistic improvements for single-line mentions

Browse source
This commit is contained in:
Henry Jameson 2021-06-10 13:22:36 +03:00
parent 394fd462dc
commit 0260693f51
4 changed files with 62 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/mention_link/mention_link.scss
View file

@ -32,6 +32,8 @@
& .short, & .short,
& .full { & .full {
white-space: nowrap;
&::before { &::before {
content: '@'; content: '@';
} }

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

@ -155,32 +155,17 @@ $status-margin: 0.75em;
margin-right: 0.2em; margin-right: 0.2em;
} }
& .heading-mentions-row,
& .heading-reply-row { & .heading-reply-row {
position: relative; position: relative;
align-content: baseline; align-content: baseline;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 160%;
max-width: 100%; max-width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
} }
.reply-to-and-accountname {
display: flex;
height: 18px;
margin-right: 0.5em;
max-width: 100%;
.reply-to-link {
white-space: nowrap;
word-break: break-word;
text-overflow: ellipsis;
overflow-x: hidden;
}
}
& .reply-to-popover, & .reply-to-popover,
& .reply-to-no-popover { & .reply-to-no-popover {
min-width: 0; min-width: 0;
@ -219,6 +204,7 @@ $status-margin: 0.75em;
& .mentions, & .mentions,
& .reply-to { & .reply-to {
white-space: nowrap;
position: relative; position: relative;
} }
@ -228,8 +214,8 @@ $status-margin: 0.75em;
white-space: nowrap; white-space: nowrap;
} }
.mentions-separator { .mentions-line {
margin-left: 0.4em; display: inline-block;
} }
.replies { .replies {

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

@ -221,81 +221,71 @@
</button> </button>
</span> </span>
</div> </div>
<div class="heading-reply-row"> <div
<div class="heading-reply-row"
v-if="isReply" v-if="isReply || hasMentionsLine"
class="reply-to-and-accountname"
> >
<StatusPopover <StatusPopover
v-if="!isPreview" v-if="isReply && !isPreview"
:status-id="status.parent_visible && status.in_reply_to_status_id" :status-id="status.parent_visible && status.in_reply_to_status_id"
class="reply-to-popover" class="reply-to-popover"
style="min-width: 0" style="min-width: 0"
:class="{ '-strikethrough': !status.parent_visible }" :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)"
> >
<button <FAIcon
class="button-unstyled reply-to" class="fa-scale-110 fa-old-padding"
:aria-label="$t('tool_tip.reply')" icon="reply"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)" flip="horizontal"
/>
<span
class="faint-link reply-to-text"
> >
<FAIcon {{ $t('status.reply_to') }}
class="fa-scale-110 fa-old-padding" </span>
icon="reply" </button>
flip="horizontal" </StatusPopover>
/>
<span
class="faint-link reply-to-text"
>
{{ $t('status.reply_to') }}
</span>
</button>
</StatusPopover>
<span <span
v-else v-else-if="isReply"
class="reply-to-no-popover" class="reply-to-no-popover"
> >
<span class="reply-to-text">{{ $t('status.reply_to') }}</span> <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span> </span>
<MentionLink <MentionLink
class="mention-link" :content="replyToName"
:content="replyToName" :url="replyProfileLink"
:url="replyProfileLink" :user-id="status.in_reply_to_user_id"
:user-id="status.in_reply_to_user_id" :user-screen-name="status.in_reply_to_screen_name"
:user-screen-name="status.in_reply_to_screen_name" :first-mention="false"
:first-mention="false" />
<span
v-if="hasMentionsLine"
class="mentions"
:aria-label="$t('tool_tip.mentions')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="at"
/> />
<span <span
v-if="isReply && hasMentionsLine" class="faint-link mentions-text"
class="faint mentions-separator"
> >
- {{ $t('status.mentions') }}
</span> </span>
<span </span>
v-if="hasMentionsLine" <MentionsLine
> v-if="hasMentionsLine"
<span :mentions="mentionsLine"
class="button-unstyled mentions" class="mentions-line"
:aria-label="$t('tool_tip.reply')" />
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="at"
/>
<span
class="faint-link mentions-text"
>
{{ $t('status.mentions') }}
</span>
</span>
<MentionsLine
:mentions="mentionsLine"
class="mentions-line"
/>
</span>
</div>
</div> </div>
</div> </div>

1
src/components/status_body/status_body.vue
View file

@ -54,7 +54,6 @@
<MentionsLine <MentionsLine
v-if="!hideFirstMentions" v-if="!hideFirstMentions"
:mentions="mentions" :mentions="mentions"
class="mentions-line"
/> />
</template> </template>
</RichContent> </RichContent>