forked from AkkomaGang/akkoma-fe
rework sticker picker for emoji pickerinator 5000 (#111)
Reviewed-on: AkkomaGang/pleroma-fe#111
This commit is contained in:
parent
2e92aaaaa3
commit
3eab17330b
5 changed files with 34 additions and 9 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue