✌️
This commit is contained in:
syuilo
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"
|
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: "新規投稿"
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue