diff options
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/desktop/-tags/home-widgets/trends.tag | 125 | ||||
| -rw-r--r-- | src/web/app/desktop/views/components/widgets/trends.vue | 128 |
2 files changed, 128 insertions, 125 deletions
diff --git a/src/web/app/desktop/-tags/home-widgets/trends.tag b/src/web/app/desktop/-tags/home-widgets/trends.tag deleted file mode 100644 index 9f1be68c7b..0000000000 --- a/src/web/app/desktop/-tags/home-widgets/trends.tag +++ /dev/null @@ -1,125 +0,0 @@ -<mk-trends-home-widget> - <template v-if="!data.compact"> - <p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p> - <button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button> - </template> - <div class="post" v-if="!loading && post != null"> - <p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p> - <p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p> - </div> - <p class="empty" v-if="!loading && post == null">%i18n:desktop.tags.mk-trends-home-widget.nothing%</p> - <p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> - <style lang="stylus" scoped> - :scope - display block - background #fff - border solid 1px rgba(0, 0, 0, 0.075) - border-radius 6px - - > .title - margin 0 - padding 0 16px - line-height 42px - font-size 0.9em - font-weight bold - color #888 - border-bottom solid 1px #eee - - > [data-fa] - margin-right 4px - - > button - position absolute - z-index 2 - top 0 - right 0 - padding 0 - width 42px - font-size 0.9em - line-height 42px - color #ccc - - &:hover - color #aaa - - &:active - color #999 - - > .post - padding 16px - font-size 12px - font-style oblique - color #555 - - > p - margin 0 - - > .text, - > .author - > a - color inherit - - > .empty - margin 0 - padding 16px - text-align center - color #aaa - - > .loading - margin 0 - padding 16px - text-align center - color #aaa - - > [data-fa] - margin-right 4px - - </style> - <script lang="typescript"> - this.data = { - compact: false - }; - - this.mixin('widget'); - - this.post = null; - this.loading = true; - - this.offset = 0; - - this.on('mount', () => { - this.fetch(); - }); - - this.fetch = () => { - this.update({ - loading: true, - post: null - }); - this.$root.$data.os.api('posts/trend', { - limit: 1, - offset: this.offset, - repost: false, - reply: false, - media: false, - poll: false - }).then(posts => { - const post = posts ? posts[0] : null; - if (post == null) { - this.offset = 0; - } else { - this.offset++; - } - this.update({ - loading: false, - post: post - }); - }); - }; - - this.func = () => { - this.data.compact = !this.data.compact; - this.save(); - }; - </script> -</mk-trends-home-widget> diff --git a/src/web/app/desktop/views/components/widgets/trends.vue b/src/web/app/desktop/views/components/widgets/trends.vue new file mode 100644 index 0000000000..23d39563f2 --- /dev/null +++ b/src/web/app/desktop/views/components/widgets/trends.vue @@ -0,0 +1,128 @@ +<template> +<div class="mkw-trends"> + <template v-if="!data.compact"> + <p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p> + <button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button> + </template> + <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> + <div class="post" v-else-if="post != null"> + <p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p> + <p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p> + </div> + <p class="empty" v-else>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p> +</div> +</template> + +<script lang="ts"> +import define from '../../../../common/define-widget'; +export default define({ + name: 'trends', + props: { + compact: false + } +}).extend({ + data() { + return { + post: null, + fetching: true, + offset: 0 + }; + }, + mounted() { + this.fetch(); + }, + methods: { + func() { + this.props.compact = !this.props.compact; + }, + fetch() { + this.fetching = true; + this.post = null; + + (this as any).api('posts/trend', { + limit: 1, + offset: this.offset, + repost: false, + reply: false, + media: false, + poll: false + }).then(posts => { + const post = posts ? posts[0] : null; + if (post == null) { + this.offset = 0; + } else { + this.offset++; + } + this.post = post; + this.fetching = false; + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mkw-trends + background #fff + border solid 1px rgba(0, 0, 0, 0.075) + border-radius 6px + + > .title + margin 0 + padding 0 16px + line-height 42px + font-size 0.9em + font-weight bold + color #888 + border-bottom solid 1px #eee + + > [data-fa] + margin-right 4px + + > button + position absolute + z-index 2 + top 0 + right 0 + padding 0 + width 42px + font-size 0.9em + line-height 42px + color #ccc + + &:hover + color #aaa + + &:active + color #999 + + > .post + padding 16px + font-size 12px + font-style oblique + color #555 + + > p + margin 0 + + > .text, + > .author + > a + color inherit + + > .empty + margin 0 + padding 16px + text-align center + color #aaa + + > .fetching + margin 0 + padding 16px + text-align center + color #aaa + + > [data-fa] + margin-right 4px + +</style> |