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

55 lines
1.4 KiB
Vue
Raw Normal View History

<template>
2019-07-05 07:17:44 +00:00
<div
class="timeline panel-default"
:class="[isExpanded ? 'panel' : 'panel-disabled']"
>
<div
v-if="isExpanded"
class="panel-heading conversation-heading"
>
2018-08-30 17:16:36 +00:00
<span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable">
2019-07-05 07:17:44 +00:00
<a
href="#"
@click.prevent="toggleExpanded"
>{{ $t('timeline.collapse') }}</a>
</span>
</div>
<status
v-for="status in conversation"
:key="status.id"
2019-07-05 07:17:44 +00:00
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
2019-07-05 07:17:44 +00:00
:expandable="!isExpanded"
2019-08-15 17:16:55 +00:00
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="focused(status.id)"
2019-07-05 07:17:44 +00:00
:in-conversation="isExpanded"
:highlight="getHighlight()"
:replies="getReplies(status.id)"
2019-09-13 20:55:17 +00:00
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="status-fadein panel-body"
2019-07-06 20:52:10 +00:00
@goto="setHighlight"
2019-07-05 07:17:44 +00:00
@toggleExpanded="toggleExpanded"
/>
</div>
</template>
<script src="./conversation.js"></script>
2019-03-11 20:24:37 +00:00
<style lang="scss">
@import '../../_variables.scss';
.timeline {
.panel-disabled {
.status-el {
border-left: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: var(--border, $fallback--border);
border-radius: 0;
}
}
}
</style>