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

Settings design polishing

apps/dav/templates/settings-admin-caldav.php

@@ -29,7 +29,7 @@
 /** @var array $_ */
 ?>
 <form id="CalDAV" class="section">
-	<h2><?php p($l->t('CalDAV server')); ?></h2>
+	<h2><?php p($l->t('Calendar server')); ?></h2>
 	<p>
 		<input type="checkbox" name="caldav_send_invitations" id="caldavSendInvitations" class="checkbox"
 			<?php ($_['send_invitations'] === 'yes') ? print_unescaped('checked="checked"') : null ?>/>

apps/encryption/lib/Settings/Admin.php

@@ -110,7 +110,7 @@ public function getForm() {
 	 * @return string the section ID, e.g. 'sharing'
 	 */
 	public function getSection() {
-		return 'encryption';
+		return 'security';
 	}
 
 	/**
@@ -121,7 +121,7 @@ public function getSection() {
 	 * E.g.: 70
 	 */
 	public function getPriority() {
-		return 5;
+		return 11;
 	}
 
 }

apps/encryption/tests/Settings/AdminTest.php

@@ -92,10 +92,10 @@ public function testGetForm() {
 	}
 
 	public function testGetSection() {
-		$this->assertSame('encryption', $this->admin->getSection());
+		$this->assertSame('security', $this->admin->getSection());
 	}
 
 	public function testGetPriority() {
-		$this->assertSame(5, $this->admin->getPriority());
+		$this->assertSame(11, $this->admin->getPriority());
 	}
 }

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;
 }

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,15 +739,15 @@ 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'));
 		});
 
 		this.$el.on('click', 'td.save>.icon-checkmark', function () {
 			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');

apps/files_external/templates/settings.php

@@ -95,6 +95,7 @@ function writeParameterInput($parameter, $options, $classes = []) {
 
 <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 @@ function writeParameterInput($parameter, $options, $classes = []) {
 					</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 @@ function writeParameterInput($parameter, $options, $classes = []) {
 	<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']); ?>"

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);

apps/systemtags/js/admin.js

@@ -40,6 +40,12 @@
 				}
 			});
 
+			var self = this;
+			$('#systemtag_name').on('keyup', function(e) {
+				if (e.which === 13) {
+					_.bind(self._onClickSubmit, self)();
+				}
+			});
 			$('#systemtag_submit').on('click', _.bind(this._onClickSubmit, this));
 			$('#systemtag_delete').on('click', _.bind(this._onClickDelete, this));
 			$('#systemtag_reset').on('click', _.bind(this._onClickReset, this));

lib/private/Settings/Admin/Encryption.php

@@ -77,7 +77,7 @@ public function getForm() {
 	 * @return string the section ID, e.g. 'sharing'
 	 */
 	public function getSection() {
-		return 'encryption';
+		return 'security';
 	}
 
 	/**
@@ -88,6 +88,6 @@ public function getSection() {
 	 * E.g.: 70
 	 */
 	public function getPriority() {
-		return 0;
+		return 10;
 	}
 }

lib/private/Settings/Manager.php

@@ -230,7 +230,6 @@ public function getAdminSections(): array {
 			1 => [new Section('server', $this->l->t('Basic settings'), 0, $this->url->imagePath('core', 'actions/settings-dark.svg'))],
 			5 => [new Section('sharing', $this->l->t('Sharing'), 0, $this->url->imagePath('core', 'actions/share.svg'))],
 			10 => [new Section('security', $this->l->t('Security'), 0, $this->url->imagePath('core', 'actions/password.svg'))],
-			45 => [new Section('encryption', $this->l->t('Encryption'), 0, $this->url->imagePath('core', 'actions/password.svg'))],
 			50 => [new Section('groupware', $this->l->t('Groupware'), 0, $this->url->imagePath('core', 'places/contacts.svg'))],
 			98 => [new Section('additional', $this->l->t('Additional settings'), 0, $this->url->imagePath('core', 'actions/settings-dark.svg'))],
 		];
@@ -270,7 +269,7 @@ private function getBuiltInAdminSettings($section): array {
 			$form = new Admin\Mail($this->config);
 			$forms[$form->getPriority()] = [$form];
 		}
-		if ($section === 'encryption') {
+		if ($section === 'security') {
 			/** @var ISettings $form */
 			$form = new Admin\Encryption($this->encryptionManager, $this->userManager);
 			$forms[$form->getPriority()] = [$form];

settings/css/settings.scss

@@ -1473,7 +1473,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				top: $grid-row-height;
 			}
 			&#grid-header {
-				color: var(--color-text-light);
+				color: var(--color-text-maxcontrast);
 				z-index: 60; /* above new-user */
 			}
 			&:hover {

settings/templates/settings/personal/personal.info.php

@@ -367,8 +367,9 @@
 						<?php endforeach;?>
 					</select>
 					<div id="localeexample" class="personal-info icon-timezone">
-						<p id="localeexample-time"></p>
-						<p id="localeexample-date"></p>
+						<p>
+							<span id="localeexample-date"></span> <span id="localeexample-time"></span>
+						</p>
 						<p id="localeexample-fdow"></p>
 					</div>
 				</form>

tests/lib/Settings/Admin/EncryptionTest.php

@@ -129,10 +129,10 @@ public function testGetFormWithMultipleBackends($enabled) {
 	}
 
 	public function testGetSection() {
-		$this->assertSame('encryption', $this->admin->getSection());
+		$this->assertSame('security', $this->admin->getSection());
 	}
 
 	public function testGetPriority() {
-		$this->assertSame(0, $this->admin->getPriority());
+		$this->assertSame(10, $this->admin->getPriority());
 	}
 }

tests/lib/Settings/ManagerTest.php

@@ -115,7 +115,7 @@ public function testGetAdminSections() {
 
 		$this->manager->registerSection('admin', \OCA\WorkflowEngine\Settings\Section::class);
 
-		$this->url->expects($this->exactly(7))
+		$this->url->expects($this->exactly(6))
 			->method('imagePath')
 			->willReturnMap([
 				['settings', 'admin.svg', '0'],
@@ -131,7 +131,6 @@ public function testGetAdminSections() {
 			1 => [new Section('server', 'Basic settings', 0, '1')],
 			5 => [new Section('sharing', 'Sharing', 0, '2')],
 			10 => [new Section('security', 'Security', 0, '3')],
-			45 => [new Section('encryption', 'Encryption', 0, '3')],
 			50 => [new Section('groupware', 'Groupware', 0, '5')],
 			55 => [\OC::$server->query(\OCA\WorkflowEngine\Settings\Section::class)],
 			98 => [new Section('additional', 'Additional settings', 0, '1')],
@@ -168,7 +167,7 @@ public function testGetAdminSectionsEmptySection() {
 			->method('t')
 			->will($this->returnArgument(0));
 
-		$this->url->expects($this->exactly(7))
+		$this->url->expects($this->exactly(6))
 			->method('imagePath')
 			->willReturnMap([
 				['settings', 'admin.svg', '0'],
@@ -184,7 +183,6 @@ public function testGetAdminSectionsEmptySection() {
 			1 => [new Section('server', 'Basic settings', 0, '1')],
 			5 => [new Section('sharing', 'Sharing', 0, '2')],
 			10 => [new Section('security', 'Security', 0, '3')],
-			45 => [new Section('encryption', 'Encryption', 0, '3')],
 			50 => [new Section('groupware', 'Groupware', 0, '5')],
 			98 => [new Section('additional', 'Additional settings', 0, '1')],
 		], $this->manager->getAdminSections());