diff options
Diffstat (limited to 'src/components/conversation/conversation.vue')
| -rw-r--r-- | src/components/conversation/conversation.vue | 99 |
1 files changed, 53 insertions, 46 deletions
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 1adbe250..7577129e 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -17,6 +17,16 @@ > {{ $t('timeline.collapse') }} </button> + <QuickFilterSettings + v-if="!collapsable" + :conversation="true" + class="rightside-button" + /> + <QuickViewSettings + v-if="!collapsable" + :conversation="true" + class="rightside-button" + /> </div> <div class="conversation-body panel-body"> <div @@ -50,7 +60,7 @@ v-if="shouldShowAncestors" class="thread-ancestors" > - <div + <article v-for="status in ancestorsOf(diveRoot)" :key="status.id" class="thread-ancestor" @@ -120,7 +130,7 @@ </i18n-t> </div> </div> - </div> + </article> </div> <thread-tree v-for="status in showingTopLevel" @@ -158,34 +168,36 @@ 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" + <article> + <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" - :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" + :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" - @goto="setHighlight" - @toggleExpanded="toggleExpanded" - /> + @goto="setHighlight" + @toggleExpanded="toggleExpanded" + /> + </article> </div> </div> </div> @@ -198,17 +210,16 @@ <script src="./conversation.js"></script> <style lang="scss"> -@import '../../_variables.scss'; +@import "../../variables"; .Conversation { z-index: 1; .conversation-dive-to-top-level-box { padding: var(--status-margin, $status-margin); - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: var(--border, $fallback--border); + border-bottom: 1px solid var(--border, $fallback--border); border-radius: 0; + /* Make the button stretch along the whole row */ display: flex; align-items: stretch; @@ -223,52 +234,48 @@ .thread-ancestor.-faded .StatusContent { --link: var(--faintLink); --text: var(--faint); + color: var(--text); } .thread-ancestor-dive-box { padding-left: var(--status-margin, $status-margin); - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: var(--border, $fallback--border); + border-bottom: 1px solid var(--border, $fallback--border); border-radius: 0; + /* Make the button stretch along the whole row */ - &, &-inner { + &, + &-inner { display: flex; align-items: stretch; flex-direction: column; } } + .thread-ancestor-dive-box-inner { padding: var(--status-margin, $status-margin); } .conversation-status { - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: var(--border, $fallback--border); + border-bottom: 1px solid var(--border, $fallback--border); border-radius: 0; } .thread-ancestor-has-other-replies .conversation-status, + &:last-child .conversation-status, .thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .thread-ancestor-dive-box, - &:last-child .conversation-status, &.-expanded .thread-tree .conversation-status { border-bottom: none; } .thread-ancestors + .thread-tree > .conversation-status { - border-top-width: 1px; - border-top-style: solid; - border-top-color: var(--border, $fallback--border); + border-top: 1px solid var(--border, $fallback--border); } /* expanded conversation in timeline */ &.status-fadein.-expanded .thread-body { - border-left-width: 4px; - border-left-style: solid; - border-left-color: $fallback--cRed; + border-left: 4px solid $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); |