diff --git a/src/client/components/emoji-picker.section.vue b/src/client/components/emoji-picker.section.vue
new file mode 100644
index 0000000000..a12493ce0d
--- /dev/null
+++ b/src/client/components/emoji-picker.section.vue
@@ -0,0 +1,52 @@
+
+
+
+ ({{ emojis.length }})
+
+
+
+
+
+
+
+
+
+
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 93530e16c8..b11f0a62fa 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -28,7 +28,7 @@
-
+
-
-
- {{ category || $ts.other }}
-
-
-
-
-
-
+
+
+
+ {{ category || $ts.other }}
+
+
+
+
+
+ {{ category }}
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+
+
+
+
@@ -92,15 +86,20 @@
import { defineComponent, markRaw } from 'vue';
import { emojilist } from '../../misc/emojilist';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faClock, faUser, faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faClock, faUser, faChevronDown, faShapes, faBicycle, faHashtag } from '@fortawesome/free-solid-svg-icons';
import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
import Particle from '@/components/particle.vue';
import * as os from '@/os';
import { isDeviceTouch } from '@/scripts/is-device-touch';
import { isMobile } from '@/scripts/is-mobile';
-import { emojiCategories } from '@/instance';
+import { emojiCategories, emojiTags } from '@/instance';
+import XSection from './emoji-picker.section.vue';
export default defineComponent({
+ components: {
+ XSection
+ },
+
props: {
showPinned: {
required: false,
@@ -122,50 +121,17 @@ export default defineComponent({
height: this.asReactionPicker ? this.$store.state.reactionPickerHeight : 2,
big: this.asReactionPicker ? isDeviceTouch : false,
customEmojiCategories: emojiCategories,
+ emojiTags,
customEmojis: this.$instance.emojis,
- visibleCategories: {},
q: null,
searchResultCustom: [],
searchResultUnicode: [],
- faGlobe, faClock, faChevronDown,
- categories: [{
- name: 'face',
- icon: faLaugh,
- isActive: false
- }, {
- name: 'people',
- icon: faUser,
- isActive: false
- }, {
- name: 'animals_and_nature',
- icon: faLeaf,
- isActive: false
- }, {
- name: 'food_and_drink',
- icon: faUtensils,
- isActive: false
- }, {
- name: 'activity',
- icon: faFutbol,
- isActive: false
- }, {
- name: 'travel_and_places',
- icon: faCity,
- isActive: false
- }, {
- name: 'objects',
- icon: faDice,
- isActive: false
- }, {
- name: 'symbols',
- icon: faHeart,
- isActive: false
- }, {
- name: 'flags',
- icon: faFlag,
- isActive: false
- }],
- faAsterisk
+ tab: 'index',
+ showingCustomEmojis: false,
+ showingEmojis: false,
+ showingTags: false,
+ categories: ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'],
+ faGlobe, faClock, faChevronDown, faAsterisk, faLaugh, faUtensils, faLeaf, faShapes, faBicycle, faHashtag,
};
},
@@ -342,7 +308,7 @@ export default defineComponent({
let recents = this.$store.state.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== key);
recents.unshift(key);
- this.$store.set('recentlyUsedEmojis', recents.splice(0, 16));
+ this.$store.set('recentlyUsedEmojis', recents.splice(0, 32));
}
},
@@ -434,6 +400,22 @@ export default defineComponent({
}
}
+ > .tabs {
+ display: flex;
+ display: none;
+
+ > .tab {
+ flex: 1;
+ height: 38px;
+ border-top: solid 1px var(--divider);
+
+ &.active {
+ border-top: solid 1px var(--accent);
+ color: var(--accent);
+ }
+ }
+ }
+
> .emojis {
height: var(--height);
overflow-y: auto;
@@ -445,34 +427,43 @@ export default defineComponent({
display: none;
}
- > .index {
- min-height: var(--height);
- position: relative;
- border-bottom: solid 1px var(--divider);
-
- > .arrow {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 16px 0;
- text-align: center;
- opacity: 0.5;
- pointer-events: none;
+ > div {
+ &:not(.index) {
+ padding: 4px 0 8px 0;
+ border-top: solid 1px var(--divider);
+ }
+
+ > header {
+ /*position: sticky;
+ top: 0;
+ left: 0;*/
+ height: 32px;
+ line-height: 32px;
+ z-index: 2;
+ padding: 0 8px;
+ font-size: 12px;
}
}
- section {
+ ::v-deep(section) {
> header {
position: sticky;
top: 0;
left: 0;
+ height: 32px;
+ line-height: 32px;
z-index: 1;
- padding: 8px;
+ padding: 0 8px;
font-size: 12px;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--accent);
+ }
}
> div {
+ position: relative;
padding: $pad;
> button {
@@ -512,14 +503,6 @@ export default defineComponent({
display: none;
}
}
-
- &.unicode {
- min-height: 384px;
- }
-
- &.custom {
- min-height: 64px;
- }
}
}
}
diff --git a/src/client/instance.ts b/src/client/instance.ts
index 89c0368599..bd6b1bd571 100644
--- a/src/client/instance.ts
+++ b/src/client/instance.ts
@@ -37,6 +37,16 @@ export const emojiCategories = computed(() => {
return Array.from(categories);
});
+export const emojiTags = computed(() => {
+ const tags = new Set();
+ for (const emoji of instance.emojis) {
+ for (const tag of emoji.aliases) {
+ tags.add(tag);
+ }
+ }
+ return Array.from(tags);
+});
+
// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {