files_external: Move delete option to 3-dots menu

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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

apps/files_external/templates/settings.php

@@ -150,12 +150,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>