coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Image cropper in dark mode

Browse Source 
closes #1229
This commit is contained in:
Tom Moor 2020-04-11 09:34:33 -07:00
parent fbaaa08ec7
commit 083ac0d840
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/scenes/Settings/components/ImageUpload.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import Dropzone from 'react-dropzone';
import LoadingIndicator from 'components/LoadingIndicator';
@ -10,6 +10,7 @@ import Modal from 'components/Modal';
import Button from 'components/Button';
import AvatarEditor from 'react-avatar-editor';
import { uploadFile, dataUrlToBlob } from 'utils/uploadFile';
import UiStore from 'stores/UiStore';
type Props = {
children?: React.Node,
@ -17,10 +18,11 @@ type Props = {
onError: string => void,
submitText: string,
borderRadius: number,
ui: UiStore,
};
@observer
class DropToImport extends React.Component<Props> {
class ImageUpload extends React.Component<Props> {
@observable isUploading: boolean = false;
@observable isCropping: boolean = false;
@observable zoom: number = 1;
@ -75,7 +77,7 @@ class DropToImport extends React.Component<Props> {
};
renderCropping() {
const { submitText } = this.props;
const { ui, submitText } = this.props;
return (
<Modal isOpen onRequestClose={this.handleClose} title="">
@ -89,7 +91,9 @@ class DropToImport extends React.Component<Props> {
height={250}
border={25}
borderRadius={this.props.borderRadius}
color={[255, 255, 255, 0.6]} // RGBA
color={
ui.theme === 'light' ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6]
} // RGBA
scale={this.zoom}
rotate={0}
/>
@ -150,7 +154,7 @@ const RangeInput = styled.input`
height: 16px;
width: 16px;
border-radius: 50%;
background: black;
background: ${props => props.theme.text};
cursor: pointer;
}
@ -163,4 +167,4 @@ const CropButton = styled(Button)`
width: 300px;
`;
export default DropToImport;
export default inject('ui')(ImageUpload);