From e15b43d976691b4d0f9901650178779bdd9a5d6c Mon Sep 17 00:00:00 2001 From: Daniel Calviño Sánchez Date: Tue, 14 Jun 2022 16:07:35 +0200 Subject: Fix default toast message for failed uploads with HTTP/2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When an upload fails a toast is shown with either a specific message or just the textual part of the HTTP error code (which comes from the upload failure handler and set by "jQuery.ajax()". However, if there is neither a message nor an error then the toast will show the default message from the Toastify-js library, which is an undescriptive "Hi there!". When HTTP/2 is used Chromium does not provide the textual part of the HTTP error code, so when an upload fails the toast can receive an empty message and thus just show "Hi there!". Now an explicit message is provided as a fallback to prevent that. Signed-off-by: Daniel Calviño Sánchez --- apps/files/js/file-upload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 793c9672c3f..648a5a0307b 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -1134,7 +1134,7 @@ OC.Uploader.prototype = _.extend({ } } console.error(e, data, response) - OC.Notification.show(message || data.errorThrown, {type: 'error'}); + OC.Notification.show(message || data.errorThrown || t('files', 'File could not be uploaded'), {type: 'error'}); } if (upload) { -- cgit v1.2.3 From bb2557c38974bea38dcc48185723b33781412cbd Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 22 Jul 2022 16:11:01 +0200 Subject: 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 --- apps/comments/tests/js/filespluginSpec.js | 4 +- apps/files/css/files.css | 300 +++++++++---------- apps/files/css/files.scss | 152 +++++----- apps/files/css/merged.css | 316 ++++++++++----------- apps/files/css/mobile.css | 10 +- apps/files/css/mobile.scss | 10 +- apps/files/css/upload.css | 6 +- apps/files/css/upload.scss | 6 +- apps/files/js/favoritesfilelist.js | 6 +- apps/files/js/file-upload.js | 4 +- apps/files/js/filelist.js | 59 ++-- apps/files/js/keyboardshortcuts.js | 20 +- apps/files/js/recentfilelist.js | 6 +- apps/files/templates/list.php | 28 +- apps/files/templates/recentlist.php | 14 +- apps/files/templates/simplelist.php | 14 +- apps/files/tests/js/breadcrumbSpec.js | 62 ++-- apps/files/tests/js/favoritesfilelistspec.js | 10 +- apps/files/tests/js/favoritespluginspec.js | 2 +- apps/files/tests/js/fileUploadSpec.js | 6 +- apps/files/tests/js/fileactionsSpec.js | 6 +- apps/files/tests/js/fileactionsmenuSpec.js | 2 +- apps/files/tests/js/filelistSpec.js | 178 ++++++------ apps/files/tests/js/tagspluginspec.js | 4 +- apps/files_external/css/external.css | 2 +- apps/files_external/js/mountsfilelist.js | 6 +- apps/files_external/js/settings.js | 2 +- apps/files_external/js/statusmanager.js | 12 +- apps/files_external/templates/list.php | 14 +- apps/files_external/templates/settings.php | 2 +- apps/files_external/tests/appSpec.js | 2 +- apps/files_external/tests/js/mountsfilelistSpec.js | 12 +- apps/files_sharing/css/mobile.css | 10 +- apps/files_sharing/css/mobile.scss | 10 +- apps/files_sharing/css/public.css | 18 +- apps/files_sharing/css/public.scss | 18 +- apps/files_sharing/css/publicView.css | 28 +- apps/files_sharing/js/app.js | 12 +- apps/files_sharing/js/files_drop.js | 2 +- apps/files_sharing/js/public.js | 4 +- apps/files_sharing/js/sharedfilelist.js | 6 +- apps/files_sharing/src/services/ConfigService.js | 4 +- apps/files_sharing/templates/list.php | 14 +- apps/files_sharing/templates/public.php | 2 +- apps/files_sharing/tests/js/appSpec.js | 2 +- apps/files_sharing/tests/js/publicAppSpec.js | 10 +- apps/files_sharing/tests/js/shareSpec.js | 4 +- apps/files_trashbin/src/filelist.js | 6 +- apps/files_trashbin/src/trash.scss | 2 +- apps/files_trashbin/templates/index.php | 20 +- apps/files_trashbin/tests/js/filelistSpec.js | 12 +- apps/systemtags/src/systemtagsfilelist.js | 12 +- apps/systemtags/templates/list.php | 16 +- apps/systemtags/tests/js/systemtagsfilelistSpec.js | 14 +- core/css/mobile.css | 10 +- core/css/mobile.scss | 10 +- core/css/server.css | 18 +- core/css/styles.css | 8 +- core/css/styles.scss | 6 +- core/templates/filepicker.html | 8 +- dist/files_sharing-files_sharing.js | 4 +- dist/files_sharing-files_sharing.js.map | 2 +- dist/files_sharing-files_sharing_tab.js | 4 +- dist/files_sharing-files_sharing_tab.js.map | 2 +- dist/files_trashbin-files_trashbin.js | 4 +- dist/files_trashbin-files_trashbin.js.map | 2 +- dist/systemtags-systemtags.js | 4 +- dist/systemtags-systemtags.js.map | 2 +- .../features/bootstrap/FileListContext.php | 6 +- 69 files changed, 798 insertions(+), 795 deletions(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/comments/tests/js/filespluginSpec.js b/apps/comments/tests/js/filespluginSpec.js index a2f9750f9fc..0cfe584218e 100644 --- a/apps/comments/tests/js/filespluginSpec.js +++ b/apps/comments/tests/js/filespluginSpec.js @@ -31,9 +31,9 @@ describe('OCA.Comments.FilesPlugin tests', function() { // dummy file list var $div = $( '
' + - '' + + '
' + '' + - '' + + '' + '
' + '
'); $('#content').append($div); diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 83ad47713f4..ec7733ac6a4 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -111,13 +111,13 @@ .newFileMenu .error, .newFileMenu .error + .icon-confirm, -#fileList .error { +.files-fileList .error { color: var(--color-error); border-color: var(--color-error); } /* FILE TABLE */ -#filestable { +.files-filestable { position: relative; width: 100%; min-width: 250px; @@ -127,10 +127,10 @@ * This is a dirty hack as the sticky header requires us to use a different display type on the table element */ } -#emptycontent:not(.hidden) ~ #filestable { +.emptycontent:not(.hidden) ~ .files-filestable { display: none; } -#filestable thead { +.files-filestable thead { position: -webkit-sticky; position: sticky; top: 50px; @@ -138,20 +138,20 @@ display: block; background-color: var(--color-main-background-translucent); } -#filestable tbody { +.files-filestable tbody { display: table; width: 100%; } -#filestable tbody tr[data-permissions="0"], -#filestable tbody tr[data-permissions="16"] { +.files-filestable tbody tr[data-permissions="0"], +.files-filestable tbody tr[data-permissions="16"] { background-color: var(--color-background-dark); } -#filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext, -#filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext { +.files-filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext, +.files-filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext { color: var(--color-text-maxcontrast); } -#filestable.hidden { +.files-filestable.hidden { display: none; } @@ -165,7 +165,7 @@ width: calc(100% - 300px); } -.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { +.file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { background-color: var(--color-primary-light) !important; } @@ -173,11 +173,11 @@ background-color: var(--color-main-background) !important; } -.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { +.file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { background-color: transparent !important; } -.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir { +.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir { background-color: var(--color-primary-light) !important; } @@ -256,23 +256,23 @@ opacity: 0.3; } -#filestable tbody tr { +.files-filestable tbody tr { height: 51px; } -#filestable tbody tr:hover, -#filestable tbody tr:focus, -#filestable tbody .name:focus, -#filestable tbody tr:hover .filename form, +.files-filestable tbody tr:hover, +.files-filestable tbody tr:focus, +.files-filestable tbody .name:focus, +.files-filestable tbody tr:hover .filename form, table tr.mouseOver td { background-color: var(--color-background-hover); } -#filestable tbody tr:active, -#filestable tbody tr.highlighted, -#filestable tbody tr.highlighted .name:focus, -#filestable tbody tr.selected, -#filestable tbody tr.searchresult { +.files-filestable tbody tr:active, +.files-filestable tbody tr.highlighted, +.files-filestable tbody tr.highlighted .name:focus, +.files-filestable tbody tr.selected, +.files-filestable tbody tr.searchresult { background-color: var(--color-primary-light); } @@ -373,27 +373,27 @@ table td { background-repeat: no-repeat; } -table th#headerName { +table th.column-name { position: relative; width: 9999px; /* not really sure why this works better than 100% … table styling */ padding: 0; } -#headerName-container { +.column-name-container { position: relative; height: 50px; } -table th#headerSelection { +table th.column-selection { padding-top: 2px; } -table th#headerSize, table td.filesize { +table th.column-size, table td.filesize { text-align: right; } -table th#headerDate, table td.date, +table th.column-mtime, table td.date, table th.column-last, table td.column-last { -moz-box-sizing: border-box; box-sizing: border-box; @@ -428,13 +428,13 @@ table.multiselect thead th { margin-right: 27%; } -table.multiselect #headerName { +table.multiselect .column-name { position: relative; width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ } -table.multiselect #modified { +table.multiselect .column-mtime > a { display: none; } @@ -537,19 +537,19 @@ table td.filename .nametext { padding: 0 20px 0 0; } -.hide-hidden-files #filestable #fileList tr.hidden-file, -.hide-hidden-files #filestable #fileList tr.hidden-file.dragging { +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file, +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging { display: none; } -#fileList tr.animate-opacity { +.files-fileList tr.animate-opacity { -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; } -#fileList tr.dragging { +.files-fileList tr.dragging { opacity: 0.2; } @@ -582,30 +582,30 @@ table td.selection { } /* File checkboxes */ -#fileList tr td.selection > .selectCheckBox + label:before { +.files-fileList tr td.selection > .selectCheckBox + label:before { opacity: 0.3; margin-right: 0; } /* Show checkbox with full opacity when hovering, checked, or selected */ -#fileList tr:hover td.selection > .selectCheckBox + label:before, -#fileList tr:focus td.selection > .selectCheckBox + label:before, -#fileList tr td.selection > .selectCheckBox:checked + label:before, -#fileList tr.selected td.selection > .selectCheckBox + label:before { +.files-fileList tr:hover td.selection > .selectCheckBox + label:before, +.files-fileList tr:focus td.selection > .selectCheckBox + label:before, +.files-fileList tr td.selection > .selectCheckBox:checked + label:before, +.files-fileList tr.selected td.selection > .selectCheckBox + label:before { opacity: 1; } /* Show checkbox with half opacity when selecting range */ -#fileList tr.halfselected td.selection > .selectCheckBox + label:before { +.files-fileList tr.halfselected td.selection > .selectCheckBox + label:before { opacity: 0.5; } /* Use label to have bigger clickable size for checkbox */ -#fileList tr td.selection > .selectCheckBox + label, +.files-fileList tr td.selection > .selectCheckBox + label, .select-all + label { padding: 16px; } -#fileList tr td.selection > .selectCheckBox:focus + label, +.files-fileList tr td.selection > .selectCheckBox:focus + label, .select-all:focus + label { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); @@ -614,12 +614,12 @@ table td.selection { padding: 14px; } -#fileList tr td.selection > .selectCheckBox:focus-visible + label, +.files-fileList tr td.selection > .selectCheckBox:focus-visible + label, .select-all:focus-visible + label { outline-offset: 0px; } -#fileList tr td.filename { +.files-fileList tr td.filename { position: relative; width: 100%; padding-left: 0; @@ -630,19 +630,19 @@ table td.selection { transition: background-image 500ms; } -#fileList tr td.filename a.name label, -#fileList tr td.filename p.name label { +.files-fileList tr td.filename a.name label, +.files-fileList tr td.filename p.name label { position: absolute; width: 80%; height: 50px; } -#fileList tr td.filename .favorite { +.files-fileList tr td.filename .favorite { display: inline-block; float: left; } -#fileList tr td.filename .favorite-mark { +.files-fileList tr td.filename .favorite-mark { position: absolute; display: block; top: -6px; @@ -672,25 +672,25 @@ table td.selection { } /* force show the loading icon, not only on hover */ -#fileList .icon-loading-small { +.files-fileList .icon-loading-small { opacity: 1 !important; display: inline !important; } -#fileList .action.action-share-notification span, #fileList a.name { +.files-fileList .action.action-share-notification span, .files-fileList a.name { cursor: default !important; } /* * Make the disabled link look not like a link in file list rows */ -#fileList a.name.disabled * { +.files-fileList a.name.disabled * { cursor: default; } -#fileList a.name.disabled a, #fileList a.name.disabled a * { +.files-fileList a.name.disabled a, .files-fileList a.name.disabled a * { cursor: pointer; } -#fileList a.name.disabled:focus { +.files-fileList a.name.disabled:focus { background: none; } @@ -731,16 +731,16 @@ a.action > img { margin-top: -3px; } -#fileList td a a.action { +.files-fileList td a a.action { display: inline; padding: 17px 8px; line-height: 50px; opacity: 0.3; } -#fileList td a a.action.action-share { +.files-fileList td a a.action.action-share { padding: 17px 14px; } -#fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span { +.files-fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span { /* hide text of the share action */ /* .hidden-visually for accessbility */ position: absolute; @@ -750,44 +750,44 @@ a.action > img { height: 1px; overflow: hidden; } -#fileList td a a.action.action-share .avatar { +.files-fileList td a a.action.action-share .avatar { display: inline-block; vertical-align: middle; } -#fileList td a a.action.action-menu { +.files-fileList td a a.action.action-menu { padding-top: 17px; padding-bottom: 17px; padding-left: 14px; padding-right: 14px; } -#fileList td a a.action.no-permission:hover, #fileList td a a.action.no-permission:focus { +.files-fileList td a a.action.no-permission:hover, .files-fileList td a a.action.no-permission:focus { opacity: 0.3; } -#fileList td a a.action.disabled:hover, #fileList td a a.action.disabled:focus, -#fileList td a a.action.disabled img { +.files-fileList td a a.action.disabled:hover, .files-fileList td a a.action.disabled:focus, +.files-fileList td a a.action.disabled img { opacity: 0.3; } -#fileList td a a.action.disabled.action-download { +.files-fileList td a a.action.disabled.action-download { opacity: 0.7; } -#fileList td a a.action.disabled.action-download:hover, #fileList td a a.action.disabled.action-download:focus { +.files-fileList td a a.action.disabled.action-download:hover, .files-fileList td a a.action.disabled.action-download:focus { opacity: 0.7; } -#fileList td a a.action:hover, #fileList td a a.action:focus { +.files-fileList td a a.action:hover, .files-fileList td a a.action:focus { opacity: 1; } -#fileList td a a.action:focus { +.files-fileList td a a.action:focus { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); } -#fileList td a .fileActionsMenu a.action, #fileList td a a.action.action-share.shared-style { +.files-fileList td a .fileActionsMenu a.action, .files-fileList td a a.action.action-share.shared-style { opacity: 0.7; } -#fileList td a .fileActionsMenu .action.permanent { +.files-fileList td a .fileActionsMenu .action.permanent { opacity: 1; } -#fileList .action.action-share.permanent.shared-style span:not(.icon) { +.files-fileList .action.action-share.permanent.shared-style span:not(.icon) { display: inline-block; max-width: 70px; overflow: hidden; @@ -796,31 +796,31 @@ a.action > img { margin-left: 6px; } -#fileList .remoteAddress .userDomain { +.files-fileList .remoteAddress .userDomain { margin-left: 0 !important; } -#fileList .favorite-mark.permanent { +.files-fileList .favorite-mark.permanent { opacity: 1; } -#fileList .fileActionsMenu a.action:hover, -#fileList .fileActionsMenu a.action:focus, -#fileList a.action.action-share.shared-style:hover, -#fileList a.action.action-share.shared-style:focus { +.files-fileList .fileActionsMenu a.action:hover, +.files-fileList .fileActionsMenu a.action:focus, +.files-fileList a.action.action-share.shared-style:hover, +.files-fileList a.action.action-share.shared-style:focus { opacity: 1; } -#fileList tr a.action.disabled { +.files-fileList tr a.action.disabled { background: none; } -#selectedActionsList a.download.disabled, -#fileList tr a.action.action-download.disabled { +.selectedActions a.download.disabled, +.files-fileList tr a.action.action-download.disabled { color: #000000; } -#fileList tr:hover a.action.disabled:hover * { +.files-fileList tr:hover a.action.disabled:hover * { cursor: default; } @@ -830,7 +830,7 @@ a.action > img { height: 330px; } -#filestable .filesummary { +.files-filestable .summary .filesummary { width: 100%; /* Width of checkbox and file preview */ padding-left: 101px; @@ -916,32 +916,32 @@ table.dragshadow td.size { left: 57px !important; } -#filestable .filename .action .icon, -#filestable .selectedActions a .icon, -#filestable .filename .favorite-mark .icon, -#controls .actions .button .icon { +.files-filestable .filename .action .icon, +.files-filestable .selectedActions a .icon, +.files-filestable .filename .favorite-mark .icon, +.files-controls .actions .button .icon { display: inline-block; vertical-align: middle; background-size: 16px 16px; } -#filestable .filename .favorite-mark .icon-star { +.files-filestable .filename .favorite-mark .icon-star { background-image: none; } -#filestable .filename .favorite-mark .icon-starred { +.files-filestable .filename .favorite-mark .icon-starred { /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ background-image: var(--icon-star-dark-yellow); } -#filestable .filename .action .icon.hidden, -#filestable .selectedActions a .icon.hidden, -#controls .actions .button .icon.hidden { +.files-filestable .filename .action .icon.hidden, +.files-filestable .selectedActions a .icon.hidden, +.files-controls .actions .button .icon.hidden { display: none; } -#filestable .filename .action .icon.loading, -#filestable .selectedActions a .icon.loading, -#controls .actions .button .icon.loading { +.files-filestable .filename .action .icon.loading, +.files-filestable .selectedActions a .icon.loading, +.files-controls .actions .button .icon.loading { width: 15px; height: 15px; } @@ -955,7 +955,7 @@ table.dragshadow td.size { } .breadcrumb .canDrop > a, -#filestable tbody tr.canDrop { +.files-filestable tbody tr.canDrop { background-color: rgba(0, 130, 201, 0.3); } @@ -1006,62 +1006,62 @@ table.dragshadow td.size { } /* GRID */ -#filestable.view-grid:not(.hidden) { +.files-filestable.view-grid:not(.hidden) { /* HEADER and MULTISELECT */ /* MAIN FILE LIST */ /* Center align the footer file number & size summary */ } -#filestable.view-grid:not(.hidden) thead tr { +.files-filestable.view-grid:not(.hidden) thead tr { display: block; border-bottom: 1px solid var(--color-border); background-color: var(--color-main-background-translucent); } -#filestable.view-grid:not(.hidden) thead tr th { +.files-filestable.view-grid:not(.hidden) thead tr th { width: auto; border: none; } -#filestable.view-grid:not(.hidden) tbody { +.files-filestable.view-grid:not(.hidden) tbody { display: grid; grid-template-columns: repeat(auto-fill, 160px); justify-content: space-around; row-gap: 15px; margin: 15px 0; } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) { display: block; position: relative; height: 190px; border-radius: var(--border-radius); } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted { background-color: transparent; } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions { background-color: var(--color-background-hover); } -#filestable.view-grid:not(.hidden) tbody td { +.files-filestable.view-grid:not(.hidden) tbody td { display: inline; border-bottom: none; /* No space for filesize and date in grid view */ /* Position actions menu below file */ } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper { min-width: 0; max-width: none; position: absolute; @@ -1072,7 +1072,7 @@ table.dragshadow td.size { left: 0; z-index: -1; } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail { width: calc(100% - 2 * 14px); height: calc(100% - 2 * 14px); background-size: contain; @@ -1084,13 +1084,13 @@ table.dragshadow td.size { * Position is inherited from the selection while in grid view */ } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark { padding: 14px; left: auto; top: -22px; right: -22px; } -#filestable.view-grid:not(.hidden) tbody td.filename .uploadtext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .uploadtext { width: 100%; margin: 0; top: 0; @@ -1099,13 +1099,13 @@ table.dragshadow td.size { padding-top: 4px; padding-left: 28px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name { height: 100%; border-radius: var(--border-radius); overflow: hidden; cursor: pointer !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext { display: flex; height: 44px; margin-top: 146px; @@ -1114,27 +1114,27 @@ table.dragshadow td.size { padding: 0; /* No space for extension in grid view */ } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { display: inline-block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before { content: ""; flex: 1; min-width: 14px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after { content: ""; flex: 1; min-width: 44px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension { display: none; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions { height: initial; margin-top: 146px; display: flex; @@ -1142,7 +1142,7 @@ table.dragshadow td.size { position: absolute; right: 0; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action { padding: 14px; width: 44px; height: 44px; @@ -1150,34 +1150,34 @@ table.dragshadow td.size { align-items: center; justify-content: center; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) { display: none; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img { padding: 6px; border-radius: 50%; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename form { +.files-filestable.view-grid:not(.hidden) tbody td.filename form { padding: 3px 14px; border-radius: var(--border-radius); } -#filestable.view-grid:not(.hidden) tbody td.filename form input.filename { +.files-filestable.view-grid:not(.hidden) tbody td.filename form input.filename { width: 100%; margin-left: 0; } -#filestable.view-grid:not(.hidden) tbody td.filesize, #filestable.view-grid:not(.hidden) tbody td.date { +.files-filestable.view-grid:not(.hidden) tbody td.filesize, .files-filestable.view-grid:not(.hidden) tbody td.date { display: none; } -#filestable.view-grid:not(.hidden) tbody td.selection, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark { +.files-filestable.view-grid:not(.hidden) tbody td.selection, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark { position: absolute; top: -8px; left: -8px; @@ -1187,45 +1187,45 @@ table.dragshadow td.size { z-index: 10; background: transparent; } -#filestable.view-grid:not(.hidden) tbody td.selection label, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label { +.files-filestable.view-grid:not(.hidden) tbody td.selection label, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label { width: 44px; height: 44px; display: inline-flex; padding: 14px; } -#filestable.view-grid:not(.hidden) tbody td.selection label::before, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before { +.files-filestable.view-grid:not(.hidden) tbody td.selection label::before, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before { margin: 0; width: 14px; height: 14px; } -#filestable.view-grid:not(.hidden) tbody td .popovermenu { +.files-filestable.view-grid:not(.hidden) tbody td .popovermenu { left: 0; width: 150px; margin: 0 5px; /* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */ } -#filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) { +.files-filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) { overflow: hidden; text-overflow: ellipsis; } -#filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension { +.files-filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension { display: block; } -#filestable.view-grid:not(.hidden) tfoot { +.files-filestable.view-grid:not(.hidden) tfoot { display: grid; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) { display: inline-block; margin: 0 auto; height: 418px; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td { padding-top: 50px; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, #filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, .files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date { display: none; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info { margin-left: 0; } @@ -1261,14 +1261,14 @@ table.dragshadow td.size { #body-public { /* Right-align view toggle on link share page */ } -#body-public #filestable.view-grid:not(.hidden) tbody td { +#body-public .files-filestable.view-grid:not(.hidden) tbody td { /* More space for filename since there is no share icon */ /* Position actions menu correctly below 3-dot-menu */ } -#body-public #filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { +#body-public .files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { max-width: 124px; } -#body-public #filestable.view-grid:not(.hidden) tbody td .popovermenu { +#body-public .files-filestable.view-grid:not(.hidden) tbody td .popovermenu { left: -80px; } #body-public #view-toggle { diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 6242eb4a5c0..99d3bf90f01 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -48,20 +48,20 @@ .newFileMenu .error, .newFileMenu .error + .icon-confirm, -#fileList .error { +.files-fileList .error { color: var(--color-error); border-color: var(--color-error); } /* FILE TABLE */ -#filestable { +.files-filestable { position: relative; width: 100%; min-width: 250px; display: block; flex-direction: column; // hide table if emptycontent is not hidden - #emptycontent:not(.hidden) ~ & { + .emptycontent:not(.hidden) ~ & { display: none; } // floating header @@ -94,7 +94,7 @@ } } -#filestable.hidden { +.files-filestable.hidden { display: none; } @@ -110,7 +110,7 @@ width: calc(100% - 300px); } -.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { +.file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { background-color: var(--color-primary-light) !important; } @@ -118,11 +118,11 @@ background-color: var(--color-main-background) !important; } -.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{ +.file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover{ background-color: transparent !important; } -.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir{ +.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{ background-color: var(--color-primary-light) !important; } @@ -181,21 +181,21 @@ opacity: 0.3; } -#filestable tbody tr { +.files-filestable tbody tr { height: 51px; } -#filestable tbody tr:hover, -#filestable tbody tr:focus, -#filestable tbody .name:focus, -#filestable tbody tr:hover .filename form, +.files-filestable tbody tr:hover, +.files-filestable tbody tr:focus, +.files-filestable tbody .name:focus, +.files-filestable tbody tr:hover .filename form, table tr.mouseOver td { background-color: var(--color-background-hover); } -#filestable tbody tr:active, -#filestable tbody tr.highlighted, -#filestable tbody tr.highlighted .name:focus, -#filestable tbody tr.selected, -#filestable tbody tr.searchresult { +.files-filestable tbody tr:active, +.files-filestable tbody tr.highlighted, +.files-filestable tbody tr.highlighted .name:focus, +.files-filestable tbody tr.selected, +.files-filestable tbody tr.searchresult { background-color: var(--color-primary-light); } @@ -283,24 +283,24 @@ table td { background-position: 8px center; background-repeat: no-repeat; } -table th#headerName { +table th.column-name { position: relative; width: 9999px; /* not really sure why this works better than 100% … table styling */ padding: 0; } -#headerName-container { +.column-name-container { position: relative; height: 50px; } -table th#headerSelection { +table th.column-selection { padding-top: 2px; } -table th#headerSize, table td.filesize { +table th.column-size, table td.filesize { text-align: right; } -table th#headerDate, table td.date, +table th.column-mtime, table td.date, table th.column-last, table td.column-last { -moz-box-sizing: border-box; box-sizing: border-box; @@ -315,9 +315,9 @@ table th.column-last, table td.column-last { top: 94px; } -#app-content-recent, -#app-content-favorites, -#app-content-shareoverview, +#app-content-recent, +#app-content-favorites, +#app-content-shareoverview, #app-content-sharingout, #app-content-sharingin, #app-content-sharinglinks, @@ -335,11 +335,11 @@ table.multiselect thead th { margin-right: 27%; } -table.multiselect #headerName { +table.multiselect .column-name { position: relative; width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ } -table.multiselect #modified { +table.multiselect .column-mtime>a { display: none; } @@ -434,18 +434,18 @@ table { } } -.hide-hidden-files #filestable #fileList tr.hidden-file, -.hide-hidden-files #filestable #fileList tr.hidden-file.dragging { +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file, +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging { display: none; } -#fileList tr.animate-opacity { +.files-fileList tr.animate-opacity { -webkit-transition:opacity 250ms; -moz-transition:opacity 250ms; -o-transition:opacity 250ms; transition:opacity 250ms; } -#fileList tr.dragging { +.files-fileList tr.dragging { opacity: 0.2; } @@ -482,26 +482,26 @@ table td.selection { } /* File checkboxes */ -#fileList tr td.selection>.selectCheckBox + label:before { +.files-fileList tr td.selection>.selectCheckBox + label:before { opacity: 0.3; margin-right: 0; } /* Show checkbox with full opacity when hovering, checked, or selected */ -#fileList tr:hover td.selection>.selectCheckBox + label:before, -#fileList tr:focus td.selection>.selectCheckBox + label:before, -#fileList tr td.selection>.selectCheckBox:checked + label:before, -#fileList tr.selected td.selection>.selectCheckBox + label:before { +.files-fileList tr:hover td.selection>.selectCheckBox + label:before, +.files-fileList tr:focus td.selection>.selectCheckBox + label:before, +.files-fileList tr td.selection>.selectCheckBox:checked + label:before, +.files-fileList tr.selected td.selection>.selectCheckBox + label:before { opacity: 1; } /* Show checkbox with half opacity when selecting range */ -#fileList tr.halfselected td.selection>.selectCheckBox + label:before { +.files-fileList tr.halfselected td.selection>.selectCheckBox + label:before { opacity: 0.5; } /* Use label to have bigger clickable size for checkbox */ -#fileList tr td.selection>.selectCheckBox, +.files-fileList tr td.selection>.selectCheckBox, .select-all { & + label { padding: 16px; @@ -516,12 +516,12 @@ table td.selection { } } -#fileList tr td.selection>.selectCheckBox:focus-visible + label, +.files-fileList tr td.selection>.selectCheckBox:focus-visible + label, .select-all:focus-visible + label { outline-offset: 0px; } -#fileList tr td.filename { +.files-fileList tr td.filename { position: relative; width: 100%; padding-left: 0; @@ -529,18 +529,18 @@ table td.selection { -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms; } -#fileList tr td.filename a.name label, -#fileList tr td.filename p.name label { +.files-fileList tr td.filename a.name label, +.files-fileList tr td.filename p.name label { position: absolute; width: 80%; height: 50px; } -#fileList tr td.filename .favorite { +.files-fileList tr td.filename .favorite { display: inline-block; float: left; } -#fileList tr td.filename .favorite-mark { +.files-fileList tr td.filename .favorite-mark { position: absolute; display: block; top: -6px; @@ -568,19 +568,19 @@ table td.selection { } /* force show the loading icon, not only on hover */ -#fileList .icon-loading-small { +.files-fileList .icon-loading-small { opacity: 1 !important; display: inline !important; } -#fileList .action.action-share-notification span, #fileList a.name { +.files-fileList .action.action-share-notification span, .files-fileList a.name { cursor: default !important; } /* * Make the disabled link look not like a link in file list rows */ -#fileList a.name.disabled { +.files-fileList a.name.disabled { * { cursor: default; } @@ -628,7 +628,7 @@ a.action > img { margin-top: -3px; } -#fileList td a { +.files-fileList td a { a.action { display: inline; padding: 17px 8px; @@ -691,7 +691,7 @@ a.action > img { } // Ellipsize long sharer names -#fileList .action.action-share.permanent.shared-style span:not(.icon) { +.files-fileList .action.action-share.permanent.shared-style span:not(.icon) { display: inline-block; max-width: 70px; overflow: hidden; @@ -700,42 +700,42 @@ a.action > img { margin-left: 6px; } -#fileList .remoteAddress .userDomain { +.files-fileList .remoteAddress .userDomain { margin-left: 0 !important; } -#fileList .favorite-mark.permanent { +.files-fileList .favorite-mark.permanent { opacity: 1; } -#fileList .fileActionsMenu a.action:hover, -#fileList .fileActionsMenu a.action:focus, +.files-fileList .fileActionsMenu a.action:hover, +.files-fileList .fileActionsMenu a.action:focus, /* show share action of shared items darker to distinguish from non-shared */ -#fileList a.action.action-share.shared-style:hover, -#fileList a.action.action-share.shared-style:focus { +.files-fileList a.action.action-share.shared-style:hover, +.files-fileList a.action.action-share.shared-style:focus { opacity: 1; } -#fileList tr a.action.disabled { +.files-fileList tr a.action.disabled { background: none; } -#selectedActionsList a.download.disabled, -#fileList tr a.action.action-download.disabled { +.selectedActions a.download.disabled, +.files-fileList tr a.action.action-download.disabled { color: #000000; } -#fileList tr:hover a.action.disabled:hover * { +.files-fileList tr:hover a.action.disabled:hover * { cursor: default; } .summary { color: var(--color-text-maxcontrast); /* add whitespace to bottom of files list to correctly show dropdowns */ - $action-menu-items-count: 7; // list view has currently max 7 items in its action menu + $action-menu-items-count: 7; // list view has currently max 7 items in its action menu height: 44px * ($action-menu-items-count + 0.5); // 0.5 is added to show some whitespace below } -#filestable .filesummary { +.files-filestable .summary .filesummary { width: 100%; /* Width of checkbox and file preview */ padding-left: 101px; @@ -814,16 +814,16 @@ table.dragshadow td.size { } } -#filestable .filename .action .icon, -#filestable .selectedActions a .icon, -#filestable .filename .favorite-mark .icon, -#controls .actions .button .icon { +.files-filestable .filename .action .icon, +.files-filestable .selectedActions a .icon, +.files-filestable .filename .favorite-mark .icon, +.files-controls .actions .button .icon { display: inline-block; vertical-align: middle; background-size: 16px 16px; } -#filestable .filename .favorite-mark { +.files-filestable .filename .favorite-mark { // Override default icons to always hide the star icon and always show the // starred icon even when hovered or focused. & .icon-star { @@ -834,15 +834,15 @@ table.dragshadow td.size { } } -#filestable .filename .action .icon.hidden, -#filestable .selectedActions a .icon.hidden, -#controls .actions .button .icon.hidden { +.files-filestable .filename .action .icon.hidden, +.files-filestable .selectedActions a .icon.hidden, +.files-controls .actions .button .icon.hidden { display: none; } -#filestable .filename .action .icon.loading, -#filestable .selectedActions a .icon.loading, -#controls .actions .button .icon.loading { +.files-filestable .filename .action .icon.loading, +.files-filestable .selectedActions a .icon.loading, +.files-controls .actions .button .icon.loading { width: 15px; height: 15px; } @@ -856,7 +856,7 @@ table.dragshadow td.size { } .breadcrumb .canDrop > a, -#filestable tbody tr.canDrop { +.files-filestable tbody tr.canDrop { background-color: rgba( variables.$color-primary, .3 ); } .dropzone-background { @@ -874,7 +874,7 @@ table.dragshadow td.size { overflow: auto; min-width: 160px; height: 54px; - + &:not(.hidden) { display: flex; } @@ -914,7 +914,7 @@ table.dragshadow td.size { } /* GRID */ -#filestable.view-grid:not(.hidden) { +.files-filestable.view-grid:not(.hidden) { $grid-size: 160px; $grid-pad: 14px; @@ -1220,7 +1220,7 @@ table.dragshadow td.size { /* Adjustments for link share page */ #body-public { - #filestable.view-grid:not(.hidden) tbody td { + .files-filestable.view-grid:not(.hidden) tbody td { /* More space for filename since there is no share icon */ &.filename .name .nametext .innernametext { max-width: 124px; diff --git a/apps/files/css/merged.css b/apps/files/css/merged.css index 7696875d849..14a0d72097d 100644 --- a/apps/files/css/merged.css +++ b/apps/files/css/merged.css @@ -111,13 +111,13 @@ .newFileMenu .error, .newFileMenu .error + .icon-confirm, -#fileList .error { +.files-fileList .error { color: var(--color-error); border-color: var(--color-error); } /* FILE TABLE */ -#filestable { +.files-filestable { position: relative; width: 100%; min-width: 250px; @@ -127,10 +127,10 @@ * This is a dirty hack as the sticky header requires us to use a different display type on the table element */ } -#emptycontent:not(.hidden) ~ #filestable { +.emptycontent:not(.hidden) ~ .files-filestable { display: none; } -#filestable thead { +.files-filestable thead { position: -webkit-sticky; position: sticky; top: 50px; @@ -138,20 +138,20 @@ display: block; background-color: var(--color-main-background-translucent); } -#filestable tbody { +.files-filestable tbody { display: table; width: 100%; } -#filestable tbody tr[data-permissions="0"], -#filestable tbody tr[data-permissions="16"] { +.files-filestable tbody tr[data-permissions="0"], +.files-filestable tbody tr[data-permissions="16"] { background-color: var(--color-background-dark); } -#filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext, -#filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext { +.files-filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext, +.files-filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext { color: var(--color-text-maxcontrast); } -#filestable.hidden { +.files-filestable.hidden { display: none; } @@ -165,7 +165,7 @@ width: calc(100% - 300px); } -.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { +.file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { background-color: var(--color-primary-light) !important; } @@ -173,11 +173,11 @@ background-color: var(--color-main-background) !important; } -.file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { +.file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover { background-color: transparent !important; } -.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir { +.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir { background-color: var(--color-primary-light) !important; } @@ -256,23 +256,23 @@ opacity: 0.3; } -#filestable tbody tr { +.files-filestable tbody tr { height: 51px; } -#filestable tbody tr:hover, -#filestable tbody tr:focus, -#filestable tbody .name:focus, -#filestable tbody tr:hover .filename form, +.files-filestable tbody tr:hover, +.files-filestable tbody tr:focus, +.files-filestable tbody .name:focus, +.files-filestable tbody tr:hover .filename form, table tr.mouseOver td { background-color: var(--color-background-hover); } -#filestable tbody tr:active, -#filestable tbody tr.highlighted, -#filestable tbody tr.highlighted .name:focus, -#filestable tbody tr.selected, -#filestable tbody tr.searchresult { +.files-filestable tbody tr:active, +.files-filestable tbody tr.highlighted, +.files-filestable tbody tr.highlighted .name:focus, +.files-filestable tbody tr.selected, +.files-filestable tbody tr.searchresult { background-color: var(--color-primary-light); } @@ -373,27 +373,27 @@ table td { background-repeat: no-repeat; } -table th#headerName { +table th.column-name { position: relative; width: 9999px; /* not really sure why this works better than 100% … table styling */ padding: 0; } -#headerName-container { +.column-name-container { position: relative; height: 50px; } -table th#headerSelection { +table th.column-selection { padding-top: 2px; } -table th#headerSize, table td.filesize { +table th.column-size, table td.filesize { text-align: right; } -table th#headerDate, table td.date, +table th.column-mtime, table td.date, table th.column-last, table td.column-last { -moz-box-sizing: border-box; box-sizing: border-box; @@ -428,13 +428,13 @@ table.multiselect thead th { margin-right: 27%; } -table.multiselect #headerName { +table.multiselect .column-name { position: relative; width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ } -table.multiselect #modified { +table.multiselect .column-mtime > a { display: none; } @@ -537,19 +537,19 @@ table td.filename .nametext { padding: 0 20px 0 0; } -.hide-hidden-files #filestable #fileList tr.hidden-file, -.hide-hidden-files #filestable #fileList tr.hidden-file.dragging { +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file, +.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging { display: none; } -#fileList tr.animate-opacity { +.files-fileList tr.animate-opacity { -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; } -#fileList tr.dragging { +.files-fileList tr.dragging { opacity: 0.2; } @@ -582,30 +582,30 @@ table td.selection { } /* File checkboxes */ -#fileList tr td.selection > .selectCheckBox + label:before { +.files-fileList tr td.selection > .selectCheckBox + label:before { opacity: 0.3; margin-right: 0; } /* Show checkbox with full opacity when hovering, checked, or selected */ -#fileList tr:hover td.selection > .selectCheckBox + label:before, -#fileList tr:focus td.selection > .selectCheckBox + label:before, -#fileList tr td.selection > .selectCheckBox:checked + label:before, -#fileList tr.selected td.selection > .selectCheckBox + label:before { +.files-fileList tr:hover td.selection > .selectCheckBox + label:before, +.files-fileList tr:focus td.selection > .selectCheckBox + label:before, +.files-fileList tr td.selection > .selectCheckBox:checked + label:before, +.files-fileList tr.selected td.selection > .selectCheckBox + label:before { opacity: 1; } /* Show checkbox with half opacity when selecting range */ -#fileList tr.halfselected td.selection > .selectCheckBox + label:before { +.files-fileList tr.halfselected td.selection > .selectCheckBox + label:before { opacity: 0.5; } /* Use label to have bigger clickable size for checkbox */ -#fileList tr td.selection > .selectCheckBox + label, +.files-fileList tr td.selection > .selectCheckBox + label, .select-all + label { padding: 16px; } -#fileList tr td.selection > .selectCheckBox:focus + label, +.files-fileList tr td.selection > .selectCheckBox:focus + label, .select-all:focus + label { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); @@ -614,12 +614,12 @@ table td.selection { padding: 14px; } -#fileList tr td.selection > .selectCheckBox:focus-visible + label, +.files-fileList tr td.selection > .selectCheckBox:focus-visible + label, .select-all:focus-visible + label { outline-offset: 0px; } -#fileList tr td.filename { +.files-fileList tr td.filename { position: relative; width: 100%; padding-left: 0; @@ -630,19 +630,19 @@ table td.selection { transition: background-image 500ms; } -#fileList tr td.filename a.name label, -#fileList tr td.filename p.name label { +.files-fileList tr td.filename a.name label, +.files-fileList tr td.filename p.name label { position: absolute; width: 80%; height: 50px; } -#fileList tr td.filename .favorite { +.files-fileList tr td.filename .favorite { display: inline-block; float: left; } -#fileList tr td.filename .favorite-mark { +.files-fileList tr td.filename .favorite-mark { position: absolute; display: block; top: -6px; @@ -672,25 +672,25 @@ table td.selection { } /* force show the loading icon, not only on hover */ -#fileList .icon-loading-small { +.files-fileList .icon-loading-small { opacity: 1 !important; display: inline !important; } -#fileList .action.action-share-notification span, #fileList a.name { +.files-fileList .action.action-share-notification span, .files-fileList a.name { cursor: default !important; } /* * Make the disabled link look not like a link in file list rows */ -#fileList a.name.disabled * { +.files-fileList a.name.disabled * { cursor: default; } -#fileList a.name.disabled a, #fileList a.name.disabled a * { +.files-fileList a.name.disabled a, .files-fileList a.name.disabled a * { cursor: pointer; } -#fileList a.name.disabled:focus { +.files-fileList a.name.disabled:focus { background: none; } @@ -731,16 +731,16 @@ a.action > img { margin-top: -3px; } -#fileList td a a.action { +.files-fileList td a a.action { display: inline; padding: 17px 8px; line-height: 50px; opacity: 0.3; } -#fileList td a a.action.action-share { +.files-fileList td a a.action.action-share { padding: 17px 14px; } -#fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span { +.files-fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span { /* hide text of the share action */ /* .hidden-visually for accessbility */ position: absolute; @@ -750,44 +750,44 @@ a.action > img { height: 1px; overflow: hidden; } -#fileList td a a.action.action-share .avatar { +.files-fileList td a a.action.action-share .avatar { display: inline-block; vertical-align: middle; } -#fileList td a a.action.action-menu { +.files-fileList td a a.action.action-menu { padding-top: 17px; padding-bottom: 17px; padding-left: 14px; padding-right: 14px; } -#fileList td a a.action.no-permission:hover, #fileList td a a.action.no-permission:focus { +.files-fileList td a a.action.no-permission:hover, .files-fileList td a a.action.no-permission:focus { opacity: 0.3; } -#fileList td a a.action.disabled:hover, #fileList td a a.action.disabled:focus, -#fileList td a a.action.disabled img { +.files-fileList td a a.action.disabled:hover, .files-fileList td a a.action.disabled:focus, +.files-fileList td a a.action.disabled img { opacity: 0.3; } -#fileList td a a.action.disabled.action-download { +.files-fileList td a a.action.disabled.action-download { opacity: 0.7; } -#fileList td a a.action.disabled.action-download:hover, #fileList td a a.action.disabled.action-download:focus { +.files-fileList td a a.action.disabled.action-download:hover, .files-fileList td a a.action.disabled.action-download:focus { opacity: 0.7; } -#fileList td a a.action:hover, #fileList td a a.action:focus { +.files-fileList td a a.action:hover, .files-fileList td a a.action:focus { opacity: 1; } -#fileList td a a.action:focus { +.files-fileList td a a.action:focus { background-color: var(--color-background-hover); border-radius: var(--border-radius-pill); } -#fileList td a .fileActionsMenu a.action, #fileList td a a.action.action-share.shared-style { +.files-fileList td a .fileActionsMenu a.action, .files-fileList td a a.action.action-share.shared-style { opacity: 0.7; } -#fileList td a .fileActionsMenu .action.permanent { +.files-fileList td a .fileActionsMenu .action.permanent { opacity: 1; } -#fileList .action.action-share.permanent.shared-style span:not(.icon) { +.files-fileList .action.action-share.permanent.shared-style span:not(.icon) { display: inline-block; max-width: 70px; overflow: hidden; @@ -796,31 +796,31 @@ a.action > img { margin-left: 6px; } -#fileList .remoteAddress .userDomain { +.files-fileList .remoteAddress .userDomain { margin-left: 0 !important; } -#fileList .favorite-mark.permanent { +.files-fileList .favorite-mark.permanent { opacity: 1; } -#fileList .fileActionsMenu a.action:hover, -#fileList .fileActionsMenu a.action:focus, -#fileList a.action.action-share.shared-style:hover, -#fileList a.action.action-share.shared-style:focus { +.files-fileList .fileActionsMenu a.action:hover, +.files-fileList .fileActionsMenu a.action:focus, +.files-fileList a.action.action-share.shared-style:hover, +.files-fileList a.action.action-share.shared-style:focus { opacity: 1; } -#fileList tr a.action.disabled { +.files-fileList tr a.action.disabled { background: none; } -#selectedActionsList a.download.disabled, -#fileList tr a.action.action-download.disabled { +.selectedActions a.download.disabled, +.files-fileList tr a.action.action-download.disabled { color: #000000; } -#fileList tr:hover a.action.disabled:hover * { +.files-fileList tr:hover a.action.disabled:hover * { cursor: default; } @@ -830,7 +830,7 @@ a.action > img { height: 330px; } -#filestable .filesummary { +.files-filestable .summary .filesummary { width: 100%; /* Width of checkbox and file preview */ padding-left: 101px; @@ -916,32 +916,32 @@ table.dragshadow td.size { left: 57px !important; } -#filestable .filename .action .icon, -#filestable .selectedActions a .icon, -#filestable .filename .favorite-mark .icon, -#controls .actions .button .icon { +.files-filestable .filename .action .icon, +.files-filestable .selectedActions a .icon, +.files-filestable .filename .favorite-mark .icon, +.files-controls .actions .button .icon { display: inline-block; vertical-align: middle; background-size: 16px 16px; } -#filestable .filename .favorite-mark .icon-star { +.files-filestable .filename .favorite-mark .icon-star { background-image: none; } -#filestable .filename .favorite-mark .icon-starred { +.files-filestable .filename .favorite-mark .icon-starred { /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ background-image: var(--icon-star-dark-yellow); } -#filestable .filename .action .icon.hidden, -#filestable .selectedActions a .icon.hidden, -#controls .actions .button .icon.hidden { +.files-filestable .filename .action .icon.hidden, +.files-filestable .selectedActions a .icon.hidden, +.files-controls .actions .button .icon.hidden { display: none; } -#filestable .filename .action .icon.loading, -#filestable .selectedActions a .icon.loading, -#controls .actions .button .icon.loading { +.files-filestable .filename .action .icon.loading, +.files-filestable .selectedActions a .icon.loading, +.files-controls .actions .button .icon.loading { width: 15px; height: 15px; } @@ -955,7 +955,7 @@ table.dragshadow td.size { } .breadcrumb .canDrop > a, -#filestable tbody tr.canDrop { +.files-filestable tbody tr.canDrop { background-color: rgba(0, 130, 201, 0.3); } @@ -1006,62 +1006,62 @@ table.dragshadow td.size { } /* GRID */ -#filestable.view-grid:not(.hidden) { +.files-filestable.view-grid:not(.hidden) { /* HEADER and MULTISELECT */ /* MAIN FILE LIST */ /* Center align the footer file number & size summary */ } -#filestable.view-grid:not(.hidden) thead tr { +.files-filestable.view-grid:not(.hidden) thead tr { display: block; border-bottom: 1px solid var(--color-border); background-color: var(--color-main-background-translucent); } -#filestable.view-grid:not(.hidden) thead tr th { +.files-filestable.view-grid:not(.hidden) thead tr th { width: auto; border: none; } -#filestable.view-grid:not(.hidden) tbody { +.files-filestable.view-grid:not(.hidden) tbody { display: grid; grid-template-columns: repeat(auto-fill, 160px); justify-content: space-around; row-gap: 15px; margin: 15px 0; } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) { display: block; position: relative; height: 190px; border-radius: var(--border-radius); } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted { background-color: transparent; } -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext, -#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions { +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext, +.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions { background-color: var(--color-background-hover); } -#filestable.view-grid:not(.hidden) tbody td { +.files-filestable.view-grid:not(.hidden) tbody td { display: inline; border-bottom: none; /* No space for filesize and date in grid view */ /* Position actions menu below file */ } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper { min-width: 0; max-width: none; position: absolute; @@ -1072,7 +1072,7 @@ table.dragshadow td.size { left: 0; z-index: -1; } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail { width: calc(100% - 2 * 14px); height: calc(100% - 2 * 14px); background-size: contain; @@ -1084,13 +1084,13 @@ table.dragshadow td.size { * Position is inherited from the selection while in grid view */ } -#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark { +.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark { padding: 14px; left: auto; top: -22px; right: -22px; } -#filestable.view-grid:not(.hidden) tbody td.filename .uploadtext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .uploadtext { width: 100%; margin: 0; top: 0; @@ -1099,13 +1099,13 @@ table.dragshadow td.size { padding-top: 4px; padding-left: 28px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name { height: 100%; border-radius: var(--border-radius); overflow: hidden; cursor: pointer !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext { display: flex; height: 44px; margin-top: 146px; @@ -1114,27 +1114,27 @@ table.dragshadow td.size { padding: 0; /* No space for extension in grid view */ } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { display: inline-block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before { content: ""; flex: 1; min-width: 14px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after { content: ""; flex: 1; min-width: 44px; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension { display: none; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions { height: initial; margin-top: 146px; display: flex; @@ -1142,7 +1142,7 @@ table.dragshadow td.size { position: absolute; right: 0; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action { padding: 14px; width: 44px; height: 44px; @@ -1150,34 +1150,34 @@ table.dragshadow td.size { align-items: center; justify-content: center; } -#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) { +.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) { display: none; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img { padding: 6px; border-radius: 50%; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden { +.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden { display: block !important; } -#filestable.view-grid:not(.hidden) tbody td.filename form { +.files-filestable.view-grid:not(.hidden) tbody td.filename form { padding: 3px 14px; border-radius: var(--border-radius); } -#filestable.view-grid:not(.hidden) tbody td.filename form input.filename { +.files-filestable.view-grid:not(.hidden) tbody td.filename form input.filename { width: 100%; margin-left: 0; } -#filestable.view-grid:not(.hidden) tbody td.filesize, #filestable.view-grid:not(.hidden) tbody td.date { +.files-filestable.view-grid:not(.hidden) tbody td.filesize, .files-filestable.view-grid:not(.hidden) tbody td.date { display: none; } -#filestable.view-grid:not(.hidden) tbody td.selection, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark { +.files-filestable.view-grid:not(.hidden) tbody td.selection, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark { position: absolute; top: -8px; left: -8px; @@ -1187,45 +1187,45 @@ table.dragshadow td.size { z-index: 10; background: transparent; } -#filestable.view-grid:not(.hidden) tbody td.selection label, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label { +.files-filestable.view-grid:not(.hidden) tbody td.selection label, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label { width: 44px; height: 44px; display: inline-flex; padding: 14px; } -#filestable.view-grid:not(.hidden) tbody td.selection label::before, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before { +.files-filestable.view-grid:not(.hidden) tbody td.selection label::before, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before { margin: 0; width: 14px; height: 14px; } -#filestable.view-grid:not(.hidden) tbody td .popovermenu { +.files-filestable.view-grid:not(.hidden) tbody td .popovermenu { left: 0; width: 150px; margin: 0 5px; /* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */ } -#filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) { +.files-filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) { overflow: hidden; text-overflow: ellipsis; } -#filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension { +.files-filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension { display: block; } -#filestable.view-grid:not(.hidden) tfoot { +.files-filestable.view-grid:not(.hidden) tfoot { display: grid; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) { display: inline-block; margin: 0 auto; height: 418px; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td { padding-top: 50px; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, #filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, .files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date { display: none; } -#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info { +.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info { margin-left: 0; } @@ -1261,14 +1261,14 @@ table.dragshadow td.size { #body-public { /* Right-align view toggle on link share page */ } -#body-public #filestable.view-grid:not(.hidden) tbody td { +#body-public .files-filestable.view-grid:not(.hidden) tbody td { /* More space for filename since there is no share icon */ /* Position actions menu correctly below 3-dot-menu */ } -#body-public #filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { +#body-public .files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext { max-width: 124px; } -#body-public #filestable.view-grid:not(.hidden) tbody td .popovermenu { +#body-public .files-filestable.view-grid:not(.hidden) tbody td .popovermenu { left: -80px; } #body-public #view-toggle { @@ -1338,18 +1338,18 @@ table.dragshadow td.size { overflow: visible; } -#uploadprogresswrapper, #uploadprogresswrapper * { +.uploadprogresswrapper, .uploadprogresswrapper * { box-sizing: border-box; } -#uploadprogresswrapper { +.uploadprogresswrapper { display: inline-block; vertical-align: top; height: 36px; margin-left: 3px; } -#uploadprogresswrapper > input[type=button] { +.uploadprogresswrapper > input[type=button] { height: 36px; margin-left: 3px; } @@ -1591,9 +1591,9 @@ table.dragshadow td.size { background-color: rgb(255, 255, 255) !important; } - table th#headerSize, + table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -1608,17 +1608,17 @@ table td.date { padding-left: 0; } - #fileList a.action.action-menu img { + .fileList a.action.action-menu img { padding-left: 0; } - #fileList .fileActionsMenu { + .fileList .fileActionsMenu { margin-right: 6px; } /* hide text of the share action on mobile */ /* .hidden-visually for accessbility */ - #fileList a.action-share span:not(.icon):not(.avatar) { + .fileList a.action-share span:not(.icon):not(.avatar) { position: absolute; left: -10000px; top: auto; diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 9cdbad85156..a6f5457f7d8 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -28,9 +28,9 @@ background-color: rgb(255, 255, 255) !important; } - table th#headerSize, + table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -45,17 +45,17 @@ table td.date { padding-left: 0; } - #fileList a.action.action-menu img { + .fileList a.action.action-menu img { padding-left: 0; } - #fileList .fileActionsMenu { + .fileList .fileActionsMenu { margin-right: 6px; } /* hide text of the share action on mobile */ /* .hidden-visually for accessbility */ - #fileList a.action-share span:not(.icon):not(.avatar) { + .fileList a.action-share span:not(.icon):not(.avatar) { position: absolute; left: -10000px; top: auto; diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index 7c5fc8fe4a2..e47bbe44a63 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -10,9 +10,9 @@ $min-table-width: 688px; background-color: rgba(255, 255, 255, 1)!important; } -table th#headerSize, +table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -27,16 +27,16 @@ table.multiselect thead { padding-left: 0; } -#fileList a.action.action-menu img { +.fileList a.action.action-menu img { padding-left: 0; } -#fileList .fileActionsMenu { +.fileList .fileActionsMenu { margin-right: 6px; } /* hide text of the share action on mobile */ /* .hidden-visually for accessbility */ -#fileList a.action-share span:not(.icon):not(.avatar) { +.fileList a.action-share span:not(.icon):not(.avatar) { position: absolute; left:-10000px; top: auto; diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index dc90f5a793e..b5e3624052b 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -36,18 +36,18 @@ overflow: visible; } -#uploadprogresswrapper, #uploadprogresswrapper * { +.uploadprogresswrapper, .uploadprogresswrapper * { box-sizing: border-box; } -#uploadprogresswrapper { +.uploadprogresswrapper { display: inline-block; vertical-align: top; height: 36px; margin-left: 3px; } -#uploadprogresswrapper > input[type=button] { +.uploadprogresswrapper > input[type=button] { height: 36px; margin-left: 3px; } diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index e7c1e9442e2..35fc763100e 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -23,17 +23,17 @@ .file_upload_target { display:none; } .file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } -#uploadprogresswrapper, #uploadprogresswrapper * { +.uploadprogresswrapper, .uploadprogresswrapper * { box-sizing: border-box; } -#uploadprogresswrapper { +.uploadprogresswrapper { display: inline-block; vertical-align: top; height: 36px; margin-left: 3px; } -#uploadprogresswrapper > input[type='button'] { +.uploadprogresswrapper > input[type='button'] { height: 36px; margin-left: 3px; } diff --git a/apps/files/js/favoritesfilelist.js b/apps/files/js/favoritesfilelist.js index 737f2fd6e96..7ea41da8143 100644 --- a/apps/files/js/favoritesfilelist.js +++ b/apps/files/js/favoritesfilelist.js @@ -18,7 +18,7 @@ window.addEventListener('DOMContentLoaded', function() { * @classdesc Favorites file list. * Displays the list of files marked as favorites * - * @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 */ @@ -48,8 +48,8 @@ window.addEventListener('DOMContentLoaded', function() { 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/js/file-upload.js b/apps/files/js/file-upload.js index 648a5a0307b..dc38f731108 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -1030,7 +1030,7 @@ OC.Uploader.prototype = _.extend({ // check free space if (!self.fileList || upload.getTargetFolder() === self.fileList.getCurrentDirectory()) { // Use global free space if there is no file list to check or the current directory is the target - freeSpace = $('#free_space').val() + freeSpace = $('input[name=free_space]').val() } else if (upload.getTargetFolder().indexOf(self.fileList.getCurrentDirectory()) === 0) { // Check subdirectory free space if file is uploaded there // Retrieve the folder destination name @@ -1266,7 +1266,7 @@ OC.Uploader.prototype = _.extend({ }); fileupload.on('fileuploaddragover', function(e){ $('#app-content').addClass('file-drag'); - $('#emptycontent .icon-folder').addClass('icon-filetype-folder-drag-accept'); + $('.emptyfilelist.emptycontent .icon-folder').addClass('icon-filetype-folder-drag-accept'); var filerow = $(e.delegatedEvent.target).closest('tr'); diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 42afe792142..ac590fe2d74 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -18,7 +18,7 @@ * A file list view consists of a controls bar and * a file list table. * - * @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 {Object} [options] map of options, see other parameters * @param {Object} [options.scrollContainer] scrollable container, defaults to $(window) @@ -224,7 +224,7 @@ /** * Initialize the file list and its components * - * @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 options.scrollContainer scrollable container, defaults to $(window) @@ -276,9 +276,9 @@ } this.$container = options.scrollContainer || $(window); this.$table = $el.find('table:first'); - this.$fileList = $el.find('#fileList'); - this.$header = $el.find('#filelist-header'); - this.$footer = $el.find('#filelist-footer'); + this.$fileList = $el.find('.files-fileList'); + this.$header = $el.find('.filelist-header'); + this.$footer = $el.find('.filelist-footer'); if (!_.isUndefined(this._filesConfig)) { this._filesConfig.on('change:showhidden', function() { @@ -357,7 +357,7 @@ } this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions); - var $controls = this.$el.find('#controls'); + var $controls = this.$el.find('.files-controls'); if ($controls.length > 0) { $controls.prepend(this.breadcrumb.$el); this.$table.addClass('has-controls'); @@ -735,7 +735,7 @@ _onResize: function() { var containerWidth = this.$el.width(); var actionsWidth = 0; - $.each(this.$el.find('#controls .actions'), function(index, action) { + $.each(this.$el.find('.files-controls .actions'), function(index, action) { actionsWidth += $(action).outerWidth(); }); @@ -763,7 +763,7 @@ isGridView ? t('files', 'Show list view') : t('files', 'Show grid view'), ) - $('.list-container').toggleClass('view-grid', isGridView); + this.$table.toggleClass('view-grid', isGridView); if (isGridView) { // If switching into grid view from list view, too few files might be displayed // Try rendering the next page @@ -1898,6 +1898,7 @@ * @return new tr element (not appended to the table) */ add: function(fileData, options) { + var self = this; var index; var $tr; var $rows; @@ -1940,7 +1941,7 @@ $tr.addClass('appear transparent'); window.setTimeout(function() { $tr.removeClass('transparent'); - $("#fileList tr").removeClass('mouseOver'); + self.$fileList.find('tr').removeClass('mouseOver'); $tr.addClass('mouseOver'); }); } @@ -2480,7 +2481,7 @@ this.$el.find('.creatable').toggleClass('hidden', !isCreatable); this.$el.find('.notCreatable').toggleClass('hidden', isCreatable); // remove old style breadcrumbs (some apps might create them) - this.$el.find('#controls .crumb').remove(); + this.$el.find('.files-controls .crumb').remove(); // refresh breadcrumbs in case it was replaced by an app this.breadcrumb.render(); } @@ -2496,7 +2497,7 @@ */ setViewerMode: function(show){ this.showActions(!show); - this.$el.find('#filestable').toggleClass('hidden', show); + this.$el.find('.files-filestable').toggleClass('hidden', show); this.$el.trigger(new $.Event('changeViewerMode', {viewerModeEnabled: show})); }, /** @@ -3304,11 +3305,11 @@ updateEmptyContent: function() { var permissions = this.getDirectoryPermissions(); var isCreatable = (permissions & OC.PERMISSION_CREATE) !== 0; - this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty); - this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty); - this.$el.find('#emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty); - this.$el.find('#filestable').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('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty); + this.$el.find('.emptyfilelist.emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty); + this.$el.find('.files-filestable').toggleClass('hidden', this.isEmpty); + this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty); }, /** * Shows the loading mask. @@ -3323,7 +3324,7 @@ } this.$table.addClass('hidden'); - this.$el.find('#emptycontent').addClass('hidden'); + this.$el.find('.emptyfilelist.emptycontent').addClass('hidden'); $mask = $('
'); @@ -3408,8 +3409,8 @@ }, hideIrrelevantUIWhenNoFilesMatch:function() { if (this._filter && this.fileSummary.summary.totalDirs + this.fileSummary.summary.totalFiles === 0) { - this.$el.find('#filestable thead th').addClass('hidden'); - this.$el.find('#emptycontent').addClass('hidden'); + this.$el.find('.files-filestable thead th').addClass('hidden'); + this.$el.find('.emptyfilelist.emptycontent').addClass('hidden'); $('#searchresults').addClass('filter-empty'); $('#searchresults .emptycontent').addClass('emptycontent-search'); if ( $('#searchresults').length === 0 || $('#searchresults').hasClass('hidden') ) { @@ -3425,9 +3426,9 @@ } else { $('#searchresults').removeClass('filter-empty'); $('#searchresults .emptycontent').removeClass('emptycontent-search'); - this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty); + this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty); if (!this.$el.find('.mask').exists()) { - this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty); + this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty); } this.$el.find('.nofilterresults').addClass('hidden'); } @@ -3449,15 +3450,15 @@ var showHidden = !!this._filesConfig.get('showhidden'); if (summary.totalFiles === 0 && summary.totalDirs === 0) { - this.$el.find('#headerName a.name>span:first').text(t('files','Name')); - this.$el.find('#headerSize a>span:first').text(t('files','Size')); - this.$el.find('#modified a>span:first').text(t('files','Modified')); + this.$el.find('.column-name a.name>span:first').text(t('files','Name')); + this.$el.find('.column-size a>span:first').text(t('files','Size')); + this.$el.find('.column-mtime a>span:first').text(t('files','Modified')); this.$el.find('table').removeClass('multiselect'); this.$el.find('.selectedActions').addClass('hidden'); } else { this.$el.find('.selectedActions').removeClass('hidden'); - this.$el.find('#headerSize a>span:first').text(OC.Util.humanFileSize(summary.totalSize)); + this.$el.find('.column-size a>span:first').text(OC.Util.humanFileSize(summary.totalSize)); var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs); var fileInfo = n('files', '%n file', '%n files', summary.totalFiles); @@ -3479,8 +3480,8 @@ selection += ' (' + hiddenInfo + ')'; } - this.$el.find('#headerName a.name>span:first').text(selection); - this.$el.find('#modified a>span:first').text(''); + this.$el.find('.column-name a.name>span:first').text(selection); + this.$el.find('.column-mtime a>span:first').text(''); this.$el.find('table').addClass('multiselect'); if (this.fileMultiSelectMenu) { @@ -3792,7 +3793,7 @@ } var currentOffset = this.$container.scrollTop(); - var additionalOffset = this.$el.find("#controls").height()+this.$el.find("#controls").offset().top; + var additionalOffset = this.$el.find(".files-controls").height()+this.$el.find(".files-controls").offset().top; // Animation var _this = this; @@ -3835,7 +3836,7 @@ _renderNewButton: function() { // if an upload button (legacy) already exists or no actions container exist, skip - var $actionsContainer = this.$el.find('#controls .actions'); + var $actionsContainer = this.$el.find('.files-controls .actions'); if (!$actionsContainer.length || this.$el.find('.button.upload').length) { return; } diff --git a/apps/files/js/keyboardshortcuts.js b/apps/files/js/keyboardshortcuts.js index b2f2cd0e582..0e716fc6d37 100644 --- a/apps/files/js/keyboardshortcuts.js +++ b/apps/files/js/keyboardshortcuts.js @@ -57,21 +57,21 @@ } function esc() { - $("#controls").trigger('click'); + $(".files-controls").trigger('click'); } function down() { var select = -1; - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if ($(this).hasClass("mouseOver")) { select = index + 1; $(this).removeClass("mouseOver"); } }); if (select === -1) { - $("#fileList tr:first").addClass("mouseOver"); + $(".files-fileList tr:first").addClass("mouseOver"); } else { - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if (index === select) { $(this).addClass("mouseOver"); } @@ -81,16 +81,16 @@ function up() { var select = -1; - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if ($(this).hasClass("mouseOver")) { select = index - 1; $(this).removeClass("mouseOver"); } }); if (select === -1) { - $("#fileList tr:last").addClass("mouseOver"); + $(".files-fileList tr:last").addClass("mouseOver"); } else { - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if (index === select) { $(this).addClass("mouseOver"); } @@ -99,7 +99,7 @@ } function enter() { - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if ($(this).hasClass("mouseOver")) { $(this).removeClass("mouseOver"); $(this).find("span.nametext").trigger('click'); @@ -108,7 +108,7 @@ } function del() { - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if ($(this).hasClass("mouseOver")) { $(this).removeClass("mouseOver"); $(this).find("a.action.delete").trigger('click'); @@ -117,7 +117,7 @@ } function rename() { - $("#fileList tr").each(function(index) { + $(".files-fileList tr").each(function(index) { if ($(this).hasClass("mouseOver")) { $(this).removeClass("mouseOver"); $(this).find("a[data-action='Rename']").trigger('click'); diff --git a/apps/files/js/recentfilelist.js b/apps/files/js/recentfilelist.js index 78eaa0b6858..3b7cd035f2a 100644 --- a/apps/files/js/recentfilelist.js +++ b/apps/files/js/recentfilelist.js @@ -18,7 +18,7 @@ window.addEventListener('DOMContentLoaded', function () { * @classdesc Recent file list. * Displays the list of recently modified files * - * @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 */ @@ -53,8 +53,8 @@ window.addEventListener('DOMContentLoaded', function () { 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/templates/list.php b/apps/files/templates/list.php index 9087c86a4a2..19365c67722 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -1,4 +1,4 @@ -
+
-
+
-' ); }); diff --git a/apps/files/tests/js/favoritespluginspec.js b/apps/files/tests/js/favoritespluginspec.js index 94359e0e706..ca0cea8b29a 100644 --- a/apps/files/tests/js/favoritespluginspec.js +++ b/apps/files/tests/js/favoritespluginspec.js @@ -88,7 +88,7 @@ describe('OCA.Files.FavoritesPlugin tests', function() { var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView'); // create dummy table so we can click the dom - var $table = '
'; + var $table = '
'; $('#app-content-favorites').append($table); Plugin.favoritesFileList = null; diff --git a/apps/files/tests/js/fileUploadSpec.js b/apps/files/tests/js/fileUploadSpec.js index d8bca4a8ca4..c3c88d256bb 100644 --- a/apps/files/tests/js/fileUploadSpec.js +++ b/apps/files/tests/js/fileUploadSpec.js @@ -136,9 +136,9 @@ describe('OC.Upload tests', function() { beforeEach(function() { $('#testArea').append( '
' + - '' + + '
' + '' + - '' + '' + '' + - '' + + '' + '' + '
' + '
' diff --git a/apps/files/tests/js/fileactionsSpec.js b/apps/files/tests/js/fileactionsSpec.js index cc12bfc7642..536688d291d 100644 --- a/apps/files/tests/js/fileactionsSpec.js +++ b/apps/files/tests/js/fileactionsSpec.js @@ -35,7 +35,7 @@ describe('OCA.Files.FileActions tests', function() { var $body = $('#testArea'); $body.append(''); $body.append(''); - $body.append('
'); + $body.append('
'); // dummy files table fileActions = new OCA.Files.FileActions(); fileActions.registerAction({ @@ -72,7 +72,7 @@ describe('OCA.Files.FileActions tests', function() { fileList.destroy(); fileList = undefined; clock.restore(); - $('#dir, #permissions, #filestable').remove(); + $('#dir, #permissions, .files-filestable').remove(); }); it('calling clear() clears file actions', function() { fileActions.clear(); @@ -307,6 +307,8 @@ describe('OCA.Files.FileActions tests', function() { }); it('passes context to action handler', function() { var notifyUpdateListenersSpy = sinon.spy(fileList.fileActions, '_notifyUpdateListeners'); + expect($tr.length).toEqual(1); + expect($tr.find('.action-test').length).toEqual(1); $tr.find('.action-test').click(); expect(actionStub.calledOnce).toEqual(true); expect(actionStub.getCall(0).args[0]).toEqual('testName.txt'); diff --git a/apps/files/tests/js/fileactionsmenuSpec.js b/apps/files/tests/js/fileactionsmenuSpec.js index 7549bd9dc85..4ede99dc333 100644 --- a/apps/files/tests/js/fileactionsmenuSpec.js +++ b/apps/files/tests/js/fileactionsmenuSpec.js @@ -100,7 +100,7 @@ describe('OCA.Files.FileActionsMenu tests', function() { fileList.destroy(); fileList = undefined; menu.remove(); - $('#dir, #permissions, #filestable').remove(); + $('#dir, #permissions, .files-filestable').remove(); }); describe('rendering', function() { diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index cd797626d2f..9b7c785ca44 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -107,7 +107,7 @@ describe('OCA.Files.FileList tests', function() { '' + '' + // dummy controls - '
' + + '
' + '
' + '
' + '
' + @@ -115,9 +115,9 @@ describe('OCA.Files.FileList tests', function() { '' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '' + + '
' + '' + - '' + '' + '' + - '' + + '' + '' + '
' + // TODO: move to handlebars template - '

Empty content message

Upload message

' + + '

Empty content message

Upload message

' + '' + '
' ); @@ -460,7 +460,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles([]); expect(fileList.isEmpty).toEqual(true); fileList.add(fileData); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); // yes, ugly... expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -468,8 +468,8 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.connector').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false); expect($summary.find('.filesize').text()).toEqual('12 B'); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(true); expect(fileList.isEmpty).toEqual(false); }); it('correctly adds the extension markup and show hidden files completely in gray', function() { @@ -529,11 +529,11 @@ describe('OCA.Files.FileList tests', function() { $removedEl = fileList.remove('One.txt'); expect($removedEl).toBeDefined(); expect($removedEl.attr('data-file')).toEqual('One.txt'); - expect($('#fileList tr').length).toEqual(3); + expect($('.files-fileList tr').length).toEqual(3); expect(fileList.files.length).toEqual(3); expect(fileList.findFileEl('One.txt').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('2 files'); @@ -546,14 +546,14 @@ describe('OCA.Files.FileList tests', function() { var $summary; fileList.setFiles([testFiles[0]]); fileList.remove('One.txt'); - expect($('#fileList tr').length).toEqual(0); + expect($('.files-fileList tr').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect(fileList.findFileEl('One.txt').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(true); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); expect(fileList.isEmpty).toEqual(true); }); }); @@ -603,7 +603,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.findFileEl('Three.pdf').length).toEqual(1); expect(fileList.$fileList.find('tr').length).toEqual(2); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -611,8 +611,8 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false); expect($summary.find('.filesize').text()).toEqual('57 KB'); expect(fileList.isEmpty).toEqual(false); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptycontent').hasClass('hidden')).toEqual(true); expect(notificationStub.notCalled).toEqual(true); }).then(done, done); @@ -677,12 +677,12 @@ describe('OCA.Files.FileList tests', function() { return doDelete().then(function(){ expect(fileList.$fileList.find('tr').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(true); expect(fileList.isEmpty).toEqual(true); expect(fileList.files.length).toEqual(0); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); }).then(done, done); }); it('bring back deleted item when delete call failed', function(done) { @@ -804,7 +804,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.$fileList.find('.test').length).toEqual(0); }); it('Leaves the summary alone when reinserting renamed element', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); doRename(); deferredRename.resolve(201); @@ -813,7 +813,7 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.fileinfo').text()).toEqual('3 files'); }); it('Leaves the summary alone when cancel renaming', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); doCancelRename(); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('3 files'); @@ -1105,7 +1105,7 @@ describe('OCA.Files.FileList tests', function() { describe('Update file', function() { it('does not change summary', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var fileData = new FileInfo({ type: 'file', name: 'test file', @@ -1127,14 +1127,14 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles(testFiles); - expect($('#fileList tr').length).toEqual(4); + expect($('.files-fileList tr').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect(fileList.files).toEqual(testFiles); }); it('updates summary using the file sizes', function() { var $summary; fileList.setFiles(testFiles); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('3 files'); @@ -1142,23 +1142,23 @@ describe('OCA.Files.FileList tests', function() { }); it('shows headers, summary and hide empty content message after setting files', function(){ fileList.setFiles(testFiles); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptycontent').hasClass('hidden')).toEqual(true); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(false); }); it('hides headers, summary and show empty content message after setting empty file list', function(){ fileList.setFiles([]); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); - expect($('#emptycontent .uploadmessage').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); + expect($('.emptycontent .uploadmessage').hasClass('hidden')).toEqual(false); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(true); }); it('hides headers, upload message, and summary when list is empty and user has no creation permission', function(){ $('#permissions').val(0); fileList.setFiles([]); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); - expect($('#emptycontent .uploadmessage').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); + expect($('.emptycontent .uploadmessage').hasClass('hidden')).toEqual(true); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(true); }); it('calling findFileEl() can find existing file element', function() { @@ -1220,7 +1220,7 @@ describe('OCA.Files.FileList tests', function() { var $summary; // single file fileList.setFiles([testFiles[0]]); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -1235,18 +1235,18 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles(testFiles); - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($nofilterresults.length).toEqual(1); expect($summary.hasClass('hidden')).toEqual(false); - expect($('#fileList tr:not(.hidden)').length).toEqual(4); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(3); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(3); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1255,7 +1255,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('ee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); @@ -1264,13 +1264,13 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('eee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(true); expect($nofilterresults.hasClass('hidden')).toEqual(false); fileList.setFilter('ee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); @@ -1279,7 +1279,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(3); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(3); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1288,7 +1288,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter(''); - expect($('#fileList tr:not(.hidden)').length).toEqual(4); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1296,12 +1296,12 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); }); it('filters the list of non-rendered rows using filter()', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var $nofilterresults = fileList.$el.find(".nofilterresults"); fileList.setFiles(generateFiles(0, 64)); fileList.setFilter('63'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -1312,27 +1312,27 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles([]); - var $summary = $('#filestable .summary'); - var $emptycontent = fileList.$el.find("#emptycontent"); + var $summary = $('.files-filestable .summary'); + var $emptycontent = fileList.$el.find(".emptycontent"); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($emptycontent.length).toEqual(1); expect($nofilterresults.length).toEqual(1); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(false); expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(true); expect($nofilterresults.hasClass('hidden')).toEqual(false); fileList.setFilter(''); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(false); @@ -1343,7 +1343,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files).toEqual([]); fileList.showMask(); fileList.setFiles(testFiles); - var $emptycontent = fileList.$el.find("#emptycontent"); + var $emptycontent = fileList.$el.find(".emptycontent"); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($emptycontent.length).toEqual(1); expect($nofilterresults.length).toEqual(1); @@ -1368,7 +1368,7 @@ describe('OCA.Files.FileList tests', function() { }); it('renders only the first page', function() { expect(fileList.files.length).toEqual(65); - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); }); it('renders the full first page despite hidden rows', function() { filesConfig.set('showhidden', false); @@ -1382,7 +1382,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(files); expect(fileList.files.length).toEqual(25); // render 24 hidden elements + the visible one - expect($('#fileList tr').length).toEqual(25); + expect($('.files-fileList tr').length).toEqual(25); }); it('renders the full first page despite hidden rows', function() { filesConfig.set('showhidden', true); @@ -1396,19 +1396,19 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(files); expect(fileList.files.length).toEqual(25); // render 20 first hidden elements as visible - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); }); it('renders the second page when scrolling down (trigger nextPage)', function() { // TODO: can't simulate scrolling here, so calling nextPage directly fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); fileList._nextPage(true); // stays at 65 - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); }); it('inserts into the DOM if insertion point is in the visible page ', function() { fileList.add({ @@ -1416,7 +1416,7 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 15b.txt' }); - expect($('#fileList tr').length).toEqual(21); + expect($('.files-fileList tr').length).toEqual(21); expect(fileList.findFileEl('File with index 15b.txt').index()).toEqual(16); }); it('does not inserts into the DOM if insertion point is not the visible page ', function() { @@ -1425,10 +1425,10 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 28b.txt' }); - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); expect(fileList.findFileEl('File with index 28b.txt').length).toEqual(0); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); expect(fileList.findFileEl('File with index 28b.txt').index()).toEqual(29); }); it('appends into the DOM when inserting a file after the last visible element', function() { @@ -1437,43 +1437,43 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 19b.txt' }); - expect($('#fileList tr').length).toEqual(21); + expect($('.files-fileList tr').length).toEqual(21); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(41); + expect($('.files-fileList tr').length).toEqual(41); }); it('appends into the DOM when inserting a file on the last page when visible', function() { fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); fileList._nextPage(true); fileList.add({ id: 2000, type: 'file', name: 'File with index 88.txt' }); - expect($('#fileList tr').length).toEqual(66); + expect($('.files-fileList tr').length).toEqual(66); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(66); + expect($('.files-fileList tr').length).toEqual(66); }); it('shows additional page when appending a page of files and scrolling down', function() { var newFiles = generateFiles(66, 81); for (var i = 0; i < newFiles.length; i++) { fileList.add(newFiles[i]); } - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(80); + expect($('.files-fileList tr').length).toEqual(80); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(81); + expect($('.files-fileList tr').length).toEqual(81); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(81); + expect($('.files-fileList tr').length).toEqual(81); }); it('automatically renders next page when there are not enough elements visible', function() { // delete the 15 first elements @@ -1481,7 +1481,7 @@ describe('OCA.Files.FileList tests', function() { fileList.remove(fileList.files[0].name); } // still makes sure that there are 20 elements visible, if any - expect($('#fileList tr').length).toEqual(25); + expect($('.files-fileList tr').length).toEqual(25); }); }); describe('file previews', function() { @@ -1635,14 +1635,14 @@ describe('OCA.Files.FileList tests', function() { describe('viewer mode', function() { it('enabling viewer mode hides files table and action buttons', function() { fileList.setViewerMode(true); - expect($('#filestable').hasClass('hidden')).toEqual(true); + expect($('.files-filestable').hasClass('hidden')).toEqual(true); expect($('.actions').hasClass('hidden')).toEqual(true); expect($('.notCreatable').hasClass('hidden')).toEqual(true); }); it('disabling viewer mode restores files table and action buttons', function() { fileList.setViewerMode(true); fileList.setViewerMode(false); - expect($('#filestable').hasClass('hidden')).toEqual(false); + expect($('.files-filestable').hasClass('hidden')).toEqual(false); expect($('.actions').hasClass('hidden')).toEqual(false); expect($('.notCreatable').hasClass('hidden')).toEqual(true); }); @@ -1650,7 +1650,7 @@ describe('OCA.Files.FileList tests', function() { $('#permissions').val(0); fileList.setViewerMode(true); fileList.setViewerMode(false); - expect($('#filestable').hasClass('hidden')).toEqual(false); + expect($('.files-filestable').hasClass('hidden')).toEqual(false); expect($('.actions').hasClass('hidden')).toEqual(true); expect($('.notCreatable').hasClass('hidden')).toEqual(false); }); @@ -1684,7 +1684,7 @@ describe('OCA.Files.FileList tests', function() { expect(getFolderContentsStub.calledWith('/subdir')).toEqual(true); deferredList.resolve(200, [testRoot].concat(testFiles)); return reloading.then(function() { - expect($('#fileList tr').length).toEqual(4); + expect($('.files-fileList tr').length).toEqual(4); expect(fileList.findFileEl('One.txt').length).toEqual(1); }).then(done, done); }); @@ -2004,13 +2004,13 @@ describe('OCA.Files.FileList tests', function() { }); it('Selecting all files will automatically check "select all" checkbox', function() { expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr td.selection input:checkbox').click(); + $('.files-fileList tr td.selection input:checkbox').click(); expect($('.select-all').prop('checked')).toEqual(true); }); it('Selecting all files on the first visible page will not automatically check "select all" checkbox', function() { fileList.setFiles(generateFiles(0, 41)); expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr td.selection input:checkbox').click(); + $('.files-fileList tr td.selection input:checkbox').click(); expect($('.select-all').prop('checked')).toEqual(false); }); it('Selecting all files also selects hidden files when invisible', function() { @@ -2029,7 +2029,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(generateFiles(0, 41)); $('.select-all').click(); expect($('.select-all').prop('checked')).toEqual(true); - $('#fileList tr input:checkbox').each(function() { + $('.files-fileList tr input:checkbox').each(function() { expect($(this).prop('checked')).toEqual(true); }); expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(42); @@ -2037,7 +2037,7 @@ describe('OCA.Files.FileList tests', function() { $('.select-all').click(); expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr input:checkbox').each(function() { + $('.files-fileList tr input:checkbox').each(function() { expect($(this).prop('checked')).toEqual(false); }); expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(0); @@ -2090,7 +2090,7 @@ describe('OCA.Files.FileList tests', function() { expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(42); }); it('Selecting files updates selection summary', function() { - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('Name'); fileList.findFileEl('One.txt').find('input:checkbox').click(); fileList.findFileEl('Three.pdf').find('input:checkbox').click(); @@ -2098,7 +2098,7 @@ describe('OCA.Files.FileList tests', function() { expect($summary.text()).toEqual('1 folder and 2 files'); }); it('Unselecting files hides selection summary', function() { - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); fileList.findFileEl('One.txt').find('input:checkbox').click().click(); expect($summary.text()).toEqual('Name'); }); @@ -2111,7 +2111,7 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)'); }); it('Does not displays the number of hidden files in selection summary if hidden files are visible', function() { @@ -2123,7 +2123,7 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files'); }); it('Toggling hidden file visibility updates selection summary', function() { @@ -2135,13 +2135,13 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)'); filesConfig.set('showhidden', true); expect($summary.text()).toEqual('2 folders and 3 files'); }); it('Select/deselect files shows/hides file actions', function() { - var $actions = $('#headerName .selectedActions'); + var $actions = $('.column-name .selectedActions'); var $checkbox = fileList.findFileEl('One.txt').find('input:checkbox'); expect($actions.hasClass('hidden')).toEqual(true); $checkbox.click(); @@ -3390,7 +3390,7 @@ describe('OCA.Files.FileList tests', function() { }); it('does not render new button when no legacy upload button exists (public page)', function() { fileList.destroy(); - $('#controls').append(''); + $('.files-controls').append(''); fileList = new OCA.Files.FileList($('#app-content-files')); expect(fileList.$el.find('.button.upload').length).toEqual(1); expect(fileList.$el.find('.button.new').length).toEqual(0); diff --git a/apps/files/tests/js/tagspluginspec.js b/apps/files/tests/js/tagspluginspec.js index 2ac67e64cea..e59a9695592 100644 --- a/apps/files/tests/js/tagspluginspec.js +++ b/apps/files/tests/js/tagspluginspec.js @@ -32,9 +32,9 @@ describe('OCA.Files.TagsPlugin tests', function() { // dummy file list var $div = $( '
' + - '' + + '
' + '' + - '' + + '' + '
' + '
'); $('#content').append($div); 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 @@ -
-
+
+
- - +
- - - + 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);
+ class="emptycontent has-note">

t('Upload files to %s', [$_['shareOwner']])) ?>

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 = '
'; + var $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() { '' + '' + // dummy controls - '
' + + '
' + '
' + '
' + '
' + @@ -67,9 +67,9 @@ describe('OCA.Sharing.PublicApp tests', function() { '' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '' + + '
' + '' + - '' + '' + '' + - '' + + '' + '' + '
' + // TODO: move to handlebars template - '

Empty content message

Upload message

' + + '

Empty content message

Upload message

' + '' + '
' ); 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 = $( '
' + - '' + + '
' + '' + - '' + + '' + '
' + '
'); $('#content').append($div); diff --git a/apps/files_trashbin/src/filelist.js b/apps/files_trashbin/src/filelist.js index c1bf1b280ca..7fb55d4b932 100644 --- a/apps/files_trashbin/src/filelist.js +++ b/apps/files_trashbin/src/filelist.js @@ -54,7 +54,7 @@ * @augments OCA.Files.FileList * @classdesc List of deleted files * - * @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 */ @@ -160,8 +160,8 @@ updateEmptyContent: function() { var exists = this.$fileList.find('tr:first').exists() - this.$el.find('#emptycontent').toggleClass('hidden', exists) - this.$el.find('#filestable th').toggleClass('hidden', !exists) + this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', exists) + this.$el.find('.files-filestable th').toggleClass('hidden', !exists) }, _removeCallback: function(files) { diff --git a/apps/files_trashbin/src/trash.scss b/apps/files_trashbin/src/trash.scss index 2ed57b51918..633107c9d6d 100644 --- a/apps/files_trashbin/src/trash.scss +++ b/apps/files_trashbin/src/trash.scss @@ -16,7 +16,7 @@ #app-content-trashbin .summary :last-child { padding: 0; } -#app-content-trashbin #filestable .summary .filesize { +#app-content-trashbin .files-filestable .summary .filesize { display: none; } diff --git a/apps/files_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php index fcd5448db4b..c134d2c75c6 100644 --- a/apps/files_trashbin/templates/index.php +++ b/apps/files_trashbin/templates/index.php @@ -1,10 +1,10 @@ -
-
+
+
-