diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md index a3f87ff7..afd87ee3 100644 --- a/docs/docs/changelog/index.md +++ b/docs/docs/changelog/index.md @@ -4,6 +4,9 @@ title: 'Changelog' # Changelog +## 5.7.3 +- Style update for TwemojiPicker + ## 5.7.2 - Added a Vue slot which enables the usage of TwemojiPicker as a headless component when using TwemojiTextarea component diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md index f12a2279..c0054055 100644 --- a/docs/docs/twemoji-textarea-api/index.md +++ b/docs/docs/twemoji-textarea-api/index.md @@ -35,7 +35,7 @@ The value of this prop represents whether the textarea is enabled. ### componentColor - Type: ``string`` -- Default: ``'#EBEBEB'`` +- Default: ``'#f0f0f0'`` - Valid Props: ``Any CSS valid color.`` Define the component color style. diff --git a/package.json b/package.json index fa30d21d..6e261475 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kevinfaguiar/vue-twemoji-picker", - "version": "5.7.2", + "version": "5.7.3", "main": "dist/vue-twemoji-picker.umd.min.js", "module": "dist/vue-twemoji-picker.esm.min.js", "unpkg": "dist/vue-twemoji-picker.min.js", diff --git a/src/components/PopupEmoji.vue b/src/components/PopupEmoji.vue index 30f3a45a..c017c34b 100644 --- a/src/components/PopupEmoji.vue +++ b/src/components/PopupEmoji.vue @@ -39,7 +39,7 @@ #popper-container { padding: 0; - background: #ebebeb; + background: #f7f7f7; border: none; border-radius: 3px; animation: fadein 300ms; @@ -64,7 +64,7 @@ z-index: -1; content: ''; transform: rotate(45deg); - background: #ebebeb; + background: #f0f0f0; width: 24px; height: 24px; } diff --git a/src/components/PopupSkins.vue b/src/components/PopupSkins.vue index 9bd98cd5..79e01e17 100644 --- a/src/components/PopupSkins.vue +++ b/src/components/PopupSkins.vue @@ -39,7 +39,7 @@ #popper-skins-container { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); padding: 0; - background: #f2f2f2; + background: #f7f7f7; border: none; border-radius: 3px; animation: fadein 300ms; @@ -60,7 +60,7 @@ z-index: -1; content: ''; transform: rotate(45deg); - background: #f2f2f2; + background: #f0f0f0; width: 24px; height: 24px; } @@ -92,7 +92,7 @@ import Vue from 'vue'; import { popperGenerator, - defaultModifiers + defaultModifiers, } from '@popperjs/core/lib/popper-lite'; import offset from '@popperjs/core/lib/modifiers/offset'; import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'; @@ -112,26 +112,26 @@ export default Vue.extend({ debouncedPopperOpen: false as boolean, popperInstance: null as any | null, holdingInterval: null as any, - closeOnClickaway: true as boolean + closeOnClickaway: true as boolean, }; }, props: { disabled: { default: false, - type: Boolean as () => boolean + type: Boolean as () => boolean, }, offset: { default: () => [0, 30], - type: Array as () => Array + type: Array as () => Array, }, emojiList: { required: true, - type: Array as () => Array + type: Array as () => Array, }, clickEmoji: { required: true, - type: Function as () => Function - } + type: Function as () => Function, + }, }, computed: { createPopper() { @@ -139,27 +139,27 @@ export default Vue.extend({ ...defaultModifiers, offset, preventOverflow, - arrow + arrow, ]; return popperGenerator({ - defaultModifiers: defaultModifiersObj + defaultModifiers: defaultModifiersObj, }); - } + }, }, mounted(): void { this.containerRef = this.$refs.container; }, watch: { - popperOpen: function(val): void { + popperOpen: function (val): void { this.$emit('popperOpenChanged', val); setTimeout(() => { this.debouncedPopperOpen = val; }, 300); }, - closeOnClickaway: function(val): void { + closeOnClickaway: function (val): void { this.$emit('closeOnClickaway', val); - } + }, }, methods: { clickAwayPopper(): void { @@ -183,16 +183,16 @@ export default Vue.extend({ { name: 'offset', options: { - offset: this.offset - } + offset: this.offset, + }, }, { name: 'arrow', options: { - element: '#skins-arrow' - } - } - ] + element: '#skins-arrow', + }, + }, + ], } ); this.$refs.container.setAttribute('data-show', true); @@ -208,7 +208,7 @@ export default Vue.extend({ }, setCloseOnClickaway(bool: boolean): void { this.closeOnClickaway = bool; - } - } + }, + }, }); diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue index b20d4670..dc03eac4 100644 --- a/src/components/TwemojiPicker/TwemojiPicker.vue +++ b/src/components/TwemojiPicker/TwemojiPicker.vue @@ -18,6 +18,22 @@ id="emoji-popup" :style="{ width: calculatedPickerWidth + 'px' }" > + +
- -
@@ -144,6 +144,10 @@ z-index: 1; > #emoji-popup { + border: 1px solid #f0f0f0; + border-radius: 5px; + padding: 3px; + img.emoji { height: 32px; width: 32px; @@ -156,6 +160,21 @@ overflow-x: auto; white-space: nowrap; + &::-webkit-scrollbar-track { + border-radius: 10px; + background-color: #f2f2f2; + } + + &::-webkit-scrollbar{ + height: 12px; + background-color: #f2f2f2; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #c1c1c1; + } + > .emoji-tab { margin: 3px; padding: 5px; @@ -163,15 +182,18 @@ cursor: pointer; border-radius: 2px; opacity: 0.5; + filter: grayscale(1); &:hover { border-bottom: 5px solid #b3b3b3; opacity: 1; + filter: grayscale(0); } &.active { border-bottom: 5px solid #b3b3b3; opacity: 1; + filter: grayscale(0); } } } @@ -179,6 +201,22 @@ .emoji-popover-inner { overflow-y: auto; overflow-x: hidden; + background-color: #f7f7f7; + + &::-webkit-scrollbar-track { + border-radius: 10px; + background-color: #f2f2f2; + } + + &::-webkit-scrollbar{ + width: 12px; + background-color: #f2f2f2; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: #c1c1c1; + } #loading-label { margin: 0 5px; @@ -206,34 +244,41 @@ } #emoji-popover-search { - background-color: #ebebeb; + background-color: #f7f7f7; border-radius: 3px; margin: 5px 0; > #search-header { padding-top: 5px 0; display: flex; + border: 1px solid #e6e6e6; + border-radius: 25px; - > input { + &.is-focused { + background-color: #fcfcfc; transition: background-color 300ms ease-in-out; - flex-grow: 1; - padding: 10px 5px; - margin: 0 10px; - border: none; - border-radius: 5px; - background-color: #d9d9d9; - font-size: 1rem; - - &:focus { - background-color: #f0f0f0; + > span { + filter: grayscale(0); + transition: filter 300ms ease-in-out; } } > span { - flex-grow: 10; - border-radius: 5px; + flex-grow: 1; + padding: 5px 10px; + width: 32px !important; + text-align: center; + filter: grayscale(1); + } + + > input { + flex-grow: 99; + padding: 10px 5px; + margin: 0 10px; border: none; - background-color: transparent; + font-size: 1rem; + background-color: inherit; + outline: none; } } } @@ -345,8 +390,8 @@ export default Vue.extend({ searchEmojis: [] as Array, searchTimeout: null as any, isSearchingEmoji: false as boolean, + isSearchFocused: false as boolean, calculatedPickerWidth: null as number | null, - hideSearch: false as boolean, isPickerOpen: false as boolean, }; }, @@ -393,7 +438,13 @@ export default Vue.extend({ } }, randomEmoji() { - setTimeout(() => this.$refs.popupEmoji.popperInstance.forceUpdate(), 100); + // eslint-disable-next-line + const vueContext = this; + + setTimeout(() => { + if (vueContext.$refs.popupEmoji) + vueContext.$refs.popupEmoji.popperInstance.forceUpdate(); + }, 100); }, }, @@ -603,7 +654,7 @@ export default Vue.extend({ ) { const domId = this.pickerWidth.slice(1); const domEl = document.getElementById(domId); - if (domEl) this.calculatedPickerWidth = domEl.offsetWidth; + if (domEl) this.calculatedPickerWidth = domEl.offsetWidth - 8; } else if (typeof this.pickerWidth === 'number') { this.calculatedPickerWidth = this.pickerWidth; } else { @@ -612,13 +663,6 @@ export default Vue.extend({ }, onScrollEmojiList(event: UIEvent) { this.$refs.popupSkins.closePopper(); - if (this.searchEmojisFeat) { - if ((event as any).target.scrollTop > 30) { - this.hideSearch = true; - } else { - this.hideSearch = false; - } - } }, }, }); diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue index 5163c782..98507f7b 100644 --- a/src/components/TwemojiTextarea.vue +++ b/src/components/TwemojiTextarea.vue @@ -68,6 +68,7 @@ margin: 10px; border-radius: 10px; text-align: left; + cursor: text; &[placeholder]:empty:before { content: attr(placeholder); @@ -158,7 +159,7 @@ export default Vue.extend({ }, componentColor: { type: String as () => string, - default: '#EBEBEB', + default: '#f0f0f0', validator: function (value: string) { const s = new Option().style; s.color = value;