1
0
forked from mirror/misskey
This commit is contained in:
syuilo 2019-03-04 14:32:36 +09:00
parent 737064da82
commit d1a18fe266
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69

View File

@ -3,19 +3,19 @@
<header> <header>
<button v-for="category in categories" <button v-for="category in categories"
:title="category.text" :title="category.text"
@click="go(category.ref)" @click="go(category)"
:class="{ active: category.isActive }" :class="{ active: category.isActive }"
> >
<fa :icon="category.icon" fixed-width/> <fa :icon="category.icon" fixed-width/>
</button> </button>
</header> </header>
<div class="emojis" ref="emojis" @scroll.passive="onScroll"> <div class="emojis">
<section v-for="category in categories" :ref="category.ref"> <header><fa :icon="categories.find(x => x.isActive).icon" fixed-width/> {{ categories.find(x => x.isActive).text }}</header>
<header><fa :icon="category.icon" fixed-width/> {{ category.text }}</header> <div v-if="categories.find(x => x.isActive).name">
<div v-if="category.name"> <button v-for="emoji in Object.entries(lib).filter(([k, v]) => v.category === categories.find(x => x.isActive).name)"
<button v-for="emoji in Object.entries(lib).filter(([k, v]) => v.category === category.name)"
:title="emoji[0]" :title="emoji[0]"
@click="chosen(emoji[1].char)" @click="chosen(emoji[1].char)"
:key="emoji[0]"
> >
<mk-emoji :emoji="emoji[1].char"/> <mk-emoji :emoji="emoji[1].char"/>
</button> </button>
@ -28,7 +28,6 @@
<img :src="emoji.url" :alt="emoji.name"/> <img :src="emoji.url" :alt="emoji.name"/>
</button> </button>
</div> </div>
</section>
</div> </div>
</div> </div>
</template> </template>
@ -48,55 +47,46 @@ export default Vue.extend({
lib, lib,
customEmojis: [], customEmojis: [],
categories: [{ categories: [{
ref: 'customEmojiSection',
text: this.$t('custom-emoji'), text: this.$t('custom-emoji'),
icon: faAsterisk, icon: faAsterisk,
isActive: true isActive: true
}, { }, {
name: 'people', name: 'people',
ref: 'peopleSection',
text: this.$t('people'), text: this.$t('people'),
icon: ['far', 'laugh'], icon: ['far', 'laugh'],
isActive: false isActive: false
}, { }, {
name: 'animals_and_nature', name: 'animals_and_nature',
ref: 'animalsAndNatureSection',
text: this.$t('animals-and-nature'), text: this.$t('animals-and-nature'),
icon: faLeaf, icon: faLeaf,
isActive: false isActive: false
}, { }, {
name: 'food_and_drink', name: 'food_and_drink',
ref: 'foodAndDrinkSection',
text: this.$t('food-and-drink'), text: this.$t('food-and-drink'),
icon: faUtensils, icon: faUtensils,
isActive: false isActive: false
}, { }, {
name: 'activity', name: 'activity',
ref: 'activitySection',
text: this.$t('activity'), text: this.$t('activity'),
icon: faFutbol, icon: faFutbol,
isActive: false isActive: false
}, { }, {
name: 'travel_and_places', name: 'travel_and_places',
ref: 'travelAndPlacesSection',
text: this.$t('travel-and-places'), text: this.$t('travel-and-places'),
icon: faCity, icon: faCity,
isActive: false isActive: false
}, { }, {
name: 'objects', name: 'objects',
ref: 'objectsSection',
text: this.$t('objects'), text: this.$t('objects'),
icon: faDice, icon: faDice,
isActive: false isActive: false
}, { }, {
name: 'symbols', name: 'symbols',
ref: 'symbolsSection',
text: this.$t('symbols'), text: this.$t('symbols'),
icon: faHeart, icon: faHeart,
isActive: false isActive: false
}, { }, {
name: 'flags', name: 'flags',
ref: 'flagsSection',
text: this.$t('flags'), text: this.$t('flags'),
icon: faFlag, icon: faFlag,
isActive: false isActive: false
@ -109,15 +99,9 @@ export default Vue.extend({
}, },
methods: { methods: {
go(ref) { go(category) {
this.$refs.emojis.scrollTop = this.$refs[ref][0].offsetTop; for (const c of this.categories) {
}, c.isActive = c.name === category.name;
onScroll(e) {
for (const x of this.categories) {
const top = e.target.scrollTop;
const el = this.$refs[x.ref][0];
x.isActive = el.offsetTop <= top && el.offsetTop + el.offsetHeight > top;
} }
}, },
@ -156,7 +140,6 @@ export default Vue.extend({
overflow-y auto overflow-y auto
overflow-x hidden overflow-x hidden
> section
> header > header
position sticky position sticky
top 0 top 0