From 2677ad92d3fa5d631995aa109ba1ac19b5518a80 Mon Sep 17 00:00:00 2001
From: shortcutme <tamas@zeronet.io>
Date: Thu, 18 May 2017 03:05:02 +0200
Subject: [PATCH] Fix multi-line confirmation dialog

---
 src/Ui/media/Wrapper.coffee | 10 ++++++----
 src/Ui/media/Wrapper.css    |  4 +++-
 src/Ui/media/all.css        |  4 +++-
 src/Ui/media/all.js         | 12 +++++++-----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/Ui/media/Wrapper.coffee b/src/Ui/media/Wrapper.coffee
index 89538805..f87ff197 100644
--- a/src/Ui/media/Wrapper.coffee
+++ b/src/Ui/media/Wrapper.coffee
@@ -204,17 +204,19 @@ class Wrapper
 		@notifications.add("notification-#{message.id}", message.params[0], body, message.params[2])
 
 	displayConfirm: (message, captions, cb) ->
-		body = $("<span class='message'>"+message+"</span>")
+		body = $("<span class='message-outer'><span class='message'>"+message+"</span></span>")
+		buttons = $("<span class='buttons'></span>")
 		if captions not instanceof Array then captions = [captions]  # Convert to list if necessary
 		for caption, i in captions
-			button = $("<a href='##{caption}' class='button button-#{caption} button-#{i+1}' data-value='#{i+1}'>#{caption}</a>") # Add confirm button
+			button = $("<a href='##{caption}' class='button button-confirm button-#{caption} button-#{i+1}' data-value='#{i+1}'>#{caption}</a>") # Add confirm button
 			button.on "click", (e) =>
 				cb(parseInt(e.currentTarget.dataset.value))
 				return false
-			body.append(button)
+			buttons.append(button)
+		body.append(buttons)
 		@notifications.add("notification-#{caption}", "ask", body)
 
-		button.focus()
+		buttons.first().focus()
 		$(".notification").scrollLeft(0)
 
 
diff --git a/src/Ui/media/Wrapper.css b/src/Ui/media/Wrapper.css
index aa32b60c..4859112f 100644
--- a/src/Ui/media/Wrapper.css
+++ b/src/Ui/media/Wrapper.css
@@ -54,8 +54,10 @@ a { color: black }
 	padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
 	background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
 }
+.notification .message-outer { display: table-row }
+.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; }
 .notification.long .body { padding-top: 10px; padding-bottom: 10px }
-.notification .message { display: table-cell; vertical-align: middle }
+.notification .message { display: table-cell; vertical-align: middle; }
 
 .notification.visible { max-width: 350px }
 
diff --git a/src/Ui/media/all.css b/src/Ui/media/all.css
index a315403a..ff64e90b 100644
--- a/src/Ui/media/all.css
+++ b/src/Ui/media/all.css
@@ -59,8 +59,10 @@ a { color: black }
 	padding-left: 14px; padding-right: 60px; height: 40px; vertical-align: middle; display: table;
 	background-color: white; left: 50px; top: 0; position: relative; padding-top: 5px; padding-bottom: 5px;
 }
+.notification .message-outer { display: table-row }
+.notification .buttons { display: table-cell; vertical-align: top; padding-top: 9px; }
 .notification.long .body { padding-top: 10px; padding-bottom: 10px }
-.notification .message { display: table-cell; vertical-align: middle }
+.notification .message { display: table-cell; vertical-align: middle; }
 
 .notification.visible { max-width: 350px }
 
diff --git a/src/Ui/media/all.js b/src/Ui/media/all.js
index 6280a746..04acc0de 100644
--- a/src/Ui/media/all.js
+++ b/src/Ui/media/all.js
@@ -1087,24 +1087,26 @@ jQuery.extend( jQuery.easing,
     };
 
     Wrapper.prototype.displayConfirm = function(message, captions, cb) {
-      var body, button, caption, i, j, len;
-      body = $("<span class='message'>" + message + "</span>");
+      var body, button, buttons, caption, i, j, len;
+      body = $("<span class='message-outer'><span class='message'>" + message + "</span></span>");
+      buttons = $("<span class='buttons'></span>");
       if (!(captions instanceof Array)) {
         captions = [captions];
       }
       for (i = j = 0, len = captions.length; j < len; i = ++j) {
         caption = captions[i];
-        button = $("<a href='#" + caption + "' class='button button-" + caption + " button-" + (i + 1) + "' data-value='" + (i + 1) + "'>" + caption + "</a>");
+        button = $("<a href='#" + caption + "' class='button button-confirm button-" + caption + " button-" + (i + 1) + "' data-value='" + (i + 1) + "'>" + caption + "</a>");
         button.on("click", (function(_this) {
           return function(e) {
             cb(parseInt(e.currentTarget.dataset.value));
             return false;
           };
         })(this));
-        body.append(button);
+        buttons.append(button);
       }
+      body.append(buttons);
       this.notifications.add("notification-" + caption, "ask", body);
-      button.focus();
+      buttons.first().focus();
       return $(".notification").scrollLeft(0);
     };