Qt Metrics 2 (v0.40): Qt brand colors and fonts

Applied Qt brand color and font guidelines where and
as reasonable, e.g. font changed to Open Sans, primary
buttons changed green and made bigger, and bar colors
to use secondaty colors. Removed the "2" from home page
title.
The changed UI has been checked by Henri Tokola.

Change-Id: I0720b916ae615b2c2bfc9ce49cb6a7b62eb16248
Reviewed-by: Juha Sippola <juhasippola@outlook.com>
Reviewed-by: Tony Sarajärvi <tony.sarajarvi@theqtcompany.com>

5 files changed, 135 insertions, 48 deletions

diff --git a/non-puppet/qtmetrics2/fonts/OpenSans-Regular.ttf b/non-puppet/qtmetrics2/fonts/OpenSans-Regular.ttf
new file mode 100644
index 0000000..db43334
--- /dev/null
+++ b/non-puppet/qtmetrics2/fonts/OpenSans-Regular.ttf
diff --git a/non-puppet/qtmetrics2/styles/qtmetrics.css b/non-puppet/qtmetrics2/styles/qtmetrics.css
index 060c277..bc97771 100644
--- a/non-puppet/qtmetrics2/styles/qtmetrics.css
+++ b/non-puppet/qtmetrics2/styles/qtmetrics.css
@@ -35,38 +35,132 @@
 
 /**
  * Qt Metrics style sheet
- * @since     29-09-2015
+ * @since     30-09-2015
  * @author    Juha Sippola
  */
 
 /*
+ * Using Qt brand fonts
+ * (These overwrite the default Bootstrap fonts)
+ */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
+body,
+.tooltip,
+.popover {
+font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+}
+
+/*
+ * Using Qt brand colors
+ * (These overwrite the default Bootstrap colors)
+ */
+/* header */
+.navbar-fixed-top {
+  background-color: #26282a;
+}
+.navbar-fixed-top a {
+  transition: all, 0.3s, ease-in-out;
+}
+.breadcrumb {
+  background-color: #eeeeee;
+}
+/* jumbotron */
+.jumbotron {
+  background-color: #5caa15;
+}
+.jumbotron .well {
+  background-color: #eeeeee;
+}
+.jumbotron h1 {
+  color: #fff;
+}
+/* info button */
+.page-header > .btn-info {
+  background-color: #5caa15;
+}
+.page-header > .btn-info:hover {
+  color: #eeeeee;
+}
+.infoWell{
+  border-color: #5caa15;
+  background-color: #eeeeee;
+}
+/* home page button or active button */
+.btn-primary,
+.btn-primary:focus,
+.btn-primary:link {
+  background-color: #5caa15;
+  border-color: #5caa15;
+}
+.btn-primary:hover,
+.btn-primary:active {
+  color: #5caa15;
+  background-color: white;
+  border-color: #5caa15;
+}
+.btn-primary .badge {
+  color: #5caa15;
+}
+/* remove button */
+.btn-danger:hover,
+.btn-danger:active {
+  color: #e41e25;
+  background-color: white;
+  border-color: #e41e25;
+}
+/* all buttons */
+.btn-default,
+.btn-primary,
+.btn-info,
+.btn-danger {
+  -webkit-transition: all, 0.3s, ease-in-out;
+  -moz-transition: all, 0.3s, ease-in-out;
+  -ms-transition: all, 0.3s, ease-in-out;
+  -o-transition: all, 0.3s, ease-in-out;
+  transition: all, 0.3s, ease-in-out;
+  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
+}
+.btn-default:hover,
+.btn-primary:hover,
+.btn-info:hover,
+.btn-danger:hover {
+  box-shadow: none;
+}
+/* text input area */
+textarea:focus,
+input:focus,
+input[type]:focus,
+.uneditable-input:focus {
+  border-color: #80c342;
+  outline: 0 none;
+}
+
+/*
  * Brand logo and text alignment
  */
 .navbar-brand img {
   height: 30px;
   width: auto;
 }
+.navbar-header .navbar-brand:hover {
+  color: #80c342;
+}
 
 /*
- * Load home page image (from www.qt.io) with text color adjustments in tablets and bigger devices only (typically using faster connection)
+ * Load home page image in tablets and bigger devices only (typically using faster connection)
  */
 @media screen and (min-width: 768px) {
   .jumbotron {
     background-image: url("https://d3hp9ud7yvwzy0.cloudfront.net/wp-content/uploads/2014/06/Qt-in-nutshell-hero2.jpg");
     background-size: cover;
   }
-  .jumbotron h1 {
-    color: black;
-    text-shadow: 0 0 8px white;
-  }
-}
-
-/*
- * The master version on home page
- */
-.masterVersion {
-  color: forestgreen;
-  text-shadow: 0 0 8px black;
 }
 
 /*
@@ -154,13 +248,6 @@
 }
 
 /*
- * Metrics page description well
- */
-.infoWell{
-  background: lightblue;
-}
-
-/*
  * Table formatting
  */
 .leftBorder {
@@ -180,31 +267,31 @@ thead {
 }
 
 /*
- * Coloring
+ * Coloring (using Qt brand colors)
  */
 .green {
-  color: green;
+  color: #5caa15;
 }
 .red {
   color: red;
 }
 .gray {
-  color: gray;
+  color: #bdbebf;
 }
 .blue {
-  color: #337AB7;
+  color: #46a2da;
 }
 .greenBackground {
-  background-color: lightgreen;
+  background-color: #80c342;
 }
 .redBackground {
-  background-color: indianred;
+  background-color: #e41e25;
 }
 .blueBackground {
-  background-color: #337AB7;
+  background-color: #46a2da;
 }
 .grayBackground {
-  background-color: lightgray;
+  background-color: #bdbebf;
 }
 
 /*
@@ -248,7 +335,7 @@ thead {
 }
 
 .chartSpeedo .label {
-  color: #464A4F;
+  color: #585a5c;
   background-color: white;
-  border: 1px solid #464A4F;
+  border: 1px solid #585a5c;
 }
diff --git a/non-puppet/qtmetrics2/styles/qtmetrics_svg.css b/non-puppet/qtmetrics2/styles/qtmetrics_svg.css
index be86a5d..8950a29 100644
--- a/non-puppet/qtmetrics2/styles/qtmetrics_svg.css
+++ b/non-puppet/qtmetrics2/styles/qtmetrics_svg.css
@@ -35,7 +35,7 @@
 
 /**
  * Qt Metrics style definitions for SVG (scalable vector graphics)
- * @since     27-09-2015
+ * @since     30-09-2015
  * @author    Juha Sippola
  */
 
@@ -45,7 +45,7 @@
  */
 
 .chart-color1 {
-  fill: #FF0000;
+  fill: #e41e25;
 }
 .chart-color2 {
   fill: #FF4D00;
@@ -72,7 +72,7 @@
   fill: #72F600;
 }
 .chart-color10 {
-  fill: #07FB00;
+  fill: #80c342;
 }
 .needle,
 .needle-center {
diff --git a/non-puppet/qtmetrics2/templates/about.html b/non-puppet/qtmetrics2/templates/about.html
index 60f5a5e..4e732cd 100644
--- a/non-puppet/qtmetrics2/templates/about.html
+++ b/non-puppet/qtmetrics2/templates/about.html
@@ -34,7 +34,7 @@
 
 /**
  * About window content
- * @since     29-09-2015
+ * @since     30-09-2015
  * @author    Juha Sippola
  */
 
@@ -52,4 +52,4 @@ and the global Qt developer community are the target audience. For detailed desc
 <p>See the <strong><a href="https://wiki.qt.io/Qt_Metrics_2_Backlog" target="_blank">backlog</a></strong>
 for development items currently identified or in progress.</p>
 
-<p><small>Version 0.39 (29-Sep-2015)</small></p>
+<p><small>Version 0.40 (30-Sep-2015)</small></p>
diff --git a/non-puppet/qtmetrics2/templates/home.html b/non-puppet/qtmetrics2/templates/home.html
index 946b341..3da3fba 100644
--- a/non-puppet/qtmetrics2/templates/home.html
+++ b/non-puppet/qtmetrics2/templates/home.html
@@ -34,7 +34,7 @@
 
 /**
  * Home page
- * @since     27-09-2015
+ * @since     30-09-2015
  * @author    Juha Sippola
  */
 
@@ -45,7 +45,7 @@
 <div class="jumbotron">
 <div class="container">
 <div class="col-md-9">
-<h1>Qt Metrics <sup class="masterVersion">2</sup></h1>
+<h1>Qt Metrics</h1>
 </div>
 <div class="col-md-3">
 <div class="well well-sm">
@@ -66,8 +66,8 @@
 <h2>Overview</h2>
 <p>See the latest <strong>{{ masterProject }} {{ masterState }}</strong> status:</p>
 <div>
-<a class="btn btn-primary btn-xs" href="{{ dashboardRoute }}" role="button">dashboard</a>
-<a class="btn btn-primary btn-xs" href="{{ overviewRoute }}" role="button">overview</a>
+<a class="btn btn-primary" href="{{ dashboardRoute }}" role="button">dashboard</a>
+<a class="btn btn-primary" href="{{ overviewRoute }}" role="button">overview</a>
 </div>
 </div>
 
@@ -81,7 +81,7 @@
 <div>
 {% for platform in platforms %}
 <div class="btn-group">
-<a class="btn btn-primary btn-xs" href="{{ platformRoute }}/{{ platform.os|url_encode }}" role="button">{{ platform.os }}</a>
+<a class="btn btn-primary" href="{{ platformRoute }}/{{ platform.os|url_encode }}" role="button">{{ platform.os }}</a>
 </div>
 {% endfor %}
 </div>
@@ -100,7 +100,7 @@
 <p>See testset status for a project:</p>
 <div>
 <form class="form-horizontal" role="form" method="post">
-<div class="input-group input-group-sm">
+<div class="input-group">
 <input id="projectInput" name="projectInputValue" type="text" class="form-control" placeholder="project name...">
 <span class="input-group-btn">
 <input id="projectInputSubmit" name="projectInputSubmit" type="submit" class="btn btn-primary" value="Show">
@@ -119,7 +119,7 @@
 <p>See results for a testset:</p>
 <div>
 <form class="form-horizontal" role="form" method="post">
-<div class="input-group input-group-sm">
+<div class="input-group">
 <input id="testsetInput" name="testsetInputValue" type="text" class="form-control" placeholder="testset name...">
 <span class="input-group-btn">
 <input id="testsetInputSubmit" name="testsetInputSubmit" type="submit" class="btn btn-primary" value="Show">
@@ -130,15 +130,15 @@
 <br>
 <p>See top lists:</p>
 <div>
-<a class="btn btn-primary btn-xs" href="{{ topRoute }}" role="button">testsets</a>
-<a class="btn btn-primary btn-xs" href="{{ flakyRoute }}" role="button">flaky</a>
-<a class="btn btn-primary btn-xs" href="{{ topTestfunctionsRoute }}" role="button">test functions</a>
-<a class="btn btn-primary btn-xs" href="{{ durationTestsetsRoute }}" role="button">duration</a>
+<a class="btn btn-primary" href="{{ topRoute }}" role="button">testsets</a>
+<a class="btn btn-primary" href="{{ flakyRoute }}" role="button">flaky</a>
+<a class="btn btn-primary" href="{{ durationTestsetsRoute }}" role="button">duration</a>
+<a class="btn btn-primary" href="{{ topTestfunctionsRoute }}" role="button">test functions</a>
 </div>
 <br>
 <p>See blacklisted but passed tests:</p>
 <div>
-<a class="btn btn-primary btn-xs" href="{{ bpassedTestfunctionsRoute }}" role="button">test functions</a>
+<a class="btn btn-primary" href="{{ bpassedTestfunctionsRoute }}" role="button">test functions</a>
 </div>
 </div> {# .col-md... #}