rework sticker picker for emoji pickerinator 5000 (#111)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/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,
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

View file

@ -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
}
}
}

View file

@ -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;
}
}
}

View file

@ -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"

View file

@ -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 {