From 0c2229d9aff1b24792f6bfcac1f2193ba1f5f26a Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 3 Nov 2019 21:15:38 +0700 Subject: [PATCH] better scroll dialog --- package-lock.json | 5 ++ package.json | 1 + .../dialogs/BetterScrollDialog/index.tsx | 64 ++++++++++++++ .../dialogs/BetterScrollDialog/styles.scss | 84 +++++++++++++++++++ src/containers/dialogs/EditorDialog/index.tsx | 7 +- src/containers/dialogs/LoginDialog/index.tsx | 17 ++-- .../dialogs/LoginDialog/styles.scss | 23 +++-- src/containers/dialogs/Modal/index.tsx | 21 +++-- src/containers/dialogs/TestDialog/index.tsx | 16 ++++ src/containers/dialogs/TestDialog/styles.scss | 4 + src/redux/modal/constants.ts | 3 + src/redux/modal/reducer.ts | 2 +- src/styles/variables.scss | 1 + 13 files changed, 221 insertions(+), 27 deletions(-) create mode 100644 src/containers/dialogs/BetterScrollDialog/index.tsx create mode 100644 src/containers/dialogs/BetterScrollDialog/styles.scss create mode 100644 src/containers/dialogs/TestDialog/index.tsx create mode 100644 src/containers/dialogs/TestDialog/styles.scss diff --git a/package-lock.json b/package-lock.json index ce268ac4..53ff1d10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3028,6 +3028,11 @@ } } }, + "body-scroll-lock": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz", + "integrity": "sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==" + }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", diff --git a/package.json b/package.json index 9d36ae1e..631e9e77 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@typescript-eslint/parser": "^1.13.0", "axios": "^0.18.0", "babel-runtime": "^6.26.0", + "body-scroll-lock": "^2.6.4", "classnames": "^2.2.6", "clean-webpack-plugin": "^0.1.9", "connected-react-router": "^6.3.2", diff --git a/src/containers/dialogs/BetterScrollDialog/index.tsx b/src/containers/dialogs/BetterScrollDialog/index.tsx new file mode 100644 index 00000000..a7b9871d --- /dev/null +++ b/src/containers/dialogs/BetterScrollDialog/index.tsx @@ -0,0 +1,64 @@ +import React, { + FC, + MouseEventHandler, + ReactChild, + useCallback, + useEffect, + useState, + useRef, +} from 'react'; +// import { DialogPanel } from '~/components/panels/DialogPanel'; +import classNames from 'classnames'; +import { Scroll } from '~/components/containers/Scroll'; +import * as styles from './styles.scss'; +import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'; +import { Icon } from '~/components/input/Icon'; + +interface IProps { + children: React.ReactChild; + header?: JSX.Element; + footer?: JSX.Element; + size?: 'medium' | 'big'; + width?: number; + error?: string; + + onOverlayClick?: MouseEventHandler; + onRefCapture?: (ref: any) => void; + onClose?: () => void; +} + +const BetterScrollDialog: FC = ({ + children, + header, + footer, + width = 600, + error, + onOverlayClick, + onRefCapture, + onClose, +}) => { + const ref = useRef(null); + + useEffect(() => { + disableBodyScroll(ref.current); + + return () => enableBodyScroll(ref.current); + }, [ref]); + + return ( +
+
+ {onClose && ( +
+ +
+ )} + {header &&
{header}
} +
{children}
+ {footer &&
{footer}
} +
+
+ ); +}; + +export { BetterScrollDialog }; diff --git a/src/containers/dialogs/BetterScrollDialog/styles.scss b/src/containers/dialogs/BetterScrollDialog/styles.scss new file mode 100644 index 00000000..3a99f0e1 --- /dev/null +++ b/src/containers/dialogs/BetterScrollDialog/styles.scss @@ -0,0 +1,84 @@ +.wrap { + width: 100vw; + height: 100vh; + background: transparentize(darken($content_bg, 4%), 0.5); + display: flex; + align-items: center; + justify-content: center; + padding: 40px; + box-sizing: border-box; +} + +.container { + display: flex; + align-items: stretch; + justify-content: center; + flex-direction: column; + min-width: $cell; + max-width: 400px; + max-height: 100%; + width: 100%; + position: relative; + + & > div:nth-child(2) { + border-top-left-radius: $dialog_radius; + border-top-right-radius: $dialog_radius; + } + + & > div:last-child { + border-bottom-left-radius: $dialog_radius; + border-bottom-right-radius: $dialog_radius; + } +} + +.header, +.footer { + @include outer_shadow(); + + padding: 10px; + background: darken($content_bg, 2%); +} + +.body { + @include outer_shadow(); + + overflow: auto; + flex: 1; + background: $content_bg; +} + +@keyframes appear { + 0% { + top: -48px; + } + 100% { + top: -58px; + } +} + +.close { + background: darken($content_bg, 2%); + width: 48px; + height: 48px; + position: absolute; + top: -58px; + right: 50%; + transform: translate(50%, 0); + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + cursor: pointer; + transition: transform 0.25s, background-color 0.25s; + animation: appear 0.5s forwards; + + &:hover { + background-color: $red; + transform: translate(50%, -5px); + } + + svg { + width: 24px; + height: 24px; + } +} diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 5430e4ca..cafd4a10 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -14,6 +14,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions'; import { selectUploads } from '~/redux/uploads/selectors'; import { ERROR_LITERAL } from '~/constants/errors'; import { NODE_EDITORS, EMPTY_NODE } from '~/redux/node/constants'; +import { BetterScrollDialog } from '../BetterScrollDialog'; const mapStateToProps = state => { const { editor, errors } = selectNode(state); @@ -90,8 +91,8 @@ const EditorDialogUnconnected: FC = ({ return (
- = ({ setTemp, })} - +
); }; diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 711709fe..9e484b68 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -11,6 +11,7 @@ import * as styles from './styles.scss'; import { selectAuthLogin } from '~/redux/auth/selectors'; import * as ACTIONS from '~/redux/auth/actions'; import { API } from '~/constants/api'; +import { BetterScrollDialog } from '../BetterScrollDialog'; const mapStateToProps = selectAuthLogin; @@ -47,20 +48,18 @@ const LoginDialogUnconnected: FC = ({ }, [username, password]); const buttons = ( - - - - - + + + ); useCloseOnEscape(onRequestClose); return (
- +
@@ -77,7 +76,7 @@ const LoginDialogUnconnected: FC = ({
- +
); }; diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss index cd35152c..2d162a76 100644 --- a/src/containers/dialogs/LoginDialog/styles.scss +++ b/src/containers/dialogs/LoginDialog/styles.scss @@ -1,14 +1,17 @@ -$vk_color: darken(desaturate($blue, 70%), 20%); +$vk_color: darken(desaturate($blue, 100%), 30%); .wrap { display: flex; align-items: flex-start; justify-content: center; - padding: 20px; - margin: auto; + padding: $gap; + + button { + text-align: left; + } h2 { - margin-bottom: $gap * 3 !important; + margin: $gap 0 $gap * 4 !important; } } @@ -20,8 +23,8 @@ $vk_color: darken(desaturate($blue, 70%), 20%); svg { fill: $vk_color; margin-right: $gap; - width: 24px; - height: 24px; + // width: 24px; + // height: 24px; } } @@ -30,3 +33,11 @@ $vk_color: darken(desaturate($blue, 70%), 20%); padding: $gap * 2 0 0 0; border-top: 1px solid black; } + +.footer { + padding: $gap; + + button { + // text-align: left; + } +} diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx index d0470af1..b18d75f5 100644 --- a/src/containers/dialogs/Modal/index.tsx +++ b/src/containers/dialogs/Modal/index.tsx @@ -33,14 +33,10 @@ const ModalUnconnected: FC = ({
-
-
- {React.createElement(DIALOG_CONTENT[dialog], { - onRequestClose, - onDialogChange: modalShowDialog, - })} -
-
+ {React.createElement(DIALOG_CONTENT[dialog], { + onRequestClose, + onDialogChange: modalShowDialog, + })}
, document.body @@ -53,3 +49,12 @@ const Modal = connect( )(ModalUnconnected); export { ModalUnconnected, Modal }; + +/* + +
+
+
+
+ +*/ diff --git a/src/containers/dialogs/TestDialog/index.tsx b/src/containers/dialogs/TestDialog/index.tsx new file mode 100644 index 00000000..d8439586 --- /dev/null +++ b/src/containers/dialogs/TestDialog/index.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react'; +import { BetterScrollDialog } from '../BetterScrollDialog'; +import * as styles from './styles.scss'; + +interface IProps {} + +const TestDialog: FC = ({}) => ( + HEAD
} + footer={
FOOTER
} + > +
+ +); + +export { TestDialog }; diff --git a/src/containers/dialogs/TestDialog/styles.scss b/src/containers/dialogs/TestDialog/styles.scss new file mode 100644 index 00000000..33096725 --- /dev/null +++ b/src/containers/dialogs/TestDialog/styles.scss @@ -0,0 +1,4 @@ +.example { + height: 1200px; + background: yellow; +} diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts index 0d12834b..4e5977c2 100644 --- a/src/redux/modal/constants.ts +++ b/src/redux/modal/constants.ts @@ -6,6 +6,7 @@ import { EditorDialogText } from '~/containers/editors/EditorDialogText'; import { EditorDialogVideo } from '~/containers/editors/EditorDialogVideo'; import { EditorDialogAudio } from '~/containers/editors/EditorDialogAudio'; import { NODE_TYPES } from '../node/constants'; +import { TestDialog } from '~/containers/dialogs/TestDialog'; export const MODAL_ACTIONS = { SET_SHOWN: 'MODAL.SET_SHOWN', @@ -20,6 +21,7 @@ export const DIALOGS = { EDITOR_AUDIO: 'EDITOR_AUDIO', LOGIN: 'LOGIN', LOADING: 'LOADING', + TEST: 'TEST', }; export const DIALOG_CONTENT = { @@ -29,6 +31,7 @@ export const DIALOG_CONTENT = { [DIALOGS.EDITOR_AUDIO]: EditorDialogAudio, [DIALOGS.LOGIN]: LoginDialog, [DIALOGS.LOADING]: LoadingDialog, + [DIALOGS.TEST]: TestDialog, }; export const NODE_EDITOR_DIALOGS = { diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts index 2a7e472a..37f3ffdf 100644 --- a/src/redux/modal/reducer.ts +++ b/src/redux/modal/reducer.ts @@ -10,7 +10,7 @@ export interface IModalState { const INITIAL_STATE: IModalState = { is_shown: false, - dialog: DIALOGS.EDITOR_TEXT, + dialog: DIALOGS.LOGIN, }; export default createReducer(INITIAL_STATE, MODAL_HANDLERS); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 06f41bbf..1c3ceff9 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -12,6 +12,7 @@ $radius: 4px; $cell_radius: $radius; $panel_radius: $radius; $input_radius: $radius; +$dialog_radius: $radius * 2; $input_height: 36px; $info_height: 24px;