...
 
Commits (2)
......@@ -50,6 +50,7 @@ class ModifierPickerMenu extends React.PureComponent {
active: PropTypes.bool,
onSelect: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
modifier: PropTypes.number,
};
handleClick = e => {
......@@ -86,20 +87,36 @@ 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 } = this.props;
const { active, modifier } = this.props;
return (
<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>
<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>
);
}
......@@ -131,10 +148,22 @@ 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'>
<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 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} />
</div>
);
}
......
......@@ -48,7 +48,7 @@ class Option extends React.PureComponent {
<input
type='text'
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
maxlength={25}
maxLength={25}
value={title}
onChange={this.handleOptionTitleChange}
/>
......
import Picker from 'emoji-mart/dist-es/components/picker/picker';
import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
import Picker from 'emoji-mart/dist-modern/components/picker/picker';
import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji';
export {
Picker,
......
......@@ -33,7 +33,7 @@ class Notification extends ImmutablePureComponent {
onFavourite: PropTypes.func.isRequired,
onReblog: PropTypes.func.isRequired,
onToggleHidden: PropTypes.func.isRequired,
status: PropTypes.option,
status: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
getScrollPosition: PropTypes.func,
updateScrollBottom: PropTypes.func,
......
......@@ -357,6 +357,11 @@
padding-bottom: 0;
padding-right: 10px + 22px;
resize: none;
scrollbar-color: initial;
&::-webkit-scrollbar {
all: unset;
}
@media screen and (max-width: 600px) {
height: 100px !important; // prevent auto-resize textarea
......@@ -3334,11 +3339,11 @@ a.status-card.compact:hover {
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden;
button {
li {
display: block;
cursor: pointer;
border: 0;
padding: 4px 8px;
padding: 3px 8px;
background: transparent;
&:hover,
......
@import '../../../node_modules/emoji-mart/css/emoji-mart.css';
.emoji-mart {
&,
* {
......@@ -51,6 +53,14 @@
&:hover {
color: darken($lighter-text-color, 4%);
svg {
fill: darken($lighter-text-color, 4%);
}
}
svg {
fill: $lighter-text-color;
}
}
......@@ -59,11 +69,19 @@
&: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 {
......@@ -83,7 +101,6 @@
}
svg {
fill: currentColor;
max-height: 18px;
}
}
......@@ -103,15 +120,14 @@
}
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
margin: 10px 40px 10px 5px;
background: $simple-background-color;
input {
font-size: 14px;
font-weight: 400;
padding: 7px 9px;
font-family: inherit;
font-family: $font-sans-serif;
display: block;
width: 100%;
background: rgba($ui-secondary-color, 0.3);
......@@ -166,6 +182,7 @@
font-weight: 500;
padding: 5px 6px;
background: $simple-background-color;
font-family: $font-sans-serif;
}
}
......
......@@ -11,7 +11,16 @@ module.exports = {
options: {
babelrc: false,
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'),
cacheCompression: env.NODE_ENV === 'production',
......
......@@ -3173,9 +3173,12 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
emoji-mart@Gargron/emoji-mart#build:
version "2.6.2"
resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
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-regex@^6.5.1:
version "6.5.1"
......