Changed config saving feedback design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files_external/css/settings.scss

@@ -18,9 +18,11 @@
 
 #externalStorage td.status > span {
 	display: inline-block;
-	height: 16px;
-	width: 16px;
+	height: 28px;
+	width: 28px;
 	vertical-align: text-bottom;
+	border-radius: 50%;
+	cursor: pointer;
 }
 
 td.mountPoint, td.backend { width:160px; }
@@ -78,10 +80,6 @@ td.mountPoint, td.backend { width:160px; }
 	top: 3px;
 }
 
-#externalStorage td.status .success {
-	border-radius: 50%;
-}
-
 #userMountingBackends {
 	padding-left: 25px;
 }

apps/files_external/js/settings.js

@@ -1230,22 +1230,23 @@ MountConfigListView.prototype = _.extend({
 	 */
 	updateStatus: function($tr, status, message) {
 		var $statusSpan = $tr.find('.status span');
-		$statusSpan.removeClass('loading-small success indeterminate error');
+		$statusSpan.removeClass();
+		console.log($tr, status, message);
 		switch (status) {
 			case null:
 				// remove status
 				break;
 			case StorageConfig.Status.IN_PROGRESS:
-				$statusSpan.addClass('loading-small');
+				$statusSpan.attr('class', 'icon-loading-small');
 				break;
 			case StorageConfig.Status.SUCCESS:
-				$statusSpan.addClass('success');
+				$statusSpan.attr('class', 'success icon-checkmark-white');
 				break;
 			case StorageConfig.Status.INDETERMINATE:
-				$statusSpan.addClass('indeterminate');
+				$statusSpan.attr('class', 'indeterminate icon-info-white');
 				break;
 			default:
-				$statusSpan.addClass('error');
+				$statusSpan.attr('class', 'error icon-error-white');
 		}
 		$statusSpan.attr('data-original-title', (typeof message === 'string') ? message : '');
 	},

apps/files_external/templates/settings.php

@@ -110,7 +110,7 @@
 			<?php endif; ?>
 			>
 				<td class="status">
-					<span></span>
+					<span title="<?php p($l->t('Click to recheck the configuration')); ?>"></span>
 				</td>
 				<td class="mountPoint"><input type="text" name="mountPoint" value=""
 					placeholder="<?php p($l->t('Folder name')); ?>">

settings/css/settings.scss

@@ -1105,14 +1105,14 @@ table.grid td.date {
 
 span {
 	&.success {
-		background: #37ce02;
+		background-color: $color-success;
 		border-radius: $border-radius;
 	}
 	&.error {
-		background: #ce3702;
+		background-color: $color-error;
 	}
 	&.indeterminate {
-		background: #e6db00;
+		background-color: $color-warning;
 		border-radius: 40% 0;
 	}
 }