diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts index fe65aab207..19135d08dc 100644 --- a/src/web/app/mobile/views/components/index.ts +++ b/src/web/app/mobile/views/components/index.ts @@ -2,6 +2,7 @@ import Vue from 'vue'; import ui from './ui.vue'; import timeline from './timeline.vue'; +import post from './post.vue'; import posts from './posts.vue'; import imagesImage from './images-image.vue'; import drive from './drive.vue'; @@ -23,6 +24,7 @@ import widgetContainer from './widget-container.vue'; Vue.component('mk-ui', ui); Vue.component('mk-timeline', timeline); +Vue.component('mk-post', post); Vue.component('mk-posts', posts); Vue.component('mk-images-image', imagesImage); Vue.component('mk-drive', drive); diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue index 2a0e5c117f..506ce3493b 100644 --- a/src/web/app/mobile/views/components/notification.vue +++ b/src/web/app/mobile/views/components/notification.vue @@ -1,8 +1,7 @@ <template> -<div class="mk-notification" :class="notification.type"> - <mk-time :time="notification.created_at"/> - - <template v-if="notification.type == 'reaction'"> +<div class="mk-notification"> + <div class="notification reaction" v-if="notification.type == 'reaction'"> + <mk-time :time="notification.created_at"/> <router-link class="avatar-anchor" :to="`/${notification.user.username}`"> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> </router-link> @@ -16,9 +15,10 @@ %fa:quote-right% </router-link> </div> - </template> + </div> - <template v-if="notification.type == 'repost'"> + <div class="notification repost" v-if="notification.type == 'repost'"> + <mk-time :time="notification.created_at"/> <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`"> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> </router-link> @@ -31,22 +31,14 @@ %fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right% </router-link> </div> - </template> + </div> <template v-if="notification.type == 'quote'"> - <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`"> - <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> - </router-link> - <div class="text"> - <p> - %fa:quote-left% - <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link> - </p> - <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link> - </div> + <mk-post :post="notification.post"/> </template> - <template v-if="notification.type == 'follow'"> + <div class="notification follow" v-if="notification.type == 'follow'"> + <mk-time :time="notification.created_at"/> <router-link class="avatar-anchor" :to="`/${notification.user.username}`"> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> </router-link> @@ -56,35 +48,18 @@ <router-link :to="`/${notification.user.username}`">{{ notification.user.name }}</router-link> </p> </div> - </template> + </div> <template v-if="notification.type == 'reply'"> - <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`"> - <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> - </router-link> - <div class="text"> - <p> - %fa:reply% - <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link> - </p> - <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link> - </div> + <mk-post :post="notification.post"/> </template> <template v-if="notification.type == 'mention'"> - <router-link class="avatar-anchor" :to="`/${notification.post.user.username}`"> - <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> - </router-link> - <div class="text"> - <p> - %fa:at% - <router-link :to="`/${notification.post.user.username}`">{{ notification.post.user.name }}</router-link> - </p> - <router-link class="post-preview" :to="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link> - </div> + <mk-post :post="notification.post"/> </template> - <template v-if="notification.type == 'poll_vote'"> + <div class="notification poll_vote" v-if="notification.type == 'poll_vote'"> + <mk-time :time="notification.created_at"/> <router-link class="avatar-anchor" :to="`/${notification.user.username}`"> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/> </router-link> @@ -97,7 +72,7 @@ %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% </router-link> </div> - </template> + </div> </div> </template> @@ -117,73 +92,67 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-notification - margin 0 - padding 16px - overflow-wrap break-word - > .mk-time - display inline - position absolute - top 16px - right 12px - vertical-align top - color rgba(0, 0, 0, 0.6) - font-size 12px + > .notification + padding 16px + overflow-wrap break-word - &:after - content "" - display block - clear both + &:after + content "" + display block + clear both - .avatar-anchor - display block - float left + > .mk-time + display inline + position absolute + top 16px + right 12px + vertical-align top + color rgba(0, 0, 0, 0.6) + font-size 0.9em - img - min-width 36px - min-height 36px - max-width 36px - max-height 36px - border-radius 6px + > .avatar-anchor + display block + float left - .text - float right - width calc(100% - 36px) - padding-left 8px + img + min-width 36px + min-height 36px + max-width 36px + max-height 36px + border-radius 6px - p - margin 0 + > .text + float right + width calc(100% - 36px) + padding-left 8px - i, .mk-reaction-icon - margin-right 4px + p + margin 0 - .post-preview - color rgba(0, 0, 0, 0.7) + i, .mk-reaction-icon + margin-right 4px - .post-ref - color rgba(0, 0, 0, 0.7) + > .post-preview + color rgba(0, 0, 0, 0.7) - [data-fa] - font-size 1em - font-weight normal - font-style normal - display inline-block - margin-right 3px + > .post-ref + color rgba(0, 0, 0, 0.7) - &.repost, &.quote - .text p i - color #77B255 + [data-fa] + font-size 1em + font-weight normal + font-style normal + display inline-block + margin-right 3px - &.follow - .text p i - color #53c7ce + &.repost + .text p i + color #77B255 - &.reply, &.mention - .text p i - color #555 - - .post-preview - color rgba(0, 0, 0, 0.7) + &.follow + .text p i + color #53c7ce </style> diff --git a/src/web/app/mobile/views/components/posts.post.sub.vue b/src/web/app/mobile/views/components/post.sub.vue similarity index 100% rename from src/web/app/mobile/views/components/posts.post.sub.vue rename to src/web/app/mobile/views/components/post.sub.vue diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/post.vue similarity index 99% rename from src/web/app/mobile/views/components/posts.post.vue rename to src/web/app/mobile/views/components/post.vue index d0a897db65..4c8937f516 100644 --- a/src/web/app/mobile/views/components/posts.post.vue +++ b/src/web/app/mobile/views/components/post.vue @@ -77,7 +77,7 @@ import Vue from 'vue'; import MkPostMenu from '../../../common/views/components/post-menu.vue'; import MkReactionPicker from '../../../common/views/components/reaction-picker.vue'; -import XSub from './posts.post.sub.vue'; +import XSub from './post.sub.vue'; export default Vue.extend({ components: { diff --git a/src/web/app/mobile/views/components/posts.vue b/src/web/app/mobile/views/components/posts.vue index 9a9f9a3133..7e71fa0982 100644 --- a/src/web/app/mobile/views/components/posts.vue +++ b/src/web/app/mobile/views/components/posts.vue @@ -3,7 +3,7 @@ <slot name="head"></slot> <slot></slot> <template v-for="(post, i) in _posts"> - <x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/> + <mk-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/> <p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date"> <span>%fa:angle-up%{{ post._datetext }}</span> <span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span> @@ -17,12 +17,8 @@ <script lang="ts"> import Vue from 'vue'; -import XPost from './posts.post.vue'; export default Vue.extend({ - components: { - XPost - }, props: { posts: { type: Array,