Add zeroState SVG

May change in the future, but this is what Arnab recommends for now.

Change-Id: I2ecab91672f0ad7c9402cbff8bc2ea2fdd607322
This commit is contained in:
Kasper Nilsson
2018-10-03 16:28:10 -07:00
parent a6e0c02b0d
commit d764d2abda
2 changed files with 19 additions and 10 deletions

View File

@@ -22,6 +22,7 @@ limitations under the License.
<link rel="import" href="../../core/gr-reporting/gr-reporting.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-dialog/gr-dialog.html">
<link rel="import" href="../../shared/gr-icons/gr-icons.html">
<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../gr-create-commands-dialog/gr-create-commands-dialog.html">
@@ -69,16 +70,22 @@ limitations under the License.
display: inline-block;
margin: .5em;
}
#emptyOutgoing #graphic {
fill: var(--deemphasized-text-color);
max-width: 12em;
#emptyOutgoing #graphic #circle {
align-items: center;
background-color: var(--chip-background-color);
border-radius: 50%;
display: flex;
height: 10em;
justify-content: center;
width: 10em;
}
#emptyOutgoing #graphic svg {
display: block;
margin: 0 auto;
max-width: 100px;
#emptyOutgoing #graphic iron-icon {
color: #9e9e9e;
height: 5em;
width: 5em;
}
#emptyOutgoing #graphic p {
color: var(--deemphasized-text-color);
text-align: center;
}
#emptyOutgoing #help {
@@ -128,9 +135,9 @@ limitations under the License.
<div id="emptyOutgoing" slot="empty-outgoing">
<template is="dom-if" if="_showNewUserHelp">
<div id="graphic">
<svg width="150" height="100">
<circle cx="50" cy="50" r="50"></circle>
</svg>
<div id="circle">
<iron-icon id="icon" icon="gr-icons:zeroState"></iron-icon>
</div>
<p>
No outgoing changes yet
</p>