From 0cc520f3a0a91f9b316f973ff8877c8fc4bae7b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 22 Feb 2018 13:09:06 +0100
Subject: [PATCH] Changed config saving feedback design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 .../css/{settings.css => settings.scss}               | 10 ++++------
 apps/files_external/js/settings.js                    | 11 ++++++-----
 apps/files_external/templates/settings.php            |  2 +-
 settings/css/settings.scss                            |  6 +++---
 4 files changed, 14 insertions(+), 15 deletions(-)
 rename apps/files_external/css/{settings.css => settings.scss} (97%)

diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.scss
similarity index 97%
rename from apps/files_external/css/settings.css
rename to apps/files_external/css/settings.scss
index 7aa7ab1a6b..a92ae242dd 100644
--- a/apps/files_external/css/settings.css
+++ b/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;
 }
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index bb34bc4ebc..211740c564 100644
--- a/apps/files_external/js/settings.js
+++ b/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 : '');
 	},
diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php
index ac5b0d01a1..98498eb2c3 100644
--- a/apps/files_external/templates/settings.php
+++ b/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')); ?>">
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 05d62423d1..7ed02f8d18 100644
--- a/settings/css/settings.scss
+++ b/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;
 	}
 }