summaryrefslogtreecommitdiff
path: root/src/web/app
diff options
context:
space:
mode:
authorsyuilo <syuilotan@yahoo.co.jp>2018-02-17 03:18:48 +0900
committersyuilo <syuilotan@yahoo.co.jp>2018-02-17 03:18:48 +0900
commit8e9e796b438649c4e6dc4b2427e8b2a73e1922ae (patch)
tree22072229793f729d3b896e1a97ed592f2a067282 /src/web/app
parentwip (diff)
downloadsharkey-8e9e796b438649c4e6dc4b2427e8b2a73e1922ae.tar.gz
sharkey-8e9e796b438649c4e6dc4b2427e8b2a73e1922ae.tar.bz2
sharkey-8e9e796b438649c4e6dc4b2427e8b2a73e1922ae.zip
wip
Diffstat (limited to 'src/web/app')
-rw-r--r--src/web/app/common/views/components/index.ts2
-rw-r--r--src/web/app/common/views/components/time.vue2
-rw-r--r--src/web/app/desktop/views/components/post-preview.vue108
-rw-r--r--src/web/app/desktop/views/components/repost-form-window.vue10
-rw-r--r--src/web/app/desktop/views/components/repost-form.vue9
-rw-r--r--src/web/app/desktop/views/directives/user-preview.ts1
6 files changed, 65 insertions, 67 deletions
diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index e3f105f586..740b73f9f4 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -12,6 +12,7 @@ import images from './images.vue';
import uploader from './uploader.vue';
import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue';
+import ellipsis from './ellipsis.vue';
Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup);
@@ -25,3 +26,4 @@ Vue.component('mk-images', images);
Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator);
+Vue.component('mk-ellipsis', ellipsis);
diff --git a/src/web/app/common/views/components/time.vue b/src/web/app/common/views/components/time.vue
index 3c856d3f26..6e0d2b0dcb 100644
--- a/src/web/app/common/views/components/time.vue
+++ b/src/web/app/common/views/components/time.vue
@@ -1,5 +1,5 @@
<template>
-<time>
+<time class="mk-time">
<span v-if=" mode == 'relative' ">{{ relative }}</span>
<span v-if=" mode == 'absolute' ">{{ absolute }}</span>
<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>
diff --git a/src/web/app/desktop/views/components/post-preview.vue b/src/web/app/desktop/views/components/post-preview.vue
index f22b28153a..7452bffe2d 100644
--- a/src/web/app/desktop/views/components/post-preview.vue
+++ b/src/web/app/desktop/views/components/post-preview.vue
@@ -6,7 +6,7 @@
<div class="main">
<header>
<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}`">
<mk-time :time="post.created_at"/></a>
</header>
@@ -31,78 +31,72 @@ export default Vue.extend({
});
</script>
-
<style lang="stylus" scoped>
.mk-post-preview
- display block
- margin 0
- padding 0
font-size 0.9em
background #fff
- > article
+ &:after
+ content ""
+ display block
+ clear both
- &:after
- content ""
- display block
- clear both
+ &:hover
+ > .main > footer > button
+ color #888
- &:hover
- > .main > footer > button
- color #888
+ > .avatar-anchor
+ display block
+ float left
+ margin 0 16px 0 0
- > .avatar-anchor
+ > .avatar
display block
- float left
- margin 0 16px 0 0
+ width 52px
+ height 52px
+ margin 0
+ border-radius 8px
+ vertical-align bottom
- > .avatar
- display block
- width 52px
- height 52px
- margin 0
- border-radius 8px
- vertical-align bottom
+ > .main
+ float left
+ width calc(100% - 68px)
- > .main
- float left
- width calc(100% - 68px)
+ > header
+ display flex
+ margin 4px 0
+ white-space nowrap
- > 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
- > .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
- &:hover
- text-decoration underline
+ > .username
+ text-align left
+ margin 0 .5em 0 0
+ color #d1d8da
- > .username
- text-align left
- margin 0 .5em 0 0
- color #d1d8da
+ > .time
+ margin-left auto
+ color #b2b8bb
- > .time
- margin-left auto
- color #b2b8bb
+ > .body
- > .body
-
- > .text
- cursor default
- margin 0
- padding 0
- font-size 1.1em
- color #717171
+ > .text
+ cursor default
+ margin 0
+ padding 0
+ font-size 1.1em
+ color #717171
</style>
diff --git a/src/web/app/desktop/views/components/repost-form-window.vue b/src/web/app/desktop/views/components/repost-form-window.vue
index 6f06faaba2..7db5adbff3 100644
--- a/src/web/app/desktop/views/components/repost-form-window.vue
+++ b/src/web/app/desktop/views/components/repost-form-window.vue
@@ -1,9 +1,7 @@
<template>
<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>
- <div slot="content">
- <mk-repost-form ref="form" :post="post" @posted="$refs.window.close" @canceled="$refs.window.close"/>
- </div>
+ <mk-repost-form ref="form" :post="post" @posted="onPosted" @canceled="onCanceled"/>
</mk-window>
</template>
@@ -25,6 +23,12 @@ export default Vue.extend({
(this.$refs.window as any).close();
}
}
+ },
+ onPosted() {
+ (this.$refs.window as any).close();
+ },
+ onCanceled() {
+ (this.$refs.window as any).close();
}
}
});
diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue
index f0e4a2bdfc..04b045ad40 100644
--- a/src/web/app/desktop/views/components/repost-form.vue
+++ b/src/web/app/desktop/views/components/repost-form.vue
@@ -3,7 +3,7 @@
<mk-post-preview :post="post"/>
<template v-if="!quote">
<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="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button>
</footer>
@@ -46,7 +46,9 @@ export default Vue.extend({
onQuote() {
this.quote = true;
- (this.$refs.form as any).focus();
+ this.$nextTick(() => {
+ (this.$refs.form as any).focus();
+ });
},
onChildFormPosted() {
this.$emit('posted');
@@ -61,9 +63,6 @@ export default Vue.extend({
> .mk-post-preview
margin 16px 22px
- > div
- padding 16px
-
> footer
height 72px
background lighten($theme-color, 95%)
diff --git a/src/web/app/desktop/views/directives/user-preview.ts b/src/web/app/desktop/views/directives/user-preview.ts
index 7d69936675..322302bcfa 100644
--- a/src/web/app/desktop/views/directives/user-preview.ts
+++ b/src/web/app/desktop/views/directives/user-preview.ts
@@ -55,7 +55,6 @@ export default {
},
unbind(el, binding, vn) {
const self = vn.context._userPreviewDirective_;
- console.log('unbound:', self.user);
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.close();