From 14c5f67d493a8b797953eec4ecc8ca141c87214a Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 29 Jul 2019 18:51:10 +0700 Subject: [PATCH] editor scrollbars --- package-lock.json | 51 +++++++++ package.json | 3 +- src/components/containers/CellGrid/index.tsx | 25 ++++ .../containers/CellGrid/styles.scss | 6 + src/components/containers/Group/index.tsx | 3 + src/components/containers/Group/styles.scss | 4 + src/components/containers/Panel/index.tsx | 19 ++++ src/components/containers/Panel/styles.scss | 3 + src/components/containers/Scroll/index.tsx | 45 ++++++++ src/components/containers/Scroll/styles.scss | 107 ++++++++++++++++++ src/components/input/TextInput/index.tsx | 17 ++- .../TextInput/{style.scss => styles.scss} | 15 ++- .../examples/EditorExample/index.tsx | 35 +++++- .../examples/EditorExample/styles.scss | 28 ++++- src/styles/colors.scss | 6 + 15 files changed, 349 insertions(+), 18 deletions(-) create mode 100644 src/components/containers/CellGrid/index.tsx create mode 100644 src/components/containers/CellGrid/styles.scss create mode 100644 src/components/containers/Panel/index.tsx create mode 100644 src/components/containers/Panel/styles.scss create mode 100644 src/components/containers/Scroll/index.tsx create mode 100644 src/components/containers/Scroll/styles.scss rename src/components/input/TextInput/{style.scss => styles.scss} (65%) diff --git a/package-lock.json b/package-lock.json index 5ccdad32..45787a04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2820,6 +2820,11 @@ } } }, + "add-px-to-style": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/add-px-to-style/-/add-px-to-style-1.0.0.tgz", + "integrity": "sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo=" + }, "adjust-sourcemap-loader": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz", @@ -6632,6 +6637,16 @@ "utila": "~0.4" } }, + "dom-css": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/dom-css/-/dom-css-2.1.0.tgz", + "integrity": "sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=", + "requires": { + "add-px-to-style": "1.0.0", + "prefix-style": "2.0.1", + "to-camel-case": "1.0.0" + } + }, "dom-helpers": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", @@ -13106,6 +13121,11 @@ "uniqs": "^2.0.0" } }, + "prefix-style": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/prefix-style/-/prefix-style-2.0.1.tgz", + "integrity": "sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY=" + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -15963,12 +15983,25 @@ "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=", "dev": true }, + "to-camel-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz", + "integrity": "sha1-GlYFSy+daWKYzmamCJcyK29CPkY=", + "requires": { + "to-space-case": "^1.0.0" + } + }, "to-fast-properties": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", "dev": true }, + "to-no-case": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz", + "integrity": "sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -16011,6 +16044,14 @@ "repeat-string": "^1.6.1" } }, + "to-space-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz", + "integrity": "sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=", + "requires": { + "to-no-case": "^1.0.0" + } + }, "toposort": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz", @@ -16082,6 +16123,16 @@ "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", "dev": true }, + "tt-react-custom-scrollbars": { + "version": "4.2.1-tt2", + "resolved": "https://registry.npmjs.org/tt-react-custom-scrollbars/-/tt-react-custom-scrollbars-4.2.1-tt2.tgz", + "integrity": "sha512-gMEVHHOClNJXM1d/p4PrLdXtCU2JzWRtcZdzUkXgck8sgzkxwFwSDNc3scnTk21sSKG2GSgf7G54sboXwsMVlg==", + "requires": { + "dom-css": "^2.0.0", + "prop-types": "^15.5.10", + "raf": "^3.1.0" + } + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", diff --git a/package.json b/package.json index 26e989e6..5d7b5e24 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "sass-loader": "^7.1.0", "sass-resources-loader": "^2.0.0", "scrypt": "^6.0.3", - "throttle-debounce": "^2.1.0" + "throttle-debounce": "^2.1.0", + "tt-react-custom-scrollbars": "latest" } } diff --git a/src/components/containers/CellGrid/index.tsx b/src/components/containers/CellGrid/index.tsx new file mode 100644 index 00000000..b8204b70 --- /dev/null +++ b/src/components/containers/CellGrid/index.tsx @@ -0,0 +1,25 @@ +import React, { FC, HTMLAttributes, ReactChild, ReactChildren } from 'react'; +import * as styles from './styles.scss'; +import classNames = require("classnames"); + +type IProps = HTMLAttributes & { + children: any; + size: number; +} + +const CellGrid: FC = ({ + children, + size, + className, + ...props +}) => ( +
+ {children} +
+); + +export { CellGrid }; diff --git a/src/components/containers/CellGrid/styles.scss b/src/components/containers/CellGrid/styles.scss new file mode 100644 index 00000000..0d7999a8 --- /dev/null +++ b/src/components/containers/CellGrid/styles.scss @@ -0,0 +1,6 @@ +.grid { + display: grid; + grid-auto-rows: 1fr; + grid-column-gap: $gap; + grid-row-gap: $gap; +} diff --git a/src/components/containers/Group/index.tsx b/src/components/containers/Group/index.tsx index 2385ce77..bd18ac2a 100644 --- a/src/components/containers/Group/index.tsx +++ b/src/components/containers/Group/index.tsx @@ -7,6 +7,7 @@ type IProps = React.HTMLAttributes & { top?: boolean; bottom?: boolean; wrap?: boolean; + seamless?: boolean; }; const Group: FC = ({ @@ -16,6 +17,7 @@ const Group: FC = ({ top = false, bottom = false, wrap = false, + seamless = false, ...props }) => (
= ({ [styles.top]: top, [styles.bottom]: bottom, [styles.wrap]: wrap, + [styles.seamless]: seamless, }, className, )} diff --git a/src/components/containers/Group/styles.scss b/src/components/containers/Group/styles.scss index 75f7c985..98cc0d6e 100644 --- a/src/components/containers/Group/styles.scss +++ b/src/components/containers/Group/styles.scss @@ -39,4 +39,8 @@ &.wrap { flex-wrap: wrap; } + + &.seamless > * { + margin: 0; + } } diff --git a/src/components/containers/Panel/index.tsx b/src/components/containers/Panel/index.tsx new file mode 100644 index 00000000..b7b43e74 --- /dev/null +++ b/src/components/containers/Panel/index.tsx @@ -0,0 +1,19 @@ +import React, { FC, HTMLAttributes } from 'react'; +import * as styles from './styles.scss'; +import classNames = require("classnames"); + +type IProps = HTMLAttributes & { + +} + +const Panel: FC = ({ + className, + children, + ...props +}) => ( +
+ {children} +
+); + +export { Panel }; diff --git a/src/components/containers/Panel/styles.scss b/src/components/containers/Panel/styles.scss new file mode 100644 index 00000000..c90e04dd --- /dev/null +++ b/src/components/containers/Panel/styles.scss @@ -0,0 +1,3 @@ +.panel { + @include outer_shadow(); +} diff --git a/src/components/containers/Scroll/index.tsx b/src/components/containers/Scroll/index.tsx new file mode 100644 index 00000000..fee4fb96 --- /dev/null +++ b/src/components/containers/Scroll/index.tsx @@ -0,0 +1,45 @@ +import React, { MouseEventHandler, useEffect, useState } from 'react'; +import * as styles from './styles.scss'; +import { Scrollbars } from 'tt-react-custom-scrollbars'; +import classNames from 'classnames'; + +interface IProps { + children: Element | React.ReactChild; + style?: React.CSSProperties; + className?: string; + autoHeight?: boolean; + autoHeightMax?: number; + onRef?: (el: any) => void; + onScroll?: MouseEventHandler; + onScrollStop?: MouseEventHandler; +} + +export const Scroll = ({ + children, + className = '', + onRef = null, + ...props +}: IProps) => { + const [ref, setRef] = useState(null); + + useEffect(() => { + if (onRef && ref) return onRef(ref); + }, [ref, onRef]); + + return ( +
} + renderTrackVertical={data =>
} + renderThumbHorizontal={data =>
} + renderThumbVertical={data =>
} + renderView = {data =>
} + hideTracksWhenNotNeeded + universal + ref={setRef} + { ...props } + > + {children} + + ); +}; diff --git a/src/components/containers/Scroll/styles.scss b/src/components/containers/Scroll/styles.scss new file mode 100644 index 00000000..a8989f7a --- /dev/null +++ b/src/components/containers/Scroll/styles.scss @@ -0,0 +1,107 @@ +.container { + min-height: 50px; +} + +.track_vertical { + height: 100%; + width: 20px !important; + position: absolute; + right: 0; + top: 0; + opacity: $scroll_inactive_opacity; + transition: opacity 0.25s; + padding: $gap 0; + box-sizing: border-box; + z-index: 1; + + &:hover, &:active { + opacity: 0.7; + } + + &::after { + content: ' '; + width: 1px; + background: $scroll_color; + position: absolute; + left: 12px; + top: 0; + height: 100%; + opacity: 0.5; + z-index: 1; + } +} + +.thumb_vertical { + position: absolute; + left: 0; + top: 0; + width: 100%; + display: flex; + align-items: stretch; + justify-content: center; + cursor: grab; + + &::after { + position: absolute; + content: ' '; + width: 5px; + top: 0; + left: 10px; + height: 100%; + border-radius: 3px; + background: $scroll_color; + z-index: 2; + } +} + +.track_horizontal { + height: 20px !important; + width: 100% !important; + position: absolute; + left: 0; + bottom: 0; + opacity: 0.3; + transition: opacity 0.25s; + padding: 0 $gap; + box-sizing: border-box; + z-index: 10; + + &:hover, &:active { + opacity: 0.7; + } + + &::after { + content: ' '; + height: 1px; + background: $scroll_color; + position: absolute; + top: 12px; + left: 0; + width: 100%; + opacity: 0.5; + z-index: 1; + } +} + +.thumb_horizontal { + position: absolute; + left: 0; + top: 0; + width: 100%; + display: flex; + align-items: stretch; + justify-content: center; + cursor: grab; + + &::after { + position: absolute; + content: ' '; + height: 5px; + top: 10px; + left: 0; + width: 100%; + border-radius: 3px; + background: $scroll_color; + z-index: 2; + } +} diff --git a/src/components/input/TextInput/index.tsx b/src/components/input/TextInput/index.tsx index eaf22641..d3eff10b 100644 --- a/src/components/input/TextInput/index.tsx +++ b/src/components/input/TextInput/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; - -const style = require('./style.scss'); +import * as styles from './styles.scss'; interface ITextInputProps { type?: 'text' | 'password', @@ -19,16 +18,16 @@ export const TextInput: React.FunctionComponent = ({ value='', }) => (
- { - label && -
{label}
- } -
+
+ { + label && +
{label}
+ } = () => ( - +
- editor + + + + + + + +
+
+
+
+ + + + + + Cover panel +
- panel + + + + panel + + +
diff --git a/src/containers/examples/EditorExample/styles.scss b/src/containers/examples/EditorExample/styles.scss index 32442150..57a04c00 100644 --- a/src/containers/examples/EditorExample/styles.scss +++ b/src/containers/examples/EditorExample/styles.scss @@ -3,6 +3,7 @@ align-items: stretch; justify-content: center; display: flex; + background: $editor_bg; } .group { @@ -13,10 +14,35 @@ } .panel { - background: red; + background: $editor_panel_bg; flex: 0 0 33%; + border-radius: 0 $radius $radius 0; + padding: $gap; + box-sizing: border-box; + @include outer_shadow(); } .editor { flex: 1; + display: flex; + align-items: stretch; + flex-direction: column; +} + +.editor_panel { + padding: $gap; +} + +.editor_image_panel { + flex: 1; +} + +.editor_image_container { + flex: 1; +} + +.editor_image { + background: lighten($main_bg_color, 20%); + padding-bottom: 100%; + border-radius: $radius; } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 7dca1671..be12b479 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -36,3 +36,9 @@ $panel_bg: #191919; $node_bg: #111111; $node_image_bg: #131313; $node_title_background: #191919; + +$editor_panel_bg: lighten($main_bg_color, 5%); +$editor_bg: lighten($main_bg_color, 10%); + +$scroll_color: $red_gradient; +$scroll_inactive_opacity: 0.5;