diff options
Diffstat (limited to 'src/client/app/desktop/views/widgets/channel.channel.note.vue')
| -rw-r--r-- | src/client/app/desktop/views/widgets/channel.channel.note.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/src/client/app/desktop/views/widgets/channel.channel.note.vue b/src/client/app/desktop/views/widgets/channel.channel.note.vue new file mode 100644 index 0000000000..7767919066 --- /dev/null +++ b/src/client/app/desktop/views/widgets/channel.channel.note.vue @@ -0,0 +1,65 @@ +<template> +<div class="note"> + <header> + <a class="index" @click="reply">{{ note.index }}:</a> + <router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"><b>{{ note.user | userName }}</b></router-link> + <span>ID:<i>{{ note.user | acct }}</i></span> + </header> + <div> + <a v-if="note.reply">>>{{ note.reply.index }}</a> + {{ note.text }} + <div class="media" v-if="note.media"> + <a v-for="file in note.media" :href="file.url" target="_blank"> + <img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/> + </a> + </div> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: ['note'], + methods: { + reply() { + this.$emit('reply', this.note); + } + } +}); +</script> + +<style lang="stylus" scoped> +.note + margin 0 + padding 0 + color #444 + + > header + position -webkit-sticky + position sticky + z-index 1 + top 0 + padding 8px 4px 4px 16px + background rgba(255, 255, 255, 0.9) + + > .index + margin-right 0.25em + + > .name + margin-right 0.5em + color #008000 + + > div + padding 0 16px 16px 16px + + > .media + > a + display inline-block + + > img + max-width 100% + vertical-align bottom + +</style> |