muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

#23 fixed submit button appearance for lab

Browse source
This commit is contained in:
Fedor Katurov 2021-03-26 12:35:31 +07:00
parent 998a2e305a
commit ede5dfe17f
15 changed files with 82 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/bars/SubmitBar/index.tsx
View file

@ -1,28 +1,37 @@
import React, { FC, useCallback } from 'react';
import { connect } from 'react-redux';
import { useDispatch } from 'react-redux';
import { Icon } from '~/components/input/Icon';
import * as NODE_ACTIONS from '~/redux/node/actions';
import { DIALOGS } from '~/redux/modal/constants';
import { nodeCreate } from '~/redux/node/actions';
import styles from './styles.module.scss';
import { NODE_TYPES } from '~/redux/node/constants';
import classNames from 'classnames';
const mapStateToProps = null;
const mapDispatchToProps = {
nodeCreate: NODE_ACTIONS.nodeCreate,
// showDialog: MODAL_ACTIONS.modalShowDialog,
};
interface Props {
isLab?: boolean;
}
type IProps = typeof mapDispatchToProps & {};
const SubmitBar: FC<Props> = ({ isLab }) => {
const dispatch = useDispatch();
const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]);
const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]);
const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]);
const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]);
const onOpenImageEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.IMAGE, isLab)), [
dispatch,
]);
const onOpenTextEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.TEXT, isLab)), [
dispatch,
]);
const onOpenVideoEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.VIDEO, isLab)), [
dispatch,
]);
const onOpenAudioEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.AUDIO, isLab)), [
dispatch,
]);
return (
<div className={styles.wrap}>
<div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
<div className={styles.panel}>
<div onClick={onOpenImageEditor}>
<Icon icon="image" />
@ -48,9 +57,4 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
);
};
const SubmitBar = connect(
mapStateToProps,
mapDispatchToProps
)(SubmitBarUnconnected);
export { SubmitBar };

14
src/components/bars/SubmitBar/styles.module.scss
View file

@ -1,8 +1,11 @@
@import "src/styles/variables";
.wrap {
position: absolute;
right: -($bar_height + $gap);
position: fixed;
bottom: 0;
right: 50%;
transform: translate($content_width / 2 + $bar_height + $gap, 0);
z-index: 4;
&:hover {
.panel {
@ -11,9 +14,8 @@
}
@media (max-width: $content_width + ($bar_height + $gap) * 2) {
position: relative;
right: 0;
margin-left: $gap;
transform: translate(0, 0);
}
}
@ -34,6 +36,10 @@
width: 32px;
height: 32px;
}
.lab & {
background: $blue_gradient;
}
}
.panel {