From 2c89d49a3d22ed2813a6a57fb6049341fa8624ba Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Thu, 4 Apr 2019 15:10:34 -0400
Subject: #468 - show pinned timeline and add pinned label to the status

---
 src/components/status/status.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0443e758..a5614f59 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -12,6 +12,13 @@
       </div>
     </template>
     <template v-else>
+      <div v-if="pinned" class="status-pin">
+        <i class="fa icon-pin faint"></i>
+        <span class="faint">Pinned</span>
+        <div class="button-icon button-action-icon" v-if="status.pinned && ownStatus" @click.prevent="unpinStatus" title="Unpin">
+          <i class="fa icon-cancel"></i>
+        </div>
+      </div>
       <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/>
         <div class="media-body faint">
@@ -55,9 +62,6 @@
                 <div class="button-icon button-action-icon" v-if="!status.pinned && ownStatus" @click.prevent="pinStatus" title="Pin">
                   <i class="fa icon-pin"></i>
                 </div>
-                <div class="button-icon button-action-icon" v-if="status.pinned && ownStatus" @click.prevent="unpinStatus" title="Unpin">
-                  <i class="fa icon-cancel"></i>
-                </div>
                 <div class="button-icon button-action-icon" v-if="expandable && !isPreview" @click.prevent="toggleExpanded" title="Expand">
                   <i class="button-icon icon-plus-squared"></i>
                 </div>
@@ -205,6 +209,13 @@ $status-margin: 0.75em;
   max-width: 100%;
 }
 
+.status-pin {
+  padding: 0.75em 0.75em 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .status-preview {
   position: absolute;
   max-width: 95%;
-- 
cgit v1.2.3-70-g09d2