Merge pull request #9762 from nextcloud/feature/noid/setupcheck-design

Add visual indicator for setup checks

3 files changed, 55 insertions, 14 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 27269b23848..97ef8e15d8d 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -1108,10 +1108,33 @@ table.grid td.date {
 	margin-top: 20px;
 }
 
-#security-warning-state span {
-	padding-left: 25px;
-	background-position: 5px center;
-	margin-left: -5px;
+#security-warning-state-ok,
+#security-warning-state-warning,
+#security-warning-state-failure,
+#security-warning-state-loading {
+	span {
+		vertical-align: middle;
+
+		&.message {
+			padding: 12px;
+		}
+		&.icon {
+			width: 32px;
+			height: 32px;
+			background-position: center center;
+			display: inline-block;
+			border-radius: 50%;
+		}
+		&.icon-checkmark-white {
+			background-color: $color-success;
+		}
+		&.icon-error-white {
+			background-color: $color-warning;
+		}
+		&.icon-close-white {
+			background-color: $color-error;
+		}
+	}
 }
 
 #shareAPI {
@@ -1274,6 +1297,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			list-style: circle;
 		}
 	}
+
 	.loading {
 		height: 50px;
 		background-position: left center;
diff --git a/settings/js/admin.js b/settings/js/admin.js
index 650bc84930c..61c40e789ba 100644
--- a/settings/js/admin.js
+++ b/settings/js/admin.js
@@ -256,7 +256,7 @@ $(document).ready(function(){
 	).then(function(check1, check2, check3, check4, check5, check6) {
 		var messages = [].concat(check1, check2, check3, check4, check5, check6);
 		var $el = $('#postsetupchecks');
-		$el.find('.loading').addClass('hidden');
+		$('#security-warning-state-loading').addClass('hidden');
 
 		var hasMessages = false;
 		var $errorsEl = $el.find('.errors');
@@ -291,11 +291,18 @@ $(document).ready(function(){
 		}
 
 		if (hasMessages) {
-			$el.find('.hint').removeClass('hidden');
+			$('#postsetupchecks-hint').removeClass('hidden');
+			if ($errorsEl.find('li').length > 0) {
+				$('#security-warning-state-failure').removeClass('hidden');
+			} else {
+				$('#security-warning-state-warning').removeClass('hidden');
+			}
 		} else {
 			var securityWarning = $('#security-warning');
 			if (securityWarning.children('ul').children().length === 0) {
-				$('#security-warning-state').find('span').removeClass('hidden');
+				$('#security-warning-state-ok').removeClass('hidden');
+			} else {
+				$('#security-warning-state-failure').removeClass('hidden');
 			}
 		}
 	});
diff --git a/settings/templates/settings/admin/overview.php b/settings/templates/settings/admin/overview.php
index 2bddd1f9c3e..08aee8b5b76 100644
--- a/settings/templates/settings/admin/overview.php
+++ b/settings/templates/settings/admin/overview.php
@@ -151,18 +151,28 @@
 			<?php endif; ?>
 	</ul>
 
+	<div id="security-warning-state-ok" class="hidden">
+		<span class="icon icon-checkmark-white"></span><span class="message"><?php p($l->t('All checks passed.'));?></span>
+	</div>
+	<div id="security-warning-state-failure" class="hidden">
+		<span class="icon icon-close-white"></span><span class="message"><?php p($l->t('There are some errors regarding your setup.'));?></span>
+	</div>
+	<div id="security-warning-state-warning" class="hidden">
+		<span class="icon icon-error-white"></span><span class="message"><?php p($l->t('There are some warnings regarding your setup.'));?></span>
+	</div>
+	<div id="security-warning-state-loading">
+		<span class="icon loading"></span><span class="message"><?php p($l->t('Checking for system and security issues.'));?></span>
+	</div>
+
 	<div id="postsetupchecks" data-check-wellknown="<?php if($_['checkForWorkingWellKnownSetup']) { p('true'); } else { p('false'); } ?>">
-		<div class="loading"></div>
 		<ul class="errors hidden"></ul>
 		<ul class="warnings hidden"></ul>
 		<ul class="info hidden"></ul>
-		<p class="hint hidden">
-			<?php print_unescaped($l->t('Please double check the <a target="_blank" rel="noreferrer noopener" href="%s">installation guides ↗</a>, and check for any errors or warnings in the <a href="%s">log</a>.', [link_to_docs('admin-install'), \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => 'logging'])] )); ?>
-		</p>
-	</div>
-	<div id="security-warning-state">
-		<span class="hidden icon-checkmark"><?php p($l->t('All checks passed.'));?></span>
 	</div>
+	<p id="postsetupchecks-hint" class="hidden">
+		<?php print_unescaped($l->t('Please double check the <a target="_blank" rel="noreferrer noopener" href="%s">installation guides ↗</a>, and check for any errors or warnings in the <a href="%s">log</a>.', [link_to_docs('admin-install'), \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => 'logging'])] )); ?>
+	</p>
+
 </div>
 
 <div class="section">