Refactor note editor (#11243)

Simplified and removed a bunch of styles
2019-01-17 13:37:03 -08:00 · 2019-01-17 13:37:03 -08:00 · 4bf257d136
parent b031e22003
commit 4bf257d136
9 changed files with 155 additions and 132 deletions
--- 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;
--- 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> = props => {
-  const {
-    note,
-    isPreviewing,
-    toggleVisible,
-    showNoteWhenEmpty,
-    onSetIsPreviewing,
-    onToggleShowNoteWhenEmpty,
-    onSetNote,
-  } = props
+class NoteEditor extends PureComponent<Props> {
+  public render() {
+    const {note, isPreviewing, onSetIsPreviewing, onSetNote} = this.props

-  return (
-    <div className="note-editor">
-      <div
-        className={`note-editor--controls ${toggleVisible ? '' : 'centered'}`}
-      >
-        <Radio>
-          <Radio.Button
-            value={false}
-            active={!isPreviewing}
-            onClick={onSetIsPreviewing}
-          >
-            Compose
-          </Radio.Button>
-          <Radio.Button
-            value={true}
-            active={isPreviewing}
-            onClick={onSetIsPreviewing}
-          >
-            Preview
-          </Radio.Button>
-        </Radio>
-        {toggleVisible && (
-          <div className="note-editor--toggle">
-            <SlideToggle.Label text="Show note when query returns no data" />
-            <SlideToggle
-              active={showNoteWhenEmpty}
-              size={ComponentSize.ExtraSmall}
-              onChange={onToggleShowNoteWhenEmpty}
-            />
+    return (
+      <div className="note-editor">
+        <div className={this.controlsClassName}>
+          <div className="note-editor--radio">
+            <Radio shape={ButtonShape.StretchToFit}>
+              <Radio.Button
+                value={false}
+                active={!isPreviewing}
+                onClick={onSetIsPreviewing}
+              >
+                Compose
+              </Radio.Button>
+              <Radio.Button
+                value={true}
+                active={isPreviewing}
+                onClick={onSetIsPreviewing}
+              >
+                Preview
+              </Radio.Button>
+            </Radio>
          </div>
-        )}
+          {this.visibilityToggle}
+        </div>
+        <div className="note-editor--body">
+          {this.noteEditorPreview}
+          <NoteEditorText note={note} onChangeNote={onSetNote} />
+        </div>
+        <div className="note-editor--footer">
+          Need help using Markdown? Check out{' '}
+          <a
+            href="https://daringfireball.net/projects/markdown/syntax"
+            target="_blank"
+          >
+            this handy guide
+          </a>
+        </div>
      </div>
-      {isPreviewing ? (
-        <NoteEditorPreview note={note} />
-      ) : (
-        <NoteEditorText note={note} onChangeNote={onSetNote} />
-      )}
-      <div className="note-editor--footer">
-        Need help using Markdown? Check out{' '}
-        <a
-          href="https://daringfireball.net/projects/markdown/syntax"
-          target="_blank"
-        >
-          this handy guide
-        </a>
-      </div>
-    </div>
-  )
+    )
+  }
+
+  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 <NoteEditorPreview note={note} />
+    }
+  }
+
+  private visibilityToggle(): JSX.Element {
+    const {
+      toggleVisible,
+      showNoteWhenEmpty,
+      onToggleShowNoteWhenEmpty,
+    } = this.props
+
+    if (toggleVisible) {
+      return (
+        <ComponentSpacer stackChildren={Stack.Columns} align={Alignment.Right}>
+          <SlideToggle.Label text="Show note when query returns no data" />
+          <SlideToggle
+            active={showNoteWhenEmpty}
+            size={ComponentSize.ExtraSmall}
+            onChange={onToggleShowNoteWhenEmpty}
+          />
+        </ComponentSpacer>
+      )
+    }
+  }
 }

 const mstp = (state: AppState) => {
--- a/ui/src/dashboards/components/NoteEditorContainer.scss
+++ b/ui/src/dashboards/components/NoteEditorContainer.scss
@ -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%;
-}
--- 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<Props, State> {
      <div className="note-editor-container">
        <OverlayTechnology visible={overlayVisible}>
          <OverlayContainer>
-            <OverlayHeading title={this.overlayTitle}>
-              <div className="create-source-overlay--heading-buttons">
-                <Button text="Cancel" onClick={onHide} />
-                <Button
-                  text="Save"
-                  color={ComponentColor.Success}
-                  status={this.saveButtonStatus}
-                  onClick={this.handleSave}
-                />
-              </div>
-            </OverlayHeading>
+            <OverlayHeading title={this.overlayTitle} onDismiss={onHide} />
            <OverlayBody>
              <NoteEditor />
            </OverlayBody>
+            <OverlayFooter>
+              <Button text="Cancel" onClick={onHide} />
+              <Button
+                text="Save"
+                color={ComponentColor.Success}
+                status={this.saveButtonStatus}
+                onClick={this.handleSave}
+              />
+            </OverlayFooter>
          </OverlayContainer>
        </OverlayTechnology>
      </div>
--- a/ui/src/dashboards/components/NoteEditorPreview.tsx
+++ b/ui/src/dashboards/components/NoteEditorPreview.tsx
@ -9,9 +9,15 @@ interface Props {

 const NoteEditorPreview: SFC<Props> = props => {
  return (
-    <div className="note-editor-preview markdown-format">
-      <FancyScrollbar>
-        <ReactMarkdown source={props.note} escapeHtml={true} />
+    <div className="note-editor--preview">
+      <FancyScrollbar className="note-editor--preview-scroll">
+        <div className="note-editor--markdown-container">
+          <ReactMarkdown
+            source={props.note}
+            escapeHtml={true}
+            className="markdown-format"
+          />
+        </div>
      </FancyScrollbar>
    </div>
  )
--- a/ui/src/dashboards/components/NoteEditorText.scss
+++ b/ui/src/dashboards/components/NoteEditorText.scss
@ -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;
-  }
-}
--- 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<Props, {}> {
    const {note} = this.props

    return (
-      <div className="note-editor-text">
-        <ReactCodeMirror
-          autoCursor={true}
-          value={humanizeNote(note)}
-          options={OPTIONS}
-          onBeforeChange={this.handleChange}
-          onTouchStart={noOp}
-        />
-      </div>
+      <ReactCodeMirror
+        autoCursor={true}
+        value={humanizeNote(note)}
+        options={OPTIONS}
+        onBeforeChange={this.handleChange}
+        onTouchStart={noOp}
+      />
    )
  }

--- 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;
  }
--- 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;