moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move replies to same row with reply-to

This commit is contained in:
shpuld 2019-03-02 09:31:14 +02:00
parent 690f5a1ee7
commit 9fd68d9b07
1 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/status/status.vue
View File

@ -64,27 +64,32 @@
</div> </div>
<div class="heading-reply-row"> <div class="heading-reply-row">
<a class="reply-to" <div v-if="isReply" class="reply-to-and-accountname">
v-if="isReply" <a class="reply-to"
href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
:aria-label="$t('tool_tip.reply')" :aria-label="$t('tool_tip.reply')"
@mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)" @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
@mouseleave.prevent.stop="replyLeave()" @mouseleave.prevent.stop="replyLeave()"
> >
<i class="button-icon icon-reply" v-if="!isPreview"></i> <i class="button-icon icon-reply" v-if="!isPreview"></i>
<span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span> <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
</a> </a>
<router-link v-if="isReply" :to="replyProfileLink"> <router-link :to="replyProfileLink">
{{replyToName}} {{replyToName}}
</router-link> </router-link>
<span class="faint replies-separator" v-if="replies.length">
-
</span>
</div>
<div class="replies" v-if="inConversation && !isPreview">
<span class="faint" v-if="replies.length">{{$t('status.replies_list')}}</span>
<span class="reply-link faint" v-for="reply in replies">
<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
</span>
</div>
</div> </div>
<div class="replies" v-if="inConversation && !isPreview">
<span class="faint" v-if="replies.length">{{$t('status.replies_list')}}</span>
<span class="reply-link faint" v-for="reply in replies">
<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}&nbsp;</a>
</span>
</div>
</div> </div>
<div v-if="showPreview" class="status-preview-container"> <div v-if="showPreview" class="status-preview-container">
@ -269,7 +274,6 @@ $status-margin: 0.75em;
vertical-align: bottom; vertical-align: bottom;
flex-basis: 100%; flex-basis: 100%;
margin-bottom: 0.5em; margin-bottom: 0.5em;
line-height: 16px;
a { a {
display: inline-block; display: inline-block;
@ -284,6 +288,7 @@ $status-margin: 0.75em;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 18px;
.name-and-account-name { .name-and-account-name {
display: flex; display: flex;
@ -319,12 +324,11 @@ $status-margin: 0.75em;
.heading-reply-row { .heading-reply-row {
align-content: baseline; align-content: baseline;
font-size: 12px; font-size: 12px;
max-height: 1.5em; line-height: 18px;
color: $fallback--link;
color: var(--link, $fallback--link);
max-width: 100%; max-width: 100%;
display: flex; display: flex;
overflow: hidden; flex-wrap: wrap;
align-items: stretch;
a { a {
max-width: 100%; max-width: 100%;
@ -334,6 +338,14 @@ $status-margin: 0.75em;
} }
} }
.reply-to-and-accountname {
display: flex;
height: 18px;
margin-right: 0.5em;
overflow: hidden;
max-width: 100%;
}
.reply-info { .reply-info {
display: flex; display: flex;
} }
@ -348,8 +360,22 @@ $status-margin: 0.75em;
margin: 0 0.4em 0 0.2em; margin: 0 0.4em 0 0.2em;
} }
.replies-separator {
margin-left: 0.4em;
}
.replies { .replies {
line-height: 18px;
font-size: 12px; font-size: 12px;
display: flex;
flex-wrap: wrap;
& > * {
margin-right: 0.4em;
}
}
.reply-link {
height: 17px;
} }
} }