Improve "Select Image" supported file types label with a tooltip (#392)

Fixes: https://github.com/resin-io/etcher/issues/378
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

build/css/main.css

@@ -6360,6 +6360,9 @@ body {
 .soft {
   color: #ddd; }
 
+[uib-tooltip] {
+  cursor: default; }
+
 .section-footer {
   display: flex;
   align-items: center;
@@ -6407,6 +6410,10 @@ body {
   color: #85898c;
   font-size: 10px; }
 
+.step-footer-underline {
+  border-bottom: 1px dotted;
+  padding-bottom: 2px; }
+
 .btn.step-footer, .step-footer.progress-button {
   font-size: 12px;
   border-bottom: 1px dashed;

lib/gui/app.js

@@ -25,6 +25,7 @@ const _ = require('lodash');
 
 const app = angular.module('Etcher', [
   require('angular-ui-router'),
+  require('angular-ui-bootstrap'),
 
   // Etcher modules
   require('./modules/drive-scanner'),

lib/gui/partials/main.html

@@ -8,7 +8,7 @@
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasImage()">
           <button class="btn btn-primary btn-brick" ng-click="app.openImageSelector()">Select image</button>
-          <p class="step-footer">*supported files: .img, .iso, .zip</p>
+          <p class="step-footer">.img, .iso, or <span class="step-footer-underline" uib-tooltip=".zip">compressed images</span></p>
         </div>
         <div ng-show="app.selection.hasImage()">
           <div ng-bind="app.selection.getImage() | basename"></div>

lib/gui/scss/main.scss

@@ -77,6 +77,10 @@ body {
   color: $gray-light;
 }
 
+[uib-tooltip] {
+  cursor: default;
+}
+
 .section-footer {
   @extend .text-center;
 
@@ -148,6 +152,11 @@ body {
   font-size: 10px;
 }
 
+.step-footer-underline {
+  border-bottom: 1px dotted;
+  padding-bottom: 2px;
+}
+
 .btn.step-footer {
   font-size: 12px;
   border-bottom: 1px dashed;

package.json

@@ -49,7 +49,7 @@
   "dependencies": {
     "angular": "^1.5.3",
     "angular-q-promisify": "^1.1.0",
-    "angular-ui-bootstrap": "^1.2.5",
+    "angular-ui-bootstrap": "^1.3.2",
     "angular-ui-router": "^0.2.18",
     "bluebird": "^3.0.5",
     "bootstrap-sass": "^3.3.5",