From 733dcdb88597152a40d6f0df9f0c5639d39d1719 Mon Sep 17 00:00:00 2001
From: Allen Gilliland <agilliland@gmail.com>
Date: Mon, 5 Oct 2015 14:40:11 -0700
Subject: [PATCH] update empty state for dashboards dropdown with new icon and
new copy.
---
.../components/DashboardsDropdown.react.js | 12 +++-
.../icons/assets/dash_empty_state.svg | 66 +++++++++++++++++++
2 files changed, 76 insertions(+), 2 deletions(-)
create mode 100644 resources/frontend_client/app/components/icons/assets/dash_empty_state.svg
diff --git a/frontend/app/components/DashboardsDropdown.react.js b/frontend/app/components/DashboardsDropdown.react.js
index f4b3a99d81f..36ec01a2536 100644
--- a/frontend/app/components/DashboardsDropdown.react.js
+++ b/frontend/app/components/DashboardsDropdown.react.js
@@ -17,6 +17,14 @@ export default class DashboardsDropdown extends Component {
modalOpen: false
};
+ this.styles = {
+ dashIcon: {
+ width: '101px',
+ height: '85px',
+ backgroundImage: 'url("/app/components/icons/assets/dash_empty_state.svg")'
+ }
+ }
+
_.bindAll(this, "toggleDropdown", "closeDropdown", "toggleModal", "closeModal");
}
@@ -82,11 +90,11 @@ export default class DashboardsDropdown extends Component {
<div className="NavDropdown-content DashboardList">
{ dashboards.length === 0 ?
<div className="NavDropdown-content-layer text-white text-centered">
- <div className="p2"><span className="QuestionCircle">?</span></div>
+ <div className="p2"><div style={this.styles.dashIcon} className="ml-auto mr-auto"></div></div>
<div className="px2 py1 text-bold">You don’t have any dashboards yet.</div>
<div className="px2 pb2 text-light">Dashboards group visualizations for frequent questions in a single handy place.</div>
<div className="border-top border-light">
- <a className="Dropdown-item block text-white no-decoration" href="#" onClick={this.toggleModal}>Create a new dashboard</a>
+ <a className="Dropdown-item block text-white no-decoration" href="#" onClick={this.toggleModal}>Create your first dashboard</a>
</div>
</div>
:
diff --git a/resources/frontend_client/app/components/icons/assets/dash_empty_state.svg b/resources/frontend_client/app/components/icons/assets/dash_empty_state.svg
new file mode 100644
index 00000000000..ff7a764efce
--- /dev/null
+++ b/resources/frontend_client/app/components/icons/assets/dash_empty_state.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="105px" height="88px" viewBox="0 0 105 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+ <title>Artboard 2</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+ <rect id="path-1" x="18" y="9" width="45" height="58"></rect>
+ <rect id="path-2" x="36" y="18" width="45" height="57.7"></rect>
+ <rect id="path-3" x="56" y="27" width="45" height="57.7"></rect>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="Artboard-2" sketch:type="MSArtboardGroup">
+ <g id="Group" sketch:type="MSLayerGroup">
+ <rect id="Rectangle-252" stroke="#509EE3" stroke-width="3" fill="#88C2F5" sketch:type="MSShapeGroup" x="0" y="0" width="45" height="58"></rect>
+ <g id="Group-Copy-3" transform="translate(8.000000, 9.000000)" fill="#57A3E5" sketch:type="MSShapeGroup">
+ <rect id="Rectangle-696" x="0" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy" x="12" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-6" x="0" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-4" x="12" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-2" x="24" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-5" x="0" y="15" width="20" height="10"></rect>
+ <rect id="Rectangle-696-Copy-3" x="24" y="15" width="8" height="25"></rect>
+ </g>
+ <g id="Rectangle-252-Copy">
+ <use stroke="#509EE3" stroke-width="3" fill="#88C2F5" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
+ <use stroke="#6FB0EB" stroke-width="4" fill="none" xlink:href="#path-1"></use>
+ </g>
+ <g id="Group-Copy-2" transform="translate(26.000000, 18.000000)" fill="#57A3E5" sketch:type="MSShapeGroup">
+ <rect id="Rectangle-696" x="0" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy" x="12" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-6" x="0" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-4" x="12" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-2" x="24" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-5" x="0" y="15" width="20" height="10"></rect>
+ <rect id="Rectangle-696-Copy-3" x="24" y="15" width="8" height="25"></rect>
+ </g>
+ <g id="Rectangle-252-Copy-2">
+ <use stroke="#509EE3" stroke-width="3" fill="#88C2F5" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-2"></use>
+ <use stroke="#6FB0EB" stroke-width="4" fill="none" xlink:href="#path-2"></use>
+ </g>
+ <g id="Group-Copy" transform="translate(44.000000, 27.000000)" fill="#57A3E5" sketch:type="MSShapeGroup">
+ <rect id="Rectangle-696" x="0" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy" x="12" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-6" x="0" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-4" x="12" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-2" x="24" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-5" x="0" y="15" width="20" height="10"></rect>
+ <rect id="Rectangle-696-Copy-3" x="24" y="15" width="8" height="25"></rect>
+ </g>
+ <g id="Rectangle-252-Copy-3">
+ <use stroke="#509EE3" stroke-width="3" fill="#88C2F5" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-3"></use>
+ <use stroke="#6FB0EB" stroke-width="4" fill="none" xlink:href="#path-3"></use>
+ </g>
+ <g transform="translate(63.000000, 36.000000)" fill="#57A3E5" sketch:type="MSShapeGroup">
+ <rect id="Rectangle-696" x="0" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy" x="12" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-6" x="0" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-4" x="12" y="30" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-2" x="24" y="0" width="8" height="10"></rect>
+ <rect id="Rectangle-696-Copy-5" x="0" y="15" width="20" height="10"></rect>
+ <rect id="Rectangle-696-Copy-3" x="24" y="15" width="8" height="25"></rect>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
--
GitLab