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

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;

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

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

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

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 = () => {}

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

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)

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'],
-      },
     ]
   }
 }

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

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

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

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 {

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

ui/src/shared/components/code_mirror/_ThemeMarkdown.scss

@@ -5,6 +5,7 @@
 */
 
 .cm-s-markdown {
+  background-color: $g2-kevlar;
   color: $g15-platinum;
 
   &:hover {

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 {

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...',
   }
 

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

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

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}

ui/src/tasks/components/TaskPage.scss

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

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}

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}

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;