treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

Revert emojimart update
lolsob-rspec
ThibG 2019-03-27 14:37:44 +01:00 committed by GitHub
parent 398b39ca12 451a79bda3
commit aa9fbfe842
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,
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>
);
}

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);
overflow: hidden;
li {
button {
display: block;
cursor: pointer;
border: 0;
padding: 3px 8px;
padding: 4px 8px;
background: transparent;
&: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 {
&,
* {
@ -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;
}
}

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 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,

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,
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 (
<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>
);
}
@ -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 (
<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>
);
}

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 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,

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);
overflow: hidden;
li {
button {
display: block;
cursor: pointer;
border: 0;
padding: 3px 8px;
padding: 4px 8px;
background: transparent;
&:hover,

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

@ -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: -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;
}
}

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

@ -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',

2
package.json
View File

@ -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",

9
yarn.lock
View File

@ -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"