Merge pull request #10485 from nextcloud/update-triangle

Fix design of update error page
nextcloud · Aug 6, 2018 · 49662f3 · 49662f3
2 parents ca54166 + 6d7bf81
commit 49662f3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/core/css/guest.css b/core/css/guest.css
@@ -522,6 +522,7 @@ form #selectDbType label.ui-state-active {
 	background-color: rgba(0,0,0,.3);
 	color: #fff;
 	text-align: left;
+	word-wrap: break-word;
 	border-radius: 3px;
 	cursor: default;
 	-moz-user-select: text;
@@ -619,22 +620,34 @@ p.info {
 }
 #update-progress-detailed {
 	text-align: left;
+	margin-bottom: 12px;
 }
 .update-show-detailed {
-	padding: 13px;
+	padding: 12px;
 	display: block;
 	opacity: .75;
 }
+.update-show-detailed .icon-caret-white {
+	display: inline-block;
+	vertical-align: middle;
+}
 #update-progress-icon {
 	height: 32px;
 	margin: 10px;
 	background-size: 32px;
 }
 
+
 /* Icons */
 .icon-info-white {
 	background-image: url('../img/actions/info-white.svg?v=2');
 }
+.icon-error-white {
+	background-image: url('../img/actions/error-white.svg?v=1');
+}
+.icon-caret-white {
+	background-image: url('../img/actions/caret-white.svg?v=1');
+}
 .icon-confirm {
 	background-image: url('../img/actions/confirm.svg?v=2');
 }

diff --git a/core/img/actions/error-white.svg b/core/img/actions/error-white.svg
diff --git a/core/js/update.js b/core/js/update.js
@@ -58,7 +58,7 @@
 				$(window).off('beforeunload.inprogress');
 				self.setErrorMessage(message);
 				message = t('core', 'Please reload the page.');
-				$('<span>').addClass('error').append('<a href=".">'+message+'</a><br />').appendTo($el);
+				$('<p>').append('<a href=".">'+message+'</a>').appendTo($el);
 				updateEventSource.close();
 			});
 			updateEventSource.listen('failure', function(message) {
@@ -69,16 +69,15 @@
 					.removeClass('icon-loading-dark');
 
 				self.setErrorMessage(message);
-				var span = $('<span>')
-					.addClass('bold');
+				var updateUnsuccessful = $('<p>');
 				if(message === 'Exception: Updates between multiple major versions and downgrades are unsupported.') {
-					span.append(t('core', 'The update was unsuccessful. For more information <a href="{url}">check our forum post</a> covering this issue.', {'url': 'https://help.nextcloud.com/t/updates-between-multiple-major-versions-are-unsupported/7094'}));
+					updateUnsuccessful.append(t('core', 'The update was unsuccessful. For more information <a href="{url}">check our forum post</a> covering this issue.', {'url': 'https://help.nextcloud.com/t/updates-between-multiple-major-versions-are-unsupported/7094'}));
 				} else {
-					span.append(t('core', 'The update was unsuccessful. ' +
+					updateUnsuccessful.append(t('core', 'The update was unsuccessful. ' +
 						'Please report this issue to the ' +
 						'<a href="https://github.com/nextcloud/server/issues" target="_blank">Nextcloud community</a>.'));
 				}
-				span.appendTo($el);
+				updateUnsuccessful.appendTo($el);
 			});
 			updateEventSource.listen('done', function() {
 				$(window).off('beforeunload.inprogress');
@@ -123,9 +122,7 @@
 		setMessage: function(message) {
 			$('#update-progress-message').html(message);
 			$('#update-progress-detailed')
-				.append($('<span>'))
-				.append(message)
-				.append($('<br>'));
+				.append('<p>' + message + '</p>');
 		},
 
 		setPermanentMessage: function(message) {
@@ -134,19 +131,15 @@
 				.show()
 				.append($('<ul>').append(message));
 			$('#update-progress-detailed')
-				.append($('<span>'))
-				.append(message)
-				.append($('<br>'));
+				.append('<p>' + message + '</p>');
 		},
 
 		setErrorMessage: function (message) {
 			$('#update-progress-message-error')
 				.show()
 				.html(message);
 			$('#update-progress-detailed')
-				.append($('<span>'))
-				.append(message)
-				.append($('<br>'));
+				.append('<p>' + message + '</p>');
 		}
 	};
 

diff --git a/core/templates/update.admin.php b/core/templates/update.admin.php
@@ -49,7 +49,7 @@
 		<p id="update-progress-message-error" class="hidden"></p>
 		<ul id="update-progress-message-warnings" class="hidden"></ul>
 		<p id="update-progress-message"></p>
-		<a class="update-show-detailed"><?php p($l->t( 'Detailed logs' )); ?> <img src="<?php print_unescaped(image_path('', 'actions/caret.svg')); ?>" /></a>
+		<a class="update-show-detailed"><?php p($l->t( 'Detailed logs' )); ?> <span class="icon-caret-white"></span></a>
 		<div id="update-progress-detailed" class="hidden"></div>
 	</div>
 </div>