1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-15 07:08:56 +09:00
This commit is contained in:
syuilo 2018-02-17 03:18:48 +09:00
parent 684662a475
commit 8e9e796b43
6 changed files with 71 additions and 73 deletions
src/web/app
common/views/components
desktop/views

View File

@ -12,6 +12,7 @@ import images from './images.vue';
import uploader from './uploader.vue'; import uploader from './uploader.vue';
import specialMessage from './special-message.vue'; import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.vue';
Vue.component('mk-signin', signin); Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup); Vue.component('mk-signup', signup);
@ -25,3 +26,4 @@ Vue.component('mk-images', images);
Vue.component('mk-uploader', uploader); Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage); Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis);

View File

@ -1,5 +1,5 @@
<template> <template>
<time> <time class="mk-time">
<span v-if=" mode == 'relative' ">{{ relative }}</span> <span v-if=" mode == 'relative' ">{{ relative }}</span>
<span v-if=" mode == 'absolute' ">{{ absolute }}</span> <span v-if=" mode == 'absolute' ">{{ absolute }}</span>
<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span> <span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>

View File

@ -6,7 +6,7 @@
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a> <a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
<span class="username">@{ post.user.username }</span> <span class="username">@{{ post.user.username }}</span>
<a class="time" :href="`/${post.user.username}/${post.id}`"> <a class="time" :href="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/></a> <mk-time :time="post.created_at"/></a>
</header> </header>
@ -31,78 +31,72 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-post-preview .mk-post-preview
display block
margin 0
padding 0
font-size 0.9em font-size 0.9em
background #fff background #fff
> article &:after
content ""
display block
clear both
&:after &:hover
content "" > .main > footer > button
color #888
> .avatar-anchor
display block
float left
margin 0 16px 0 0
> .avatar
display block display block
clear both width 52px
height 52px
margin 0
border-radius 8px
vertical-align bottom
&:hover > .main
> .main > footer > button float left
color #888 width calc(100% - 68px)
> .avatar-anchor > header
display block display flex
float left margin 4px 0
margin 0 16px 0 0 white-space nowrap
> .avatar > .name
display block margin 0 .5em 0 0
width 52px padding 0
height 52px color #607073
font-size 1em
line-height 1.1em
font-weight 700
text-align left
text-decoration none
white-space normal
&: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 margin 0
border-radius 8px padding 0
vertical-align bottom font-size 1.1em
color #717171
> .main
float left
width calc(100% - 68px)
> header
display flex
margin 4px 0
white-space nowrap
> .name
margin 0 .5em 0 0
padding 0
color #607073
font-size 1em
line-height 1.1em
font-weight 700
text-align left
text-decoration none
white-space normal
&: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> </style>

View File

@ -1,9 +1,7 @@
<template> <template>
<mk-window ref="window" is-modal @closed="$destroy"> <mk-window ref="window" is-modal @closed="$destroy">
<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%</span> <span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%</span>
<div slot="content"> <mk-repost-form ref="form" :post="post" @posted="onPosted" @canceled="onCanceled"/>
<mk-repost-form ref="form" :post="post" @posted="$refs.window.close" @canceled="$refs.window.close"/>
</div>
</mk-window> </mk-window>
</template> </template>
@ -25,6 +23,12 @@ export default Vue.extend({
(this.$refs.window as any).close(); (this.$refs.window as any).close();
} }
} }
},
onPosted() {
(this.$refs.window as any).close();
},
onCanceled() {
(this.$refs.window as any).close();
} }
} }
}); });

View File

@ -3,7 +3,7 @@
<mk-post-preview :post="post"/> <mk-post-preview :post="post"/>
<template v-if="!quote"> <template v-if="!quote">
<footer> <footer>
<a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a> <a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-repost-form.quote%</a>
<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button> <button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button> <button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button>
</footer> </footer>
@ -46,7 +46,9 @@ export default Vue.extend({
onQuote() { onQuote() {
this.quote = true; this.quote = true;
(this.$refs.form as any).focus(); this.$nextTick(() => {
(this.$refs.form as any).focus();
});
}, },
onChildFormPosted() { onChildFormPosted() {
this.$emit('posted'); this.$emit('posted');
@ -61,9 +63,6 @@ export default Vue.extend({
> .mk-post-preview > .mk-post-preview
margin 16px 22px margin 16px 22px
> div
padding 16px
> footer > footer
height 72px height 72px
background lighten($theme-color, 95%) background lighten($theme-color, 95%)

View File

@ -55,7 +55,6 @@ export default {
}, },
unbind(el, binding, vn) { unbind(el, binding, vn) {
const self = vn.context._userPreviewDirective_; const self = vn.context._userPreviewDirective_;
console.log('unbound:', self.user);
clearTimeout(self.showTimer); clearTimeout(self.showTimer);
clearTimeout(self.hideTimer); clearTimeout(self.hideTimer);
self.close(); self.close();