From 4bf257d136e860491f34bcd74d0720552e9fac5c Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 17 Jan 2019 13:37:03 -0800 Subject: [PATCH] Refactor note editor (#11243) Simplified and removed a bunch of styles --- ui/src/dashboards/components/NoteEditor.scss | 52 ++++--- ui/src/dashboards/components/NoteEditor.tsx | 144 +++++++++++------- .../components/NoteEditorContainer.scss | 10 -- .../components/NoteEditorContainer.tsx | 25 ++- .../components/NoteEditorPreview.tsx | 12 +- .../dashboards/components/NoteEditorText.scss | 10 -- .../dashboards/components/NoteEditorText.tsx | 19 +-- .../code_mirror/_ThemeMarkdown.scss | 9 ++ .../components/CreateSourceOverlay.scss | 6 - 9 files changed, 155 insertions(+), 132 deletions(-) delete mode 100644 ui/src/dashboards/components/NoteEditorContainer.scss delete mode 100644 ui/src/dashboards/components/NoteEditorText.scss diff --git a/ui/src/dashboards/components/NoteEditor.scss b/ui/src/dashboards/components/NoteEditor.scss index f8ae0d74f5..61e8c499d8 100644 --- a/ui/src/dashboards/components/NoteEditor.scss +++ b/ui/src/dashboards/components/NoteEditor.scss @@ -1,25 +1,41 @@ @import "src/style/modules"; .note-editor { - height: 100%; display: flex; flex-direction: column; +} - .note-editor-text, .note-editor-preview { - flex: 1 1 0; - border-width: $ix-border; - border-style: solid; - border-radius: $ix-radius; - } +.note-editor--body { + flex: 1 1 40vh; + position: relative; +} - .note-editor-text { - border-color: $g5-pepper; - } +.note-editor--body .react-codemirror2, +.note-editor--preview { + position: absolute; + width: 100%; + height: 100%; +} - .note-editor-preview { - border-color: $g4-onyx; - padding: $ix-marg-b * 2; - } +.note-editor--body .react-codemirror2 { + z-index: 1; +} + +.note-editor--preview { + background-color: $g3-castle; + z-index: 2; + border-width: $ix-border; + border-style: solid; + border-radius: $ix-radius; + border-color: $g4-onyx; +} + +.note-editor--preview-scroll { + position: absolute !important; +} + +.note-editor--markdown-container { + padding: $ix-marg-c; } .note-editor--controls { @@ -33,14 +49,12 @@ } } -.note-editor--toggle { - display: flex; - justify-content: space-between; - align-items: center; +.note-editor--radio { + width: 220px; } .note-editor--footer { - font-size: 13px; + font-size: $form-sm-font; font-weight: 600; color: $g11-sidewalk; margin-top: $ix-marg-b; diff --git a/ui/src/dashboards/components/NoteEditor.tsx b/ui/src/dashboards/components/NoteEditor.tsx index e3344c0d65..208f3c9c49 100644 --- a/ui/src/dashboards/components/NoteEditor.tsx +++ b/ui/src/dashboards/components/NoteEditor.tsx @@ -1,9 +1,18 @@ // Libraries -import React, {SFC} from 'react' +import React, {PureComponent} from 'react' import {connect} from 'react-redux' +import classnames from 'classnames' // Components -import {Radio, SlideToggle, ComponentSize} from 'src/clockface' +import { + Radio, + SlideToggle, + ComponentSize, + ComponentSpacer, + ButtonShape, + Stack, + Alignment, +} from 'src/clockface' import NoteEditorText from 'src/dashboards/components/NoteEditorText' import NoteEditorPreview from 'src/dashboards/components/NoteEditorPreview' @@ -37,65 +46,84 @@ interface OwnProps {} type Props = StateProps & DispatchProps & OwnProps -const NoteEditor: SFC = props => { - const { - note, - isPreviewing, - toggleVisible, - showNoteWhenEmpty, - onSetIsPreviewing, - onToggleShowNoteWhenEmpty, - onSetNote, - } = props +class NoteEditor extends PureComponent { + public render() { + const {note, isPreviewing, onSetIsPreviewing, onSetNote} = this.props - return ( -
-
- - - Compose - - - Preview - - - {toggleVisible && ( -
- - + return ( +
+
+
+ + + Compose + + + Preview + +
- )} + {this.visibilityToggle} +
+
+ {this.noteEditorPreview} + +
+
+ Need help using Markdown? Check out{' '} + + this handy guide + +
- {isPreviewing ? ( - - ) : ( - - )} -
- Need help using Markdown? Check out{' '} - - this handy guide - -
-
- ) + ) + } + + private get controlsClassName(): string { + const {toggleVisible} = this.props + + return classnames('note-editor--controls', {centered: toggleVisible}) + } + + private get noteEditorPreview(): JSX.Element { + const {isPreviewing, note} = this.props + + if (isPreviewing) { + return + } + } + + private visibilityToggle(): JSX.Element { + const { + toggleVisible, + showNoteWhenEmpty, + onToggleShowNoteWhenEmpty, + } = this.props + + if (toggleVisible) { + return ( + + + + + ) + } + } } const mstp = (state: AppState) => { diff --git a/ui/src/dashboards/components/NoteEditorContainer.scss b/ui/src/dashboards/components/NoteEditorContainer.scss deleted file mode 100644 index ac8d03a947..0000000000 --- a/ui/src/dashboards/components/NoteEditorContainer.scss +++ /dev/null @@ -1,10 +0,0 @@ -.note-editor-container .overlay--container { - height: 80%; - max-height: 600px; - display: flex; - flex-direction: column; -} - -.note-editor-container .overlay--body { - height: 100%; -} diff --git a/ui/src/dashboards/components/NoteEditorContainer.tsx b/ui/src/dashboards/components/NoteEditorContainer.tsx index ad0393c036..6c0c2ddc37 100644 --- a/ui/src/dashboards/components/NoteEditorContainer.tsx +++ b/ui/src/dashboards/components/NoteEditorContainer.tsx @@ -10,6 +10,7 @@ import { OverlayHeading, OverlayTechnology, OverlayContainer, + OverlayFooter, Button, ComponentColor, ComponentStatus, @@ -26,9 +27,6 @@ import {notify} from 'src/shared/actions/notifications' // Utils import {savingNoteFailed} from 'src/shared/copy/v2/notifications' -// Styles -import 'src/dashboards/components/NoteEditorContainer.scss' - // Types import {RemoteDataState} from 'src/types' import {AppState} from 'src/types/v2' @@ -65,20 +63,19 @@ class NoteEditorContainer extends PureComponent {
- -
-
- + + +
diff --git a/ui/src/dashboards/components/NoteEditorPreview.tsx b/ui/src/dashboards/components/NoteEditorPreview.tsx index 91c571bd91..2767d8516f 100644 --- a/ui/src/dashboards/components/NoteEditorPreview.tsx +++ b/ui/src/dashboards/components/NoteEditorPreview.tsx @@ -9,9 +9,15 @@ interface Props { const NoteEditorPreview: SFC = props => { return ( -
- - +
+ +
+ +
) diff --git a/ui/src/dashboards/components/NoteEditorText.scss b/ui/src/dashboards/components/NoteEditorText.scss deleted file mode 100644 index 42abe2f71f..0000000000 --- a/ui/src/dashboards/components/NoteEditorText.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "src/style/modules"; - -.note-editor-text { - background-color: $g2-kevlar; - overflow: hidden; - - .react-codemirror2 { - padding: $ix-marg-b + $ix-marg-a; - } -} diff --git a/ui/src/dashboards/components/NoteEditorText.tsx b/ui/src/dashboards/components/NoteEditorText.tsx index fd4f9af086..4637f0828d 100644 --- a/ui/src/dashboards/components/NoteEditorText.tsx +++ b/ui/src/dashboards/components/NoteEditorText.tsx @@ -5,9 +5,6 @@ import {Controlled as ReactCodeMirror} from 'react-codemirror2' // Utils import {humanizeNote} from 'src/dashboards/utils/notes' -// Styles -import 'src/dashboards/components/NoteEditorText.scss' - const OPTIONS = { mode: 'markdown', theme: 'markdown', @@ -32,15 +29,13 @@ class NoteEditorText extends PureComponent { const {note} = this.props return ( -
- -
+ ) } diff --git a/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss b/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss index 1b4575dd60..e0606c1804 100644 --- a/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss +++ b/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss @@ -7,11 +7,20 @@ .cm-s-markdown { background-color: $g2-kevlar; color: $g15-platinum; + padding: 12px; + border: 2px solid $g5-pepper; + transition: border-color 0.25s ease, box-shadow 0.25s ease; &:hover { + border-color: $g7-graphite; cursor: text; } + &.CodeMirror-focused { + border-color: $c-pool; + box-shadow: 0 0 6px 0 $c-pool; + } + .cm-italic { font-style: italic; } diff --git a/ui/src/sources/components/CreateSourceOverlay.scss b/ui/src/sources/components/CreateSourceOverlay.scss index 8e51082da1..5d58048d1a 100644 --- a/ui/src/sources/components/CreateSourceOverlay.scss +++ b/ui/src/sources/components/CreateSourceOverlay.scss @@ -1,9 +1,3 @@ -.create-source-overlay--heading-buttons { - button { - margin-left: 5px; - } -} - .create-source-overlay { .form--element { margin-bottom: 15px;