From 3eab17330bceefbb49045d1d0007e3a3c97d91b0 Mon Sep 17 00:00:00 2001
From: floatingghost <hannah@coffee-and-dreams.uk>
Date: Thu, 4 Aug 2022 21:11:19 +0000
Subject: [PATCH] rework sticker picker for emoji pickerinator 5000 (#111)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/111
---
 config/index.js                                  | 12 +++++++++++-
 src/components/emoji_picker/emoji_picker.js      |  2 +-
 src/components/emoji_picker/emoji_picker.scss    |  5 ++++-
 src/components/emoji_picker/emoji_picker.vue     |  8 ++------
 src/components/sticker_picker/sticker_picker.vue | 16 ++++++++++++++++
 5 files changed, 34 insertions(+), 9 deletions(-)

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 {