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

Optimize thread display

This commit is contained in:
Tusooa Zhu 2021-08-08 12:40:17 -04:00
parent bdf631c2c4
commit 61bb69c88f
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
4 changed files with 139 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_variables.scss
View File

@ -30,3 +30,5 @@ $fallback--attachmentRadius: 10px;
$fallback--chatMessageRadius: 10px; $fallback--chatMessageRadius: 10px;
$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
$status-margin: 0.75em;

215
src/components/conversation/conversation.vue
View File

@ -18,94 +18,102 @@
{{ $t('timeline.collapse') }} {{ $t('timeline.collapse') }}
</button> </button>
</div> </div>
<div <div class="conversation-body panel-body">
v-if="diveMode" <div
class="conversation-undive-box" v-if="diveMode"
> class="conversation-undive-box"
<i18n
path="status.show_all_conversation"
tag="button"
class="button-unstyled -link"
@click.prevent="undive"
> >
<FAIcon icon="angle-double-left" /> <i18n
</i18n> path="status.show_all_conversation"
</div> tag="button"
<div class="button-unstyled -link"
v-if="diveMode" @click.prevent="undive"
class="conversation-undive-box" >
> <FAIcon icon="angle-double-left" />
<i18n </i18n>
path="status.return_to_last_showing" </div>
tag="button" <div
class="button-unstyled -link" v-if="diveMode"
@click.prevent="diveBack" class="conversation-undive-box"
> >
<FAIcon icon="chevron-left" /> <i18n
</i18n> path="status.return_to_last_showing"
</div> tag="button"
<div v-if="isTreeView"> class="button-unstyled -link"
<thread-tree @click.prevent="diveBack"
v-for="status in showingTopLevel" >
:key="status.id" <FAIcon icon="chevron-left" />
ref="statusComponent" </i18n>
:depth="0" </div>
<div
v-if="isTreeView"
class="thread-body"
>
<thread-tree
v-for="status in showingTopLevel"
:key="status.id"
ref="statusComponent"
:depth="0"
:status="status" :status="status"
:in-profile="inProfile" :in-profile="inProfile"
:conversation="conversation" :conversation="conversation"
:collapsable="collapsable" :collapsable="collapsable"
:is-expanded="isExpanded" :is-expanded="isExpanded"
:pinned-status-ids-object="pinnedStatusIdsObject" :pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId" :profile-user-id="profileUserId"
:focused="focused" :focused="focused"
:get-replies="getReplies" :get-replies="getReplies"
:highlight="maybeHighlight" :highlight="maybeHighlight"
:set-highlight="setHighlight" :set-highlight="setHighlight"
:toggle-expanded="toggleExpanded" :toggle-expanded="toggleExpanded"
:simple="treeViewIsSimple" :simple="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay" :toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus" :thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively" :show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount" :total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth" :total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties" :status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty" :set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty" :toggle-status-content-property="toggleStatusContentProperty"
:dive="canDive ? diveIntoStatus : undefined" :dive="canDive ? diveIntoStatus : undefined"
/> />
</div> </div>
<div v-if="isLinearView"> <div
<status v-if="isLinearView"
v-for="status in conversation" class="thread-body"
:key="status.id" >
ref="statusComponent" <status
:inline-expanded="collapsable && isExpanded" v-for="status in conversation"
:statusoid="status" :key="status.id"
:expandable="!isExpanded" ref="statusComponent"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" :inline-expanded="collapsable && isExpanded"
:focused="focused(status.id)" :statusoid="status"
:in-conversation="isExpanded" :expandable="!isExpanded"
:highlight="getHighlight()" :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:replies="getReplies(status.id)" :focused="focused(status.id)"
:in-profile="inProfile" :in-conversation="isExpanded"
:profile-user-id="profileUserId" :highlight="getHighlight()"
class="conversation-status status-fadein panel-body" :replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
:toggle-thread-display="toggleThreadDisplay" :toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus" :thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively" :show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount" :total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth" :total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties" :status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty" :set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty" :toggle-status-content-property="toggleStatusContentProperty"
@goto="setHighlight" @goto="setHighlight"
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
/> />
</div>
</div> </div>
</div> </div>
<div <div
@ -121,21 +129,54 @@
.Conversation { .Conversation {
.conversation-undive-box { .conversation-undive-box {
padding: 1em; padding: $status-margin;
} }
/* HACK: we want the border width to scale with the status *below it* */
.conversation-undive-box, .conversation-undive-box,
.conversation-status { .conversation-status {
border-bottom-width: 1px; border-top-width: 1px;
border-bottom-style: solid; border-top-style: solid;
border-bottom-color: var(--border, $fallback--border); border-top-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
} }
&.-expanded .conversation-body .thread-tree:nth-child(1) > .conversation-status {
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
/* first element in conversation body */
&.-expanded .conversation-body {
.conversation-undive-box:nth-child(1),
& > .conversation-status:nth-child(1),
& > .thread-body:nth-child(1) > .thread-tree:nth-child(1) > .conversation-status:nth-child(1), {
border-top: none;
}
}
/* first unexpanded statuses in timeline */
&:first-child:not(.-expanded) {
.conversation-body {
.conversation-status {
border-top: none;
}
}
}
/* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body {
border-left-width: 4px;
border-left-style: solid;
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: 1px solid var(--border, $fallback--border);
}
&.-expanded { &.-expanded {
.conversation-status:last-child { .conversation-status:last-child {
border-bottom: none; border-bottom: none;
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
} }
} }
} }

9
src/components/status/status.scss
View File

@ -1,7 +1,5 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
$status-margin: 0.75em;
.Status { .Status {
min-width: 0; min-width: 0;
white-space: normal; white-space: normal;
@ -28,13 +26,6 @@ $status-margin: 0.75em;
--icon: var(--selectedPostIcon, $fallback--icon); --icon: var(--selectedPostIcon, $fallback--icon);
} }
&.-conversation {
border-left-width: 4px;
border-left-style: solid;
border-left-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed);
}
.gravestone { .gravestone {
padding: $status-margin; padding: $status-margin;
color: $fallback--faint; color: $fallback--faint;

16
src/components/thread_tree/thread_tree.vue
View File

@ -109,14 +109,16 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.thread-tree-replies { .thread-tree-replies {
margin-left: 1em; margin-left: $status-margin;
border-left: 1px solid var(--border, $fallback--border);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
} }
.thread-tree-replies-hidden { .thread-tree-replies-hidden {
padding: 1em; padding: $status-margin;
border-bottom: 1px solid var(--border, #222); border-top: 1px solid var(--border, $fallback--border);
}
.conversation-status.conversation-status-treeview:last-child,
.Conversation.-expanded .conversation-status.conversation-status-treeview:last-child {
border-bottom: 1px solid var(--border, #222);
} }
</style> </style>