From 5ac6224c0d8def62bec35454171b348597831b91 Mon Sep 17 00:00:00 2001 From: klezm <20573323+klezm@users.noreply.github.com> Date: Mon, 4 Sep 2023 10:09:26 +0000 Subject: [PATCH] emoji lookup page --- package.json | 4 +- packages/emoji-mart-website/index.html | 45 +++- packages/emoji-mart-website/layout.html | 192 +++++++++--------- packages/emoji-mart-website/styles.scss | 24 ++- .../src/components/Picker/PickerProps.ts | 5 + .../src/components/Picker/PickerStyles.scss | 4 + 6 files changed, 173 insertions(+), 101 deletions(-) diff --git a/package.json b/package.json index 7f23d0041..9a1162412 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "check:types": "tsc", "prettier": "prettier --check .", "prettier:fix": "prettier --write .", - "test": "jest" + "test": "jest", + "start": "yarn install && yarn dev", + "start-vite": "yarn add -O --ignore-workspace-root-check vite && yarn install && vite" }, "devDependencies": { "@babel/core": "7.18.9", diff --git a/packages/emoji-mart-website/index.html b/packages/emoji-mart-website/index.html index a4f240675..9102d1d81 100644 --- a/packages/emoji-mart-website/index.html +++ b/packages/emoji-mart-website/index.html @@ -1,6 +1,12 @@
+ +

+ + Emoji Mart +

+
Set:  + -
@@ -130,8 +137,8 @@
Skin tone position:  @@ -142,6 +149,30 @@
+ +
+ + + + +   GitHub + +  â€˘  + Examples +
+
@@ -287,9 +318,15 @@ } window.picker = new EmojiMart.Picker({ + dynamicWidth: true, + emojiButtonSize: 110, + emojiSize: 110 - (110 / 4), + skinTonePosition: "search", + autoFocus: true, + // parent: document.querySelector('#picker'), data: localStorage.set || localStorage.version ? undefined : data, - autoFocus: localStorage.autoFocus, + // autoFocus: localStorage.autoFocus, set: localStorage.set, theme: localStorage.theme, icons: localStorage.icons, @@ -298,7 +335,7 @@ navPosition: localStorage.navPosition, previewPosition: localStorage.previewPosition, searchPosition: localStorage.searchPosition, - skinTonePosition: localStorage.skinTonePosition, + // skinTonePosition: localStorage.skinTonePosition, onEmojiSelect: console.log, custom: [ { diff --git a/packages/emoji-mart-website/layout.html b/packages/emoji-mart-website/layout.html index 85c9e21ae..45a32a960 100644 --- a/packages/emoji-mart-website/layout.html +++ b/packages/emoji-mart-website/layout.html @@ -23,15 +23,17 @@
-
-

- - Emoji Mart -

- - ⬅️ Examples → {{ exampleName }} - -
+ +
+

+ + Emoji Mart +

+ + ⬅️ Examples → {{ exampleName }} + +
+
@@ -39,100 +41,102 @@

-
- + +
diff --git a/packages/emoji-mart-website/styles.scss b/packages/emoji-mart-website/styles.scss index 325840fdc..45cbca42e 100644 --- a/packages/emoji-mart-website/styles.scss +++ b/packages/emoji-mart-website/styles.scss @@ -91,11 +91,13 @@ dialog { section { max-width: 1000px; margin: 0 auto; - padding: 4% 0; + // padding: 4% 0; + // padding: 10px 0; } header { - margin-bottom: 2em; + // margin-bottom: 2em; + margin-bottom: 10px; text-align: center; } @@ -215,6 +217,8 @@ footer { text-align: center; nav { margin: 1em 0 2em } + + // display: none; } #missive { @@ -298,3 +302,19 @@ $coinSize: 24px; 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } + + +// my custom styles + +em-emoji-picker { + // width: 400px; + // width: 100%; + width: 80vw; + // min-width: 250px; + // height: 100%; + // height: 85vh; + height: 99vh; + resize: horizontal; + // overflow: auto; + overflow-x: auto; +} diff --git a/packages/emoji-mart/src/components/Picker/PickerProps.ts b/packages/emoji-mart/src/components/Picker/PickerProps.ts index 5f1a9af77..4deb99c8d 100644 --- a/packages/emoji-mart/src/components/Picker/PickerProps.ts +++ b/packages/emoji-mart/src/components/Picker/PickerProps.ts @@ -1,9 +1,11 @@ export default { autoFocus: { value: false, + // value: true, }, dynamicWidth: { value: false, + // value: true, }, emojiButtonColors: { value: null, @@ -13,9 +15,11 @@ export default { }, emojiButtonSize: { value: 36, + // value: 100, }, emojiSize: { value: 24, + // value: 100 - (100 / 4), }, emojiVersion: { value: 14, @@ -70,6 +74,7 @@ export default { }, perLine: { value: 9, + // value: 20, }, previewEmoji: { value: null, diff --git a/packages/emoji-mart/src/components/Picker/PickerStyles.scss b/packages/emoji-mart/src/components/Picker/PickerStyles.scss index 7177e47ef..3fc0df19b 100644 --- a/packages/emoji-mart/src/components/Picker/PickerStyles.scss +++ b/packages/emoji-mart/src/components/Picker/PickerStyles.scss @@ -2,6 +2,10 @@ display: flex; width: min-content; height: 435px; + // height: 100%; + // height: 80vh; + // height: 85vh; + // height: auto; min-height: 230px; border-radius: var(--border-radius); box-shadow: var(--shadow);