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

Optimize thread display

Browse source
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--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;

57
src/components/conversation/conversation.vue
View file

@ -18,6 +18,7 @@
{{ $t('timeline.collapse') }}
</button>
</div>
<div class="conversation-body panel-body">
<div
v-if="diveMode"
class="conversation-undive-box"
@ -44,7 +45,10 @@
<FAIcon icon="chevron-left" />
</i18n>
</div>
<div v-if="isTreeView">
<div
v-if="isTreeView"
class="thread-body"
>
<thread-tree
v-for="status in showingTopLevel"
:key="status.id"
@ -77,7 +81,10 @@
:dive="canDive ? diveIntoStatus : undefined"
/>
</div>
<div v-if="isLinearView">
<div
v-if="isLinearView"
class="thread-body"
>
<status
v-for="status in conversation"
:key="status.id"
@ -108,6 +115,7 @@
/>
</div>
</div>
</div>
<div
v-else
:style="hiddenStyle"
@ -121,21 +129,54 @@
.Conversation {
.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-status {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--border, $fallback--border);
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 {
.conversation-status:last-child {
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';
$status-margin: 0.75em;
.Status {
min-width: 0;
white-space: normal;
@ -28,13 +26,6 @@ $status-margin: 0.75em;
--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 {
padding: $status-margin;
color: $fallback--faint;

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

@ -109,14 +109,16 @@
<style lang="scss">
@import '../../_variables.scss';
.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 {
padding: 1em;
border-bottom: 1px solid var(--border, #222);
}
.conversation-status.conversation-status-treeview:last-child,
.Conversation.-expanded .conversation-status.conversation-status-treeview:last-child {
border-bottom: 1px solid var(--border, #222);
padding: $status-margin;
border-top: 1px solid var(--border, $fallback--border);
}
</style>