rework sticker picker for emoji pickerinator 5000 (#111)
Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/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,
|
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
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -106,6 +106,9 @@
|
||||||
color: var(--lightText, $fallback--lightText);
|
color: var(--lightText, $fallback--lightText);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.fa-sticky-note {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,13 +19,9 @@
|
||||||
:src="group.first.imageUrl"
|
:src="group.first.imageUrl"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
|
||||||
<span
|
<span
|
||||||
v-if="stickerPickerEnabled"
|
v-if="stickerPickerEnabled"
|
||||||
class="additional-tabs"
|
class="stickers-tab-icon emoji-tabs-item"
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="stickers-tab-icon additional-tabs-item"
|
|
||||||
:class="{active: showingStickers}"
|
:class="{active: showingStickers}"
|
||||||
:title="$t('emoji.stickers')"
|
:title="$t('emoji.stickers')"
|
||||||
@click.prevent="toggleStickers"
|
@click.prevent="toggleStickers"
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue