From 7316352ff5df4d9de5edb05d660e5f34a0f6f596 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 21 Jul 2018 02:58:44 +0900 Subject: [PATCH] :v: --- locales/ja.yml | 2 + .../desktop/views/components/post-form.vue | 56 ++++--------------- .../app/mobile/views/components/post-form.vue | 49 ++-------------- 3 files changed, 16 insertions(+), 91 deletions(-) diff --git a/locales/ja.yml b/locales/ja.yml index a5a303f39..7f9abf73e 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -476,6 +476,8 @@ desktop/views/components/post-form.vue: insert-a-kao: "v('ω')v" create-poll: "アンケートを作成" text-remain: "残り{}文字" + recent-tags: "最近" + click-to-tagging: "クリックでタグ付け" desktop/views/components/post-form-window.vue: note: "新規投稿" diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index c76310135..83c4dcfa4 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -11,7 +11,8 @@ <a @click="addVisibleUser">+ユーザーを追加</a> </div> <div class="hashtags" v-if="recentHashtags.length > 0"> - <a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a> + <b>%i18n:@recent-tags%:</b> + <a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" title="%@click-to-tagging%">#{{ tag }}</a> </div> <input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)"> <textarea :class="{ with: (files.length != 0 || poll) }" @@ -184,22 +185,6 @@ export default Vue.extend({ } this.$nextTick(() => this.watch()); - - const hashtags = [...document.getElementsByClassName('hashtag')]; - const hashtagsContainer = hashtags[0].parentElement; - let offsetX = 0 - const update = () => { - if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) { - hashtags.push(hashtags.shift()); - offsetX = 0; - hashtags.map(x => x.style.transform = 'translateX(0)'); - } else { - offsetX--; - hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`); - } - requestAnimationFrame(update); - }; - update() }); }, @@ -510,38 +495,17 @@ root(isDark) color isDark ? #fff : #666 > .hashtags - margin 0 -16px 8px - overflow-x hidden + margin 0 0 8px 0 + overflow hidden white-space nowrap + font-size 14px + + > b + color isDark ? #9baec8 : darken($theme-color, 20%) + > * - background $theme-color - border-radius: 0 4px 4px 0 - color isDark ? #282c37 : #fff8f6 - margin-left 28px + margin-right 8px white-space nowrap - &:hover - text-decoration none - background darken($theme-color, 10%) - &::before - background inherit - border-radius 4px 0 - content '' - display inline-block - height 17.677669529663688110021109052621225982120898442212px - position absolute - right 100% - top 50% - transform translateY(-50%) translateX(50%) rotate(-45deg) - width 17.677669529663688110021109052621225982120898442212px - &::after - background isDark ? #282c37 : #fff8f6 - border-radius 50% - content '' - height 4px - left -6.25px - position absolute - top 10px - width 4px > .medias margin 0 diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index 62ec54a09..c558178cb 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -40,7 +40,7 @@ </div> </div> <div class="hashtags" v-if="recentHashtags.length > 0"> - <a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a> + <a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)">#{{ tag }}</a> </div> </div> </template> @@ -165,22 +165,6 @@ export default Vue.extend({ this.$nextTick(() => { this.focus(); }); - - const hashtags = [...document.getElementsByClassName('hashtag')]; - const hashtagsContainer = hashtags[0].parentElement; - let offsetX = 0 - const update = () => { - if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) { - hashtags.push(hashtags.shift()); - offsetX = 0; - hashtags.map(x => x.style.transform = 'translateX(0)'); - } else { - offsetX--; - hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`); - } - requestAnimationFrame(update); - }; - update() }, methods: { @@ -481,35 +465,10 @@ root(isDark) box-shadow none > .hashtags - margin 0 -16px 8px - overflow-x hidden - white-space nowrap + margin 8px + > * - background $theme-color - border-radius: 0 4px 4px 0 - color isDark ? #282c37 : #fff8f6 - margin-left 28px - white-space nowrap - &::before - background inherit - border-radius 4px 0 - content '' - display inline-block - height 17.677669529663688110021109052621225982120898442212px - position absolute - right 100% - top 50% - transform translateY(-50%) translateX(50%) rotate(-45deg) - width 17.677669529663688110021109052621225982120898442212px - &::after - background isDark ? #282c37 : #fff8f6 - border-radius 50% - content '' - height 4px - left -6.25px - position absolute - top 10px - width 4px + margin-right 8px .mk-post-form[data-darkmode] root(true)