diff options
-rw-r--r-- | src/components/TimelineContent.vue | 98 | ||||
-rw-r--r-- | src/components/TimelineEntry.vue | 17 |
2 files changed, 57 insertions, 58 deletions
diff --git a/src/components/TimelineContent.vue b/src/components/TimelineContent.vue index 7e86b0cc..a1796f0c 100644 --- a/src/components/TimelineContent.vue +++ b/src/components/TimelineContent.vue @@ -1,48 +1,48 @@ <template> - <div class="entry-content"> - <div v-if="item.actor_info" class="post-avatar"> - <avatar v-if="item.local" :size="32" :user="item.actor_info.preferredUsername" - :display-name="item.actor_info.account" :disable-tooltip="true" /> - <avatar v-else :size="32" :url="avatarUrl" - :disable-tooltip="true" /> - </div> - <div class="post-content"> - <div class="post-author-wrapper"> - <router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}"> - <span class="post-author"> - {{ userDisplayName(item.actor_info) }} - </span> - <span class="post-author-id"> - @{{ item.actor_info.account }} - </span> - </router-link> - <a v-else :href="item.attributedTo"> - <span class="post-author-id"> - {{ item.attributedTo }} - </span> - </a> - </div> - <!-- eslint-disable-next-line vue/no-v-html --> - <div class="post-message" v-html="formatedMessage" /> - <div v-click-outside="hidePopoverMenu" class="post-actions"> - <a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" /> - <a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')" - :class="(isBoosted) ? 'icon-boosted' : 'icon-boost'" - @click.prevent="boost" /> - <div v-if="popoverMenu.length > 0" v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more"> - <a class="icon-more" @click.prevent="togglePopoverMenu" /> - <div :class="{open: menuOpened}" class="popovermenu menu-center"> - <popover-menu :menu="popoverMenu" /> - </div> - </div> - </div> - </div> - <div> - <div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp"> - {{ relativeTimestamp }} - </div> - </div> - </div> + <div class="entry-content"> + <div v-if="item.actor_info" class="post-avatar"> + <avatar v-if="item.local" :size="32" :user="item.actor_info.preferredUsername" + :display-name="item.actor_info.account" :disable-tooltip="true" /> + <avatar v-else :size="32" :url="avatarUrl" + :disable-tooltip="true" /> + </div> + <div class="post-content"> + <div class="post-author-wrapper"> + <router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}"> + <span class="post-author"> + {{ userDisplayName(item.actor_info) }} + </span> + <span class="post-author-id"> + @{{ item.actor_info.account }} + </span> + </router-link> + <a v-else :href="item.attributedTo"> + <span class="post-author-id"> + {{ item.attributedTo }} + </span> + </a> + </div> + <!-- eslint-disable-next-line vue/no-v-html --> + <div class="post-message" v-html="formatedMessage" /> + <div v-click-outside="hidePopoverMenu" class="post-actions"> + <a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" /> + <a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')" + :class="(isBoosted) ? 'icon-boosted' : 'icon-boost'" + @click.prevent="boost" /> + <div v-if="popoverMenu.length > 0" v-tooltip.bottom="t('social', 'More actions')" class="post-actions-more"> + <a class="icon-more" @click.prevent="togglePopoverMenu" /> + <div :class="{open: menuOpened}" class="popovermenu menu-center"> + <popover-menu :menu="popoverMenu" /> + </div> + </div> + </div> + </div> + <div> + <div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp"> + {{ relativeTimestamp }} + </div> + </div> + </div> </template> <script> @@ -65,7 +65,7 @@ export default { mixins: [popoverMenu, currentUser], props: { item: { type: Object, default: () => {} }, - parentAnnounce: { type: Object, default: () => {} } + parentAnnounce: { type: Object, default: () => {} } }, data() { return { @@ -132,10 +132,10 @@ export default { this.$root.$emit('composer-reply', this.item) }, boost() { - let params = { - post: this.item, - parentAnnounce: this.parentAnnounce - } + let params = { + post: this.item, + parentAnnounce: this.parentAnnounce + } if (this.isBoosted) { this.$store.dispatch('postUnBoost', params) } else { diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue index 03d25ad3..b5862b30 100644 --- a/src/components/TimelineEntry.vue +++ b/src/components/TimelineEntry.vue @@ -1,7 +1,7 @@ <template> <div class="timeline-entry"> <div v-if="item.type === 'Announce'" class="boost"> - <span class="icon-container"><span class="icon-boost"></span></span> + <span class="icon-boost"></span> <router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}"> <span v-tooltip.bottom="item.actor_info.account" class="post-author"> {{ userDisplayName(item.actor_info) }} @@ -14,7 +14,7 @@ </a> {{ boosted }} </div> - <timeline-content :item="entryContent" :parentAnnounce="isBoost" /> + <timeline-content :item="entryContent" :parent-announce="isBoost" /> </div> </template> @@ -42,9 +42,10 @@ export default { } }, isBoost() { - if (this.item.type === 'Announce'){ + if (this.item.type === 'Announce') { return this.item } + return {} }, boosted() { return t('social', 'boosted') @@ -68,13 +69,11 @@ export default { width: 44px; height: 17px; opacity: .5; + background-position: right center; + vertical-align: middle; } - .post-author { - font-weight: bold; - } - - .post-author-id { - opacity: .7; + .boost { + opacity: .5; } </style> |