Merge pull request #10480 from nextcloud/bugfix/10420/settings

Settings design polishing

4 files changed, 36 insertions, 20 deletions

diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss
index 04ecfc41620..9c75d455b33 100644
--- a/apps/files_external/css/settings.scss
+++ b/apps/files_external/css/settings.scss
@@ -6,6 +6,12 @@
 	margin: 15px 0 20px 0;
 }
 
+#externalStorage td {
+	& > input, & > select {
+		width: 100%;
+	}
+}
+
 #externalStorage td.status {
 	/* overwrite conflicting core styles */
 	display: table-cell;
@@ -20,8 +26,12 @@
 	border-radius: 50%;
 	cursor: pointer;
 }
-
-td.mountPoint, td.backend { width:160px; }
+#externalStorage {
+	td.mountPoint, td.backend, td.authentication, td.configuration {
+		min-width: 160px;
+		width: 15%;
+	}
+}
 #externalStorage td>img { padding-top:7px; opacity: 0.5; }
 #externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
 #addMountPoint>td { border:none; }
@@ -86,6 +96,10 @@ td.mountPoint, td.backend { width:160px; }
 	top: 3px;
 }
 
+#externalStorage .select2-container.applicableUsers {
+	width: 100% !important;
+}
+
 #userMountingBackends {
 	padding-left: 25px;
 }
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 38a77b59a14..b871fe2f743 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -54,6 +54,11 @@ var MOUNT_OPTIONS_DROPDOWN_TEMPLATE =
 	'				<label for="mountOptionsReadOnly">{{t "files_external" "Read only"}}</label>' +
 	'			</span>' +
 	'		</li>' +
+	'		<li class="optionRow persistent">' +
+	'			<a href="#" class="menuitem remove icon-delete">' +
+	'				<span>{{t "files_external" "Delete"}}</span>' +
+	'			</a>' +
+	'		</li>' +
 	'	</ul>'+
 	'</div>';
 
@@ -584,7 +589,7 @@ MountOptionsDropdown.prototype = {
 		$el.find('.optionRow').each(function(i, row){
 			var $row = $(row);
 			var optionId = $row.find('input, select').attr('name');
-			if (visibleOptions.indexOf(optionId) === -1) {
+			if (visibleOptions.indexOf(optionId) === -1 && !$row.hasClass('persistent')) {
 				$row.hide();
 			} else {
 				$row.show();
@@ -734,7 +739,7 @@ MountConfigListView.prototype = _.extend({
 			self.recheckStorageConfig($(this).closest('tr'));
 		});
 
-		this.$el.on('click', 'td.remove>.icon-delete', function() {
+		this.$el.on('click', 'td.mountOptionsToggle .icon-delete', function() {
 			self.deleteStorageConfig($(this).closest('tr'));
 		});
 
@@ -742,7 +747,7 @@ MountConfigListView.prototype = _.extend({
 			self.saveStorageConfig($(this).closest('tr'));
 		});
 
-		this.$el.on('click', 'td.mountOptionsToggle>.icon-settings-dark', function() {
+		this.$el.on('click', 'td.mountOptionsToggle>.icon-more', function() {
 			self._showMountOptionsDropdown($(this).closest('tr'));
 		});
 
@@ -1311,7 +1316,8 @@ MountConfigListView.prototype = _.extend({
 			'filesystem_check_changes',
 			'enable_sharing',
 			'encoding_compatibility',
-			'readonly'
+			'readonly',
+			'delete'
 		];
 		if (this._encryptionEnabled) {
 			visibleOptions.push('encrypt');
diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php
index db944075cc1..b3900aaf93d 100644
--- a/apps/files_external/templates/settings.php
+++ b/apps/files_external/templates/settings.php
@@ -95,6 +95,7 @@
 
 <form data-can-create="<?php echo $canCreateMounts?'true':'false' ?>" id="files_external" class="section" data-encryption-enabled="<?php echo $_['encryptionEnabled']?'true': 'false'; ?>">
 	<h2 data-anchor-name="external-storage"><?php p($l->t('External storages')); ?></h2>
+	<p class="settings-hint"><?php p($l->t('External storage enables you to mount external storage services and devices as secondary Nextcloud storage devices. You may also allow users to mount their own external storage services.')); ?></p>
 	<?php if (isset($_['dependencies']) and ($_['dependencies'] !== '') and $canCreateMounts) print_unescaped(''.$_['dependencies'].''); ?>
 	<table id="externalStorage" class="grid" data-admin='<?php print_unescaped(json_encode($_['visibilityType'] === BackendService::VISIBILITY_ADMIN)); ?>'>
 		<thead>
@@ -150,12 +151,9 @@
 					</td>
 				<?php endif; ?>
 				<td class="mountOptionsToggle hidden">
-					<div class="icon-settings-dark" title="<?php p($l->t('Advanced settings')); ?>"></div>
+					<div class="icon-more" title="<?php p($l->t('Advanced settings')); ?>"></div>
 					<input type="hidden" class="mountOptions" value="" />
 				</td>
-				<td class="remove hidden">
-					<div class="icon-delete" title="<?php p($l->t('Delete')); ?>"></div>
-				</td>
 				<td class="save hidden">
 					<div class="icon-checkmark" title="<?php p($l->t('Save')); ?>"></div>
 				</td>
@@ -192,6 +190,7 @@
 	<form autocomplete="false" action="#"
 		  id="global_credentials">
 		<h2><?php p($l->t('Global credentials')); ?></h2>
+		<p class="settings-hint"><?php p($l->t('Global credentials can be used to authenticate with multiple external storages that have the same credentials.')); ?></p>
 		<input type="text" name="username"
 			   autocomplete="false"
 			   value="<?php p($_['globalCredentials']['user']); ?>"
diff --git a/apps/files_external/tests/js/settingsSpec.js b/apps/files_external/tests/js/settingsSpec.js
index fbbb341c307..78136fc6bf6 100644
--- a/apps/files_external/tests/js/settingsSpec.js
+++ b/apps/files_external/tests/js/settingsSpec.js
@@ -46,12 +46,9 @@ describe('OCA.External.Settings tests', function() {
 			'<input type="hidden" class="applicableUsers">' +
 			'</td>' +
 			'<td class="mountOptionsToggle">'+
-			'<div class="icon-settings-dark" title="Advanced settings" deluminate_imagetype="unknown"></div>'+
+			'<div class="icon-more" title="Advanced settings" deluminate_imagetype="unknown"></div>'+
 			'<input type="hidden" class="mountOptions"/>'+
 			'</td>'+
-			'<td class="remove">'+
-			'<div class="icon-delete" title="Delete" deluminate_imagetype="unknown"></div>'+
-			'</td>'+
 			'<td class="save">'+
 			'<div class="icon-checkmark" title="Save" deluminate_imagetype="unknown"></div>'+
 			'</td>'+
@@ -239,7 +236,7 @@ describe('OCA.External.Settings tests', function() {
 				// TODO: respond and check data-id
 			});
 			it('saves storage after closing mount options popovermenu', function() {
-				$tr.find('.mountOptionsToggle .icon-settings-dark').click();
+				$tr.find('.mountOptionsToggle .icon-more').click();
 				$tr.find('[name=previews]').trigger(new $.Event('keyup', {keyCode: 97}));
 				$tr.find('input[data-parameter=field1]').val('test');
 
@@ -331,7 +328,7 @@ describe('OCA.External.Settings tests', function() {
 			});
 
 			it('shows popovermenu when clicking on toggle button, hides when clicking outside', function() {
-				$td.find('.icon-settings-dark').click();
+				$td.find('.icon-more').click();
 
 				expect($td.find('.popovermenu.open').length).toEqual(1);
 
@@ -342,7 +339,7 @@ describe('OCA.External.Settings tests', function() {
 
 			it('doesnt show the encryption option when encryption is disabled', function () {
 				view._encryptionEnabled = false;
-				$td.find('.icon-settings-dark').click();
+				$td.find('.icon-more').click();
 
 				expect($td.find('.popovermenu [name=encrypt]:visible').length).toEqual(0);
 
@@ -354,17 +351,17 @@ describe('OCA.External.Settings tests', function() {
 			it('reads config from mountOptions field', function() {
 				$tr.find('input.mountOptions').val(JSON.stringify({previews:false}));
 
-				$td.find('.icon-settings-dark').click();
+				$td.find('.icon-more').click();
 				expect($td.find('.popovermenu [name=previews]').prop('checked')).toEqual(false);
 				$('body').mouseup();
 
 				$tr.find('input.mountOptions').val(JSON.stringify({previews:true}));
-				$td.find('.icon-settings-dark').click();
+				$td.find('.icon-more').click();
 				expect($td.find('.popovermenu [name=previews]').prop('checked')).toEqual(true);
 			});
 
 			it('writes config into mountOptions field', function() {
-				$td.find('.icon-settings-dark').click();
+				$td.find('.icon-more').click();
 				// defaults to true
 				var $field = $td.find('.popovermenu [name=previews]');
 				expect($field.prop('checked')).toEqual(true);