diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
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 ( - <ul - className='emoji-picker-dropdown__modifiers__menu' - style={{ display: active ? 'block' : 'none' }} - role='menuitem' - ref={this.setRef} - > - {[1, 2, 3, 4, 5, 6].map(i => ( - <li - onClick={this.handleClick} - role='menuitemradio' - aria-checked={i === (modifier || 1)} - data-index={i} - key={i} - > - <Emoji - emoji='fist' set='twitter' size={22} sheetSize={32} skin={i} - backgroundImageFn={backgroundImageFn} - /> - </li> - ))} - </ul> + <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}> + <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button> + <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button> + <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button> + <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button> + <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button> + <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button> + </div> ); } @@ -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 ( <div className='emoji-picker-dropdown__modifiers'> - <div ref={setRef}> - <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} /> - </div> - <ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} /> + <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} /> + <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} /> </div> ); } 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, |