Add new emote menu

lbryio · Oct 25, 2021 · cb8e790 · cb8e790
1 parent ba894b1
commit cb8e790
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 42 deletions.
diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
@@ -2,22 +2,14 @@
 import 'easymde/dist/easymde.min.css';
 import { FF_MAX_CHARS_DEFAULT } from 'constants/form-field';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
+import * as ICONS from 'constants/icons';
 import Button from 'component/button';
-import emoji from 'emoji-dictionary';
 import MarkdownPreview from 'component/common/markdown-preview';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import SimpleMDE from 'react-simplemde-editor';
 import type { ElementRef, Node } from 'react';
 
-const QUICK_EMOJIS = [
-  emoji.getUnicode('rocket'),
-  emoji.getUnicode('jeans'),
-  emoji.getUnicode('fire'),
-  emoji.getUnicode('heart'),
-  emoji.getUnicode('open_mouth'),
-];
-
 type Props = {
   name: string,
   label?: string | Node,
@@ -47,6 +39,7 @@ type Props = {
   render?: () => React$Node,
   onChange?: (any) => any,
   quickActionHandler?: (any) => any,
+  openEmoteMenu?: () => void,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -88,6 +81,7 @@ export class FormField extends React.PureComponent<Props> {
       noEmojis,
       render,
       quickActionHandler,
+      openEmoteMenu,
       ...inputProps
     } = this.props;
 
@@ -246,24 +240,13 @@ export class FormField extends React.PureComponent<Props> {
               />
               <div className="form-field__textarea-info">
                 {!noEmojis && (
-                  <div className="form-field__quick-emojis">
-                    {QUICK_EMOJIS.map((emoji) => (
-                      <Button
-                        key={emoji}
-                        disabled={inputProps.disabled}
-                        type="button"
-                        className="button--emoji"
-                        label={emoji}
-                        onClick={() => {
-                          if (inputProps.onChange) {
-                            inputProps.onChange({
-                              target: { value: inputProps.value ? `${inputProps.value} ${emoji}` : emoji },
-                            });
-                          }
-                        }}
-                      />
-                    ))}
-                  </div>
+                  <Button
+                    type="alt"
+                    className="button--file-action"
+                    title="Emotes"
+                    onClick={openEmoteMenu}
+                    icon={ICONS.EMOJI}
+                  />
                 )}
                 {countInfo}
               </div>

diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
@@ -2526,4 +2526,12 @@ export const icons = {
       <line x1="19" y1="20.5" x2="20" y2="20.5" />
     </g>
   ),
+  [ICONS.EMOJI]: buildIcon(
+    <g>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+      <line x1="9" y1="9" x2="9.01" y2="9" />
+      <line x1="15" y1="9" x2="15.01" y2="9" />
+    </g>
+  ),
 };
diff --git a/ui/constants/emotes.js b/ui/constants/emotes.js
@@ -0,0 +1,80 @@
+export const ALIEN = 'https://static.odycdn.com/emoticons/24%20px/Alien.png';
+export const ANGRY = 'https://static.odycdn.com/emoticons/24%20px/angry.png';
+export const ANGRY_2 = 'https://static.odycdn.com/emoticons/24%20px/angry%202.png';
+export const ANGRY_3 = 'https://static.odycdn.com/emoticons/24%20px/angry%203.png';
+export const ANGRY_4 = 'https://static.odycdn.com/emoticons/24%20px/angry%204.png';
+export const BLIND = 'https://static.odycdn.com/emoticons/24%20px/blind.png';
+export const BLOCK = 'https://static.odycdn.com/emoticons/24%20px/block.png';
+export const BOMB = 'https://static.odycdn.com/emoticons/24%20px/bomb.png';
+export const BRAIN_CHIP = 'https://static.odycdn.com/emoticons/24%20px/Brain%20chip.png';
+export const CONFIRM = 'https://static.odycdn.com/emoticons/24%20px/CONFIRM.png';
+export const CONFUSED = 'https://static.odycdn.com/emoticons/24%20px/confused.png';
+export const CONFUSED_1 = 'https://static.odycdn.com/emoticons/24%20px/confused-1.png';
+export const COOKING_SOMETHING_NICE = 'https://static.odycdn.com/emoticons/24%20px/cooking%20something%20nice.png';
+export const CRY = 'https://static.odycdn.com/emoticons/24%20px/cry.png';
+export const CRY_2 = 'https://static.odycdn.com/emoticons/24%20px/cry%202.png';
+export const CRY_3 = 'https://static.odycdn.com/emoticons/24%20px/cry%203.png';
+export const CRY_4 = 'https://static.odycdn.com/emoticons/24%20px/cry%204.png';
+export const CRY_5 = 'https://static.odycdn.com/emoticons/24%20px/cry%205.png';
+export const DOGE = 'https://static.odycdn.com/emoticons/24%20px/doge.png';
+export const DONUT = 'https://static.odycdn.com/emoticons/24%20px/donut.png';
+export const EGGPLANT = 'https://static.odycdn.com/emoticons/24%20px/eggplant.png';
+export const EGGPLANT_WITH_CONDOM = 'https://static.odycdn.com/emoticons/24%20px/eggplant%20with%20condom.png';
+export const FIRE_UP = 'https://static.odycdn.com/emoticons/24%20px/fire%20up.png';
+export const FLAT_EARTH = 'https://static.odycdn.com/emoticons/24%20px/Flat%20earth.png';
+export const FLYING_SAUCER = 'https://static.odycdn.com/emoticons/24%20px/Flying%20saucer.png';
+export const HEART_CHOPPER = 'https://static.odycdn.com/emoticons/24%20px/heart%20chopper.png';
+export const HYPERTROLL = 'https://static.odycdn.com/emoticons/24%20px/HyperTroll.png';
+export const ICE_CREAM = 'https://static.odycdn.com/emoticons/24%20px/ice%20cream.png';
+export const IDK = 'https://static.odycdn.com/emoticons/24%20px/IDK.png';
+export const ILLUMINATI = 'https://static.odycdn.com/emoticons/24%20px/Illuminati.png';
+export const ILLUMINATI_1 = 'https://static.odycdn.com/emoticons/24%20px/Illuminati-1.png';
+export const KISS = 'https://static.odycdn.com/emoticons/24%20px/kiss.png';
+export const KISS_2 = 'https://static.odycdn.com/emoticons/24%20px/kiss%202.png';
+export const LASER_GUN = 'https://static.odycdn.com/emoticons/24%20px/laser%20gun.png';
+export const LAUGHING = 'https://static.odycdn.com/emoticons/24%20px/Laughing.png';
+export const LAUGHING_2 = 'https://static.odycdn.com/emoticons/24%20px/Laughing 2.png';
+export const LOLLIPOP = 'https://static.odycdn.com/emoticons/24%20px/Lollipop.png';
+export const LOVE = 'https://static.odycdn.com/emoticons/24%20px/Love.png';
+export const LOVE_2 = 'https://static.odycdn.com/emoticons/24%20px/Love%202.png';
+export const MONSTER = 'https://static.odycdn.com/emoticons/24%20px/Monster.png';
+export const MUSHROOM = 'https://static.odycdn.com/emoticons/24%20px/mushroom.png';
+export const NAIL_IT = 'https://static.odycdn.com/emoticons/24%20px/Nail%20It.png';
+export const NO = 'https://static.odycdn.com/emoticons/24%20px/NO.png';
+export const OUCH = 'https://static.odycdn.com/emoticons/24%20px/ouch.png';
+export const PEACE = 'https://static.odycdn.com/emoticons/24%20px/peace.png';
+export const PIZZA = 'https://static.odycdn.com/emoticons/24%20px/pizza.png';
+export const RABBIT_HOLE = 'https://static.odycdn.com/emoticons/24%20px/rabbit%20hole.png';
+export const RAINBOW_PUKE = 'https://static.odycdn.com/emoticons/24%20px/rainbow%20puke.png';
+export const RAINBOW_PUKE_1 = 'https://static.odycdn.com/emoticons/24%20px/rainbow%20puke-1.png';
+export const RESITAS = 'https://static.odycdn.com/emoticons/24%20px/resitas.png';
+export const ROCK = 'https://static.odycdn.com/emoticons/24%20px/ROCK.png';
+export const SAD = 'https://static.odycdn.com/emoticons/24%20px/sad.png';
+export const SALTY = 'https://static.odycdn.com/emoticons/24%20px/salty.png';
+export const SCARY = 'https://static.odycdn.com/emoticons/24%20px/scary.png';
+export const SLEEP = 'https://static.odycdn.com/emoticons/24%20px/Sleep.png';
+export const SLIME_DOWN = 'https://static.odycdn.com/emoticons/24%20px/slime%20down.png';
+export const SMELLY_ROCKS = 'https://static.odycdn.com/emoticons/24%20px/smelly%20socks.png';
+export const SMILE = 'https://static.odycdn.com/emoticons/24%20px/smile.png';
+export const SMILE_W = 'https://static.odycdn.com/emoticons/24%20px/smile%202.png';
+export const SPACE_CHAD = 'https://static.odycdn.com/emoticons/24%20px/space%20chad.png';
+export const SPACE_JULIAN = 'https://static.odycdn.com/emoticons/24%20px/Space%20Julian.png';
+export const SPACE_TOM = 'https://static.odycdn.com/emoticons/24%20px/space%20Tom.png';
+export const SPACE_WOJAK = 'https://static.odycdn.com/emoticons/24%20px/space%20wojak.png';
+export const SPACE_WOJAK_1 = 'https://static.odycdn.com/emoticons/24%20px/space%20wojak-1.png';
+export const SPOCK = 'https://static.odycdn.com/emoticons/24%20px/SPOCK.png';
+export const STAR = 'https://static.odycdn.com/emoticons/24%20px/Star.png';
+export const SUNNY_DAY = 'https://static.odycdn.com/emoticons/24%20px/sunny%20day.png';
+export const SURPRISED = 'https://static.odycdn.com/emoticons/24%20px/surprised.png';
+export const SWEET = 'https://static.odycdn.com/emoticons/24%20px/sweet.png';
+export const THINKING = 'https://static.odycdn.com/emoticons/24%20px/thinking.png';
+export const THINKING_1 = 'https://static.odycdn.com/emoticons/24%20px/thinking-1.png';
+export const THUMB_DOWN = 'https://static.odycdn.com/emoticons/24%20px/thumb%20down.png';
+export const THUMB_UP = 'https://static.odycdn.com/emoticons/24%20px/thumb%20up.png';
+export const THUMB_UP_1 = 'https://static.odycdn.com/emoticons/24%20px/thumb%20up-1.png';
+export const TIN_HAT = 'https://static.odycdn.com/emoticons/24%20px/tin%20hat.png';
+export const TROLL_KING = 'https://static.odycdn.com/emoticons/24%20px/Troll%20king.png';
+export const UFO = 'https://static.odycdn.com/emoticons/24%20px/ufo.png';
+export const WAITING = 'https://static.odycdn.com/emoticons/24%20px/waiting.png';
+export const WHAT = 'https://static.odycdn.com/emoticons/24%20px/what_.png';
+export const WOODO_DOLL = 'https://static.odycdn.com/emoticons/24%20px/woodo%20doll.png';
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
@@ -179,3 +179,4 @@ export const LIFE = 'Life';
 export const ARTISTS = 'Artists';
 export const MYSTERIES = 'Mysteries';
 export const TECHNOLOGY = 'Technology';
+export const EMOJI = 'Emoji';
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
@@ -176,12 +176,12 @@
   transition: background 0.2s;
 }
 
-.vjs-button--autoplay-next.vjs-button[aria-checked=true] {
+.vjs-button--autoplay-next.vjs-button[aria-checked='true'] {
   background: var(--color-primary);
 }
 
 .vjs-button--autoplay-next.vjs-button::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -193,7 +193,7 @@
   transition: transform 0.2s;
 }
 
-.vjs-button--autoplay-next.vjs-button[aria-checked=true]::after {
+.vjs-button--autoplay-next.vjs-button[aria-checked='true']::after {
   transform: translateX(12px);
 }
 
@@ -544,12 +544,6 @@
 .button--highlighted {
   border: 1px solid var(--color-border);
 }
-
-.button--emoji {
-  font-size: 1.1rem;
-  border-radius: 3rem;
-}
-
 .button__content {
   display: flex;
   align-items: center;

diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
@@ -452,12 +452,6 @@ fieldset-group {
   margin-bottom: var(--spacing-s);
 }
 
-.form-field__quick-emojis {
-  > *:not(:last-child) {
-    margin-right: var(--spacing-s);
-  }
-}
-
 fieldset-section {
   .form-field__internal-option {
     margin-top: var(--spacing-s);