feat(emoji-picker): add emoji preview support

mashirozx · Feb 13, 2024 · acf29d3 · acf29d3
1 parent 79b4b94
commit acf29d3
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 3 deletions.
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
@@ -293,7 +293,7 @@ class EmojiPickerMenuImpl extends PureComponent {
           include={categoriesSort}
           recent={frequentlyUsedEmojis}
           skin={skinTone}
-          showPreview={false}
+          showPreview
           showSkinTones={false}
           backgroundImageFn={backgroundImageFn}
           notFound={notFoundFn}

diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -27,7 +27,6 @@
     border-top-width: 1px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    display: none;
   }
 }
 
@@ -255,5 +254,168 @@
 }
 
 .emoji-mart-preview {
-  display: none;
+  position: relative;
+}
+
+@media only screen and (max-width: 499px) {
+  .emoji-mart-preview {
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    .emoji-mart-preview-emoji, .emoji-mart-preview-data {
+      position: relative;
+      top: unset;
+      transform: unset;
+    }
+
+    .emoji-mart-preview-emoji {
+      left: unset;
+    }
+
+    .emoji-mart-preview-data {
+      position: relative;
+      right: unset;
+      left: unset;
+    }
+  }
+  .emoji-mart-title-label {
+    display: none;
+  }
+}
+
+.emoji-mart-preview-emoji,
+.emoji-mart-preview-data,
+.emoji-mart-preview-skins {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.emoji-mart-preview-emoji {
+  left: 12px;
+}
+
+.emoji-mart-preview-data {
+  left: 68px;
+  right: 12px;
+  word-break: break-all;
+}
+
+.emoji-mart-preview-skins {
+  right: 30px;
+  text-align: right;
+}
+
+.emoji-mart-preview-skins.custom {
+  right: 10px;
+  text-align: right;
+}
+
+.emoji-mart-preview-name {
+  font-size: 14px;
+}
+
+.emoji-mart-preview-shortname {
+  font-size: 12px;
+}
+
+.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
+.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
+.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
+  margin-left: .5em;
+}
+
+.emoji-mart-preview-emoticon {
+  font-size: 11px;
+  color: #bbb;
+}
+
+.emoji-mart-bar:last-child {
+  background: var(--dropdown-background-color);
+}
+
+@media only screen and (min-width: 500px) {
+  .emoji-mart-title-label {
+    display: none;
+  }
+
+  .emoji-mart-preview-emoji,
+  .emoji-mart-preview-data,
+  .emoji-mart-preview-skins {
+    position: relative;
+    top: 0;
+    transform: unset;
+  }
+
+  .emoji-mart-preview-emoji {
+    height: fit-content;
+  }
+
+  .emoji-mart-bar:last-child {
+    position: absolute;
+    top: 0px;
+    width: fit-content;
+    height: fit-content;
+    border-radius: 5px;
+    right: -125px !important;
+    box-shadow: 4px 4px 6px rgb(0 0 0 / 40%);
+  }
+
+  .emoji-mart-preview {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .emoji-mart-preview-emoji {
+    left: 4px !important;
+  }
+
+  .emoji-mart-preview-emoji .emoji-mart-emoji span {
+    width: 100px !important;
+    height: 100px !important;
+  }
+
+  .emoji-mart-preview-emoji .emoji-mart-emoji span[style*='url("/emoji/sheet_'] {
+    width: 32px !important;
+    height: 32px !important;
+    margin: 34px;
+  }
+
+  .emoji-mart-preview-data {
+    left: 0 !important;
+    right: 0 !important;
+    text-align: center;
+    white-space: nowrap !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    top: 100%;
+    background: var(--dropdown-background-color);
+    color: var(--dropdown-text-color) !important;
+    height: fit-content;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .emoji-mart-preview-name {
+    display: none
+  }
+}
+
+@media only screen and (min-width: 920px) {
+  section.emoji-mart {
+    width: 696px !important;
+  }
+  .emoji-mart-scroll {
+    height: 570px !important;
+  }
+  .emoji-mart-bar:last-child {
+    height: 130px;
+    top: calc(50% - 65px);
+  }
 }