Merge pull request #8496 from nextcloud/ext-strg-design-fixes

External storage design fixes and update

1 files changed, 50 insertions, 47 deletions

diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 12ad285c52b..014dd7a3c2b 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -12,31 +12,43 @@
 
 // TODO: move to a separate file
 var MOUNT_OPTIONS_DROPDOWN_TEMPLATE =
-	'<div class="drop dropdown mountOptionsDropdown">' +
+	'<div class="popovermenu open">'+
 	// FIXME: options are hard-coded for now
-	'	<div class="optionRow">' +
-	'		<input id="mountOptionsEncrypt" name="encrypt" type="checkbox" value="true" checked="checked"/>' +
-	'		<label for="mountOptionsEncrypt">{{t "files_external" "Enable encryption"}}</label>' +
-	'	</div>' +
-	'	<div class="optionRow">' +
-	'		<input id="mountOptionsPreviews" name="previews" type="checkbox" value="true" checked="checked"/>' +
-	'		<label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>' +
-	'	</div>' +
-	'	<div class="optionRow">' +
-	'		<input id="mountOptionsSharing" name="enable_sharing" type="checkbox" value="true"/>' +
-	'		<label for="mountOptionsSharing">{{t "files_external" "Enable sharing"}}</label>' +
-	'	</div>' +
-	'	<div class="optionRow">' +
-	'		<label for="mountOptionsFilesystemCheck">{{t "files_external" "Check for changes"}}</label>' +
-	'		<select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">' +
-	'			<option value="0">{{t "files_external" "Never"}}</option>' +
-	'			<option value="1" selected="selected">{{t "files_external" "Once every direct access"}}</option>' +
-	'		</select>' +
-	'	</div>' +
-	'	<div class="optionRow">' +
-	'		<input id="mountOptionsEncoding" name="encoding_compatibility" type="checkbox" value="true"/>' +
-	'		<label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>' +
-	'	</div>' +
+	'	<ul>'+
+	'		<li class="optionRow">'+
+	'			<span class="menuitem">'+
+	'				<input id="mountOptionsEncrypt" class="checkbox" name="encrypt" type="checkbox" value="true" checked="checked"/>'+
+	'				<label for="mountOptionsEncrypt">{{t "files_external" "Enable encryption"}}</label>'+
+	'			</span>'+
+	'		</li>'+
+	'		<li class="optionRow">'+
+	'			<span class="menuitem">'+
+	'				<input id="mountOptionsPreviews" class="checkbox" name="previews" type="checkbox" value="true" checked="checked"/>'+
+	'				<label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>'+
+	'			</span>'+
+	'		</li>'+
+	'		<li class="optionRow">'+
+	'			<span class="menuitem">'+
+	'				<input id="mountOptionsSharing" class="checkbox" name="enable_sharing" type="checkbox" value="true"/>'+
+	'				<label for="mountOptionsSharing">{{t "files_external" "Enable sharing"}}</label>'+
+	'			</span>'+
+	'		</li>'+
+	'		<li class="optionRow">'+
+	'			<span class="menuitem icon-search">'+
+	'				<label for="mountOptionsFilesystemCheck">{{t "files_external" "Check for changes"}}</label>'+
+	'				<select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">'+
+	'					<option value="0">{{t "files_external" "Never"}}</option>'+
+	'					<option value="1" selected="selected">{{t "files_external" "Once every direct access"}}</option>'+
+	'				</select>'+
+	'			</span>'+
+	'		</li>'+
+	'		<li class="optionRow">'+
+	'			<span class="menuitem">'+
+	'				<input id="mountOptionsEncoding" class="checkbox" name="encoding_compatibility" type="checkbox" value="true"/>'+
+	'				<label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>'+
+	'			</span>'+
+	'		</li>'+
+	'	</ul>'+
 	'</div>';
 
 /**
@@ -716,15 +728,15 @@ MountConfigListView.prototype = _.extend({
 			self.recheckStorageConfig($(this).closest('tr'));
 		});
 
-		this.$el.on('click', 'td.remove>img', function() {
+		this.$el.on('click', 'td.remove>.icon-delete', function() {
 			self.deleteStorageConfig($(this).closest('tr'));
 		});
 
-		this.$el.on('click', 'td.save>img', function () {
+		this.$el.on('click', 'td.save>.icon-checkmark', function () {
 			self.saveStorageConfig($(this).closest('tr'));
 		});
 
-		this.$el.on('click', 'td.mountOptionsToggle>img', function() {
+		this.$el.on('click', 'td.mountOptionsToggle>.icon-settings-dark', function() {
 			self._showMountOptionsDropdown($(this).closest('tr'));
 		});
 
@@ -1220,24 +1232,28 @@ MountConfigListView.prototype = _.extend({
 	 */
 	updateStatus: function($tr, status, message) {
 		var $statusSpan = $tr.find('.status span');
-		$statusSpan.removeClass('loading-small success indeterminate error');
 		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');
+		}
+		if (typeof message === 'string') {
+			$statusSpan.attr('title', message);
+			$statusSpan.tooltip();
+		} else {
+			$statusSpan.tooltip('destroy');
 		}
-		$statusSpan.attr('data-original-title', (typeof message === 'string') ? message : '');
 	},
 
 	/**
@@ -1279,11 +1295,6 @@ MountConfigListView.prototype = _.extend({
 	 * @param {Object} $tr configuration row
 	 */
 	_showMountOptionsDropdown: function($tr) {
-		if (this._preventNextDropdown) {
-			// prevented because the click was on the toggle
-			this._preventNextDropdown = false;
-			return;
-		}
 		var self = this;
 		var storage = this.getStorageConfig($tr);
 		var $toggle = $tr.find('.mountOptionsToggle');
@@ -1300,15 +1311,7 @@ MountConfigListView.prototype = _.extend({
 		dropDown.show($toggle, storage.mountOptions || [], visibleOptions);
 		$('body').on('mouseup.mountOptionsDropdown', function(event) {
 			var $target = $(event.target);
-			if ($toggle.has($target).length) {
-				// why is it always so hard to make dropdowns behave ?
-				// this prevents the click on the toggle to cause
-				// the dropdown to reopen itself
-				// (preventDefault doesn't work here because the click
-				// event is already in the queue and cannot be cancelled)
-				self._preventNextDropdown = true;
-			}
-			if ($target.closest('.dropdown').length) {
+			if ($target.closest('.popovermenu').length) {
 				return;
 			}
 			dropDown.hide();