From 5c2c8d40908223c84024dc03b34de29bb9cb0cf9 Mon Sep 17 00:00:00 2001
From: alexpaxton <alex@influxdata.com>
Date: Wed, 5 Dec 2018 16:08:00 -0800
Subject: [PATCH] Misc. Polish (#1760)

* Move my profile to top of nav and use cubo as icon

* Replace slide toggle label with official slide toggle label

* Polish appearance of task editing page

* Improve UX of note editor

* Adjust cell note indicator

* Make search widget bigger
---
 .../components/slide_toggle/SlideToggle.scss  |  1 +
 ui/src/dashboards/components/NoteEditor.scss  | 25 +++++----
 ui/src/dashboards/components/NoteEditor.tsx   | 15 ++++--
 .../dashboards/components/NoteEditorText.scss |  3 +-
 .../dashboards/components/NoteEditorText.tsx  |  1 +
 .../dashboard_index/DashboardsIndex.tsx       |  2 +-
 ui/src/external/codemirror.ts                 | 52 +++++++++++++++++++
 ui/src/pageLayout/containers/Nav.tsx          | 19 +++----
 .../components/TimeMachineFluxEditor.scss     | 16 +++---
 ui/src/shared/components/cells/Cell.scss      | 23 +++++---
 .../components/cells/CellHeaderNote.tsx       |  2 +-
 .../cells/CellHeaderNoteTooltip.scss          |  1 -
 .../code_mirror/CodeMirrorTheme.scss          |  6 +--
 .../code_mirror/_ThemeMarkdown.scss           |  1 +
 .../code_mirror/_ThemeTimeMachine.scss        |  2 +-
 .../components/search_widget/SearchWidget.tsx |  2 +-
 ui/src/style/chronograf.scss                  |  2 -
 ui/src/tasks/components/TaskForm.scss         | 36 +++++++++++++
 ui/src/tasks/components/TaskForm.tsx          |  9 ++--
 ui/src/tasks/components/TaskPage.scss         | 33 ------------
 .../components/TaskScheduleFormField.tsx      |  4 +-
 ui/src/tasks/components/TasksHeader.tsx       |  2 +-
 ui/src/tasks/components/TasksPage.scss        |  8 ---
 23 files changed, 169 insertions(+), 96 deletions(-)
 create mode 100644 ui/src/tasks/components/TaskForm.scss
 delete mode 100644 ui/src/tasks/components/TaskPage.scss

diff --git a/ui/src/clockface/components/slide_toggle/SlideToggle.scss b/ui/src/clockface/components/slide_toggle/SlideToggle.scss
index 161b7fe0f6..cd7798471a 100644
--- a/ui/src/clockface/components/slide_toggle/SlideToggle.scss
+++ b/ui/src/clockface/components/slide_toggle/SlideToggle.scss
@@ -154,6 +154,7 @@
 
 /* Optional Label */
 .slide-toggle--label {
+  white-space: nowrap;
   font-size: 13px;
   font-weight: 600;
   color: $g11-sidewalk;
diff --git a/ui/src/dashboards/components/NoteEditor.scss b/ui/src/dashboards/components/NoteEditor.scss
index 95e3e96df5..f8ae0d74f5 100644
--- a/ui/src/dashboards/components/NoteEditor.scss
+++ b/ui/src/dashboards/components/NoteEditor.scss
@@ -7,17 +7,23 @@
 
   .note-editor-text, .note-editor-preview {
     flex: 1 1 0;
-    border: 2px solid $g6-smoke;
-    border-radius: 4px;
+    border-width: $ix-border;
+    border-style: solid;
+    border-radius: $ix-radius;
+  }
+
+  .note-editor-text {
+    border-color: $g5-pepper;
   }
 
   .note-editor-preview {
-    padding: 15px;
+    border-color: $g4-onyx;
+    padding: $ix-marg-b * 2;
   }
 }
 
 .note-editor--controls {
-  margin-bottom: 20px;
+  margin-bottom: $ix-marg-c;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -31,12 +37,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+}
+
+.note-editor--footer {
   font-size: 13px;
   font-weight: 600;
-  color: $g13-mist;
-
-  .slide-toggle {
-    margin-left: 10px;
-    margin-top: 2px;
-  }
+  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 0b9b2196a5..e3344c0d65 100644
--- a/ui/src/dashboards/components/NoteEditor.tsx
+++ b/ui/src/dashboards/components/NoteEditor.tsx
@@ -70,14 +70,14 @@ const NoteEditor: SFC<Props> = props => {
           </Radio.Button>
         </Radio>
         {toggleVisible && (
-          <label className="note-editor--toggle">
-            Show note when query returns no data
+          <div className="note-editor--toggle">
+            <SlideToggle.Label text="Show note when query returns no data" />
             <SlideToggle
               active={showNoteWhenEmpty}
               size={ComponentSize.ExtraSmall}
               onChange={onToggleShowNoteWhenEmpty}
             />
-          </label>
+          </div>
         )}
       </div>
       {isPreviewing ? (
@@ -85,6 +85,15 @@ const NoteEditor: SFC<Props> = props => {
       ) : (
         <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>
   )
 }
diff --git a/ui/src/dashboards/components/NoteEditorText.scss b/ui/src/dashboards/components/NoteEditorText.scss
index 9f7f127f42..42abe2f71f 100644
--- a/ui/src/dashboards/components/NoteEditorText.scss
+++ b/ui/src/dashboards/components/NoteEditorText.scss
@@ -1,9 +1,10 @@
 @import "src/style/modules";
 
 .note-editor-text {
+  background-color: $g2-kevlar;
   overflow: hidden;
 
   .react-codemirror2 {
-    padding: 10px;
+    padding: $ix-marg-b + $ix-marg-a;
   }
 }
diff --git a/ui/src/dashboards/components/NoteEditorText.tsx b/ui/src/dashboards/components/NoteEditorText.tsx
index f2830e4e96..fd4f9af086 100644
--- a/ui/src/dashboards/components/NoteEditorText.tsx
+++ b/ui/src/dashboards/components/NoteEditorText.tsx
@@ -17,6 +17,7 @@ const OPTIONS = {
   autoRefresh: true,
   completeSingle: false,
   lineWrapping: true,
+  placeholder: 'You can use Markdown syntax to format your note',
 }
 
 const noOp = () => {}
diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
index 116d32dd12..4ac871af5c 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -103,7 +103,7 @@ class DashboardIndex extends PureComponent<Props, State> {
               <Button
                 onClick={this.handleToggleOverlay}
                 icon={IconFont.Import}
-                text="Import Dashboard"
+                text="Import"
                 titleText="Import a dashboard from a file"
               />
               <Button
diff --git a/ui/src/external/codemirror.ts b/ui/src/external/codemirror.ts
index 4846580caf..5e45b74bb2 100644
--- a/ui/src/external/codemirror.ts
+++ b/ui/src/external/codemirror.ts
@@ -10,6 +10,25 @@ import 'codemirror/addon/hint/show-hint'
 
 const CodeMirror = require('codemirror')
 
+CodeMirror.defineOption("placeholder", "", function (cm, val, old) {
+  var prev = old && old != CodeMirror.Init;
+  if (val && !prev) {
+    cm.on("blur", onBlur);
+    cm.on("change", onChange);
+    cm.on("swapDoc", onChange);
+    onChange(cm);
+  } else if (!val && prev) {
+    cm.off("blur", onBlur);
+    cm.off("change", onChange);
+    cm.off("swapDoc", onChange);
+    clearPlaceholder(cm);
+    var wrapper = cm.getWrapperElement();
+    wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
+  }
+
+  if (val && !cm.hasFocus()) onBlur(cm);
+});
+
 CodeMirror.defineSimpleMode = function(name, states) {
   CodeMirror.defineMode(name, function(config) {
     return CodeMirror.simpleMode(config, states)
@@ -323,6 +342,39 @@ function indentFunction(states, meta) {
   }
 }
 
+function clearPlaceholder(cm) {
+  if (cm.state.placeholder) {
+    cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
+    cm.state.placeholder = null;
+  }
+}
+function setPlaceholder(cm) {
+  clearPlaceholder(cm);
+  var elt = cm.state.placeholder = document.createElement("pre");
+  elt.style.cssText = "height: 0; overflow: visible";
+  elt.style.direction = cm.getOption("direction");
+  elt.className = "CodeMirror-placeholder";
+  var placeHolder = cm.getOption("placeholder")
+  if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
+  elt.appendChild(placeHolder)
+  cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
+}
+
+function onBlur(cm) {
+  if (isEmpty(cm)) setPlaceholder(cm);
+}
+function onChange(cm) {
+  var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
+  wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
+
+  if (empty) setPlaceholder(cm);
+  else clearPlaceholder(cm);
+}
+
+function isEmpty(cm) {
+  return (cm.lineCount() === 1) && (cm.getLine(0) === "");
+}
+
 // Modes
 CodeMirror.defineSimpleMode('flux', modeFlux)
 CodeMirror.defineSimpleMode('tickscript', modeTickscript)
diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx
index f02951ec07..d676a1d8c3 100644
--- a/ui/src/pageLayout/containers/Nav.tsx
+++ b/ui/src/pageLayout/containers/Nav.tsx
@@ -17,9 +17,6 @@ import {IconFont} from 'src/clockface'
 // Styles
 import '../PageLayout.scss'
 
-// MOCK DATA
-import {LeroyJenkins} from 'src/me/mockUserData'
-
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props extends WithRouterProps {
@@ -62,6 +59,14 @@ class SideNav extends PureComponent<Props> {
     const {location} = this.props
 
     return [
+      {
+        type: NavItemType.Icon,
+        title: 'My Profile',
+        link: '/me',
+        icon: IconFont.Cubouniform,
+        location: location.pathname,
+        highlightWhen: ['user_profile'],
+      },
       {
         type: NavItemType.Icon,
         title: 'Status',
@@ -110,14 +115,6 @@ class SideNav extends PureComponent<Props> {
         location: location.pathname,
         highlightWhen: ['sources'],
       },
-      {
-        type: NavItemType.Avatar,
-        title: 'My Profile',
-        link: '/me',
-        image: LeroyJenkins.avatar,
-        location: location.pathname,
-        highlightWhen: ['user_profile'],
-      },
     ]
   }
 }
diff --git a/ui/src/shared/components/TimeMachineFluxEditor.scss b/ui/src/shared/components/TimeMachineFluxEditor.scss
index 77716fc36d..b1eabb0e04 100644
--- a/ui/src/shared/components/TimeMachineFluxEditor.scss
+++ b/ui/src/shared/components/TimeMachineFluxEditor.scss
@@ -8,12 +8,12 @@
   left: 0;
   display: flex;
   flex-direction: column;
-
-  .time-machine-editor {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+}
+
+.time-machine-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss
index 9b6ed3b0a5..9bfebfbb89 100644
--- a/ui/src/shared/components/cells/Cell.scss
+++ b/ui/src/shared/components/cells/Cell.scss
@@ -73,20 +73,31 @@ $cell--header-size: 36px;
   pointer-events: none;
   
   .cell--header-note & {
-    margin-left: 25px;
+    padding-left: $cell--header-size;
   }
 }
 
-.cell-header-note {
+.cell--note-indicator {
   position: absolute;
-  top: 7px;
-  left: 10px;
+  width: $cell--header-size;
+  height: $cell--header-size;
+  top: 0;
+  left: 0;
   z-index: 10;
   cursor: default;
-  color: $g14-chromium;
+  color: $g20-white;
+  opacity: 0.5;
+  transition: opacity 0.25s ease;
 
   &:hover {
-    color: $g20-white;
+    opacity: 1;
+  }
+
+  & > span.icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 }
 
diff --git a/ui/src/shared/components/cells/CellHeaderNote.tsx b/ui/src/shared/components/cells/CellHeaderNote.tsx
index d03ac3e3ca..43421b6756 100644
--- a/ui/src/shared/components/cells/CellHeaderNote.tsx
+++ b/ui/src/shared/components/cells/CellHeaderNote.tsx
@@ -25,7 +25,7 @@ class CellHeaderNote extends PureComponent<Props, State> {
 
     return (
       <div
-        className="cell-header-note"
+        className="cell--note-indicator"
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
diff --git a/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss b/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
index 5177f04fa5..b0041f9376 100644
--- a/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
+++ b/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
@@ -3,7 +3,6 @@
 .cell-header-note-tooltip {
   position: fixed;
   z-index: 3;
-  padding: 0 5px;
 }
 
 .cell-header-note-tooltip--content {
diff --git a/ui/src/shared/components/code_mirror/CodeMirrorTheme.scss b/ui/src/shared/components/code_mirror/CodeMirrorTheme.scss
index 27e5befd27..dc00924e2f 100644
--- a/ui/src/shared/components/code_mirror/CodeMirrorTheme.scss
+++ b/ui/src/shared/components/code_mirror/CodeMirrorTheme.scss
@@ -9,7 +9,7 @@
   height: 100%;
 }
 .CodeMirror {
-  border-radius: 0 0 $radius $radius;
+  border-radius: $radius;
   font-family: $code-font;
   background-color: transparent;
   color: $g13-mist;
@@ -27,12 +27,12 @@
 }
 
 .CodeMirror-gutters {
-  @include gradient-v($g2-kevlar, $g0-obsidian);
+  background-color: $g0-obsidian;
   border: none;
 }
 
 .CodeMirror-gutters .CodeMirror-gutter {
-  background-color: fade-out($g4-onyx, 0.75);
+  background-color: mix($g2-kevlar, $g3-castle);
   height: calc(100% + 30px);
 }
 
diff --git a/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss b/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss
index d0d2a7aa3f..1b4575dd60 100644
--- a/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss
+++ b/ui/src/shared/components/code_mirror/_ThemeMarkdown.scss
@@ -5,6 +5,7 @@
 */
 
 .cm-s-markdown {
+  background-color: $g2-kevlar;
   color: $g15-platinum;
 
   &:hover {
diff --git a/ui/src/shared/components/code_mirror/_ThemeTimeMachine.scss b/ui/src/shared/components/code_mirror/_ThemeTimeMachine.scss
index 153727ac73..4acc772153 100644
--- a/ui/src/shared/components/code_mirror/_ThemeTimeMachine.scss
+++ b/ui/src/shared/components/code_mirror/_ThemeTimeMachine.scss
@@ -5,7 +5,7 @@
 */
 
 .cm-s-time-machine {
-  background-color: $g1-raven;
+  background-color: $g2-kevlar;
   color: $g11-sidewalk;
 
   .cm-variable {
diff --git a/ui/src/shared/components/search_widget/SearchWidget.tsx b/ui/src/shared/components/search_widget/SearchWidget.tsx
index 6ab2b3d61a..d93f00aae3 100644
--- a/ui/src/shared/components/search_widget/SearchWidget.tsx
+++ b/ui/src/shared/components/search_widget/SearchWidget.tsx
@@ -21,7 +21,7 @@ interface State {
 @ErrorHandling
 class SearchWidget extends Component<Props, State> {
   public static defaultProps: Partial<Props> = {
-    widthPixels: 180,
+    widthPixels: 210,
     placeholderText: 'Search...',
   }
 
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 2464455543..8209a4f2e3 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -48,5 +48,3 @@
 @import "src/logs/components/logs_table/LogsTable";
 @import "src/logs/components/expandable_message/ExpandableMessage";
 @import "src/logs/components/logs_message/LogsMessage";
-
-@import "src/tasks/components/TaskPage";
diff --git a/ui/src/tasks/components/TaskForm.scss b/ui/src/tasks/components/TaskForm.scss
new file mode 100644
index 0000000000..4014eb6bc2
--- /dev/null
+++ b/ui/src/tasks/components/TaskForm.scss
@@ -0,0 +1,36 @@
+/*
+   Task Editor Page Styles
+   -----------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules';
+
+.task-form {
+  height: calc(100% - #{$ix-marg-d});
+  display: flex;
+  align-items: stretch; 
+  background-color: $g3-castle;
+  border-radius: $radius;
+}
+
+.task-form--options {
+  flex: 1 0 0;
+  padding: $ix-marg-d;
+}
+
+.task-form--editor {
+  position: relative;
+  flex: 6 0 0;
+  border-radius: 0 $radius $radius 0;
+  margin: $ix-marg-b;
+}
+
+.task-form--form-label {
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  font-weight: 600;
+  color: $g11-sidewalk;
+  flex: 1 0 60px;
+  padding-left: 11px;
+}
diff --git a/ui/src/tasks/components/TaskForm.tsx b/ui/src/tasks/components/TaskForm.tsx
index 46ce9a21f7..87773eb1d9 100644
--- a/ui/src/tasks/components/TaskForm.tsx
+++ b/ui/src/tasks/components/TaskForm.tsx
@@ -20,6 +20,9 @@ import {TaskOptions, TaskSchedule} from 'src/utils/taskOptionsToFluxScript'
 import {Alignment, Stack, ComponentStatus} from 'src/clockface/types'
 import {Organization} from 'src/api'
 
+// Styles
+import './TaskForm.scss'
+
 interface Props {
   script: string
   orgs: Organization[]
@@ -56,8 +59,8 @@ export default class TaskForm extends PureComponent<Props, State> {
     } = this.props
 
     return (
-      <div className="task-page">
-        <div className="task-page--options">
+      <div className="task-form">
+        <div className="task-form--options">
           <Form>
             <Form.Element label="Name" colsXS={Columns.Twelve}>
               <Input
@@ -121,7 +124,7 @@ export default class TaskForm extends PureComponent<Props, State> {
             </Form.Element>
           </Form>
         </div>
-        <div className="task-page--editor">
+        <div className="task-form--editor">
           <FluxEditor
             script={script}
             onChangeScript={onChangeScript}
diff --git a/ui/src/tasks/components/TaskPage.scss b/ui/src/tasks/components/TaskPage.scss
deleted file mode 100644
index c2d3200b3f..0000000000
--- a/ui/src/tasks/components/TaskPage.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-   Task Editor Page Styles
-   -----------------------------------------------------------------------------
-*/
-
-.task-page {
-    height: 100%;
-    display: flex;
-   align-items: stretch; 
-}
-
-.task-page--options {
-    flex: 1 0 0;
-    background-color: $g3-castle;
-    padding: $ix-marg-d;
-    border-radius: $radius 0 0 $radius;
-}
-
-.task-page--editor {
-    flex: 6 0 0;
-    background-color: $g2-kevlar;
-    border-radius: 0 $radius $radius 0;
-}
-
-.task-page--form-label {
-    height: 30px;
-    line-height: 30px;
-    font-size: 13px;
-    font-weight: 600;
-    color: $g11-sidewalk;
-    flex: 1 0 60px;
-    padding-left: 11px;
-}
diff --git a/ui/src/tasks/components/TaskScheduleFormField.tsx b/ui/src/tasks/components/TaskScheduleFormField.tsx
index 648118683f..6664342aed 100644
--- a/ui/src/tasks/components/TaskScheduleFormField.tsx
+++ b/ui/src/tasks/components/TaskScheduleFormField.tsx
@@ -23,7 +23,7 @@ export default class TaskScheduleFormFields extends PureComponent<Props> {
     return (
       <>
         <ComponentSpacer align={Alignment.Left} stretchToFit={true}>
-          <label className="task-page--form-label">
+          <label className="task-form--form-label">
             {schedule === TaskSchedule.interval ? 'Interval' : 'Cron'}
           </label>
           <Input
@@ -38,7 +38,7 @@ export default class TaskScheduleFormFields extends PureComponent<Props> {
         </ComponentSpacer>
 
         <ComponentSpacer align={Alignment.Left} stretchToFit={true}>
-          <label className="task-page--form-label">Delay</label>
+          <label className="task-form--form-label">Delay</label>
           <Input
             name="delay"
             type={InputType.Text}
diff --git a/ui/src/tasks/components/TasksHeader.tsx b/ui/src/tasks/components/TasksHeader.tsx
index 996bd7e143..6a665fa0ca 100644
--- a/ui/src/tasks/components/TasksHeader.tsx
+++ b/ui/src/tasks/components/TasksHeader.tsx
@@ -39,7 +39,7 @@ export default class TasksHeader extends PureComponent<Props> {
           <Page.Title title="Tasks" />
         </Page.Header.Left>
         <Page.Header.Right>
-          <label className="tasks-status-toggle">Show Inactive</label>
+          <SlideToggle.Label text="Show Inactive" />
           <SlideToggle
             active={showInactive}
             size={ComponentSize.ExtraSmall}
diff --git a/ui/src/tasks/components/TasksPage.scss b/ui/src/tasks/components/TasksPage.scss
index ab64de06f9..96778242ce 100644
--- a/ui/src/tasks/components/TasksPage.scss
+++ b/ui/src/tasks/components/TasksPage.scss
@@ -5,14 +5,6 @@
 
 @import 'src/style/modules';
 
-.tasks-status-toggle {
-    font-size: 13px;
-    font-weight: 500;
-    margin: 0 $ix-marg-b 0 0;
-    color: $g11-sidewalk;
-    white-space: nowrap;
-}
-
 .hidden-tasks-alert {
     font-size: 13px;
     font-weight: 600;