mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 10:05:46 +01:00
commit
ad76d5d8e2
2 changed files with 93 additions and 6 deletions
|
@ -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[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()
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -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
|
||||
|
|
|
@ -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[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: {
|
||||
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue