mirror/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey synced 2024-11-30 07:49:02 +09:00
Code

回転寿司

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2018-07-21 01:21:27 +09:00
parent 29b1aa0d9b
commit f13bef4ac8
2 changed files with 93 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/client/app/desktop/views/components/post-form.vue
View File

@ -11,7 +11,7 @@
<a @click="addVisibleUser">+ユーザーを追加</a>
</div>
<div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
<a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
</div>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea :class="{ with: (files.length != 0 || poll) }"
@ -184,6 +184,22 @@ export default Vue.extend({
}
this.$nextTick(() => this.watch());
const hashtags = [...document.getElementsByClassName('hashtag')];
const hashtagsContainer = hashtags.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()
});
},
@ -494,8 +510,38 @@ root(isDark)
color isDark ? #fff : #666
> .hashtags
margin 0 -16px 8px
overflow-x hidden
white-space nowrap
> *
margin-right 8px
background $theme-color
border-radius: 0 4px 4px 0
color isDark ? #282c37 : #fff8f6
margin-left 28px
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

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

@ -40,7 +40,7 @@
</div>
</div>
<div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
<a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
</div>
</div>
</template>
@ -165,6 +165,22 @@ export default Vue.extend({
this.$nextTick(() => {
this.focus();
});
const hashtags = [...document.getElementsByClassName('hashtag')];
const hashtagsContainer = hashtags.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 -= .25;
hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
}
requestAnimationFrame(update);
};
update()
},
methods: {
@ -465,10 +481,35 @@ root(isDark)
box-shadow none
> .hashtags
margin 8px
margin 0 -16px 8px
overflow-x hidden
white-space nowrap
> *
margin-right 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
.mk-post-form[data-darkmode]
root(true)