random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-04-15 17:35:57 -04:00
parent 595208780e
commit 0c6837213d
3114 changed files with 1027 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/gabsocial/components/composer.js
View File

@@ -10,7 +10,7 @@ import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
import Button from './button'
import 'draft-js/dist/Draft.css'
// import 'draft-js/dist/Draft.css'
const cx = classNames.bind(_s)

136
app/javascript/gabsocial/components/popover/emoji_picker_popover.js
View File

@@ -11,6 +11,8 @@ import { EmojiPicker as EmojiPickerAsync } from '../../features/ui/util/async_co
import { buildCustomEmojis } from '../emoji/emoji'
import PopoverLayout from './popover_layout'
import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
@@ -31,7 +33,7 @@ const messages = defineMessages({
const assetHost = process.env.CDN_HOST || ''
let EmojiPicker, Emoji // load asynchronously
const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`
const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
const categoriesSort = [
@@ -47,115 +49,6 @@ const categoriesSort = [
'flags',
];
class ModifierPickerMenu extends PureComponent {
static propTypes = {
active: PropTypes.bool,
onSelect: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
handleClick = e => {
this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
}
componentWillReceiveProps (nextProps) {
if (nextProps.active) {
this.attachListeners();
} else {
this.removeListeners();
}
}
componentWillUnmount () {
this.removeListeners();
}
handleDocumentClick = e => {
if (this.node && !this.node.contains(e.target)) {
this.props.onClose();
}
}
attachListeners () {
document.addEventListener('click', this.handleDocumentClick, false);
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
}
removeListeners () {
document.removeEventListener('click', this.handleDocumentClick, false);
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
}
setRef = c => {
this.node = c;
}
render () {
const { active } = 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>
);
}
}
class ModifierPicker extends PureComponent {
static propTypes = {
active: PropTypes.bool,
modifier: PropTypes.number,
onChange: PropTypes.func,
onClose: PropTypes.func,
onOpen: PropTypes.func,
};
handleClick = () => {
if (this.props.active) {
this.props.onClose();
} else {
this.props.onOpen();
}
}
handleSelect = modifier => {
this.props.onChange(modifier);
this.props.onClose();
}
render () {
const { active, modifier } = this.props;
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>
);
}
}
@injectIntl
class EmojiPickerMenu extends ImmutablePureComponent {
@@ -250,7 +143,7 @@ class EmojiPickerMenu extends ImmutablePureComponent {
const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
if (loading) {
return <div style={{ width: 299 }} />;
return <div style={{ width: 340 }} />;
}
const title = intl.formatMessage(messages.emoji);
@@ -259,32 +152,29 @@ class EmojiPickerMenu extends ImmutablePureComponent {
return (
<div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
<EmojiPicker
perLine={8}
emojiSize={22}
sheetSize={32}
backgroundImageFn={backgroundImageFn}
custom={buildCustomEmojis(custom_emojis)}
color=''
emoji=''
set='twitter'
title={title}
i18n={this.getI18n()}
onClick={this.handleClick}
include={categoriesSort}
recent={frequentlyUsedEmojis}
skin={skinTone}
showPreview={false}
backgroundImageFn={backgroundImageFn}
emojiSize={24}
set='twitter'
color='#30CE7D'
emoji=''
autoFocus
emojiTooltip
/>
<ModifierPicker
{/*<ModifierPicker
active={modifierOpen}
modifier={skinTone}
onOpen={this.handleModifierOpen}
onClose={this.handleModifierClose}
onChange={this.handleModifierChange}
/>
/>*/}
</div>
);
}
@@ -434,8 +324,8 @@ class EmojiPickerPopover extends ImmutablePureComponent {
const { active, loading } = this.state
return (
<PopoverLayout>
<div className={_s.emojiMart} onKeyDown={this.handleKeyDown}>
<PopoverLayout width={340}>
<div onKeyDown={this.handleKeyDown}>
<EmojiPickerMenu
custom_emojis={this.props.custom_emojis}
loading={loading}