mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-16 06:01:56 +01:00
wip
This commit is contained in:
parent
684662a475
commit
8e9e796b43
6 changed files with 71 additions and 73 deletions
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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%)
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in a new issue