djsundog
/
tootlab-mastodon
mirror of https://github.com/glitch-soc/mastodon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #969 from ThibG/glitch-soc/fixes/revert-emojimart 

Revert emojimart update
This commit is contained in:
ThibG 2019-03-27 14:37:44 +01:00 committed by GitHub
parent 7535c607f4 3a2f646cb1
commit 0418bdd71f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 43 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/javascript/flavours/glitch/features/emoji_picker/index.js
View File

@ -129,7 +129,6 @@ class ModifierPickerMenu extends React.PureComponent {
active: PropTypes.bool, active: PropTypes.bool,
onSelect: PropTypes.func.isRequired, onSelect: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
modifier: PropTypes.number,
}; };
handleClick = e => { handleClick = e => {
@ -166,36 +165,20 @@ class ModifierPickerMenu extends React.PureComponent {
setRef = c => { setRef = c => {
this.node = c; this.node = c;
if (this.node) {
this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
}
} }
render () { render () {
const { active, modifier } = this.props; const { active } = this.props;
return ( return (
<ul <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
className='emoji-picker-dropdown__modifiers__menu' <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
style={{ display: active ? 'block' : 'none' }} <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
role='menuitem' <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
ref={this.setRef} <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>
{[1, 2, 3, 4, 5, 6].map(i => ( <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
<li </div>
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>
); );
} }
@ -227,22 +210,10 @@ class ModifierPicker extends React.PureComponent {
render () { render () {
const { active, modifier } = this.props; 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 ( return (
<div className='emoji-picker-dropdown__modifiers'> <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} />
<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>
<ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
</div> </div>
); );
} }

4
app/javascript/flavours/glitch/styles/components/emoji.scss
View File

@ -44,11 +44,11 @@
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
li { button {
display: block; display: block;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
padding: 3px 8px; padding: 4px 8px;
background: transparent; background: transparent;
&:hover, &:hover,

25
app/javascript/flavours/glitch/styles/components/emoji_picker.scss
View File

@ -1,5 +1,3 @@
@import '~emoji-mart/css/emoji-mart.css';
.emoji-mart { .emoji-mart {
&, &,
* { * {
@ -53,14 +51,6 @@
&:hover { &:hover {
color: darken($lighter-text-color, 4%); color: darken($lighter-text-color, 4%);
svg {
fill: darken($lighter-text-color, 4%);
}
}
svg {
fill: $lighter-text-color;
} }
} }
@ -69,19 +59,11 @@
&:hover { &:hover {
color: darken($highlight-text-color, 4%); color: darken($highlight-text-color, 4%);
svg {
fill: darken($highlight-text-color, 4%);
}
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
bottom: 0; bottom: 0;
} }
svg {
fill: $highlight-text-color;
}
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
@ -101,6 +83,7 @@
} }
svg { svg {
fill: currentColor;
max-height: 18px; max-height: 18px;
} }
} }
@ -120,14 +103,15 @@
} }
.emoji-mart-search { .emoji-mart-search {
margin: 10px 40px 10px 5px; padding: 10px;
padding-right: 45px;
background: $simple-background-color; background: $simple-background-color;
input { input {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
padding: 7px 9px; padding: 7px 9px;
font-family: $font-sans-serif; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
background: rgba($ui-secondary-color, 0.3); background: rgba($ui-secondary-color, 0.3);
@ -182,7 +166,6 @@
font-weight: 500; font-weight: 500;
padding: 5px 6px; padding: 5px 6px;
background: $simple-background-color; background: $simple-background-color;
font-family: $font-sans-serif;
} }
} }

4
app/javascript/flavours/glitch/util/emoji/emoji_picker.js
View File

@ -1,5 +1,5 @@
import Picker from 'emoji-mart/dist-modern/components/picker/picker'; import Picker from 'emoji-mart/dist-es/components/picker/picker';
import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
export { export {
Picker, Picker,

51
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
View File

@ -50,7 +50,6 @@ class ModifierPickerMenu extends React.PureComponent {
active: PropTypes.bool, active: PropTypes.bool,
onSelect: PropTypes.func.isRequired, onSelect: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
modifier: PropTypes.number,
}; };
handleClick = e => { handleClick = e => {
@ -87,36 +86,20 @@ class ModifierPickerMenu extends React.PureComponent {
setRef = c => { setRef = c => {
this.node = c; this.node = c;
if (this.node) {
this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
}
} }
render () { render () {
const { active, modifier } = this.props; const { active } = this.props;
return ( return (
<ul <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
className='emoji-picker-dropdown__modifiers__menu' <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
style={{ display: active ? 'block' : 'none' }} <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
role='menuitem' <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
ref={this.setRef} <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>
{[1, 2, 3, 4, 5, 6].map(i => ( <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
<li </div>
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>
); );
} }
@ -148,22 +131,10 @@ class ModifierPicker extends React.PureComponent {
render () { render () {
const { active, modifier } = this.props; 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 ( return (
<div className='emoji-picker-dropdown__modifiers'> <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} />
<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>
<ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
</div> </div>
); );
} }

4
app/javascript/mastodon/features/emoji/emoji_picker.js
View File

@ -1,5 +1,5 @@
import Picker from 'emoji-mart/dist-modern/components/picker/picker'; import Picker from 'emoji-mart/dist-es/components/picker/picker';
import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
export { export {
Picker, Picker,

4
app/javascript/styles/mastodon/components.scss
View File

@ -3222,11 +3222,11 @@ a.status-card.compact:hover {
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
li { button {
display: block; display: block;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
padding: 3px 8px; padding: 4px 8px;
background: transparent; background: transparent;
&:hover, &:hover,

25
app/javascript/styles/mastodon/emoji_picker.scss
View File

@ -1,5 +1,3 @@
@import '~emoji-mart/css/emoji-mart.css';
.emoji-mart { .emoji-mart {
&, &,
* { * {
@ -53,14 +51,6 @@
&:hover { &:hover {
color: darken($lighter-text-color, 4%); color: darken($lighter-text-color, 4%);
svg {
fill: darken($lighter-text-color, 4%);
}
}
svg {
fill: $lighter-text-color;
} }
} }
@ -69,19 +59,11 @@
&:hover { &:hover {
color: darken($highlight-text-color, 4%); color: darken($highlight-text-color, 4%);
svg {
fill: darken($highlight-text-color, 4%);
}
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
bottom: -1px; bottom: -1px;
} }
svg {
fill: $highlight-text-color;
}
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
@ -101,6 +83,7 @@
} }
svg { svg {
fill: currentColor;
max-height: 18px; max-height: 18px;
} }
} }
@ -120,14 +103,15 @@
} }
.emoji-mart-search { .emoji-mart-search {
margin: 10px 40px 10px 5px; padding: 10px;
padding-right: 45px;
background: $simple-background-color; background: $simple-background-color;
input { input {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
padding: 7px 9px; padding: 7px 9px;
font-family: $font-sans-serif; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
background: rgba($ui-secondary-color, 0.3); background: rgba($ui-secondary-color, 0.3);
@ -182,7 +166,6 @@
font-weight: 500; font-weight: 500;
padding: 5px 6px; padding: 5px 6px;
background: $simple-background-color; background: $simple-background-color;
font-family: $font-sans-serif;
} }
} }

11
config/webpack/rules/node_modules.js
View File

@ -11,16 +11,7 @@ module.exports = {
options: { options: {
babelrc: false, babelrc: false,
plugins: [ plugins: [
[ 'transform-react-remove-prop-types',
'transform-react-remove-prop-types',
{
mode: 'remove',
removeImport: true,
additionalLibraries: [
'../../utils/shared-props', // emoji-mart
],
},
],
], ],
cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'), cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
cacheCompression: env.NODE_ENV === 'production', cacheCompression: env.NODE_ENV === 'production',

2
package.json
View File

@ -87,7 +87,7 @@
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"detect-passive-events": "^1.0.2", "detect-passive-events": "^1.0.2",
"dotenv": "^6.2.0", "dotenv": "^6.2.0",
"emoji-mart": "^2.10.0", "emoji-mart": "Gargron/emoji-mart#build",
"es6-symbol": "^3.1.1", "es6-symbol": "^3.1.1",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"exif-js": "^2.3.0", "exif-js": "^2.3.0",

9
yarn.lock
View File

@ -3177,12 +3177,9 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0" minimalistic-crypto-utils "^1.0.0"
emoji-mart@^2.10.0: emoji-mart@Gargron/emoji-mart#build:
version "2.10.0" version "2.6.2"
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.10.0.tgz#e1adec430f4963f79055b12b80e6d60c5abb742d" resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
integrity sha512-VhcX463f8TDaQc1Tpc8rI31E15+8KXOYff1vwjokjMT52bZlCQCyq3zrnNScSYjv95f1+R4DMMreeuPvYFvOhg==
dependencies:
prop-types "^15.6.0"
emoji-regex@^6.5.1: emoji-regex@^6.5.1:
version "6.5.1" version "6.5.1"