livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-29 14:56:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make emoji picker easier to close (#1711)

Browse source
This commit is contained in:
Jonatan Kłosko 2023-02-14 16:35:06 +01:00 • committed by GitHub
parent 5c1d6f082f
commit 5fe1c9a81d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 73 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/js/hooks/emoji_picker.js
View file

@ -1,31 +1,30 @@
import { createPicker } from "picmo"; import { createPopup } from "@picmo/popup-picker";
/** /**
* A hook for the emoji picker input. * A hook for the emoji picker input.
*/ */
const EmojiPicker = { const EmojiPicker = {
mounted() { mounted() {
const rootElement = this.el.querySelector("[data-emoji-container]"); const button = this.el.querySelector("[data-emoji-button]");
const preview = this.el.querySelector("[data-emoji-preview]"); const preview = this.el.querySelector("[data-emoji-preview]");
const input = this.el.querySelector("[data-emoji-input]"); const input = this.el.querySelector("[data-emoji-input]");
const button = this.el.querySelector("[data-emoji-button]");
const pickerOptions = { const picker = createPopup(
rootElement, { showPreview: false },
showSearch: false, {
showPreview: false, triggerElement: button,
}; referenceElement: button,
position: "bottom",
const picker = createPicker(pickerOptions); }
);
picker.addEventListener("emoji:select", ({ emoji }) => { picker.addEventListener("emoji:select", ({ emoji }) => {
preview.innerHTML = emoji; preview.innerHTML = emoji;
input.value = emoji; input.value = emoji;
rootElement.classList.toggle("hidden");
}); });
button.addEventListener("click", (_) => { button.addEventListener("click", (_) => {
rootElement.classList.toggle("hidden"); picker.toggle();
}); });
}, },
}; };

61
assets/package-lock.json generated
View file

@ -8,6 +8,7 @@
"@fontsource/inter": "^4.2.2", "@fontsource/inter": "^4.2.2",
"@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/red-hat-text": "^4.2.2", "@fontsource/red-hat-text": "^4.2.2",
"@picmo/popup-picker": "^5.7.6",
"babel-loader": "^9.1.0", "babel-loader": "^9.1.0",
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"css-minimizer-webpack-plugin": "^4.0.0", "css-minimizer-webpack-plugin": "^4.0.0",
@ -1683,6 +1684,19 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/@floating-ui/core": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
"integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
},
"node_modules/@floating-ui/dom": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
"integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
"dependencies": {
"@floating-ui/core": "^1.2.1"
}
},
"node_modules/@fontsource/inter": { "node_modules/@fontsource/inter": {
"version": "4.5.14", "version": "4.5.14",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
@ -2422,6 +2436,20 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@picmo/popup-picker": {
"version": "5.7.6",
"resolved": "https://registry.npmjs.org/@picmo/popup-picker/-/popup-picker-5.7.6.tgz",
"integrity": "sha512-rXA20BwTnDhBymgwHCqazz/dLgqmKNCwZp5gp/t4CULTfUXwVBoqK66YM3UHCftAyeNDE/zBN5Uh24oyY47iBA==",
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
"funding": {
"url": "https://github.com/sponsors/joeattardi"
},
"peerDependencies": {
"picmo": "^5.7.0"
}
},
"node_modules/@sinclair/typebox": { "node_modules/@sinclair/typebox": {
"version": "0.24.44", "version": "0.24.44",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz",
@ -8555,9 +8583,9 @@
"link": true "link": true
}, },
"node_modules/picmo": { "node_modules/picmo": {
"version": "5.7.2", "version": "5.7.6",
"resolved": "https://registry.npmjs.org/picmo/-/picmo-5.7.2.tgz", "resolved": "https://registry.npmjs.org/picmo/-/picmo-5.7.6.tgz",
"integrity": "sha512-A7c5O8x1Xwq11KBYFY93+GIbHnw9PVz35HaWWHn/dgT08GA67M6cXKjjwzLnEAyXSdxXKrEk8/gPyTs+ibzWfQ==", "integrity": "sha512-QceahBiHfj95v9kPbWf1MGI0dYXU3vA+UZiEGop9ZrCd8m2rJ66z0UlzlDpCOZckkjFKr2zwZGm+ZQWE5FnztQ==",
"dependencies": { "dependencies": {
"emojibase": "^6.1.0" "emojibase": "^6.1.0"
}, },
@ -11993,6 +12021,19 @@
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==" "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
}, },
"@floating-ui/core": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
"integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
},
"@floating-ui/dom": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
"integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
"requires": {
"@floating-ui/core": "^1.2.1"
}
},
"@fontsource/inter": { "@fontsource/inter": {
"version": "4.5.14", "version": "4.5.14",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.14.tgz",
@ -12548,6 +12589,14 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@picmo/popup-picker": {
"version": "5.7.6",
"resolved": "https://registry.npmjs.org/@picmo/popup-picker/-/popup-picker-5.7.6.tgz",
"integrity": "sha512-rXA20BwTnDhBymgwHCqazz/dLgqmKNCwZp5gp/t4CULTfUXwVBoqK66YM3UHCftAyeNDE/zBN5Uh24oyY47iBA==",
"requires": {
"@floating-ui/dom": "^1.0.0"
}
},
"@sinclair/typebox": { "@sinclair/typebox": {
"version": "0.24.44", "version": "0.24.44",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.44.tgz",
@ -16924,9 +16973,9 @@
"version": "file:../deps/phoenix_live_view" "version": "file:../deps/phoenix_live_view"
}, },
"picmo": { "picmo": {
"version": "5.7.2", "version": "5.7.6",
"resolved": "https://registry.npmjs.org/picmo/-/picmo-5.7.2.tgz", "resolved": "https://registry.npmjs.org/picmo/-/picmo-5.7.6.tgz",
"integrity": "sha512-A7c5O8x1Xwq11KBYFY93+GIbHnw9PVz35HaWWHn/dgT08GA67M6cXKjjwzLnEAyXSdxXKrEk8/gPyTs+ibzWfQ==", "integrity": "sha512-QceahBiHfj95v9kPbWf1MGI0dYXU3vA+UZiEGop9ZrCd8m2rJ66z0UlzlDpCOZckkjFKr2zwZGm+ZQWE5FnztQ==",
"requires": { "requires": {
"emojibase": "^6.1.0" "emojibase": "^6.1.0"
} }

1
assets/package.json
View file

@ -12,6 +12,7 @@
"@fontsource/inter": "^4.2.2", "@fontsource/inter": "^4.2.2",
"@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/jetbrains-mono": "^4.2.2",
"@fontsource/red-hat-text": "^4.2.2", "@fontsource/red-hat-text": "^4.2.2",
"@picmo/popup-picker": "^5.7.6",
"babel-loader": "^9.1.0", "babel-loader": "^9.1.0",
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"css-minimizer-webpack-plugin": "^4.0.0", "css-minimizer-webpack-plugin": "^4.0.0",

7
lib/livebook_web/live/form_helpers.ex
View file

@ -79,12 +79,7 @@ defmodule LivebookWeb.FormHelpers do
<.remix_icon icon="emotion-line" class="text-xl" /> <.remix_icon icon="emotion-line" class="text-xl" />
</button> </button>
</div> </div>
<div <%= hidden_input(@form, @field, class: "hidden emoji-picker-input", data_emoji_input: true) %>
id={"#{@id}-container"}
data-emoji-container
class={["absolute hidden", @container_class]}
/>
<%= hidden_input(@form, @field, class: "hidden emoji-picker-input", "data-emoji-input": true) %>
</div> </div>
</div> </div>
""" """

7
lib/livebook_web/live/hub/edit/enterprise_component.ex
View file

@ -36,12 +36,7 @@ defmodule LivebookWeb.Hub.Edit.EnterpriseComponent do
<div class="grid grid-cols-1 md:grid-cols-1 gap-3"> <div class="grid grid-cols-1 md:grid-cols-1 gap-3">
<.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1"> <.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1">
<div class="input-label">Emoji</div> <div class="input-label">Emoji</div>
<.emoji_input <.emoji_input id="enterprise-emoji-input" form={f} field={:hub_emoji} />
id="enterprise-emoji-input"
form={f}
field={:hub_emoji}
container_class="mt-10"
/>
</.input_wrapper> </.input_wrapper>
</div> </div>

7
lib/livebook_web/live/hub/edit/fly_component.ex
View file

@ -77,12 +77,7 @@ defmodule LivebookWeb.Hub.Edit.FlyComponent do
<.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1"> <.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1">
<div class="input-label">Emoji</div> <div class="input-label">Emoji</div>
<.emoji_input <.emoji_input id="fly-emoji-input" form={f} field={:hub_emoji} />
id="fly-emoji-input"
form={f}
field={:hub_emoji}
container_class="mt-10"
/>
</.input_wrapper> </.input_wrapper>
</div> </div>

7
lib/livebook_web/live/hub/edit/personal_component.ex
View file

@ -41,12 +41,7 @@ defmodule LivebookWeb.Hub.Edit.PersonalComponent do
<.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1"> <.input_wrapper form={f} field={:hub_emoji} class="flex flex-col space-y-1">
<div class="input-label">Emoji</div> <div class="input-label">Emoji</div>
<.emoji_input <.emoji_input id="personal-emoji-input" form={f} field={:hub_emoji} />
id="personal-emoji-input"
form={f}
field={:hub_emoji}
container_class="mt-10"
/>
</.input_wrapper> </.input_wrapper>
</div> </div>

7
lib/livebook_web/live/hub/new/enterprise_component.ex
View file

@ -84,12 +84,7 @@ defmodule LivebookWeb.Hub.New.EnterpriseComponent do
<.input_wrapper form={f} field={:hub_emoji} class="flex relative flex-col space-y-1"> <.input_wrapper form={f} field={:hub_emoji} class="flex relative flex-col space-y-1">
<div class="input-label">Emoji</div> <div class="input-label">Emoji</div>
<.emoji_input <.emoji_input id="enterprise-emoji-input" form={f} field={:hub_emoji} />
id="enterprise-emoji-input"
form={f}
field={:hub_emoji}
container_class="mt-10"
/>
</.input_wrapper> </.input_wrapper>
</div> </div>

2
lib/livebook_web/live/hub/new/fly_component.ex
View file

@ -61,7 +61,7 @@ defmodule LivebookWeb.Hub.New.FlyComponent do
<.input_wrapper form={f} field={:hub_emoji} class="flex relative flex-col space-y-1"> <.input_wrapper form={f} field={:hub_emoji} class="flex relative flex-col space-y-1">
<div class="input-label">Emoji</div> <div class="input-label">Emoji</div>
<.emoji_input id="fly-emoji-input" form={f} field={:hub_emoji} container_class="mt-1" /> <.emoji_input id="fly-emoji-input" form={f} field={:hub_emoji} />
</.input_wrapper> </.input_wrapper>
</div> </div>