rework sticker picker for emoji pickerinator 5000 (#111)

Reviewed-on: AkkomaGang/pleroma-fe#111
This commit is contained in:
floatingghost 2022-08-04 21:11:19 +00:00
parent 2e92aaaaa3
commit 3eab17330b
5 changed files with 34 additions and 9 deletions

View file

@ -61,7 +61,17 @@ module.exports = {
target, target,
changeOrigin: true, changeOrigin: true,
cookieDomainRewrite: 'localhost' 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" // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README // with this option, according to the CSS-Loader README

View file

@ -215,7 +215,7 @@ const EmojiPicker = {
} }
}, },
stickerPickerEnabled () { stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0 return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
} }
} }
} }

View file

@ -72,7 +72,7 @@
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
&-item { &-item {
vertical-align: top; vertical-align: top;
display: inline-flex; display: inline-flex;
@ -106,6 +106,9 @@
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }
} }
.fa-sticky-note {
font-size: 2em;
}
} }
} }

View file

@ -19,13 +19,9 @@
:src="group.first.imageUrl" :src="group.first.imageUrl"
> >
</span> </span>
</span>
<span
v-if="stickerPickerEnabled"
class="additional-tabs"
>
<span <span
class="stickers-tab-icon additional-tabs-item" v-if="stickerPickerEnabled"
class="stickers-tab-icon emoji-tabs-item"
:class="{active: showingStickers}" :class="{active: showingStickers}"
:title="$t('emoji.stickers')" :title="$t('emoji.stickers')"
@click.prevent="toggleStickers" @click.prevent="toggleStickers"

View file

@ -36,6 +36,22 @@
.sticker-picker { .sticker-picker {
width: 100%; 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 { .contents {
min-height: 250px; min-height: 250px;
.sticker-picker-content { .sticker-picker-content {