1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00

added editor panel

This commit is contained in:
muerwre 2019-08-06 19:00:28 +07:00
parent ee17b72a7f
commit bfc779745a
6 changed files with 45 additions and 12 deletions

View file

@ -0,0 +1,15 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
import { INode } from '~/redux/types';
interface IProps {
data: INode;
setData: (val: INode) => void;
};
const EditorPanel: FC<IProps> = ({
}) => (
<div className={styles.panel} />
)
export { EditorPanel };

View file

@ -0,0 +1,7 @@
.panel {
height: 60px;
position: absolute;
left: 0;
width: 100%;
bottom: 100%;
}

View file

@ -9,7 +9,9 @@ interface IProps {
const ImageEditor: FC<IProps> = ({
}) => (
<div className={styles.uploads} />
<div className={styles.uploads}>
<div />
</div>
)
export { ImageEditor };

View file

@ -1,3 +1,14 @@
.uploads {
min-height: 200px;
padding-bottom: 60px;
box-sizing: border-box;
display: grid;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
}

View file

@ -10,6 +10,7 @@ import * as styles from './styles.scss';
import { connect } from 'react-redux';
import { selectNode } from '~/redux/node/selectors';
import { ImageEditor } from '~/components/editors/ImageEditor';
import { EditorPanel } from '~/components/editors/EditorPanel';
const mapStateToProps = selectNode;
const mapDispatchToProps = {};
@ -23,7 +24,12 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor }) => {
}, [setData, data]);
const buttons = (
<Padder>
<Padder style={{ position: 'relative' }}>
<EditorPanel
data={data}
setData={setData}
/>
<Group horizontal>
<InputText title="Название" value={data.title} handler={setTitle} />

View file

@ -2,15 +2,7 @@
flex: 1;
padding: $gap;
// padding-bottom: 0;
display: grid;
align-items: center;
justify-content: center;
grid-column-gap: $gap;
grid-row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@media (max-width: 600px) {
grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
}
position: relative;
}