FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

Resolve #3220

Browse source
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
1 changed files with 59 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/client/app/common/views/components/emoji-picker.vue
View file

@ -3,32 +3,31 @@
<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>
</div> </div>
<div v-else> <div v-else>
<button v-for="emoji in customEmojis" <button v-for="emoji in customEmojis"
:title="emoji.name" :title="emoji.name"
@click="chosen(`:${emoji.name}:`)" @click="chosen(`:${emoji.name}:`)"
> >
<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,47 +140,46 @@ 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 left 0
left 0 z-index 1
z-index 1 padding 8px
padding 8px background var(--faceHeader)
background var(--faceHeader) color var(--text)
color var(--text) font-size 12px
font-size 12px
> div > div
display grid display grid
grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
gap 4px gap 4px
padding 8px padding 8px
> button > button
padding 0 padding 0
width 100% width 100%
&:before &:before
content '' content ''
display block display block
width 1px width 1px
height 0 height 0
padding-bottom 100% padding-bottom 100%
&:hover
> *
transform scale(1.2)
transition transform 0s
&:hover
> * > *
position absolute transform scale(1.2)
top 0 transition transform 0s
left 0
width 100% > *
height 100% position absolute
font-size 28px top 0
transition transform 0.2s ease left 0
pointer-events none width 100%
height 100%
font-size 28px
transition transform 0.2s ease
pointer-events none
</style> </style>