Several Dashboard enhancements: (#90)

- replaced minimal package by skip button
- added background images for packages
- added spinner in case of empty Dashboard

Signed-off-by: Kai Kreuzer <kai@openhab.org>
This commit is contained in:
Kai Kreuzer 2016-12-08 18:44:18 +01:00 committed by GitHub
parent 8270ba382f
commit b9b4e08694
10 changed files with 57 additions and 23 deletions

View File

@ -76,6 +76,11 @@ public class DashboardServlet extends HttpServlet {
entries.append(entry);
}
resp.setContentType("text/html;charset=UTF-8");
if (tiles.size() == 0) {
entries.append(
"&nbsp;&nbsp;&nbsp;&nbsp;<div class=\"spinner spinner--steps\"><img src=\"img/spinner.svg\"></div>&nbsp;&nbsp;");
entries.append("Please stand by while UIs are being installed. This can take several minutes.");
}
resp.getWriter().append(indexTemplate.replace("<!--entries-->", entries.toString()));
resp.getWriter().close();
}

View File

@ -10,7 +10,7 @@
<link type="text/css" href="fonts/icomoon.css" rel="stylesheet" media="all">
<link type="text/css" href="bootstrap.min.css" rel="stylesheet"></link>
<link type="text/css" href="main.css" rel="stylesheet"></link>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link>
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"><link>
</head>
<body>
@ -20,13 +20,13 @@
</div>
</header>
<section class="container">
<h1>Welcome to openHAB 2.0</h1>
<h1>Welcome to openHAB 2</h1>
<div class="line">
<div class="decorator"></div>
<hr />
</div>
<div class="links row">
<!--entries-->
<!--entries-->
</div>
<div class="line">
<div class="decorator"></div>

View File

@ -5,11 +5,11 @@
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>openHAB 2.0 - Setup</title>
<title>openHAB - Setup</title>
<link type="text/css" href="fonts/icomoon.css" rel="stylesheet" media="all">
<link type="text/css" href="bootstrap.min.css" rel="stylesheet"></link>
<link type="text/css" href="main.css" rel="stylesheet"></link>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link>
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"><link>
</head>
<body>
@ -19,30 +19,19 @@
</div>
</header>
<section class="container">
<h1>Welcome to openHAB 2.0 - Initial Setup</h1>
<h1>Welcome to openHAB 2 - Initial Setup</h1>
<div class="line">
<div class="decorator"></div>
<div>
<p><br/>Please choose your installation type:</p>
<p><br/>openHAB comes with many different add-ons. To allow an easy start, there are 4 pre-defined packages available that are a good starting point.</p>
<p><br/>Please choose your package to install:</p>
</div>
<hr />
</div>
<div class="links row">
<div class="link-wrapper col-md-3 col-sm-6 col-xs-6">
<div class="link" onclick="location.href = 'index?type=minimal'">
<div class="body">
<div class="overlay">
Minimal
</div>
</div>
<div class="footer">
<p>Core runtime only</p>
</div>
</div>
</div>
<div class="link-wrapper col-md-3 col-sm-6 col-xs-6">
<div class="link" onclick="location.href = 'index?type=simple'">
<div class="body">
<div class="body" style="background-image: url('img/simple.jpg')">
<div class="overlay">
Simple
</div>
@ -54,7 +43,7 @@
</div>
<div class="link-wrapper col-md-3 col-sm-6 col-xs-6">
<div class="link" onclick="location.href = 'index?type=standard'">
<div class="body">
<div class="body" style="background-image: url('img/standard.jpg')">
<div class="overlay">
Standard
</div>
@ -66,7 +55,7 @@
</div>
<div class="link-wrapper col-md-3 col-sm-6 col-xs-6">
<div class="link" onclick="location.href = 'index?type=expert'">
<div class="body">
<div class="body" style="background-image: url('img/expert.jpg')">
<div class="overlay">
Expert
</div>
@ -78,7 +67,7 @@
</div>
<div class="link-wrapper col-md-3 col-sm-6 col-xs-6">
<div class="link" onclick="location.href = 'index?type=demo'">
<div class="body">
<div class="body" style="background-image: url('img/demo.jpg')">
<div class="overlay">
Demo
</div>
@ -89,6 +78,8 @@
</div>
</div>
</div>
<a href="#" onclick="location.href = 'index?type=minimal'">Skip the package selection...</a>.
<div class="line">
<div class="decorator"></div>
<hr />

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -32,3 +32,24 @@
.icon-html5:before {
content: "\e7ba";
}
@keyframes anim-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
display: inline-block;
line-height: 1;
animation: anim-rotate 2s infinite linear;
color: #333;
text-shadow: 0 0 .25em rgba(255,255,255, .3);
}
.spinner--steps {
animation: anim-rotate 1s infinite steps(12);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path fill="#000000" d="M8 4.736c-0.515 0-0.933-0.418-0.933-0.933v-2.798c0-0.515 0.418-0.933 0.933-0.933s0.933 0.418 0.933 0.933v2.798c0 0.515-0.418 0.933-0.933 0.933z"></path>
<path fill="#000000" d="M8 15.577c-0.322 0-0.583-0.261-0.583-0.583v-2.798c0-0.322 0.261-0.583 0.583-0.583s0.583 0.261 0.583 0.583v2.798c0 0.322-0.261 0.583-0.583 0.583z"></path>
<path fill="#000000" d="M5.902 5.24c-0.302 0-0.596-0.157-0.758-0.437l-1.399-2.423c-0.241-0.418-0.098-0.953 0.32-1.194s0.953-0.098 1.194 0.32l1.399 2.423c0.241 0.418 0.098 0.953-0.32 1.194-0.138 0.079-0.288 0.117-0.436 0.117z"></path>
<path fill="#000000" d="M11.498 14.582c-0.181 0-0.358-0.094-0.455-0.262l-1.399-2.423c-0.145-0.251-0.059-0.572 0.192-0.717s0.572-0.059 0.717 0.192l1.399 2.423c0.145 0.251 0.059 0.572-0.192 0.717-0.083 0.048-0.173 0.070-0.262 0.070z"></path>
<path fill="#000000" d="M4.365 6.718c-0.138 0-0.279-0.035-0.407-0.109l-2.423-1.399c-0.39-0.225-0.524-0.724-0.299-1.115s0.724-0.524 1.115-0.299l2.423 1.399c0.39 0.225 0.524 0.724 0.299 1.115-0.151 0.262-0.425 0.408-0.707 0.408z"></path>
<path fill="#000000" d="M14.057 11.964c-0.079 0-0.159-0.020-0.233-0.063l-2.423-1.399c-0.223-0.129-0.299-0.414-0.171-0.637s0.414-0.299 0.637-0.171l2.423 1.399c0.223 0.129 0.299 0.414 0.171 0.637-0.086 0.15-0.243 0.233-0.404 0.233z"></path>
<path fill="#000000" d="M3.803 8.758h-2.798c-0.418 0-0.758-0.339-0.758-0.758s0.339-0.758 0.758-0.758h2.798c0.419 0 0.758 0.339 0.758 0.758s-0.339 0.758-0.758 0.758z"></path>
<path fill="#000000" d="M14.995 8.466c-0 0 0 0 0 0h-2.798c-0.258-0-0.466-0.209-0.466-0.466s0.209-0.466 0.466-0.466c0 0 0 0 0 0h2.798c0.258 0 0.466 0.209 0.466 0.466s-0.209 0.466-0.466 0.466z"></path>
<path fill="#000000" d="M1.943 12.197c-0.242 0-0.477-0.125-0.606-0.35-0.193-0.335-0.079-0.762 0.256-0.955l2.423-1.399c0.335-0.193 0.762-0.079 0.955 0.256s0.079 0.762-0.256 0.955l-2.423 1.399c-0.11 0.064-0.23 0.094-0.349 0.094z"></path>
<path fill="#000000" d="M11.635 6.368c-0.161 0-0.318-0.084-0.404-0.233-0.129-0.223-0.052-0.508 0.171-0.637l2.423-1.399c0.223-0.129 0.508-0.052 0.637 0.171s0.052 0.508-0.171 0.637l-2.423 1.399c-0.073 0.042-0.154 0.063-0.233 0.063z"></path>
<path fill="#000000" d="M4.502 14.699c-0.109 0-0.219-0.028-0.32-0.086-0.307-0.177-0.412-0.569-0.235-0.876l1.399-2.423c0.177-0.307 0.569-0.412 0.876-0.235s0.412 0.569 0.235 0.876l-1.399 2.423c-0.119 0.206-0.334 0.321-0.556 0.321z"></path>
<path fill="#000000" d="M10.098 4.832c-0.079 0-0.159-0.020-0.233-0.063-0.223-0.129-0.299-0.414-0.171-0.637l1.399-2.423c0.129-0.223 0.414-0.299 0.637-0.171s0.299 0.414 0.171 0.637l-1.399 2.423c-0.086 0.15-0.243 0.233-0.404 0.233z"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB