Dashboard design updates (#29896)

* Dashboard visual pass (initial) * Adjusted panel header ..And used a different selector for editing mode to fix bug of `.dshPanel--editing` needing a hard refresh to update. * better positioning of legend toggle * Fixed legend toggle position * Fixed some visualize sidebar font sizes * better position for resize handle * Consolidated error and warning messages * Last edits and removing old testing things * snaps * Fix tag cloud * Comment out markdown-it for now, since it’s not working * update area chart snapshot * Styled empty dashboard state * PR feedback - background fix - dark mode highlight color fix - euiScrollbars - euiSpacer * Fix reporting * More PR comments - No edit button in mobile - No markdown comment for panel error - i18n id addition - Remove euiHeader sharing fix * Revert “hide edit button”
elastic · Feb 5, 2019 · 0618134 · 0618134
1 parent 36ee9d9
commit 0618134
Show file tree

Hide file tree

Showing 51 changed files with 712 additions and 688 deletions.
diff --git a/...gins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/...gins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss
@@ -1,6 +1,7 @@
 .icvContainer {
   width: 100%;
   margin: 0 $euiSizeXS;
+  padding: $euiSizeS;
 
   // Removes the browser's number stepper
   input[type=number]::-webkit-inner-spin-button,

diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -23,9 +23,9 @@ import { RangeControl } from './range_control';
 import { ListControl } from './list_control';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -99,40 +99,40 @@ export class InputControlVis extends Component {
 
   renderStagingButtons() {
     return (
-      <EuiFlexGroup>
+      <EuiFlexGroup wrap={true}>
         <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiButton
-              onClick={this.handleClearAll}
-              disabled={!this.props.hasValues()}
-              data-test-subj="inputControlClearBtn"
-            >
-              <FormattedMessage id="inputControl.vis.inputControlVis.clearFormButtonLabel" defaultMessage="Clear form"/>
-            </EuiButton>
-          </EuiFormRow>
+
+          <EuiButton
+            fill
+            onClick={this.handleSubmit}
+            disabled={!this.props.hasChanges()}
+            data-test-subj="inputControlSubmitBtn"
+          >
+            <FormattedMessage id="inputControl.vis.inputControlVis.applyChangesButtonLabel" defaultMessage="Apply changes"/>
+          </EuiButton>
+
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiButton
-              onClick={this.handleReset}
-              disabled={!this.props.hasChanges()}
-              data-test-subj="inputControlCancelBtn"
-            >
-              <FormattedMessage id="inputControl.vis.inputControlVis.cancelChangesButtonLabel" defaultMessage="Cancel changes"/>
-            </EuiButton>
-          </EuiFormRow>
+
+          <EuiButtonEmpty
+            onClick={this.handleReset}
+            disabled={!this.props.hasChanges()}
+            data-test-subj="inputControlCancelBtn"
+          >
+            <FormattedMessage id="inputControl.vis.inputControlVis.cancelChangesButtonLabel" defaultMessage="Cancel changes"/>
+          </EuiButtonEmpty>
+
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiButton
-              fill
-              onClick={this.handleSubmit}
-              disabled={!this.props.hasChanges()}
-              data-test-subj="inputControlSubmitBtn"
-            >
-              <FormattedMessage id="inputControl.vis.inputControlVis.applyChangesButtonLabel" defaultMessage="Apply changes"/>
-            </EuiButton>
-          </EuiFormRow>
+
+          <EuiButtonEmpty
+            onClick={this.handleClearAll}
+            disabled={!this.props.hasValues()}
+            data-test-subj="inputControlClearBtn"
+          >
+            <FormattedMessage id="inputControl.vis.inputControlVis.clearFormButtonLabel" defaultMessage="Clear form"/>
+          </EuiButtonEmpty>
+
         </EuiFlexItem>
       </EuiFlexGroup>
     );

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
@@ -40,25 +40,26 @@
   <!-- Advanced options -->
   <div class="visEditorSidebar__collapsible--margin">
     <a
-      class="small"
+      class="visEditorSidebar__collapsibleTitle"
       ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
       kbn-accessible-click
     >
+      <span>
+        <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
+        <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
 
-      <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
-      <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
 
-
-      <span
-        ng-show="!isCategoryAxisAdvancedOptionsOpen"
-        i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
-        i18n-default-message="Show Advanced Options"
-      ></span>
-      <span
-        ng-show="isCategoryAxisAdvancedOptionsOpen"
-        i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
-        i18n-default-message="Hide Advanced Options"
-      ></span>
+        <span
+          ng-show="!isCategoryAxisAdvancedOptionsOpen"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
+          i18n-default-message="Show Advanced Options"
+        ></span>
+        <span
+          ng-show="isCategoryAxisAdvancedOptionsOpen"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
+          i18n-default-message="Hide Advanced Options"
+        ></span>
+      </span>
     </a>
 
     <div ng-show="isCategoryAxisAdvancedOptionsOpen">

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
@@ -143,25 +143,27 @@
       <div class="visEditorSidebar__collapsible--margin">
         <a
           data-test-subj="toggleYAxisAdvancedOptions-{{axis.id}}"
-          class="small"
+          class="visEditorSidebar__collapsibleTitle"
           ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
           kbn-accessible-click
         >
-          <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
-          <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
+          <span>
+            <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
+            <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
 
-          <span
-            class="kuiSideBarOptionsLink__text"
-            ng-show="!isValueAxisAdvancedOptionsOpen"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showAdvancedOptionsLabel"
-            i18n-default-message="Show Advanced Options"
-          ></span>
-          <span
-            class="kuiSideBarOptionsLink__text"
-            ng-show="isValueAxisAdvancedOptionsOpen"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.hideAdvancedOptionsLabel"
-            i18n-default-message="Hide Advanced Options"
-          ></span>
+            <span
+              class="kuiSideBarOptionsLink__text"
+              ng-show="!isValueAxisAdvancedOptionsOpen"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showAdvancedOptionsLabel"
+              i18n-default-message="Show Advanced Options"
+            ></span>
+            <span
+              class="kuiSideBarOptionsLink__text"
+              ng-show="isValueAxisAdvancedOptionsOpen"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.hideAdvancedOptionsLabel"
+              i18n-default-message="Hide Advanced Options"
+            ></span>
+          </span>
         </a>
 
         <div ng-show="isValueAxisAdvancedOptionsOpen">

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss b/src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss
@@ -11,12 +11,13 @@
 
 .dshStartScreen {
   text-align: center;
-  margin: $euiSize auto;
-  max-width: 800px;
-  width: 100%;
-  background: $euiColorEmptyShade;
-  padding: $euiSizeXXL;
-  border-radius: $euiBorderRadius;
+  padding: $euiSize;
+  background-color: $euiColorLightestShade;
+  color: $euiColorDarkShade;
+
+  > * {
+    max-width: 36em !important;
+  }
 }
 
 .dshSaveModal,

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_index.scss b/src/legacy/core_plugins/kibana/public/dashboard/_index.scss
@@ -3,8 +3,10 @@
 // 'react-resizable/css/styles.css';
 // ... are being imported via JS in grid/dashboard_grid.js
 
+@import './variables';
+
 // Temporary hacks
-@import 'hacks';
+@import './hacks';
 
 // Prefix all styles with "dsh" to avoid conflicts.
 // Examples
@@ -13,7 +15,7 @@
 //   dshChart__legend--small
 //   dshChart__legend-isLoading
 
-@import 'dashboard_app';
-@import 'grid/index';
-@import 'panel/index';
-@import 'viewport/index';
+@import './dashboard_app';
+@import './grid/index';
+@import './panel/index';
+@import './viewport/index';
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/_variables.scss b/src/legacy/core_plugins/kibana/public/dashboard/_variables.scss
@@ -0,0 +1 @@
+$dshEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7));
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -50,69 +50,76 @@
     on-submit="onApplyFilters"
   ></apply-filters-popover>
 
-  <div
-    ng-show="getShouldShowEditHelp()"
-    class="dshStartScreen"
-  >
-    <h2
-      class="kuiTitle kuiVerticalRhythm"
-      i18n-id="kbn.dashboard.fillDashboardTitle"
-      i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
-    >
-    </h2>
+  <div ng-show="getShouldShowEditHelp() || getShouldShowViewHelp()" class="dshStartScreen">
+    <div class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--horizontalCenter">
+      <icon type="'dashboardApp'" size="'xxl'" color="'subdued'"></icon>
 
-    <p>
-      <span
-        i18n-id="kbn.dashboard.addVisualizationDescription1"
-        i18n-default-message="Click the "
-        i18n-context="Part of composite label kbn.dashboard.addVisualizationDescription1 + kbn.dashboard.addVisualizationLinkText + kbn.dashboard.addVisualizationDescription2"
-      ></span>
-      <a
-        kbn-accessible-click
-        class="kuiButton kuiButton--primary kuiButton--small"
-        ng-click="showAddPanel()"
-        aria-label="{{::'kbn.dashboard.addVisualizationLinkAriaLabel' | i18n: { defaultMessage: 'Add visualization' } }}"
-        data-test-subj="emptyDashboardAddPanelButton"
-        i18n-id="kbn.dashboard.addVisualizationLinkText"
-        i18n-default-message="Add"
-      ></a>
-      <span
-        i18n-id="kbn.dashboard.addVisualizationDescription2"
-        i18n-default-message=" button in the menu bar above to add a visualization to the dashboard. {br}If you haven't set up any visualizations yet, {visitVisualizeAppLink} to create your first visualization."
-        i18n-values="{
-          html_br: '<br/>',
-          html_visitVisualizeAppLink: '<a class=\'kuiLink\' href=\'#/visualize\'>' + visitVisualizeAppLinkText + '</a>'
-        }"
-      ></span>
-    </p>
-  </div>
+      <br><br>
+
+      <div ng-show="getShouldShowEditHelp()" class="euiText">
+        <h2
+          i18n-id="kbn.dashboard.fillDashboardTitle"
+          i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
+        >
+        </h2>
+
+        <p>
+          <span
+            i18n-id="kbn.dashboard.addVisualizationDescription1"
+            i18n-default-message="Click the "
+            i18n-context="Part of composite label kbn.dashboard.addVisualizationDescription1 + kbn.dashboard.addVisualizationLinkText + kbn.dashboard.addVisualizationDescription2"
+          ></span>
+          <a
+            kbn-accessible-click
+            class="euiLink"
+            ng-click="showAddPanel()"
+            aria-label="{{::'kbn.dashboard.addVisualizationLinkAriaLabel' | i18n: { defaultMessage: 'Add visualization' } }}"
+            data-test-subj="emptyDashboardAddPanelButton"
+            i18n-id="kbn.dashboard.addVisualizationLinkText"
+            i18n-default-message="Add"
+          ></a>
+          <span
+            i18n-id="kbn.dashboard.addVisualizationDescription2"
+            i18n-default-message=" button in the menu bar above to add a visualization to the dashboard."
+          ></span>
+        </p>
+        <p
+          i18n-id="kbn.dashboard.addVisualizationDescription3"
+          i18n-default-message="If you haven't set up any visualizations yet, {visitVisualizeAppLink} to create your first visualization."
+          i18n-values="{
+            html_visitVisualizeAppLink: '<a class=\'euiLink\' href=\'#/visualize\'>' + visitVisualizeAppLinkText + '</a>'
+          }"
+        ></p>
+      </div>
+
+      <div ng-show="getShouldShowViewHelp()" class="euiText">
+        <h2
+          i18n-id="kbn.dashboard.fillDashboardTitle"
+          i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
+        >
+        </h2>
 
-  <div ng-show="getShouldShowViewHelp()" class="dshStartScreen">
-    <h2
-      class="kuiTitle kuiVerticalRhythm"
-      i18n-id="kbn.dashboard.fillDashboardTitle"
-      i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
-    >
-    </h2>
+        <p>
+          <span
+            i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription1"
+            i18n-default-message="Click the "
+            i18n-context="Part of composite label kbn.dashboard.howToStartWorkingOnNewDashboardDescription1 + kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText + kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
+          ></span>
+          <a
+            kbn-accessible-click
+            class="euiLink"
+            ng-click="enterEditMode()"
+            i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText"
+            i18n-default-message="Edit"
+          ></a>
+          <span
+            i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
+            i18n-default-message=" button in the menu bar above to start working on your new dashboard."
+          ></span>
+        </p>
+      </div>
 
-    <p class="kuiText kuiVerticalRhythm">
-      <span
-        i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription1"
-        i18n-default-message="Click the "
-        i18n-context="Part of composite label kbn.dashboard.howToStartWorkingOnNewDashboardDescription1 + kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText + kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
-      ></span>
-      <a
-        kbn-accessible-click
-        class="kuiButton kuiButton--primary kuiButton--small"
-        ng-click="enterEditMode()"
-        i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText"
-        i18n-default-message="Edit"
-      ></a>
-      <span
-        i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
-        i18n-default-message=" button in the menu bar above to start working on your new dashboard."
-      ></span>
-    </p>
+    </div>
   </div>
 
   <dashboard-viewport-provider
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		$dshEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7));