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

wip

parent 3494b31b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/desktop/views/components/post-detail.vue
+ 1
− 1
View file @ 9c91ec07
......@@ -68,7 +68,7 @@
<script lang="ts">
import Vue from 'vue';
import dateStringify from '../../common/scripts/date-stringify';
import dateStringify from '../../../common/scripts/date-stringify';
export default Vue.extend({
props: {
......
src/web/app/mobile/tags/post-detail.tag deleted 100644 → 0
+ 0
− 448
View file @ 3494b31b
<mk-post-detail>
<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" @click="loadContext" disabled={ loadingContext }>
<template v-if="!contextFetching">%fa:ellipsis-v%</template>
<template v-if="contextFetching">%fa:spinner .pulse%</template>
</button>
<div class="context">
<template each={ post in context }>
<mk-post-detail-sub post={ post }/>
</template>
</div>
<div class="reply-to" v-if="p.reply">
<mk-post-detail-sub post={ p.reply }/>
</div>
<div class="repost" v-if="isRepost">
<p>
<a class="avatar-anchor" href={ '/' + post.user.username }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
%fa:retweet%<a class="name" href={ '/' + post.user.username }>
{ post.user.name }
</a>
がRepost
</p>
</div>
<article>
<header>
<a class="avatar-anchor" href={ '/' + p.user.username }>
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
</a>
<div>
<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
<span class="username">@{ p.user.username }</span>
</div>
</header>
<div class="body">
<div class="text" ref="text"></div>
<div class="media" v-if="p.media">
<mk-images images={ p.media }/>
</div>
<mk-poll v-if="p.poll" post={ p }/>
</div>
<a class="time" href={ '/' + p.user.username + '/' + p.id }>
<mk-time time={ p.created_at } mode="detail"/>
</a>
<footer>
<mk-reactions-viewer post={ p }/>
<button @click="reply" title="%i18n:mobile.tags.mk-post-detail.reply%">
%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
</button>
<button @click="repost" title="Repost">
%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
</button>
<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%">
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
</button>
<button @click="menu" ref="menuButton">
%fa:ellipsis-h%
</button>
</footer>
</article>
<div class="replies" v-if="!compact">
<template each={ post in replies }>
<mk-post-detail-sub post={ post }/>
</template>
</div>
<style lang="stylus" scoped>
:scope
display block
overflow hidden
margin 0 auto
padding 0
width 100%
text-align left
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
> .fetching
padding 64px 0
> .read-more
display block
margin 0
padding 10px 0
width 100%
font-size 1em
text-align center
color #999
cursor pointer
background #fafafa
outline none
border none
border-bottom solid 1px #eef0f2
border-radius 6px 6px 0 0
box-shadow none
&:hover
background #f6f6f6
&:active
background #f0f0f0
&:disabled
color #ccc
> .context
> *
border-bottom 1px solid #eef0f2
> .repost
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p
margin 0
padding 16px 32px
.avatar-anchor
display inline-block
.avatar
vertical-align bottom
min-width 28px
min-height 28px
max-width 28px
max-height 28px
margin 0 8px 0 0
border-radius 6px
[data-fa]
margin-right 4px
.name
font-weight bold
& + article
padding-top 8px
> .reply-to
border-bottom 1px solid #eef0f2
> article
padding 14px 16px 9px 16px
@media (min-width 500px)
padding 28px 32px 18px 32px
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> header
display flex
line-height 1.1
> .avatar-anchor
display block
padding 0 .5em 0 0
> .avatar
display block
width 54px
height 54px
margin 0
border-radius 8px
vertical-align bottom
@media (min-width 500px)
width 60px
height 60px
> div
> .name
display inline-block
margin .4em 0
color #777
font-size 16px
font-weight bold
text-align left
text-decoration none
&:hover
text-decoration underline
> .username
display block
text-align left
margin 0
color #ccc
> .body
padding 8px 0
> .text
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 16px
color #717171
@media (min-width 500px)
font-size 24px
> mk-url-preview
margin-top 8px
> .media
> img
display block
max-width 100%
> .time
font-size 16px
color #c0c0c0
> footer
font-size 1.2em
> button
margin 0
padding 8px
background transparent
border none
box-shadow none
font-size 1em
color #ddd
cursor pointer
&:not(:last-child)
margin-right 28px
&:hover
color #666
> .count
display inline
margin 0 0 0 8px
color #999
&.reacted
color $theme-color
> .replies
> *
border-top 1px solid #eef0f2
</style>
<script lang="typescript">
import compile from '../../common/scripts/text-compiler';
import getPostSummary from '../../../../common/get-post-summary.ts';
import openPostForm from '../scripts/open-post-form';
this.mixin('api');
this.compact = this.opts.compact;
this.post = this.opts.post;
this.isRepost = this.post.repost != null;
this.p = this.isRepost ? this.post.repost : this.post;
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
this.summary = getPostSummary(this.p);
this.loadingContext = false;
this.context = null;
this.on('mount', () => {
if (this.p.text) {
const tokens = this.p.ast;
this.$refs.text.innerHTML = compile(tokens);
Array.from(this.$refs.text.children).forEach(e => {
if (e.tagName == 'MK-URL') riot.mount(e);
});
// URLをプレビュー
tokens
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => {
riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
url: t.url
});
});
}
// Get replies
if (!this.compact) {
this.$root.$data.os.api('posts/replies', {
post_id: this.p.id,
limit: 8
}).then(replies => {
this.update({
replies: replies
});
});
}
});
this.reply = () => {
openPostForm({
reply: this.p
});
};
this.repost = () => {
const text = window.prompt(`「${this.summary}」をRepost`);
if (text == null) return;
this.$root.$data.os.api('posts/create', {
repost_id: this.p.id,
text: text == '' ? undefined : text
});
};
this.react = () => {
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
source: this.$refs.reactButton,
post: this.p,
compact: true
});
};
this.menu = () => {
riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
source: this.$refs.menuButton,
post: this.p,
compact: true
});
};
this.loadContext = () => {
this.contextFetching = true;
// Fetch context
this.$root.$data.os.api('posts/context', {
post_id: this.p.reply_id
}).then(context => {
this.update({
contextFetching: false,
context: context.reverse()
});
});
};
</script>
</mk-post-detail>
<mk-post-detail-sub>
<article>
<a class="avatar-anchor" href={ '/' + post.user.username }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
</a>
<div class="main">
<header>
<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>
<span class="username">@{ post.user.username }</span>
<a class="time" href={ '/' + post.user.username + '/' + post.id }>
<mk-time time={ post.created_at }/>
</a>
</header>
<div class="body">
<mk-sub-post-content class="text" post={ post }/>
</div>
</div>
</article>
<style lang="stylus" scoped>
:scope
display block
margin 0
padding 8px
font-size 0.9em
background #fdfdfd
@media (min-width 500px)
padding 12px
> article
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
display block
width 48px
height 48px
margin 0
border-radius 8px
vertical-align bottom
> .main
float left
width calc(100% - 60px)
> header
display flex
margin-bottom 4px
white-space nowrap
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
color #607073
font-size 1em
font-weight 700
text-align left
text-decoration none
text-overflow ellipsis
&:hover
text-decoration underline
> .username
text-align left
margin 0 .5em 0 0
color #d1d8da
> .time
margin-left auto
color #b2b8bb
> .body
> .text
cursor default
margin 0
padding 0
font-size 1.1em
color #717171
</style>
<script lang="typescript">this.post = this.opts.post</script>
</mk-post-detail-sub>
src/web/app/mobile/views/components/post-detail-sub.vue 0 → 100644
+ 103
− 0
View file @ 9c91ec07
<template>
<div class="mk-post-detail-sub">
<a class="avatar-anchor" href={ '/' + post.user.username }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
</a>
<div class="main">
<header>
<a class="name" href={ '/' + post.user.username }>{ post.user.name }</a>
<span class="username">@{ post.user.username }</span>
<a class="time" href={ '/' + post.user.username + '/' + post.id }>
<mk-time time={ post.created_at }/>
</a>
</header>
<div class="body">
<mk-sub-post-content class="text" post={ post }/>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['post']
});
</script>
<style lang="stylus" scoped>
.mk-post-detail-sub
margin 0
padding 8px
font-size 0.9em
background #fdfdfd
@media (min-width 500px)
padding 12px
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
display block
width 48px
height 48px
margin 0
border-radius 8px
vertical-align bottom
> .main
float left
width calc(100% - 60px)
> header
display flex
margin-bottom 4px
white-space nowrap
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
color #607073
font-size 1em
font-weight 700
text-align left
text-decoration none
text-overflow ellipsis
&:hover
text-decoration underline
> .username
text-align left
margin 0 .5em 0 0
color #d1d8da
> .time
margin-left auto
color #b2b8bb
> .body
> .text
cursor default
margin 0
padding 0
font-size 1.1em
color #717171
</style>
src/web/app/mobile/views/components/post-detail.vue 0 → 100644
+ 331
− 0
View file @ 9c91ec07
<template>
<div class="mk-post-detail">
<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" @click="loadContext" disabled={ loadingContext }>
<template v-if="!contextFetching">%fa:ellipsis-v%</template>
<template v-if="contextFetching">%fa:spinner .pulse%</template>
</button>
<div class="context">
<template each={ post in context }>
<mk-post-detail-sub post={ post }/>
</template>
</div>
<div class="reply-to" v-if="p.reply">
<mk-post-detail-sub post={ p.reply }/>
</div>
<div class="repost" v-if="isRepost">
<p>
<a class="avatar-anchor" href={ '/' + post.user.username }>
<img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=32' } alt="avatar"/></a>
%fa:retweet%<a class="name" href={ '/' + post.user.username }>
{ post.user.name }
</a>
がRepost
</p>
</div>
<article>
<header>
<a class="avatar-anchor" href={ '/' + p.user.username }>
<img class="avatar" src={ p.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
</a>
<div>
<a class="name" href={ '/' + p.user.username }>{ p.user.name }</a>
<span class="username">@{ p.user.username }</span>
</div>
</header>
<div class="body">
<mk-post-html v-if="p.ast" :ast="p.ast" :i="$root.$data.os.i"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="media" v-if="p.media">
<mk-images images={ p.media }/>
</div>
<mk-poll v-if="p.poll" post={ p }/>
</div>
<a class="time" href={ '/' + p.user.username + '/' + p.id }>
<mk-time time={ p.created_at } mode="detail"/>
</a>
<footer>
<mk-reactions-viewer post={ p }/>
<button @click="reply" title="%i18n:mobile.tags.mk-post-detail.reply%">
%fa:reply%<p class="count" v-if="p.replies_count > 0">{ p.replies_count }</p>
</button>
<button @click="repost" title="Repost">
%fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p>
</button>
<button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%">
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p>
</button>
<button @click="menu" ref="menuButton">
%fa:ellipsis-h%
</button>
</footer>
</article>
<div class="replies" v-if="!compact">
<template each={ post in replies }>
<mk-post-detail-sub post={ post }/>
</template>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import getPostSummary from '../../../../common/get-post-summary.ts';
import openPostForm from '../scripts/open-post-form';
export default Vue.extend({
props: {
post: {
type: Object,
required: true
},
compact: {
default: false
}
},
data() {
return {
context: [],
contextFetching: false,
replies: [],
};
},
computed: {
isRepost(): boolean {
return this.post.repost != null;
},
p(): any {
return this.isRepost ? this.post.repost : this.post;
},
reactionsCount(): number {
return this.p.reaction_counts
? Object.keys(this.p.reaction_counts)
.map(key => this.p.reaction_counts[key])
.reduce((a, b) => a + b)
: 0;
},
urls(): string[] {
if (this.p.ast) {
return this.p.ast
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => t.url);
} else {
return null;
}
}
},
mounted() {
// Get replies
if (!this.compact) {
this.$root.$data.os.api('posts/replies', {
post_id: this.p.id,
limit: 8
}).then(replies => {
this.replies = replies;
});
}
},
methods: {
fetchContext() {
this.contextFetching = true;
// Fetch context
this.$root.$data.os.api('posts/context', {
post_id: this.p.reply_id
}).then(context => {
this.contextFetching = false;
this.context = context.reverse();
});
}
}
});
</script>
<style lang="stylus" scoped>
.mk-post-detail
overflow hidden
margin 0 auto
padding 0
width 100%
text-align left
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
> .fetching
padding 64px 0
> .read-more
display block
margin 0
padding 10px 0
width 100%
font-size 1em
text-align center
color #999
cursor pointer
background #fafafa
outline none
border none
border-bottom solid 1px #eef0f2
border-radius 6px 6px 0 0
box-shadow none
&:hover
background #f6f6f6
&:active
background #f0f0f0
&:disabled
color #ccc
> .context
> *
border-bottom 1px solid #eef0f2
> .repost
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p
margin 0
padding 16px 32px
.avatar-anchor
display inline-block
.avatar
vertical-align bottom
min-width 28px
min-height 28px
max-width 28px
max-height 28px
margin 0 8px 0 0
border-radius 6px
[data-fa]
margin-right 4px
.name
font-weight bold
& + article
padding-top 8px
> .reply-to
border-bottom 1px solid #eef0f2
> article
padding 14px 16px 9px 16px
@media (min-width 500px)
padding 28px 32px 18px 32px
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> header
display flex
line-height 1.1
> .avatar-anchor
display block
padding 0 .5em 0 0
> .avatar
display block
width 54px
height 54px
margin 0
border-radius 8px
vertical-align bottom
@media (min-width 500px)
width 60px
height 60px
> div
> .name
display inline-block
margin .4em 0
color #777
font-size 16px
font-weight bold
text-align left
text-decoration none
&:hover
text-decoration underline
> .username
display block
text-align left
margin 0
color #ccc
> .body
padding 8px 0
> .text
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 16px
color #717171
@media (min-width 500px)
font-size 24px
> mk-url-preview
margin-top 8px
> .media
> img
display block
max-width 100%
> .time
font-size 16px
color #c0c0c0
> footer
font-size 1.2em
> button
margin 0
padding 8px
background transparent
border none
box-shadow none
font-size 1em
color #ddd
cursor pointer
&:not(:last-child)
margin-right 28px
&:hover
color #666
> .count
display inline
margin 0 0 0 8px
color #999
&.reacted
color $theme-color
> .replies
> *
border-top 1px solid #eef0f2
</style>
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