wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

✌️

Browse source
This commit is contained in:
syuilo 2018-07-21 02:58:44 +09:00
parent ad76d5d8e2
commit 7316352ff5
3 changed files with 16 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/ja.yml
View file

@ -476,6 +476,8 @@ desktop/views/components/post-form.vue:
insert-a-kao: "v('ω')v" insert-a-kao: "v('ω')v"
create-poll: "アンケートを作成" create-poll: "アンケートを作成"
text-remain: "残り{}文字" text-remain: "残り{}文字"
recent-tags: "最近"
click-to-tagging: "クリックでタグ付け"
desktop/views/components/post-form-window.vue: desktop/views/components/post-form-window.vue:
note: "新規投稿" note: "新規投稿"

56
src/client/app/desktop/views/components/post-form.vue
View file

@ -11,7 +11,8 @@
<a @click="addVisibleUser">+ユーザーを追加</a> <a @click="addVisibleUser">+ユーザーを追加</a>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0"> <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> </div>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)"> <input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea :class="{ with: (files.length != 0 || poll) }" <textarea :class="{ with: (files.length != 0 || poll) }"
@ -184,22 +185,6 @@ export default Vue.extend({
} }
this.$nextTick(() => this.watch()); 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 color isDark ? #fff : #666
> .hashtags > .hashtags
margin 0 -16px 8px margin 0 0 8px 0
overflow-x hidden overflow hidden
white-space nowrap white-space nowrap
font-size 14px
> b
color isDark ? #9baec8 : darken($theme-color, 20%)
> * > *
background $theme-color margin-right 8px
border-radius: 0 4px 4px 0
color isDark ? #282c37 : #fff8f6
margin-left 28px
white-space nowrap 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 > .medias
margin 0 margin 0

49
src/client/app/mobile/views/components/post-form.vue
View file

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0"> <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>
</div> </div>
</template> </template>
@ -165,22 +165,6 @@ export default Vue.extend({
this.$nextTick(() => { this.$nextTick(() => {
this.focus(); 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: { methods: {
@ -481,35 +465,10 @@ root(isDark)
box-shadow none box-shadow none
> .hashtags > .hashtags
margin 0 -16px 8px margin 8px
overflow-x hidden
white-space nowrap
> * > *
background $theme-color margin-right 8px
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
.mk-post-form[data-darkmode] .mk-post-form[data-darkmode]
root(true) root(true)