✌️
This commit is contained in:
parent
ad76d5d8e2
commit
7316352ff5
3 changed files with 16 additions and 91 deletions
|
@ -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: "新規投稿"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue