Skip to content
Snippets Groups Projects
Commit 0766a763 authored by こぴなたみぽ's avatar こぴなたみぽ
Browse files

wip

parent 31f77d18
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/mobile/tags/notification-preview.tag deleted 100644 → 0
+ 0
− 110
View file @ 31f77d18
<mk-notification-preview :class="{ notification.type }">
<template v-if="notification.type == 'reaction'">
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
</div>
</template>
<template v-if="notification.type == 'repost'">
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:retweet%{ notification.post.user.name }</p>
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%</p>
</div>
</template>
<template v-if="notification.type == 'quote'">
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:quote-left%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p>
</div>
</template>
<template v-if="notification.type == 'follow'">
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:user-plus%{ notification.user.name }</p>
</div>
</template>
<template v-if="notification.type == 'reply'">
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:reply%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p>
</div>
</template>
<template v-if="notification.type == 'mention'">
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:at%{ notification.post.user.name }</p>
<p class="post-preview">{ getPostSummary(notification.post) }</p>
</div>
</template>
<template v-if="notification.type == 'poll_vote'">
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div class="text">
<p>%fa:chart-pie%{ notification.user.name }</p>
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
</div>
</template>
<style lang="stylus" scoped>
:scope
display block
margin 0
padding 8px
color #fff
overflow-wrap break-word
&:after
content ""
display block
clear both
img
display block
float left
min-width 36px
min-height 36px
max-width 36px
max-height 36px
border-radius 6px
.text
float right
width calc(100% - 36px)
padding-left 8px
p
margin 0
i, mk-reaction-icon
margin-right 4px
.post-ref
[data-fa]
font-size 1em
font-weight normal
font-style normal
display inline-block
margin-right 3px
&.repost, &.quote
.text p i
color #77B255
&.follow
.text p i
color #53c7ce
&.reply, &.mention
.text p i
color #fff
</style>
<script lang="typescript">
import getPostSummary from '../../../../common/get-post-summary.ts';
this.getPostSummary = getPostSummary;
this.notification = this.opts.notification;
</script>
</mk-notification-preview>
src/web/app/mobile/views/components/notification-preview.vue 0 → 100644
+ 128
− 0
View file @ 0766a763
<template>
<div class="mk-notification-preview" :class="notification.type">
<template v-if="notification.type == 'reaction'">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user.name }}</p>
<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
</div>
</template>
<template v-if="notification.type == 'repost'">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:retweet%{{ notification.post.user.name }}</p>
<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%</p>
</div>
</template>
<template v-if="notification.type == 'quote'">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:quote-left%{{ notification.post.user.name }}</p>
<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
</div>
</template>
<template v-if="notification.type == 'follow'">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:user-plus%{{ notification.user.name }}</p>
</div>
</template>
<template v-if="notification.type == 'reply'">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:reply%{{ notification.post.user.name }}</p>
<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
</div>
</template>
<template v-if="notification.type == 'mention'">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:at%{{ notification.post.user.name }}</p>
<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
</div>
</template>
<template v-if="notification.type == 'poll_vote'">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
<div class="text">
<p>%fa:chart-pie%{{ notification.user.name }}</p>
<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
</div>
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import getPostSummary from '../../../../../common/get-post-summary';
export default Vue.extend({
props: ['notification'],
data() {
return {
getPostSummary
};
}
});
</script>
<style lang="stylus" scoped>
.mk-notification-preview
margin 0
padding 8px
color #fff
overflow-wrap break-word
&:after
content ""
display block
clear both
img
display block
float left
min-width 36px
min-height 36px
max-width 36px
max-height 36px
border-radius 6px
.text
float right
width calc(100% - 36px)
padding-left 8px
p
margin 0
i, mk-reaction-icon
margin-right 4px
.post-ref
[data-fa]
font-size 1em
font-weight normal
font-style normal
display inline-block
margin-right 3px
&.repost, &.quote
.text p i
color #77B255
&.follow
.text p i
color #53c7ce
&.reply, &.mention
.text p i
color #fff
</style>
src/web/app/mobile/views/components/notifications.vue
+ 0
− 1
View file @ 0766a763
......@@ -98,7 +98,6 @@ export default Vue.extend({
});
</script>
<style lang="stylus" scoped>
.mk-notifications
margin 8px auto
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment