From dec10f618e9b88a2f792894e1d0e23d6c07487b7 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Tue, 12 Apr 2016 15:59:42 -0400
Subject: [PATCH] Add "Change" button links below each step (#306)

Fixes: https://github.com/resin-io/etcher/issues/290
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
---
 build/css/main.css     |  6 ++++++
 lib/partials/main.html | 15 +++++++++++++--
 lib/scss/main.scss     |  7 +++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index d4a284d3..7794b513 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -6372,6 +6372,12 @@ body {
   color: #85898c;
   font-size: 10px; }
 
+.btn.step-footer, .step-footer.progress-button {
+  font-size: 12px;
+  border-bottom: 1px dashed;
+  border-radius: 0;
+  padding: 0; }
+
 .separator-xs {
   flex-grow: 0;
   background-color: #64686a;
diff --git a/lib/partials/main.html b/lib/partials/main.html
index 8c39e747..a7e62190 100644
--- a/lib/partials/main.html
+++ b/lib/partials/main.html
@@ -10,7 +10,11 @@
           <p class="step-footer">*supported files: .img, .iso, .zip</p>
         </div>
         <div ng-show="app.selection.hasImage()">
-          <span ng-bind="app.selection.getImage() | basename" ng-click="app.reselectImage()"></span>
+          <div ng-bind="app.selection.getImage() | basename" ng-click="app.reselectImage()"></div>
+
+          <button class="btn btn-link step-footer"
+            ng-click="app.reselectImage()"
+            ng-hide="app.writer.isFlashing()">Change</button>
         </div>
       </div>
     </div>
@@ -39,7 +43,14 @@
           </div>
 
         </div>
-        <div ng-show="app.selection.hasDrive()" ng-bind="app.selection.getDrive().name + ' - ' + app.selection.getDrive().size" ng-click="app.reselectDrive()"></div>
+        <div ng-show="app.selection.hasDrive()">
+          <div ng-bind="app.selection.getDrive().name + ' - ' + app.selection.getDrive().size"
+            ng-click="app.reselectDrive()"></div>
+
+          <button class="btn btn-link step-footer"
+            ng-click="app.reselectDrive()"
+            ng-hide="app.writer.isFlashing()">Change</button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 5d0d369d..4ab621bd 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -134,6 +134,13 @@ body {
   font-size: 10px;
 }
 
+.btn.step-footer {
+  font-size: 12px;
+  border-bottom: 1px dashed;
+  border-radius: 0;
+  padding: 0;
+}
+
 .separator-xs {
   flex-grow: 0;
   background-color: darken($color-disabled, 8%);