diff options
| author | dave <starpumadev@gmail.com> | 2019-04-04 15:10:34 -0400 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-05-15 12:04:24 -0400 |
| commit | 2c89d49a3d22ed2813a6a57fb6049341fa8624ba (patch) | |
| tree | 4e7e97bdadc4a1aeeac28a8258c429a991efecb2 /src/components/status/status.vue | |
| parent | e28b19645aa6a546f8d1980fa479f20d3c48ff36 (diff) | |
#468 - show pinned timeline and add pinned label to the status
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 17 |
1 files changed, 14 insertions, 3 deletions
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%; |