Fix #9590. Fix #9612.

For external storage with lots of parameter settings (>4), wrap the content of the cell to let a full view of the parameters.
The rows of the table are now always visible until the end (the trash icon is accessible).
(Note : A strange 3px margin forces me to add a class on the row added by javascript, to be able to align them with the rows rendered by the server.)

apps/files_external/css/settings.css

@@ -10,7 +10,19 @@ td.remove>img { visibility:hidden; padding-top:7px; }
 tr:hover>td.remove>img { visibility:visible; cursor:pointer; }
 #addMountPoint>td { border:none; }
 #addMountPoint>td.applicable { visibility:hidden; }
-#selectBackend { margin-left:-10px; }
+
+#selectBackend {
+	margin-left:-10px; 
+	width : 150px; 
+}
+
+#externalStorage td.configuration, #externalStorage td.backend {
+	white-space : normal;
+}
+
+#externalStorage td.configuration input.added  {
+	margin-right : 6px;
+}
 
 #externalStorage label > input[type="checkbox"] {
 	margin-right: 3px;

apps/files_external/js/settings.js

@@ -192,15 +192,15 @@ $(document).ready(function() {
 						placeholder = placeholder.substring(1);
 					}
 					if (placeholder.indexOf('*') === 0) {
-						var class_string = is_optional ? ' class="optional"' : '';
-						td.append('<input type="password"' + class_string + ' data-parameter="'+parameter+'" placeholder="'+placeholder.substring(1)+'" />');
+						var class_string = is_optional ? ' optional' : '';
+						td.append('<input type="password" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder.substring(1)+'" />');
 					} else if (placeholder.indexOf('!') === 0) {
-						td.append('<label><input type="checkbox" data-parameter="'+parameter+'" />'+placeholder.substring(1)+'</label>');
+						td.append('<label><input type="checkbox" class="added" data-parameter="'+parameter+'" />'+placeholder.substring(1)+'</label>');
 					} else if (placeholder.indexOf('#') === 0) {
-						td.append('<input type="hidden" data-parameter="'+parameter+'" />');
+						td.append('<input type="hidden" class="added" data-parameter="'+parameter+'" />');
 					} else {
-						var class_string = is_optional ? ' class="optional"' : '';
-						td.append('<input type="text"' + class_string + ' data-parameter="'+parameter+'" placeholder="'+placeholder+'" />');
+						var class_string = is_optional ? ' optional' : '';
+						td.append('<input type="text" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder+'" />');
 					}
 				});
 				if (parameters['custom'] && $('#externalStorage tbody tr.'+backendClass.replace(/\\/g, '\\\\')).length == 1) {

apps/files_external/templates/settings.php

@@ -8,12 +8,11 @@
 				<th><?php p($l->t('Folder name')); ?></th>
 				<th><?php p($l->t('External storage')); ?></th>
 				<th><?php p($l->t('Configuration')); ?></th>
-				<!--<th><?php p($l->t('Options')); ?></th> -->
 				<?php if ($_['isAdminPage']) print_unescaped('<th>'.$l->t('Available for').'</th>'); ?>
 				<th>&nbsp;</th>
 			</tr>
 		</thead>
-		<tbody width="100%">
+		<tbody>
 		<?php $_['mounts'] = array_merge($_['mounts'], array('' => array())); ?>
 		<?php foreach ($_['mounts'] as $mount): ?>
 			<tr <?php print_unescaped(isset($mount['mountpoint']) ? 'class="'.OC_Util::sanitizeHTML($mount['class']).'"' : 'id="addMountPoint"'); ?>>
@@ -25,7 +24,8 @@
 				<td class="mountPoint"><input type="text" name="mountPoint"
 											  value="<?php p(isset($mount['mountpoint']) ? $mount['mountpoint'] : ''); ?>"
 											  data-mountpoint="<?php p(isset($mount['mountpoint']) ? $mount['mountpoint'] : ''); ?>"
-											  placeholder="<?php p($l->t('Folder name')); ?>" /></td>
+											  placeholder="<?php p($l->t('Folder name')); ?>" />
+				</td>
 				<?php if (!isset($mount['mountpoint'])): ?>
 					<td class="backend">
 						<select id="selectBackend" data-configurations='<?php p(json_encode($_['backends'])); ?>'>
@@ -37,10 +37,10 @@
 						</select>
 					</td>
 				<?php else: ?>
-					<td class="backend"
-						data-class="<?php p($mount['class']); ?>"><?php p($mount['backend']); ?></td>
+					<td class="backend" data-class="<?php p($mount['class']); ?>"><?php p($mount['backend']); ?>
+					</td>
 				<?php endif; ?>
-				<td class ="configuration" width="100%">
+				<td class ="configuration">
 					<?php if (isset($mount['options'])): ?>
 						<?php foreach ($mount['options'] as $parameter => $value): ?>
 							<?php if (isset($_['backends'][$mount['class']]['configuration'][$parameter])): ?>
@@ -150,7 +150,7 @@
 	  action="<?php p(OCP\Util::linkTo('files_external', 'ajax/addRootCertificate.php')); ?>">
 		<h2><?php p($l->t('SSL root certificates'));?></h2>
 		<table id="sslCertificate" data-admin='<?php print_unescaped(json_encode($_['isAdminPage'])); ?>'>
-			<tbody width="100%">
+			<tbody>
 			<?php foreach ($_['certs'] as $rootCert): ?>
 			<tr id="<?php p($rootCert) ?>">
 			<td class="rootCert"><?php p($rootCert) ?></td>