From 47234b74f27f12695a1b2e4f56f143f64a7dc2d9 Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Mon, 16 Mar 2020 15:16:31 -0700 Subject: [PATCH 1/3] chore(ui): add graphic assets for empty dashboard state --- ui/assets/images/dashboard-empty--dark.svg | 311 ++++++++++++++++++++ ui/assets/images/dashboard-empty--light.svg | 299 +++++++++++++++++++ 2 files changed, 610 insertions(+) create mode 100644 ui/assets/images/dashboard-empty--dark.svg create mode 100644 ui/assets/images/dashboard-empty--light.svg diff --git a/ui/assets/images/dashboard-empty--dark.svg b/ui/assets/images/dashboard-empty--dark.svg new file mode 100644 index 00000000000..d1993a952bc --- /dev/null +++ b/ui/assets/images/dashboard-empty--dark.svg @@ -0,0 +1,311 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/assets/images/dashboard-empty--light.svg b/ui/assets/images/dashboard-empty--light.svg new file mode 100644 index 00000000000..c0028d12cd9 --- /dev/null +++ b/ui/assets/images/dashboard-empty--light.svg @@ -0,0 +1,299 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 8d17d9a4e7b4301cb848892411de03cea4bc53b3 Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Mon, 16 Mar 2020 15:18:43 -0700 Subject: [PATCH 2/3] feat(ui): implement empty dashboard graphic for both light and dark modes --- .../dashboard_empty/DashboardEmpty.scss | 117 +++++------------- .../dashboard_empty/DashboardEmpty.tsx | 3 + 2 files changed, 33 insertions(+), 87 deletions(-) diff --git a/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.scss b/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.scss index 7840581931d..24fd56446e6 100644 --- a/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.scss +++ b/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.scss @@ -3,8 +3,6 @@ ---------------------------------------------------------------------------- */ -$empty-menu--gutter: 4px; - .dashboard-empty { position: absolute; top: 0; @@ -16,99 +14,44 @@ $empty-menu--gutter: 4px; justify-content: center; align-items: center; text-align: center; +} - p { - color: $g11-sidewalk; - font-size: 18px; - margin: 0 0 20px 0; - @include no-user-select(); - - strong { - color: $g15-platinum; - } - } +.dashboard-empty--graphic { + display: inline-flex; + position: relative; + width: 50%; + max-width: 720px; } -.dashboard-empty--menu { - width: 70%; - max-width: 800px; - margin-bottom: 65px; +.dashboard-empty--graphic:after { + content: ''; + display: inline-block; + // This % ensures proper aspect ratio for the image without using + // the element + padding-bottom: 57.3170731707317%; } -.dashboard-empty--menu-option { - float: left; - width: 25%; - padding-bottom: 25%; - position: relative; +.dashbpard-empty--graphic-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center center; + background-size: contain; + background-repeat: no-repeat; + background-image: url('../../assets/images/dashboard-empty--dark.svg'); +} - > div > p { - margin: 0; - font-size: 14px; - font-weight: 900; - position: absolute; - bottom: 18px; - left: 10px; - width: calc(100% - 20px); - text-align: center; - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.clockface--app-wrapper.dashboard-light-mode { + .dashbpard-empty--graphic-content { + background-image: url('../../assets/images/dashboard-empty--light.svg'); } - - // Actual "card" - > div { - background-color: $g2-kevlar; + .dashboard-empty .cf-empty-state--text { color: $g11-sidewalk; - border-radius: 4px; - width: calc(100% - #{$empty-menu--gutter}); - height: calc(100% - #{$empty-menu--gutter}); - position: absolute; - top: $empty-menu--gutter / 2; - left: $empty-menu--gutter / 2; - transition: color 0.25s ease, border-color 0.25s ease, - background-color 0.25s ease; } -} - -// Hover state "card" -.dashboard-empty--menu-option:hover { - cursor: pointer; -} -.dashboard-empty--menu-option:hover > div { - background-color: $g5-pepper; - color: $g18-cloud; - - .viz-type-selector--graphic { - .viz-type-selector--graphic-line.graphic-line-a { - stroke: $c-pool; - } - .viz-type-selector--graphic-line.graphic-line-b { - stroke: $c-dreamsicle; - } - .viz-type-selector--graphic-line.graphic-line-c { - stroke: $c-rainforest; - } - .viz-type-selector--graphic-line.graphic-line-d { - stroke: $g17-whisper; - } - .viz-type-selector--graphic-fill.graphic-fill-a { - fill: $c-pool; - } - .viz-type-selector--graphic-fill.graphic-fill-b { - fill: $c-dreamsicle; - } - .viz-type-selector--graphic-fill.graphic-fill-c { - fill: $c-rainforest; - } - .viz-type-selector--graphic-fill.graphic-fill-a, - .viz-type-selector--graphic-fill.graphic-fill-b, - .viz-type-selector--graphic-fill.graphic-fill-c { - opacity: 0.22; - } - .viz-type-selector--graphic-fill.graphic-fill-d { - fill: $g17-whisper; - opacity: 1; - } + .dashboard-empty .cf-empty-state--text strong, + .dashboard-empty .cf-empty-state--text b { + color: $g7-graphite; } } diff --git a/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx b/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx index 7619c0fa957..27f1944ca1b 100644 --- a/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx +++ b/ui/src/dashboards/components/dashboard_empty/DashboardEmpty.tsx @@ -29,6 +29,9 @@ class DashboardEmpty extends Component { return (
+
+
+
This Dashboard doesn't have any Cells, why not add one? From 51f04dada44cee18de6cbe1f99231810bd4876fc Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Mon, 16 Mar 2020 15:22:07 -0700 Subject: [PATCH 3/3] chore(ui): update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index efa38edcb4e..7f662f61001 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ ### UI Improvements 1. [17291](https://github.com/influxdata/influxdb/pull/17291): Redesign OSS Login page +1. [17297](https://github.com/influxdata/influxdb/pull/17297): Display graphic when a dashboard has no cells ## v2.0.0-beta.6 [2020-03-12]