mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
fixed typos
This commit is contained in:
muerwre
parent
6066c91060
commit
840af25df4
17 changed files with 438 additions and 125 deletions
|
|
@ -1,12 +1,12 @@
|
|||
import React, { FC } from "react";
|
||||
import { ScrollDialog } from "../ScrollDialog";
|
||||
import { IDialogProps } from "~/redux/modal/constants";
|
||||
import { useCloseOnEscape } from "~/utils/hooks";
|
||||
import { Group } from "~/components/containers/Group";
|
||||
import { InputText } from "~/components/input/InputText";
|
||||
import { Button } from "../../../components/input/Button/index";
|
||||
import { Padder } from "~/components/containers/Padder";
|
||||
import * as styles from "~/containers/examples/HorizontalExample/styles.scss";
|
||||
import React, { FC } from 'react';
|
||||
import { ScrollDialog } from '../ScrollDialog';
|
||||
import { IDialogProps } from '~/redux/modal/constants';
|
||||
import { useCloseOnEscape } from '~/utils/hooks';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '../../../components/input/Button/index';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import * as styles from '~/containers/examples/HorizontalExample/styles.scss';
|
||||
|
||||
type IProps = IDialogProps & {};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import React, { FC, useState } from "react";
|
||||
import { ScrollDialog } from "../ScrollDialog";
|
||||
import { IDialogProps } from "~/redux/modal/constants";
|
||||
import { useCloseOnEscape } from "~/utils/hooks";
|
||||
import { Group } from "~/components/containers/Group";
|
||||
import { InputText } from "~/components/input/InputText";
|
||||
import { Button } from "../../../components/input/Button/index";
|
||||
import { Padder } from "~/components/containers/Padder";
|
||||
import * as styles from "./styles.scss";
|
||||
import React, { FC, useState } from 'react';
|
||||
import { ScrollDialog } from '../ScrollDialog';
|
||||
import { IDialogProps } from '~/redux/modal/constants';
|
||||
import { useCloseOnEscape } from '~/utils/hooks';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '../../../components/input/Button/index';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import * as styles from './styles.scss';
|
||||
type IProps = IDialogProps & {};
|
||||
|
||||
const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
|
||||
const [username, setUserName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [username, setUserName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const title = <div>title</div>;
|
||||
|
||||
|
|
@ -30,6 +30,11 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
|
|||
<Padder>
|
||||
<div className={styles.wrap}>
|
||||
<Group>
|
||||
<h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
|
||||
|
||||
<div />
|
||||
<div />
|
||||
|
||||
<InputText title="Логин" handler={setUserName} value={username} />
|
||||
<InputText title="Пароль" handler={setPassword} value={password} />
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React, { Attributes, FC, useCallback } from "react";
|
||||
import * as styles from "./styles.scss";
|
||||
import { IState } from "~/redux/store";
|
||||
import * as ACTIONS from "~/redux/modal/actions";
|
||||
import { connect } from "react-redux";
|
||||
import { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants";
|
||||
import ReactDOM from "react-dom";
|
||||
import React, { Attributes, FC, useCallback } from 'react';
|
||||
import * as styles from './styles.scss';
|
||||
import { IState } from '~/redux/store';
|
||||
import * as ACTIONS from '~/redux/modal/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { DIALOG_CONTENT, IDialogProps } from '~/redux/modal/constants';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
const mapStateToProps = ({ modal }: IState) => ({ ...modal });
|
||||
const mapDispatchToProps = {
|
||||
modalSetShown: ACTIONS.modalSetShown,
|
||||
modalSetDialog: ACTIONS.modalSetDialog,
|
||||
modalShowDialog: ACTIONS.modalShowDialog
|
||||
modalShowDialog: ACTIONS.modalShowDialog,
|
||||
};
|
||||
|
||||
type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
|
||||
|
|
@ -20,7 +20,7 @@ const ModalUnconnected: FC<IProps> = ({
|
|||
modalSetDialog,
|
||||
modalShowDialog,
|
||||
is_shown,
|
||||
dialog
|
||||
dialog,
|
||||
}) => {
|
||||
const onRequestClose = useCallback(() => {
|
||||
modalSetShown(false);
|
||||
|
|
@ -37,19 +37,19 @@ const ModalUnconnected: FC<IProps> = ({
|
|||
<div className={styles.content_padder}>
|
||||
{React.createElement(DIALOG_CONTENT[dialog], {
|
||||
onRequestClose,
|
||||
onDialogChange: modalShowDialog
|
||||
onDialogChange: modalShowDialog,
|
||||
} as IDialogProps)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
const Modal = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapDispatchToProps,
|
||||
)(ModalUnconnected);
|
||||
|
||||
export { ModalUnconnected, Modal };
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ const ScrollDialog: FC<IProps> = ({
|
|||
children,
|
||||
title,
|
||||
buttons,
|
||||
size = "medium",
|
||||
width = 800,
|
||||
top_sticky,
|
||||
top_sticky_offset,
|
||||
|
|
@ -61,7 +60,7 @@ const ScrollDialog: FC<IProps> = ({
|
|||
<div
|
||||
className={classNames(styles.content, {
|
||||
has_buttons: !!buttons,
|
||||
has_title: !!title
|
||||
has_title: true
|
||||
})}
|
||||
style={{ flexBasis: width }}
|
||||
>
|
||||
|
|
@ -84,6 +83,14 @@ const ScrollDialog: FC<IProps> = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!title && (
|
||||
<div className={styles.top}>
|
||||
<div className={styles.wrap} style={{ flexBasis: width }}>
|
||||
<div className={styles.top_cap} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!buttons && (
|
||||
<div className={styles.bottom}>
|
||||
<div className={styles.wrap} style={{ flexBasis: width }}>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,13 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.top {
|
||||
.wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 15px;
|
||||
top: auto;
|
||||
|
|
@ -94,5 +101,22 @@
|
|||
|
||||
.children {
|
||||
background: $content_bg;
|
||||
radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.top_cap {
|
||||
height: $radius;
|
||||
background: $content_bg;
|
||||
border-radius: $radius $radius 0 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: $gap;
|
||||
background: linear-gradient($content_bg, transparentize($content_bg, 1));
|
||||
bottom: -$gap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { FC } from "react";
|
||||
import { Card } from "~/components/containers/Card";
|
||||
import * as styles from "./styles.scss";
|
||||
import {Padder} from "~/components/containers/Padder";
|
||||
import {Group} from "~/components/containers/Group";
|
||||
import {InputText} from "~/components/input/InputText";
|
||||
import {Button} from "~/components/input/Button";
|
||||
import {Filler} from "~/components/containers/Filler";
|
||||
import {Icon} from "~/components/input/Icon";
|
||||
import React, { FC } from 'react';
|
||||
import { Card } from '~/components/containers/Card';
|
||||
import * as styles from './styles.scss';
|
||||
import { Padder } from '~/components/containers/Padder';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
|
||||
interface IProps {}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue