diff --git a/config/index.js b/config/index.js index 023d4c9b..443c4a67 100644 --- a/config/index.js +++ b/config/index.js @@ -61,7 +61,17 @@ module.exports = { target, changeOrigin: true, cookieDomainRewrite: 'localhost' - } + }, + '/static/stickers.json': { + target, + changeOrigin: true, + cookieDomainRewrite: 'localhost' + }, + '/static/stickers': { + target, + changeOrigin: true, + cookieDomainRewrite: 'localhost' + }, }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 49438a4b..3b355ca6 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -215,7 +215,7 @@ const EmojiPicker = { } }, stickerPickerEnabled () { - return (this.$store.state.instance.stickers || []).length !== 0 + return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker } } } diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 9c814e15..b5cc1c63 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -72,7 +72,7 @@ width: 100%; white-space: nowrap; - + &-item { vertical-align: top; display: inline-flex; @@ -106,6 +106,9 @@ color: var(--lightText, $fallback--lightText); } } + .fa-sticky-note { + font-size: 2em; + } } } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 408048d2..a629c9ad 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -19,13 +19,9 @@ :src="group.first.imageUrl" > </span> - </span> - <span - v-if="stickerPickerEnabled" - class="additional-tabs" - > <span - class="stickers-tab-icon additional-tabs-item" + v-if="stickerPickerEnabled" + class="stickers-tab-icon emoji-tabs-item" :class="{active: showingStickers}" :title="$t('emoji.stickers')" @click.prevent="toggleStickers" diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue index dc449ccb..bca1588c 100644 --- a/src/components/sticker_picker/sticker_picker.vue +++ b/src/components/sticker_picker/sticker_picker.vue @@ -36,6 +36,22 @@ .sticker-picker { width: 100%; + display: flex; + flex-direction: column; + position: absolute; + right: 0; + left: 0; + margin: 0 !important; + background-color: $fallback--bg; + background-color: var(--popover, $fallback--bg); + color: $fallback--link; + color: var(--popoverText, $fallback--link); + --lightText: var(--popoverLightText, $fallback--faint); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --lightText: var(--popoverLightText, $fallback--lightText); + --icon: var(--popoverIcon, $fallback--icon); + .contents { min-height: 250px; .sticker-picker-content {