Replace files app ids to classes

Replaced ids to classes for the following:

- #filestable -> .files-filestable
- #fileList -> .files-fileList
- #controls -> .files-controls
- #emptycontent -> .emptyfilelist.emptycontent

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

8 files changed, 26 insertions, 26 deletions

diff --git a/apps/files_external/css/external.css b/apps/files_external/css/external.css
index 122459c9624..489cd630fb9 100644
--- a/apps/files_external/css/external.css
+++ b/apps/files_external/css/external.css
@@ -1,3 +1,3 @@
-#filestable tbody tr.externalErroredRow {
+.files-filestable tbody tr.externalErroredRow {
 	background-color: #F2DEDE;
 }
diff --git a/apps/files_external/js/mountsfilelist.js b/apps/files_external/js/mountsfilelist.js
index c5817a916f6..58cd356ccff 100644
--- a/apps/files_external/js/mountsfilelist.js
+++ b/apps/files_external/js/mountsfilelist.js
@@ -18,7 +18,7 @@
 	 * Displays a list of mount points visible
 	 * for the current user.
 	 *
-	 * @param $el container element with existing markup for the #controls
+	 * @param $el container element with existing markup for the .files-controls
 	 * and a table
 	 * @param [options] map of options, see other parameters
 	 **/
@@ -65,8 +65,8 @@
 			var dir = this.getCurrentDirectory();
 			if (dir === '/') {
 				// root has special permissions
-				this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
-				this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
+				this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty);
+				this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty);
 			}
 			else {
 				OCA.Files.FileList.prototype.updateEmptyContent.apply(this, arguments);
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 9bf7339a3bb..0a791001f63 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -972,7 +972,7 @@ MountConfigListView.prototype = _.extend({
 					if (result.length === 0 && mainForm.attr('data-can-create') === 'false') {
 						mainForm.hide();
 						$('a[href="#external-storage"]').parent().hide();
-						$('#emptycontent').show();
+						$('.emptycontent').show();
 					}
 					onCompletion.resolve();
 					onLoaded1.resolve();
diff --git a/apps/files_external/js/statusmanager.js b/apps/files_external/js/statusmanager.js
index e80d764baa7..0ffaad9fe40 100644
--- a/apps/files_external/js/statusmanager.js
+++ b/apps/files_external/js/statusmanager.js
@@ -239,7 +239,7 @@ OCA.Files_External.StatusManager = {
 	processMountList: function (mountList) {
 		var elementList = null;
 		$.each(mountList, function (name, value) {
-			var trElement = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point));
+			var trElement = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point));
 			trElement.attr('data-external-backend', value.backend);
 			if (elementList) {
 				elementList = elementList.add(trElement);
@@ -460,7 +460,7 @@ OCA.Files_External.StatusManager.Utils = {
 
 	showIconError: function (folder, clickAction, errorImageUrl) {
 		var imageUrl = "url(" + errorImageUrl + ")";
-		var trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder));
+		var trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder));
 		this.changeFolderIcon(folder, imageUrl);
 		this.toggleLink(folder, false, clickAction);
 		trFolder.addClass('externalErroredRow');
@@ -474,7 +474,7 @@ OCA.Files_External.StatusManager.Utils = {
 		if (folder instanceof $) {
 			trFolder = folder;
 		} else {
-			trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); //$('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]');
+			trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); //$('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]');
 		}
 		trFolder.each(function () {
 			var thisElement = $(this);
@@ -501,7 +501,7 @@ OCA.Files_External.StatusManager.Utils = {
 			trFolder = folder;
 		} else {
 			// can't use here FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); return incorrect instance of filelist
-			trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]');
+			trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]');
 		}
 		var tdChilds = trFolder.find("td.filename div.thumbnail");
 		tdChilds.each(function () {
@@ -525,7 +525,7 @@ OCA.Files_External.StatusManager.Utils = {
 				$(this).find('td.filename div.thumbnail').css('background-image', "url(" + route + ")").css('display', 'none').css('display', 'inline');
 			});
 		} else {
-			file = $("#fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename div.thumbnail");
+			file = $(".files-fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename div.thumbnail");
 			var parentTr = file.parents('tr:first');
 			route = OCA.Files_External.StatusManager.Utils.getIconRoute(parentTr);
 			parentTr.attr("data-icon", route);
@@ -563,7 +563,7 @@ OCA.Files_External.StatusManager.Utils = {
 		if (filename instanceof $) {
 			link = filename;
 		} else {
-			link = $("#fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename a.name");
+			link = $(".files-fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename a.name");
 		}
 		if (active) {
 			link.off('click.connectivity');
diff --git a/apps/files_external/templates/list.php b/apps/files_external/templates/list.php
index 1d4f6993168..576dbdcf3f5 100644
--- a/apps/files_external/templates/list.php
+++ b/apps/files_external/templates/list.php
@@ -1,21 +1,21 @@
 <?php /** @var \OCP\IL10N $l */ ?>
-<div id="controls">
-	<div id="file_action_panel"></div>
+<div class="files-controls">
+	<div></div>
 </div>
 <div id='notification'></div>
 
-<div id="emptycontent" class="hidden">
+<div class="emptyfilelist emptycontent hidden">
 	<div class="icon-external"></div>
 	<h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2>
 </div>
 
 <input type="hidden" name="dir" value="" id="dir">
 
-<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
+<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 		<tr>
-			<th id='headerName' class="hidden column-name">
-				<div id="headerName-container">
+			<th class="hidden column-name">
+				<div class="column-name-container">
 					<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
 				</div>
 			</th>
@@ -27,7 +27,7 @@
 			</th>
 		</tr>
 	</thead>
-	<tbody id="fileList">
+	<tbody class="files-fileList">
 	</tbody>
 	<tfoot>
 	</tfoot>
diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php
index 2b5b1a1bcd2..48067529723 100644
--- a/apps/files_external/templates/settings.php
+++ b/apps/files_external/templates/settings.php
@@ -95,7 +95,7 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN ||
 	}
 ?>
 
-<div id="emptycontent" class="hidden">
+<div class="emptyfilelist emptycontent hidden">
 	<div class="icon-external"></div>
 	<h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2>
 </div>
diff --git a/apps/files_external/tests/appSpec.js b/apps/files_external/tests/appSpec.js
index 42a8e08950b..8e5ab5b8d98 100644
--- a/apps/files_external/tests/appSpec.js
+++ b/apps/files_external/tests/appSpec.js
@@ -72,7 +72,7 @@ describe('OCA.Files_External.App tests', function() {
 
 			const setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView')
 			// create dummy table so we can click the dom
-			const $table = '<table><thead></thead><tbody id="fileList"></tbody></table>'
+			const $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>'
 			$('#app-content-extstoragemounts').append($table)
 
 			App._inFileList = null
diff --git a/apps/files_external/tests/js/mountsfilelistSpec.js b/apps/files_external/tests/js/mountsfilelistSpec.js
index 662a820f364..ec6ebe1bf11 100644
--- a/apps/files_external/tests/js/mountsfilelistSpec.js
+++ b/apps/files_external/tests/js/mountsfilelistSpec.js
@@ -36,16 +36,16 @@ describe('OCA.Files_External.FileList tests', function() {
 			'<input type="hidden" id="dir" value="/"></input>' +
 			'<input type="hidden" id="permissions" value="31"></input>' +
 			// dummy controls
-			'<div id="controls">' +
+			'<div class="files-controls">' +
 			'   <div class="actions creatable"></div>' +
 			'   <div class="notCreatable"></div>' +
 			'</div>' +
 			// dummy table
 			// TODO: at some point this will be rendered by the fileList class itself!
-			'<table id="filestable">' +
+			'<table class="files-filestable">' +
 			'<thead><tr>' +
-			'<th id="headerName" class="hidden column-name">' +
-			'	<div id="headerName-container">' +
+			'<th class="hidden column-name">' +
+			'	<div id="column-name-container">' +
 			'		<a class="name sort columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
 			'	</div>' +
 			'</th>' +
@@ -56,10 +56,10 @@ describe('OCA.Files_External.FileList tests', function() {
 			'	<a class="scope sort columntitle" data-sort="scope"><span>Scope</span><span class="sort-indicator"></span></a>' +
 			'</th>' +
 			'</tr></thead>' +
-			'<tbody id="fileList"></tbody>' +
+			'<tbody class="files-fileList"></tbody>' +
 			'<tfoot></tfoot>' +
 			'</table>' +
-			'<div id="emptycontent">Empty content message</div>' +
+			'<div class="emptyfilelist emptycontent">Empty content message</div>' +
 			'</div>'
 		);
 	});