From 32cac3b78ff198f56599fff20e232d8ab0b57666 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviotti@openmailbox.org>
Date: Mon, 24 Oct 2016 15:17:52 -0400
Subject: [PATCH] feat(GUI): use info icon instead of "SHOW FULL FILE NAME"
 (#770)

The main purpose of this change is to simplify the interface and avoid
unnecessary text.

Fixes: https://github.com/resin-io/etcher/issues/742
Change-Type: minor
Changelog-Entry: Use info icon instead of "SHOW FULL FILE NAME" in first step.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
---
 build/css/main.css                         | 24 +++++++++++++++++++---
 lib/gui/pages/main/styles/_main.scss       |  4 ++++
 lib/gui/pages/main/templates/main.tpl.html | 14 ++++++-------
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index c3a0ca6d..62080867 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -6450,6 +6450,24 @@ body {
 .modal-flash-error-modal .modal-title .glyphicon, .modal-flash-error-modal .modal-title .tick {
   color: #d9534f; }
 
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.modal-warning-modal .modal-title .glyphicon, .modal-warning-modal .modal-title .tick {
+  color: #d9534f; }
+
 /*
  * Copyright 2016 Resin.io
  *
@@ -6540,6 +6558,9 @@ body {
   border-radius: 0;
   padding: 0; }
 
+.page-main .glyphicon, .page-main .tick {
+  vertical-align: text-top; }
+
 /*
  * Copyright 2016 Resin.io
  *
@@ -6569,9 +6590,6 @@ body {
   margin-top: 30px;
   margin-bottom: 15px; }
 
-.modal-settings-dangerous-modal .modal-title .glyphicon, .modal-settings-dangerous-modal .modal-title .tick {
-  color: #d9534f; }
-
 /*
  * Copyright 2016 Resin.io
  *
diff --git a/lib/gui/pages/main/styles/_main.scss b/lib/gui/pages/main/styles/_main.scss
index 0ee235b4..c9480e6e 100644
--- a/lib/gui/pages/main/styles/_main.scss
+++ b/lib/gui/pages/main/styles/_main.scss
@@ -114,3 +114,7 @@
   border-radius: 0;
   padding: 0;
 }
+
+.page-main .glyphicon {
+  vertical-align: text-top;
+}
diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html
index 7c5dfed1..475766c7 100644
--- a/lib/gui/pages/main/templates/main.tpl.html
+++ b/lib/gui/pages/main/templates/main.tpl.html
@@ -16,16 +16,16 @@
           </p>
         </div>
         <div ng-if="main.selection.hasImage()">
-          <div class="step-selection-text"
-            ng-click="main.external.open(main.selection.getImageUrl())"
-            ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:25"
-            uib-tooltip="{{ main.selection.getImagePath() | basename }}"></div>
+          <div class="step-selection-text">
+            <span ng-click="main.external.open(main.selection.getImageUrl())"
+              ng-bind="main.selection.getImageName() || main.selection.getImagePath() | basename | middleEllipses:20"
+              uib-tooltip="{{ main.selection.getImagePath() | basename }}"></span>
 
-          <button class="button button-link step-tooltip"
-            ng-click="main.tooltipModal.show({
+            <span class="glyphicon glyphicon-info-sign" ng-click="main.tooltipModal.show({
               title: 'IMAGE FILE NAME',
               message: main.selection.getImagePath()
-            })">SHOW FULL FILE NAME</button>
+            })"></span>
+          </div>
 
           <button class="button button-link step-footer"
             ng-click="image.reselectImage()"