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>

15 files changed, 72 insertions, 72 deletions

diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
index 63acecb90c8..114949d8c48 100644
--- a/apps/files_sharing/css/mobile.css
+++ b/apps/files_sharing/css/mobile.css
@@ -27,9 +27,9 @@
   }
 
   /* hide size and date columns */
-  table th#headerSize,
+  table th.column-size,
 table td.filesize,
-table th#headerDate,
+table th.column-mtime,
 table td.date {
     display: none;
   }
@@ -52,12 +52,12 @@ table td.date {
   }
 
   /* some padding for better clickability */
-  #fileList a.action img {
+  .files-fileList a.action img {
     padding: 0 6px 0 12px;
   }
 
   /* hide text of the actions on mobile */
-  #fileList a.action:not(.menuitem) span {
+  .files-fileList a.action:not(.menuitem) span {
     display: none;
   }
 
@@ -78,7 +78,7 @@ table td.date {
     padding: 0 20px;
   }
 
-  #emptycontent {
+  .emptycontent {
     margin-top: 10vh;
   }
 }
diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index 38a7a9cd711..d058ad2a30e 100644
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/css/mobile.scss
@@ -8,9 +8,9 @@
 }
 
 /* hide size and date columns */
-table th#headerSize,
+table th.column-size,
 table td.filesize,
-table th#headerDate,
+table th.column-mtime,
 table td.date {
 	display: none;
 }
@@ -32,11 +32,11 @@ table td.filename .nametext {
 }
 
 /* some padding for better clickability */
-#fileList a.action img {
+.files-fileList a.action img {
 	padding: 0 6px 0 12px;
 }
 /* hide text of the actions on mobile */
-#fileList a.action:not(.menuitem) span {
+.files-fileList a.action:not(.menuitem) span {
 	display: none;
 }
 
@@ -56,7 +56,7 @@ table td.filename .nametext {
 	padding: 0 20px;
 }
 
-#emptycontent {
+.emptycontent {
 	margin-top: 10vh;
 }
 }
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index 21dd876905c..a07b00b7b3d 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -122,19 +122,19 @@ thead {
   margin: 0 auto;
 }
 
-#emptycontent.has-note {
+.emptycontent.has-note {
   margin-top: 5vh;
 }
 
-#public-upload #emptycontent h2 {
+#public-upload .emptycontent h2 {
   margin: 10px 0 5px 0;
 }
 
-#public-upload #emptycontent h2 + p {
+#public-upload .emptycontent h2 + p {
   margin-bottom: 30px;
 }
 
-#public-upload #emptycontent .icon-folder {
+#public-upload .emptycontent .icon-folder {
   height: 16px;
   width: 16px;
   background-size: 16px;
@@ -145,13 +145,13 @@ thead {
   opacity: 1;
 }
 
-#public-upload #emptycontent #displayavatar .icon-folder {
+#public-upload .emptycontent #displayavatar .icon-folder {
   height: 48px;
   width: 48px;
   background-size: 48px;
 }
 
-#public-upload #emptycontent .button {
+#public-upload .emptycontent .button {
   display: inline-block;
   height: auto;
   width: auto;
@@ -165,20 +165,20 @@ thead {
   padding-left: 42px;
 }
 
-#public-upload #emptycontent ul {
+#public-upload .emptycontent ul {
   width: 230px;
   margin: 5px auto 5vh;
   text-align: left;
 }
 
-#public-upload #emptycontent li {
+#public-upload .emptycontent li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 7px 0;
 }
 
-#public-upload #emptycontent li img {
+#public-upload .emptycontent li img {
   margin-right: 5px;
   position: relative;
   top: 2px;
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index a3754b7be9f..4b3ea818be8 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -101,21 +101,21 @@ thead {
 	margin: 0 auto;
 }
 
-#emptycontent {
+.emptycontent {
 	&.has-note {
 		margin-top: 5vh;
 	}
 }
 
-#public-upload #emptycontent h2 {
+#public-upload .emptycontent h2 {
 	margin: 10px 0 5px 0;
 }
 
-#public-upload #emptycontent h2+p {
+#public-upload .emptycontent h2+p {
 	margin-bottom: 30px;
 }
 
-#public-upload #emptycontent .icon-folder {
+#public-upload .emptycontent .icon-folder {
 	height: 16px;
 	width: 16px;
 	background-size: 16px;
@@ -126,13 +126,13 @@ thead {
 	opacity: 1;
 }
 
-#public-upload #emptycontent #displayavatar .icon-folder {
+#public-upload .emptycontent #displayavatar .icon-folder {
 	height: 48px;
 	width: 48px;
 	background-size: 48px;
 }
 
-#public-upload #emptycontent .button {
+#public-upload .emptycontent .button {
 	display: inline-block;
 	height: auto;
 	width: auto;
@@ -146,20 +146,20 @@ thead {
 	padding-left: 42px;
 }
 
-#public-upload #emptycontent ul {
+#public-upload .emptycontent ul {
 	width: 230px;
 	margin: 5px auto 5vh;
 	text-align: left;
 }
 
-#public-upload #emptycontent li {
+#public-upload .emptycontent li {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	padding: 7px 0;
 }
 
-#public-upload #emptycontent li img {
+#public-upload .emptycontent li img {
 	margin-right: 5px;
 	position: relative;
 	top: 2px;
diff --git a/apps/files_sharing/css/publicView.css b/apps/files_sharing/css/publicView.css
index c10620e59bf..91429ffbdab 100644
--- a/apps/files_sharing/css/publicView.css
+++ b/apps/files_sharing/css/publicView.css
@@ -122,19 +122,19 @@ thead {
   margin: 0 auto;
 }
 
-#emptycontent.has-note {
+.emptycontent.has-note {
   margin-top: 5vh;
 }
 
-#public-upload #emptycontent h2 {
+#public-upload .emptycontent h2 {
   margin: 10px 0 5px 0;
 }
 
-#public-upload #emptycontent h2 + p {
+#public-upload .emptycontent h2 + p {
   margin-bottom: 30px;
 }
 
-#public-upload #emptycontent .icon-folder {
+#public-upload .emptycontent .icon-folder {
   height: 16px;
   width: 16px;
   background-size: 16px;
@@ -145,13 +145,13 @@ thead {
   opacity: 1;
 }
 
-#public-upload #emptycontent #displayavatar .icon-folder {
+#public-upload .emptycontent #displayavatar .icon-folder {
   height: 48px;
   width: 48px;
   background-size: 48px;
 }
 
-#public-upload #emptycontent .button {
+#public-upload .emptycontent .button {
   display: inline-block;
   height: auto;
   width: auto;
@@ -165,20 +165,20 @@ thead {
   padding-left: 42px;
 }
 
-#public-upload #emptycontent ul {
+#public-upload .emptycontent ul {
   width: 230px;
   margin: 5px auto 5vh;
   text-align: left;
 }
 
-#public-upload #emptycontent li {
+#public-upload .emptycontent li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 7px 0;
 }
 
-#public-upload #emptycontent li img {
+#public-upload .emptycontent li img {
   margin-right: 5px;
   position: relative;
   top: 2px;
@@ -261,9 +261,9 @@ thead {
   }
 
   /* hide size and date columns */
-  table th#headerSize,
+  table th.column-size,
 table td.filesize,
-table th#headerDate,
+table th.column-mtime,
 table td.date {
     display: none;
   }
@@ -286,12 +286,12 @@ table td.date {
   }
 
   /* some padding for better clickability */
-  #fileList a.action img {
+  .files-fileList a.action img {
     padding: 0 6px 0 12px;
   }
 
   /* hide text of the actions on mobile */
-  #fileList a.action:not(.menuitem) span {
+  .files-fileList a.action:not(.menuitem) span {
     display: none;
   }
 
@@ -312,7 +312,7 @@ table td.date {
     padding: 0 20px;
   }
 
-  #emptycontent {
+  .emptycontent {
     margin-top: 10vh;
   }
 }
diff --git a/apps/files_sharing/js/app.js b/apps/files_sharing/js/app.js
index 24416fd5a3f..b9a60c73dab 100644
--- a/apps/files_sharing/js/app.js
+++ b/apps/files_sharing/js/app.js
@@ -46,7 +46,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._inFileList)
 		this._inFileList.appName = t('files_sharing', 'Shared with you')
-		this._inFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>'
+		this._inFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>'
 			+ '<h2>' + t('files_sharing', 'Nothing shared with you yet') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Files and folders others share with you will show up here') + '</p>')
 		return this._inFileList
@@ -72,7 +72,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._outFileList)
 		this._outFileList.appName = t('files_sharing', 'Shared with others')
-		this._outFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>'
+		this._outFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>'
 			+ '<h2>' + t('files_sharing', 'Nothing shared yet') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Files and folders you share will show up here') + '</p>')
 		return this._outFileList
@@ -98,7 +98,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._linkFileList)
 		this._linkFileList.appName = t('files_sharing', 'Shared by link')
-		this._linkFileList.$el.find('#emptycontent').html('<div class="icon-public"></div>'
+		this._linkFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-public"></div>'
 			+ '<h2>' + t('files_sharing', 'No shared links') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Files and folders you share by link will show up here') + '</p>')
 		return this._linkFileList
@@ -126,7 +126,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._deletedFileList)
 		this._deletedFileList.appName = t('files_sharing', 'Deleted shares')
-		this._deletedFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
+		this._deletedFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
 			+ '<h2>' + t('files_sharing', 'No deleted shares') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Shares you deleted will show up here') + '</p>')
 		return this._deletedFileList
@@ -155,7 +155,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._pendingFileList)
 		this._pendingFileList.appName = t('files_sharing', 'Pending shares')
-		this._pendingFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
+		this._pendingFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
 			+ '<h2>' + t('files_sharing', 'No pending shares') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Shares you have received but not confirmed will show up here') + '</p>')
 		return this._pendingFileList
@@ -181,7 +181,7 @@ OCA.Sharing.App = {
 
 		this._extendFileList(this._overviewFileList)
 		this._overviewFileList.appName = t('files_sharing', 'Shares')
-		this._overviewFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
+		this._overviewFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
 			+ '<h2>' + t('files_sharing', 'No shares') + '</h2>'
 			+ '<p>' + t('files_sharing', 'Shares will show up here') + '</p>')
 		return this._overviewFileList
diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js
index e2830aeea9e..42151bca1cb 100644
--- a/apps/files_sharing/js/files_drop.js
+++ b/apps/files_sharing/js/files_drop.js
@@ -140,7 +140,7 @@
 			});
 			$('#public-upload .button.icon-upload').click(function(e) {
 				e.preventDefault();
-				$('#public-upload #emptycontent input').focus().trigger('click');
+				$('#public-upload .emptycontent input').focus().trigger('click');
 			});
 			window.onbeforeunload = function() {
 				return self.confirmBeforeUnload();
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index bfb035fb817..c08d72d6e05 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -60,7 +60,7 @@ OCA.Sharing.PublicApp = {
 		}
 
 		// file list mode ?
-		if ($el.find('#filestable').length) {
+		if ($el.find('.files-filestable').length) {
 			var filesClient = new OC.Files.Client({
 				host: OC.getHost(),
 				port: OC.getPort(),
@@ -277,7 +277,7 @@ OCA.Sharing.PublicApp = {
 			};
 
 			this.fileList.updateEmptyContent = function() {
-				this.$el.find('#emptycontent .uploadmessage').text(
+				this.$el.find('.emptycontent .uploadmessage').text(
 					t('files_sharing', 'You can upload into this folder')
 				);
 				OCA.Files.FileList.prototype.updateEmptyContent.apply(this, arguments);
diff --git a/apps/files_sharing/js/sharedfilelist.js b/apps/files_sharing/js/sharedfilelist.js
index e8420113ad9..7d7e91dd965 100644
--- a/apps/files_sharing/js/sharedfilelist.js
+++ b/apps/files_sharing/js/sharedfilelist.js
@@ -17,7 +17,7 @@
 	 * @classdesc Sharing file list.
 	 * Contains both "shared with others" and "shared with you" modes.
 	 *
-	 * @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
 	 * @param {boolean} [options.sharedWithUser] true to return files shared with
@@ -158,8 +158,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)
 
 					// hide expiration date header for non link only shares
 					if (!this._linksOnly) {
diff --git a/apps/files_sharing/src/services/ConfigService.js b/apps/files_sharing/src/services/ConfigService.js
index cd9bed2a2a7..bfef48a8ade 100644
--- a/apps/files_sharing/src/services/ConfigService.js
+++ b/apps/files_sharing/src/services/ConfigService.js
@@ -32,8 +32,8 @@ export default class Config {
 	 * @memberof Config
 	 */
 	get isPublicUploadEnabled() {
-		return document.getElementById('filestable')
-			&& document.getElementById('filestable').dataset.allowPublicUpload === 'yes'
+		return document.getElementsByClassName('files-filestable')[0]
+			&& document.getElementsByClassName('files-filestable')[0].dataset.allowPublicUpload === 'yes'
 	}
 
 	/**
diff --git a/apps/files_sharing/templates/list.php b/apps/files_sharing/templates/list.php
index 983e70d4433..6c91d701d1d 100644
--- a/apps/files_sharing/templates/list.php
+++ b/apps/files_sharing/templates/list.php
@@ -1,7 +1,7 @@
 <?php /** @var \OCP\IL10N $l */ ?>
 <div id='notification'></div>
 
-<div id="emptycontent" class="hidden"></div>
+<div class="emptyfilelist emptycontent hidden"></div>
 
 <input type="hidden" name="dir" value="" id="dir">
 
@@ -10,23 +10,23 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 </div>
 
-<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>
-			<th id="headerDate" class="hidden column-mtime">
-				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a>
+			<th class="hidden column-mtime">
+				<a class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 			<th class="hidden column-expiration">
 				<a class="columntitle"><span><?php p($l->t('Expiration date')); ?></span></a>
 			</th>
 		</tr>
 	</thead>
-	<tbody id="fileList">
+	<tbody class="files-fileList">
 	</tbody>
 	<tfoot>
 	</tfoot>
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index d49c7a01b63..0e8f59e9f2a 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -105,7 +105,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 	<div id="public-upload">
 		<div
 				id="emptycontent"
-				class="<?php if (!empty($_['note'])) { ?>has-note<?php } ?>">
+				class="emptycontent <?php if (!empty($_['note'])) { ?>has-note<?php } ?>">
 			<?php if ($_['shareOwner']) { ?>
 				<div id="displayavatar"><div class="avatardiv"></div></div>
 				<h2><?php p($l->t('Upload files to %s', [$_['shareOwner']])) ?></h2>
diff --git a/apps/files_sharing/tests/js/appSpec.js b/apps/files_sharing/tests/js/appSpec.js
index e1249f5b4d7..4d2e5211d7c 100644
--- a/apps/files_sharing/tests/js/appSpec.js
+++ b/apps/files_sharing/tests/js/appSpec.js
@@ -95,7 +95,7 @@ describe('OCA.Sharing.App tests', function() {
 
 			var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView');
 			// create dummy table so we can click the dom
-			var $table = '<table><thead></thead><tbody id="fileList"></tbody></table>';
+			var $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>';
 			$('#app-content-sharingin').append($table);
 
 			App._inFileList = null;
diff --git a/apps/files_sharing/tests/js/publicAppSpec.js b/apps/files_sharing/tests/js/publicAppSpec.js
index ed88913b1f6..b9d8cbe28e2 100644
--- a/apps/files_sharing/tests/js/publicAppSpec.js
+++ b/apps/files_sharing/tests/js/publicAppSpec.js
@@ -59,7 +59,7 @@ describe('OCA.Sharing.PublicApp tests', function() {
 				'<input type="hidden" id="dir" value="/subdir"/>' +
 				'<input type="hidden" id="permissions" value="31"/>' +
 				// dummy controls
-				'<div id="controls">' +
+				'<div class="files-controls">' +
 				'   <div class="actions creatable"></div>' +
 				'   <div class="notCreatable"></div>' +
 				'</div>' +
@@ -67,9 +67,9 @@ describe('OCA.Sharing.PublicApp tests', function() {
 				'<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' +
 				// dummy table
 				// TODO: at some point this will be rendered by the fileList class itself!
-				'<table id="filestable" class="list-container view-grid">' +
+				'<table class="files-filestable list-container view-grid">' +
 				'<thead><tr>' +
-				'<th id="headerName" class="hidden column-name">' +
+				'<th class="hidden column-name">' +
 				'<input type="checkbox" id="select_all_files" class="select-all">' +
 				'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
 				'<span class="selectedActions hidden">' +
@@ -78,11 +78,11 @@ describe('OCA.Sharing.PublicApp tests', function() {
 				'<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' +
 				'<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' +
 				'</tr></thead>' +
-				'<tbody id="fileList"></tbody>' +
+				'<tbody class="files-fileList"></tbody>' +
 				'<tfoot></tfoot>' +
 				'</table>' +
 				// TODO: move to handlebars template
-				'<div id="emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' +
+				'<div class="emptyfilelist emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' +
 				'<div class="nofilterresults hidden"></div>' +
 				'</div>'
 			);
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index f99c838eda3..6b4dd35ec85 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -46,9 +46,9 @@ describe('OCA.Sharing.Util tests', function() {
 		// dummy file list
 		var $div = $(
 			'<div id="listContainer">' +
-			'<table id="filestable" class="list-container view-grid">' +
+			'<table class="files-filestable list-container view-grid">' +
 			'<thead></thead>' +
-			'<tbody id="fileList"></tbody>' +
+			'<tbody class="files-fileList"></tbody>' +
 			'</table>' +
 			'</div>');
 		$('#content').append($div);