Merge pull request #10485 from nextcloud/update-triangle

Fix design of update error page

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');
 }

core/img/actions/error-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M5.516 2L2 5.516v4.968L5.516 14h4.968L14 10.484V5.516L10.484 2H5.516zM7 4h2v5H7V4zm0 6h2v2H7v-2z" fill="#fff"/></svg>

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,9 +131,7 @@
 				.show()
 				.append($('<ul>').append(message));
 			$('#update-progress-detailed')
-				.append($('<span>'))
-				.append(message)
-				.append($('<br>'));
+				.append('<p>' + message + '</p>');
 		},
 
 		setErrorMessage: function (message) {
@@ -144,9 +139,7 @@
 				.show()
 				.html(message);
 			$('#update-progress-detailed')
-				.append($('<span>'))
-				.append(message)
-				.append($('<br>'));
+				.append('<p>' + message + '</p>');
 		}
 	};
 

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>