akkoma-fe/src/components/conversation/conversation.vue

248 lines
8.3 KiB
Vue
Raw Normal View History

<template>
2019-07-05 07:17:44 +00:00
<div
2020-09-29 10:18:37 +00:00
v-if="!hideStatus"
:style="hiddenStyle"
2020-07-27 22:27:11 +00:00
class="Conversation"
:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
2019-07-05 07:17:44 +00:00
>
<div
v-if="isExpanded"
class="panel-heading conversation-heading"
>
2018-08-30 17:16:36 +00:00
<span class="title"> {{ $t('timeline.conversation') }} </span>
<button
v-if="collapsable"
class="button-unstyled -link"
@click.prevent="toggleExpanded"
>
{{ $t('timeline.collapse') }}
</button>
</div>
2021-08-08 16:40:17 +00:00
<div class="conversation-body panel-body">
<div
v-if="diveMode"
class="conversation-dive-to-top-level-box"
>
2021-08-08 16:40:17 +00:00
<i18n
path="status.show_all_conversation"
tag="button"
class="button-unstyled -link"
@click.prevent="diveToTopLevel"
2021-08-08 16:40:17 +00:00
>
<FAIcon icon="angle-double-left" />
</i18n>
</div>
<div
v-if="isTreeView"
class="thread-body"
>
<div
v-if="ancestorsOf(diveRoot).length"
class="thread-ancestors"
>
<div
v-for="status in ancestorsOf(diveRoot)"
:key="status.id"
class="thread-ancestor"
:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1}"
>
<status
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="focused(status.id)"
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
:simple="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:dive="(!treeViewIsSimple) ? () => diveIntoStatus(status.id) : null"
:controlled-showing-tall="statusContentProperties[status.id].showingTall"
:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
<div
v-if="getReplies(status.id).length > 1"
class="thread-ancestor-dive-box"
>
<div
class="thread-ancestor-dive-box-inner"
>
<i18n
tag="button"
path="status.ancestor_follow_with_icon"
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="diveIntoStatus(status.id)"
>
<FAIcon
place="icon"
icon="angle-double-right"
/>
<span place="text">
{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
</span>
</i18n>
</div>
</div>
</div>
</div>
2021-08-08 16:40:17 +00:00
<thread-tree
v-for="status in showingTopLevel"
:key="status.id"
ref="statusComponent"
:depth="0"
2021-08-07 00:18:27 +00:00
2021-08-08 16:40:17 +00:00
:status="status"
:in-profile="inProfile"
:conversation="conversation"
:collapsable="collapsable"
:is-expanded="isExpanded"
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
2021-08-07 00:18:27 +00:00
2021-08-08 16:40:17 +00:00
:focused="focused"
:get-replies="getReplies"
:highlight="maybeHighlight"
:set-highlight="setHighlight"
:toggle-expanded="toggleExpanded"
2021-08-07 04:33:06 +00:00
2021-08-08 16:40:17 +00:00
:simple="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
:dive="canDive ? diveIntoStatus : undefined"
/>
</div>
<div
v-if="isLinearView"
class="thread-body"
>
<status
v-for="status in conversation"
:key="status.id"
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="focused(status.id)"
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
2021-08-08 16:40:17 +00:00
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
2021-08-08 16:40:17 +00:00
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
</div>
2021-08-07 00:18:27 +00:00
</div>
</div>
2020-09-29 10:18:37 +00:00
<div
v-else
:style="hiddenStyle"
/>
</template>
<script src="./conversation.js"></script>
2019-03-11 20:24:37 +00:00
<style lang="scss">
@import '../../_variables.scss';
2020-07-27 22:27:11 +00:00
.Conversation {
.conversation-dive-to-top-level-box {
2021-08-08 16:40:17 +00:00
padding: $status-margin;
2021-08-08 16:55:04 +00:00
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
display: flex;
align-items: stretch;
flex-direction: column;
}
2021-08-08 16:40:17 +00:00
.thread-ancestor {
--link: var(--faintLink);
--text: var(--faint);
color: var(--text);
}
.thread-ancestor-dive-box {
padding-left: $status-margin;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
border-radius: 0;
/* Make the button stretch along the whole row */
display: flex;
align-items: stretch;
flex-direction: column;
}
.thread-ancestor-dive-box-inner {
padding: $status-margin;
//border-left: 2px solid var(--border, $fallback--border);
}
2021-08-08 16:40:17 +00:00
/* HACK: we want the border width to scale with the status *below it* */
2020-07-27 22:27:11 +00:00
.conversation-status {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--border, $fallback--border);
2020-07-27 22:27:11 +00:00
border-radius: 0;
}
.thread-ancestor-has-other-replies .conversation-status,
&.-expanded .thread-tree .conversation-status {
border-bottom: none;
2021-08-08 16:40:17 +00:00
}
/* 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; */
/* } */
/* } */
2019-03-11 20:24:37 +00:00
}
</style>