From 497a958297c7265e7a9fea8f61d577934192fc55 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 27 Mar 2019 14:04:46 +0100 Subject: [PATCH 1/3] Revert "Fix compilation after emoji-picker change" This reverts commit 8ea344fed40ae1dccf5e1b6ecfd0014128c10fb7. --- app/javascript/styles/mastodon/emoji_picker.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 94578ffee..d53f41a0b 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,4 +1,4 @@ -@import '~emoji-mart/css/emoji-mart.css'; +@import '../../../node_modules/emoji-mart/css/emoji-mart.css'; .emoji-mart { &, From 355d384d8d5d2e4588117507a7ded1eb6ff67c05 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 27 Mar 2019 14:04:52 +0100 Subject: [PATCH 2/3] Revert "[Glitch] fix: update to emoji-mart 2.10.0" This reverts commit 49bea8c46b006d8c86285c8b1158cd700dc2eb45. --- .../glitch/features/emoji_picker/index.js | 51 ++++--------------- .../glitch/styles/components/emoji.scss | 4 +- .../styles/components/emoji_picker.scss | 25 ++------- .../glitch/util/emoji/emoji_picker.js | 4 +- 4 files changed, 19 insertions(+), 65 deletions(-) diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index d963039dc..a78117971 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -129,7 +129,6 @@ class ModifierPickerMenu extends React.PureComponent { active: PropTypes.bool, onSelect: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, - modifier: PropTypes.number, }; handleClick = e => { @@ -166,36 +165,20 @@ class ModifierPickerMenu extends React.PureComponent { setRef = c => { this.node = c; - if (this.node) { - this.node.querySelector('li:first-child button').focus(); // focus the first element when opened - } } render () { - const { active, modifier } = this.props; + const { active } = this.props; return ( - +
+ + + + + + +
); } @@ -227,22 +210,10 @@ class ModifierPicker extends React.PureComponent { render () { const { active, modifier } = this.props; - function setRef(ref) { - if (!ref) { - return; - } - // TODO: It would be nice if we could pass props directly to emoji-mart's buttons. - const button = ref.querySelector('button'); - button.setAttribute('aria-haspopup', 'true'); - button.setAttribute('aria-expanded', active); - } - return (
-
- -
- + +
); } diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index ccfd42f28..dd386d698 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -44,11 +44,11 @@ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); overflow: hidden; - li { + button { display: block; cursor: pointer; border: 0; - padding: 3px 8px; + padding: 4px 8px; background: transparent; &:hover, diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 171623352..dcc551c5b 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -1,5 +1,3 @@ -@import '~emoji-mart/css/emoji-mart.css'; - .emoji-mart { &, * { @@ -53,14 +51,6 @@ &:hover { color: darken($lighter-text-color, 4%); - - svg { - fill: darken($lighter-text-color, 4%); - } - } - - svg { - fill: $lighter-text-color; } } @@ -69,19 +59,11 @@ &:hover { color: darken($highlight-text-color, 4%); - - svg { - fill: darken($highlight-text-color, 4%); - } } .emoji-mart-anchor-bar { bottom: 0; } - - svg { - fill: $highlight-text-color; - } } .emoji-mart-anchor-bar { @@ -101,6 +83,7 @@ } svg { + fill: currentColor; max-height: 18px; } } @@ -120,14 +103,15 @@ } .emoji-mart-search { - margin: 10px 40px 10px 5px; + padding: 10px; + padding-right: 45px; background: $simple-background-color; input { font-size: 14px; font-weight: 400; padding: 7px 9px; - font-family: $font-sans-serif; + font-family: inherit; display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); @@ -182,7 +166,6 @@ font-weight: 500; padding: 5px 6px; background: $simple-background-color; - font-family: $font-sans-serif; } } diff --git a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js index 73fcaa8c8..044d38cb2 100644 --- a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js +++ b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js @@ -1,5 +1,5 @@ -import Picker from 'emoji-mart/dist-modern/components/picker/picker'; -import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; +import Picker from 'emoji-mart/dist-es/components/picker/picker'; +import Emoji from 'emoji-mart/dist-es/components/emoji/emoji'; export { Picker, From 3a2f646cb125c80b82a2a67a622994d332ede811 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 27 Mar 2019 14:04:58 +0100 Subject: [PATCH 3/3] Revert "fix: update to emoji-mart 2.10.0 (#10281)" This reverts commit db06b25376ac7e844e86fb9890fa9f1c2edd2d60. --- .../components/emoji_picker_dropdown.js | 51 ++++--------------- .../mastodon/features/emoji/emoji_picker.js | 4 +- .../styles/mastodon/components.scss | 4 +- .../styles/mastodon/emoji_picker.scss | 25 ++------- config/webpack/rules/node_modules.js | 11 +--- package.json | 2 +- yarn.lock | 9 ++-- 7 files changed, 24 insertions(+), 82 deletions(-) diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index 038d93483..c1429c756 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -50,7 +50,6 @@ class ModifierPickerMenu extends React.PureComponent { active: PropTypes.bool, onSelect: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, - modifier: PropTypes.number, }; handleClick = e => { @@ -87,36 +86,20 @@ class ModifierPickerMenu extends React.PureComponent { setRef = c => { this.node = c; - if (this.node) { - this.node.querySelector('li:first-child button').focus(); // focus the first element when opened - } } render () { - const { active, modifier } = this.props; + const { active } = this.props; return ( -
    - {[1, 2, 3, 4, 5, 6].map(i => ( -
  • - -
    • - ))} -
+
+ + + + + + +
); } @@ -148,22 +131,10 @@ class ModifierPicker extends React.PureComponent { render () { const { active, modifier } = this.props; - function setRef(ref) { - if (!ref) { - return; - } - // TODO: It would be nice if we could pass props directly to emoji-mart's buttons. - const button = ref.querySelector('button'); - button.setAttribute('aria-haspopup', 'true'); - button.setAttribute('aria-expanded', active); - } - return (
-
- -
- + +
); } diff --git a/app/javascript/mastodon/features/emoji/emoji_picker.js b/app/javascript/mastodon/features/emoji/emoji_picker.js index 73fcaa8c8..044d38cb2 100644 --- a/app/javascript/mastodon/features/emoji/emoji_picker.js +++ b/app/javascript/mastodon/features/emoji/emoji_picker.js @@ -1,5 +1,5 @@ -import Picker from 'emoji-mart/dist-modern/components/picker/picker'; -import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; +import Picker from 'emoji-mart/dist-es/components/picker/picker'; +import Emoji from 'emoji-mart/dist-es/components/emoji/emoji'; export { Picker, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 5580d9783..5e1f865ea 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3222,11 +3222,11 @@ a.status-card.compact:hover { box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); overflow: hidden; - li { + button { display: block; cursor: pointer; border: 0; - padding: 3px 8px; + padding: 4px 8px; background: transparent; &:hover, diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index d53f41a0b..e49084b5f 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -1,5 +1,3 @@ -@import '../../../node_modules/emoji-mart/css/emoji-mart.css'; - .emoji-mart { &, * { @@ -53,14 +51,6 @@ &:hover { color: darken($lighter-text-color, 4%); - - svg { - fill: darken($lighter-text-color, 4%); - } - } - - svg { - fill: $lighter-text-color; } } @@ -69,19 +59,11 @@ &:hover { color: darken($highlight-text-color, 4%); - - svg { - fill: darken($highlight-text-color, 4%); - } } .emoji-mart-anchor-bar { bottom: -1px; } - - svg { - fill: $highlight-text-color; - } } .emoji-mart-anchor-bar { @@ -101,6 +83,7 @@ } svg { + fill: currentColor; max-height: 18px; } } @@ -120,14 +103,15 @@ } .emoji-mart-search { - margin: 10px 40px 10px 5px; + padding: 10px; + padding-right: 45px; background: $simple-background-color; input { font-size: 14px; font-weight: 400; padding: 7px 9px; - font-family: $font-sans-serif; + font-family: inherit; display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); @@ -182,7 +166,6 @@ font-weight: 500; padding: 5px 6px; background: $simple-background-color; - font-family: $font-sans-serif; } } diff --git a/config/webpack/rules/node_modules.js b/config/webpack/rules/node_modules.js index 5debc1b5d..7ed05504b 100644 --- a/config/webpack/rules/node_modules.js +++ b/config/webpack/rules/node_modules.js @@ -11,16 +11,7 @@ module.exports = { options: { babelrc: false, plugins: [ - [ - 'transform-react-remove-prop-types', - { - mode: 'remove', - removeImport: true, - additionalLibraries: [ - '../../utils/shared-props', // emoji-mart - ], - }, - ], + 'transform-react-remove-prop-types', ], cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'), cacheCompression: env.NODE_ENV === 'production', diff --git a/package.json b/package.json index 0225f68da..b5963acd4 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "cssnano": "^4.1.10", "detect-passive-events": "^1.0.2", "dotenv": "^6.2.0", - "emoji-mart": "^2.10.0", + "emoji-mart": "Gargron/emoji-mart#build", "es6-symbol": "^3.1.1", "escape-html": "^1.0.3", "exif-js": "^2.3.0", diff --git a/yarn.lock b/yarn.lock index 22f8abd48..11fe49fa6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3177,12 +3177,9 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" -emoji-mart@^2.10.0: - version "2.10.0" - resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.10.0.tgz#e1adec430f4963f79055b12b80e6d60c5abb742d" - integrity sha512-VhcX463f8TDaQc1Tpc8rI31E15+8KXOYff1vwjokjMT52bZlCQCyq3zrnNScSYjv95f1+R4DMMreeuPvYFvOhg== - dependencies: - prop-types "^15.6.0" +emoji-mart@Gargron/emoji-mart#build: + version "2.6.2" + resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9" emoji-regex@^6.5.1: version "6.5.1"