Add Tenor GIF picker
Co-authored-by: koyu <me@koyu.space>
This commit is contained in:
parent
54a3fc3ac5
commit
ea51af8eca
4 changed files with 87 additions and 3 deletions
|
@ -8,6 +8,7 @@ import { connect } from 'react-redux';
|
|||
|
||||
import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react';
|
||||
import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
|
||||
import GifBoxIcon from '@/material-icons/400-24px/gif_box.svg?react';
|
||||
import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
|
||||
|
||||
import { DropdownIconButton } from './dropdown_icon_button';
|
||||
|
@ -15,6 +16,7 @@ import { DropdownIconButton } from './dropdown_icon_button';
|
|||
const messages = defineMessages({
|
||||
upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' },
|
||||
doodle: { id: 'compose.attach.doodle', defaultMessage: 'Draw something' },
|
||||
gif: { id: 'compose.attach.gif', defaultMessage: 'Upload GIF' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
|
@ -31,6 +33,9 @@ class UploadButton extends ImmutablePureComponent {
|
|||
disabled: PropTypes.bool,
|
||||
onSelectFile: PropTypes.func.isRequired,
|
||||
onDoodleOpen: PropTypes.func.isRequired,
|
||||
onEmbedTenor: PropTypes.func.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired,
|
||||
onModalOpen: PropTypes.func.isRequired,
|
||||
style: PropTypes.object,
|
||||
resetFileKey: PropTypes.number,
|
||||
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
|
||||
|
@ -46,8 +51,10 @@ class UploadButton extends ImmutablePureComponent {
|
|||
handleSelect = (value) => {
|
||||
if (value === 'upload') {
|
||||
this.fileElement.click();
|
||||
} else {
|
||||
} else if (value === 'doodle') {
|
||||
this.props.onDoodleOpen();
|
||||
} else if (value === 'gif') {
|
||||
this.props.onEmbedTenor();
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -73,6 +80,12 @@ class UploadButton extends ImmutablePureComponent {
|
|||
value: 'doodle',
|
||||
text: intl.formatMessage(messages.doodle),
|
||||
},
|
||||
{
|
||||
icon: 'gif-box',
|
||||
iconComponent: GifBoxIcon,
|
||||
value: 'gif',
|
||||
text: intl.formatMessage(messages.gif),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { uploadCompose } from '../../../actions/compose';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { openModal, closeModal } from '../../../actions/modal';
|
||||
import UploadButton from '../components/upload_button';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
|
@ -21,6 +21,24 @@ const mapDispatchToProps = dispatch => ({
|
|||
modalProps: { noEsc: true, noClose: true },
|
||||
}));
|
||||
},
|
||||
|
||||
onEmbedTenor() {
|
||||
dispatch(openModal({
|
||||
modalType: 'TENOR',
|
||||
modalProps: { noEsc: true },
|
||||
}));
|
||||
},
|
||||
|
||||
onModalClose() {
|
||||
dispatch(closeModal({
|
||||
modalType: undefined,
|
||||
ignoreFocus: false,
|
||||
}));
|
||||
},
|
||||
|
||||
onModalOpen(props) {
|
||||
dispatch(openModal({ modalType: 'ACTIONS', modalProps: props }));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"column_subheading.navigation": "Navigation",
|
||||
"community.column_settings.allow_local_only": "Show local-only toots",
|
||||
"compose.attach.doodle": "Draw something",
|
||||
"compose.attach.gif": "Upload GIF",
|
||||
"compose.change_federation": "Change federation settings",
|
||||
"compose.content-type.change": "Change advanced formatting options",
|
||||
"compose.content-type.html": "HTML",
|
||||
|
|
54
yarn.lock
54
yarn.lock
|
@ -1821,6 +1821,16 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/ecma402-abstract@npm:1.18.0":
|
||||
version: 1.18.0
|
||||
resolution: "@formatjs/ecma402-abstract@npm:1.18.0"
|
||||
dependencies:
|
||||
"@formatjs/intl-localematcher": "npm:0.5.2"
|
||||
tslib: "npm:^2.4.0"
|
||||
checksum: 10c0/bbdad0aee8e48baad6bfe6b2c27caf3befe35e658b922ee2f84417a819f0bdc7e849a8c0c782db8b53f5666bf19669d2b10a1104257c08796d198c87766bfc92
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/ecma402-abstract@npm:1.18.2":
|
||||
version: 1.18.2
|
||||
resolution: "@formatjs/ecma402-abstract@npm:1.18.2"
|
||||
|
@ -1840,6 +1850,17 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/icu-messageformat-parser@npm:2.7.3":
|
||||
version: 2.7.3
|
||||
resolution: "@formatjs/icu-messageformat-parser@npm:2.7.3"
|
||||
dependencies:
|
||||
"@formatjs/ecma402-abstract": "npm:1.18.0"
|
||||
"@formatjs/icu-skeleton-parser": "npm:1.7.0"
|
||||
tslib: "npm:^2.4.0"
|
||||
checksum: 10c0/2a51038813e5cff7e2df767e1227373d228e907adb7268fc3744b3d82c4fa69d4aa9f6020a62de2c468cf724600e9372ac07ae43a4480ed066fe34e224e80e4a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/icu-messageformat-parser@npm:2.7.6":
|
||||
version: 2.7.6
|
||||
resolution: "@formatjs/icu-messageformat-parser@npm:2.7.6"
|
||||
|
@ -1851,6 +1872,16 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/icu-skeleton-parser@npm:1.7.0":
|
||||
version: 1.7.0
|
||||
resolution: "@formatjs/icu-skeleton-parser@npm:1.7.0"
|
||||
dependencies:
|
||||
"@formatjs/ecma402-abstract": "npm:1.18.0"
|
||||
tslib: "npm:^2.4.0"
|
||||
checksum: 10c0/2e4db815247ddb10f7990bbb501c85b854ee951ee45143673eb91b4392b11d0a8312327adb8b624c6a2fdafab12083904630d6d22475503d025f1612da4dcaee
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/icu-skeleton-parser@npm:1.8.0":
|
||||
version: 1.8.0
|
||||
resolution: "@formatjs/icu-skeleton-parser@npm:1.8.0"
|
||||
|
@ -1883,6 +1914,15 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/intl-localematcher@npm:0.5.2":
|
||||
version: 0.5.2
|
||||
resolution: "@formatjs/intl-localematcher@npm:0.5.2"
|
||||
dependencies:
|
||||
tslib: "npm:^2.4.0"
|
||||
checksum: 10c0/4b3ae75470e3e53ffa39b2d46e65a2a4c9c4becbc0aac989b0694370e10c6687643660a045512d676509bc29b257fe5726fbb028de12f889be02c2d20b6527e6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@formatjs/intl-localematcher@npm:0.5.4":
|
||||
version: 0.5.4
|
||||
resolution: "@formatjs/intl-localematcher@npm:0.5.4"
|
||||
|
@ -9197,7 +9237,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"intl-messageformat@npm:10.5.11, intl-messageformat@npm:^10.3.5":
|
||||
"intl-messageformat@npm:10.5.11":
|
||||
version: 10.5.11
|
||||
resolution: "intl-messageformat@npm:10.5.11"
|
||||
dependencies:
|
||||
|
@ -9209,6 +9249,18 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"intl-messageformat@npm:^10.3.5":
|
||||
version: 10.5.8
|
||||
resolution: "intl-messageformat@npm:10.5.8"
|
||||
dependencies:
|
||||
"@formatjs/ecma402-abstract": "npm:1.18.0"
|
||||
"@formatjs/fast-memoize": "npm:2.2.0"
|
||||
"@formatjs/icu-messageformat-parser": "npm:2.7.3"
|
||||
tslib: "npm:^2.4.0"
|
||||
checksum: 10c0/1d2854aae8471ec48165ca265760d6c5b1814eca831c88db698eb29b5ed20bee21ca8533090c9d28d9c6f1d844dda210b0bc58a2e036446158fae0845e5eed4f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"invariant@npm:^2.2.2, invariant@npm:^2.2.4":
|
||||
version: 2.2.4
|
||||
resolution: "invariant@npm:2.2.4"
|
||||
|
|
Loading…
Reference in a new issue