diff options
Diffstat (limited to 'apps')
54 files changed, 753 insertions, 750 deletions
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 = $( '<div>' + - '<table id="filestable">' + + '<table class="files-filestable">' + '<thead></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '</table>' + '</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 = $('<div class="mask transparent icon-loading"></div>'); @@ -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 @@ -<div id="controls"> +<div class="files-controls"> <div class="actions creatable hidden"> <div id="uploadprogresswrapper"> </div> @@ -11,7 +11,7 @@ <?php /* Note: the template attributes are here only for the public page. These are normally loaded through ajax instead (updateStorageStatistics). */ ?> - <input type="hidden" name="permissions" value="" id="permissions"> + <input type="hidden" id="permissions" value=""> <input type="hidden" id="free_space" value="<?php isset($_['freeSpace']) ? p($_['freeSpace']) : '' ?>"> <?php if (isset($_['dirToken'])):?> <input type="hidden" id="publicUploadRequestToken" name="requesttoken" value="<?php p($_['requesttoken']) ?>" /> @@ -20,9 +20,9 @@ <input type="hidden" class="max_human_file_size" value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)"> </div> -<div id="filelist-header"></div> +<div class="filelist-header"></div> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-folder"></div> <h2><?php p($l->t('No files in here')); ?></h2> <p class="uploadmessage hidden"><?php p($l->t('Upload some content or sync with your devices!')); ?></p> @@ -33,23 +33,23 @@ <h2><?php p($l->t('No entries found in this folder')); ?></h2> <p></p> </div> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250"> <thead> <tr> - <th id="headerSelection" class="hidden column-selection"> + <th class="hidden column-selection"> <input type="checkbox" id="select_all_files" class="select-all checkbox"/> <label for="select_all_files"> <span class="hidden-visually"><?php p($l->t('Select all'))?></span> </label> </th> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name"> <span><?php p($l->t('Name')); ?></span> <span class="sort-indicator"></span> </a> - <span id="selectedActionsList" class="selectedActions"> + <span class="selectedActions"> <a href="#" onclick="event.preventDefault()" class="actions-selected"> <span class="icon icon-more"></span> <span><?php p($l->t('Actions'))?></span> @@ -57,20 +57,20 @@ </span> </div> </th> - <th id="headerSize" class="hidden column-size"> + <th class="hidden column-size"> <a class="size sort columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a> </th> - <th id="headerDate" class="hidden column-mtime"> - <a id="modified" class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a> + <th class="hidden column-mtime"> + <a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a> </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> </table> -<div id="filelist-footer"></div> +<div class="filelist-footer"></div> <input type="hidden" name="dir" id="dir" value="" /> <div class="hiddenuploadfield"> <input type="file" id="file_upload_start" class="hiddenuploadfield" name="files[]" /> diff --git a/apps/files/templates/recentlist.php b/apps/files/templates/recentlist.php index 3a5049bc2de..9e91b1c442c 100644 --- a/apps/files/templates/recentlist.php +++ b/apps/files/templates/recentlist.php @@ -1,7 +1,7 @@ <?php /** @var \OCP\IL10N $l */ ?> <div id='notification'></div> -<div id="emptycontent" class="hidden"></div> +<div class="emptyfilelist emptycontent hidden"></div> <input type="hidden" name="dir" value="" id="dir"> @@ -11,20 +11,20 @@ <p></p> </div> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> <thead> <tr> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" href="#" onclick="event.preventDefault()" data-sort="name"><span><?php p($l->t('Name')); ?></span></a> </div> </th> - <th id="headerSize" class="hidden column-size"> + <th class="hidden column-size"> <a class="size sort columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span><?php p($l->t('Size')); ?></span></a> </th> - <th id="headerDate" class="hidden column-mtime"> + <th class="hidden column-mtime"> <a id="modified" class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a> @@ -37,7 +37,7 @@ </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/files/templates/simplelist.php b/apps/files/templates/simplelist.php index 917fc307ff8..45c6f812501 100644 --- a/apps/files/templates/simplelist.php +++ b/apps/files/templates/simplelist.php @@ -1,6 +1,6 @@ <div id='notification'></div> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-starred"></div> <h2><?php p($l->t('No favorites yet')); ?></h2> <p><?php p($l->t('Files and folders you mark as favorite will show up here')); ?></p> @@ -13,18 +13,18 @@ <h2><?php p($l->t('No entries found in this folder')); ?></h2> <p></p> </div> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> <thead> <tr> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a> </div> </th> - <th id="headerSize" class="hidden column-size"> + <th class="hidden column-size"> <a class="size sort columntitle" onclick="event.preventDefault()" href="#" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a> </th> - <th id="headerDate" class="hidden column-mtime"> + <th class="hidden column-mtime"> <a id="modified" class="columntitle" onclick="event.preventDefault()" href="#" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a> <span class="selectedActions"> <a onclick="event.preventDefault()" href="#" class="delete-selected"> @@ -36,7 +36,7 @@ </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js index 820b0f70569..52c9f51835e 100644 --- a/apps/files/tests/js/breadcrumbSpec.js +++ b/apps/files/tests/js/breadcrumbSpec.js @@ -183,9 +183,9 @@ describe('OCA.Files.BreadCrumb tests', function() { // append dummy navigation and controls // as they are currently used for measurements $('#testArea').append( - '<div id="controls"></div>' + '<div class="files-controls"></div>' ); - $('#controls').append(bc.$el); + $('.files-controls').append(bc.$el); bc.setDirectory(dummyDir); @@ -197,11 +197,11 @@ describe('OCA.Files.BreadCrumb tests', function() { $('div.crumbhome').css('width', 51); $('div.crumbmenu').css('width', 51); - $('#controls').width(1000); + $('.files-controls').width(1000); bc._resize(); // Shrink to show popovermenu - $('#controls').width(300); + $('.files-controls').width(300); bc._resize(); $crumbmenuLink = bc.$el.find('.crumbmenu > a'); @@ -232,9 +232,9 @@ describe('OCA.Files.BreadCrumb tests', function() { // append dummy navigation and controls // as they are currently used for measurements $('#testArea').append( - '<div id="controls"></div>' + '<div class="files-controls"></div>' ); - $('#controls').append(bc.$el); + $('.files-controls').append(bc.$el); // triggers resize implicitly bc.setDirectory(dummyDir); @@ -260,7 +260,7 @@ describe('OCA.Files.BreadCrumb tests', function() { it('Hides breadcrumbs to fit available width', function() { var $crumbs; - $('#controls').width(500); + $('.files-controls').width(500); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -280,7 +280,7 @@ describe('OCA.Files.BreadCrumb tests', function() { it('Hides breadcrumbs to fit available width', function() { var $crumbs; - $('#controls').width(700); + $('.files-controls').width(700); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -306,7 +306,7 @@ describe('OCA.Files.BreadCrumb tests', function() { $(this).css('padding', paddings[index]); }); - $('#controls').width(700); + $('.files-controls').width(700); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -333,7 +333,7 @@ describe('OCA.Files.BreadCrumb tests', function() { $(this).css('margin', margins[index]); }); - $('#controls').width(700); + $('.files-controls').width(700); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -353,7 +353,7 @@ describe('OCA.Files.BreadCrumb tests', function() { it('Hides breadcrumbs to fit available width left by siblings', function() { var $crumbs; - $('#controls').width(700); + $('.files-controls').width(700); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -375,28 +375,28 @@ describe('OCA.Files.BreadCrumb tests', function() { // handling in the browsers used to run the tests. $previousSibling.css('width', '50px'); $previousSibling.css('min-width', '50px'); - $('#controls').prepend($previousSibling); + $('.files-controls').prepend($previousSibling); var $creatableActions = $('<div class="actions creatable"></div>'); // Set both the width and the min-width to even differences in width // handling in the browsers used to run the tests. $creatableActions.css('width', '100px'); $creatableActions.css('min-width', '100px'); - $('#controls').append($creatableActions); + $('.files-controls').append($creatableActions); var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>'); // Set both the width and the min-width to even differences in width // handling in the browsers used to run the tests. $nextHiddenSibling.css('width', '200px'); $nextHiddenSibling.css('min-width', '200px'); - $('#controls').append($nextHiddenSibling); + $('.files-controls').append($nextHiddenSibling); var $nextSibling = $('<div class="otherSibling"></div>'); // Set both the width and the min-width to even differences in width // handling in the browsers used to run the tests. $nextSibling.css('width', '50px'); $nextSibling.css('min-width', '50px'); - $('#controls').append($nextSibling); + $('.files-controls').append($nextSibling); bc._resize(); @@ -415,7 +415,7 @@ describe('OCA.Files.BreadCrumb tests', function() { it('Hides breadcrumbs to fit available width left by siblings with paddings and margins', function() { var $crumbs; - $('#controls').width(700); + $('.files-controls').width(700); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -438,7 +438,7 @@ describe('OCA.Files.BreadCrumb tests', function() { $previousSibling.css('width', '10px'); $previousSibling.css('min-width', '10px'); $previousSibling.css('margin', '20px'); - $('#controls').prepend($previousSibling); + $('.files-controls').prepend($previousSibling); var $creatableActions = $('<div class="actions creatable"></div>'); // Set both the width and the min-width to even differences in width @@ -447,14 +447,14 @@ describe('OCA.Files.BreadCrumb tests', function() { $creatableActions.css('min-width', '20px'); $creatableActions.css('margin-left', '40px'); $creatableActions.css('padding-right', '40px'); - $('#controls').append($creatableActions); + $('.files-controls').append($creatableActions); var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>'); // Set both the width and the min-width to even differences in width // handling in the browsers used to run the tests. $nextHiddenSibling.css('width', '200px'); $nextHiddenSibling.css('min-width', '200px'); - $('#controls').append($nextHiddenSibling); + $('.files-controls').append($nextHiddenSibling); var $nextSibling = $('<div class="otherSibling"></div>'); // Set both the width and the min-width to even differences in width @@ -462,7 +462,7 @@ describe('OCA.Files.BreadCrumb tests', function() { $nextSibling.css('width', '10px'); $nextSibling.css('min-width', '10px'); $nextSibling.css('padding', '20px'); - $('#controls').append($nextSibling); + $('.files-controls').append($nextSibling); bc._resize(); @@ -482,7 +482,7 @@ describe('OCA.Files.BreadCrumb tests', function() { var $crumbs; // enough space - $('#controls').width(1800); + $('.files-controls').width(1800); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -491,7 +491,7 @@ describe('OCA.Files.BreadCrumb tests', function() { expect($crumbs.eq(0).hasClass('hidden')).toEqual(true); // simulate decrease - $('#controls').width(950); + $('.files-controls').width(950); bc._resize(); // Third crumb is hidden and everything else is visible @@ -509,7 +509,7 @@ describe('OCA.Files.BreadCrumb tests', function() { var $crumbs; // enough space - $('#controls').width(1800); + $('.files-controls').width(1800); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -529,7 +529,7 @@ describe('OCA.Files.BreadCrumb tests', function() { // 650 is enough for all the crumbs except the third and fourth // ones, but not enough for the menu and all the crumbs except the // third and fourth ones; the second one has to be hidden too. - $('#controls').width(650); + $('.files-controls').width(650); bc._resize(); // Second, third and fourth crumb are hidden and everything else is @@ -548,7 +548,7 @@ describe('OCA.Files.BreadCrumb tests', function() { var $crumbs; // limited space - $('#controls').width(850); + $('.files-controls').width(850); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -565,7 +565,7 @@ describe('OCA.Files.BreadCrumb tests', function() { expect($crumbs.eq(7).hasClass('hidden')).toEqual(false); // simulate increase - $('#controls').width(1000); + $('.files-controls').width(1000); bc._resize(); // Third crumb is hidden and everything else is visible @@ -583,7 +583,7 @@ describe('OCA.Files.BreadCrumb tests', function() { var $crumbs; // limited space - $('#controls').width(850); + $('.files-controls').width(850); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -601,7 +601,7 @@ describe('OCA.Files.BreadCrumb tests', function() { // simulate increase // 1030 is enough for all the crumbs if the menu is hidden. - $('#controls').width(1030); + $('.files-controls').width(1030); bc._resize(); // Menu is hidden and everything else is visible @@ -629,10 +629,10 @@ describe('OCA.Files.BreadCrumb tests', function() { var $nextSiblingChild = $('<div class="siblingChild"></div>'); $nextSiblingChild.css('margin-left', 'auto'); $nextSibling.append($nextSiblingChild); - $('#controls').append($nextSibling); + $('.files-controls').append($nextSibling); // limited space - $('#controls').width(850); + $('.files-controls').width(850); bc._resize(); $crumbs = bc.$el.find('.crumb'); @@ -649,7 +649,7 @@ describe('OCA.Files.BreadCrumb tests', function() { expect($crumbs.eq(7).hasClass('hidden')).toEqual(false); // simulate increase - $('#controls').width(1000); + $('.files-controls').width(1000); bc._resize(); // Third crumb is hidden and everything else is visible diff --git a/apps/files/tests/js/favoritesfilelistspec.js b/apps/files/tests/js/favoritesfilelistspec.js index 8602288cdde..1049553c5bd 100644 --- a/apps/files/tests/js/favoritesfilelistspec.js +++ b/apps/files/tests/js/favoritesfilelistspec.js @@ -33,25 +33,25 @@ describe('OCA.Files.FavoritesFileList tests', function() { '<input type="hidden" id="dir" value="/"></input>' + '<input type="hidden" id="permissions" value="31"></input>' + // dummy controls - '<div id="controls">' + + '<div class="files-controls">' + ' <div class="actions creatable"></div>' + ' <div class="notCreatable"></div>' + '</div>' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable" class="list-container view-grid">' + + '<table class="files-filestable list-container view-grid">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + + '<th class="hidden column-name">' + '<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + '</th>' + '<th class="hidden column-mtime">' + '<a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a>' + '</th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + - '<div id="emptycontent">Empty content message</div>' + + '<div class="emptyfilelist emptycontent">Empty content message</div>' + '</div>' ); }); 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 = '<table><thead></thead><tbody id="fileList"></tbody></table>'; + var $table = '<table><thead></thead><tbody class="files-fileList"></tbody></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( '<div id="tableContainer">' + - '<table id="filestable" class="list-container view-grid">' + + '<table class="files-filestable list-container view-grid">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + + '<th class="hidden column-name">' + '<input type="checkbox" id="select_all_files" class="select-all">' + '<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + '<span id="selectedActionsList" class="selectedActions hidden">' + @@ -148,7 +148,7 @@ describe('OC.Upload tests', function() { '<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' + '<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + '</div>' 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('<input type="hidden" id="dir" value="/subdir"></input>'); $body.append('<input type="hidden" id="permissions" value="31"></input>'); - $body.append('<table id="filestable" class="list-container view-grid"><tbody id="fileList"></tbody></table>'); + $body.append('<table class="files-filestable list-container view-grid"><tbody class="files-fileList"></tbody></table>'); // 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() { '<input type="hidden" id="dir" value="/subdir"/>' + '<input type="hidden" id="permissions" value="31"/>' + // dummy controls - '<div id="controls">' + + '<div class="files-controls">' + ' <div class="actions creatable"></div>' + ' <div class="notCreatable"></div>' + '</div>' + @@ -115,9 +115,9 @@ describe('OCA.Files.FileList tests', function() { '<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable" class="list-container view-grid">' + + '<table class="files-filestable list-container view-grid">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + + '<th class="hidden column-name">' + '<input type="checkbox" id="select_all_files" class="select-all checkbox">' + '<a class="name columntitle" href="#" onclick="event.preventDefault()" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + '<span id="selectedActionsList" class="selectedActions hidden">' + @@ -126,11 +126,11 @@ describe('OCA.Files.FileList tests', function() { '<th class="hidden column-size"><a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span class="sort-indicator"></span></a></th>' + '<th class="hidden column-mtime"><a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span class="sort-indicator"></span></a></th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + // TODO: move to handlebars template - '<div id="emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' + + '<div class="emptyfilelist emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' + '<div class="nofilterresults hidden"></div>' + '</div>' ); @@ -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('<input type="button" class="button upload" />'); + $('.files-controls').append('<input type="button" class="button upload" />'); 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 = $( '<div>' + - '<table id="filestable">' + + '<table class="files-filestable">' + '<thead></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '</table>' + '</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 @@ <?php /** @var \OCP\IL10N $l */ ?> -<div id="controls"> - <div id="file_action_panel"></div> +<div class="files-controls"> + <div></div> </div> <div id='notification'></div> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-external"></div> <h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2> </div> <input type="hidden" name="dir" value="" id="dir"> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> <thead> <tr> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a> </div> </th> @@ -27,7 +27,7 @@ </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php index 2b5b1a1bcd2..48067529723 100644 --- a/apps/files_external/templates/settings.php +++ b/apps/files_external/templates/settings.php @@ -95,7 +95,7 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN || } ?> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-external"></div> <h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2> </div> diff --git a/apps/files_external/tests/appSpec.js b/apps/files_external/tests/appSpec.js index 42a8e08950b..8e5ab5b8d98 100644 --- a/apps/files_external/tests/appSpec.js +++ b/apps/files_external/tests/appSpec.js @@ -72,7 +72,7 @@ describe('OCA.Files_External.App tests', function() { const setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView') // create dummy table so we can click the dom - const $table = '<table><thead></thead><tbody id="fileList"></tbody></table>' + const $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>' $('#app-content-extstoragemounts').append($table) App._inFileList = null diff --git a/apps/files_external/tests/js/mountsfilelistSpec.js b/apps/files_external/tests/js/mountsfilelistSpec.js index 662a820f364..ec6ebe1bf11 100644 --- a/apps/files_external/tests/js/mountsfilelistSpec.js +++ b/apps/files_external/tests/js/mountsfilelistSpec.js @@ -36,16 +36,16 @@ describe('OCA.Files_External.FileList tests', function() { '<input type="hidden" id="dir" value="/"></input>' + '<input type="hidden" id="permissions" value="31"></input>' + // dummy controls - '<div id="controls">' + + '<div class="files-controls">' + ' <div class="actions creatable"></div>' + ' <div class="notCreatable"></div>' + '</div>' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable">' + + '<table class="files-filestable">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + - ' <div id="headerName-container">' + + '<th class="hidden column-name">' + + ' <div id="column-name-container">' + ' <a class="name sort columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + ' </div>' + '</th>' + @@ -56,10 +56,10 @@ describe('OCA.Files_External.FileList tests', function() { ' <a class="scope sort columntitle" data-sort="scope"><span>Scope</span><span class="sort-indicator"></span></a>' + '</th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + - '<div id="emptycontent">Empty content message</div>' + + '<div class="emptyfilelist emptycontent">Empty content message</div>' + '</div>' ); }); diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css index 63acecb90c8..114949d8c48 100644 --- a/apps/files_sharing/css/mobile.css +++ b/apps/files_sharing/css/mobile.css @@ -27,9 +27,9 @@ } /* hide size and date columns */ - table th#headerSize, + table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -52,12 +52,12 @@ table td.date { } /* some padding for better clickability */ - #fileList a.action img { + .files-fileList a.action img { padding: 0 6px 0 12px; } /* hide text of the actions on mobile */ - #fileList a.action:not(.menuitem) span { + .files-fileList a.action:not(.menuitem) span { display: none; } @@ -78,7 +78,7 @@ table td.date { padding: 0 20px; } - #emptycontent { + .emptycontent { margin-top: 10vh; } } diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss index 38a7a9cd711..d058ad2a30e 100644 --- a/apps/files_sharing/css/mobile.scss +++ b/apps/files_sharing/css/mobile.scss @@ -8,9 +8,9 @@ } /* hide size and date columns */ -table th#headerSize, +table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -32,11 +32,11 @@ table td.filename .nametext { } /* some padding for better clickability */ -#fileList a.action img { +.files-fileList a.action img { padding: 0 6px 0 12px; } /* hide text of the actions on mobile */ -#fileList a.action:not(.menuitem) span { +.files-fileList a.action:not(.menuitem) span { display: none; } @@ -56,7 +56,7 @@ table td.filename .nametext { padding: 0 20px; } -#emptycontent { +.emptycontent { margin-top: 10vh; } } diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css index 21dd876905c..a07b00b7b3d 100644 --- a/apps/files_sharing/css/public.css +++ b/apps/files_sharing/css/public.css @@ -122,19 +122,19 @@ thead { margin: 0 auto; } -#emptycontent.has-note { +.emptycontent.has-note { margin-top: 5vh; } -#public-upload #emptycontent h2 { +#public-upload .emptycontent h2 { margin: 10px 0 5px 0; } -#public-upload #emptycontent h2 + p { +#public-upload .emptycontent h2 + p { margin-bottom: 30px; } -#public-upload #emptycontent .icon-folder { +#public-upload .emptycontent .icon-folder { height: 16px; width: 16px; background-size: 16px; @@ -145,13 +145,13 @@ thead { opacity: 1; } -#public-upload #emptycontent #displayavatar .icon-folder { +#public-upload .emptycontent #displayavatar .icon-folder { height: 48px; width: 48px; background-size: 48px; } -#public-upload #emptycontent .button { +#public-upload .emptycontent .button { display: inline-block; height: auto; width: auto; @@ -165,20 +165,20 @@ thead { padding-left: 42px; } -#public-upload #emptycontent ul { +#public-upload .emptycontent ul { width: 230px; margin: 5px auto 5vh; text-align: left; } -#public-upload #emptycontent li { +#public-upload .emptycontent li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 0; } -#public-upload #emptycontent li img { +#public-upload .emptycontent li img { margin-right: 5px; position: relative; top: 2px; diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index a3754b7be9f..4b3ea818be8 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -101,21 +101,21 @@ thead { margin: 0 auto; } -#emptycontent { +.emptycontent { &.has-note { margin-top: 5vh; } } -#public-upload #emptycontent h2 { +#public-upload .emptycontent h2 { margin: 10px 0 5px 0; } -#public-upload #emptycontent h2+p { +#public-upload .emptycontent h2+p { margin-bottom: 30px; } -#public-upload #emptycontent .icon-folder { +#public-upload .emptycontent .icon-folder { height: 16px; width: 16px; background-size: 16px; @@ -126,13 +126,13 @@ thead { opacity: 1; } -#public-upload #emptycontent #displayavatar .icon-folder { +#public-upload .emptycontent #displayavatar .icon-folder { height: 48px; width: 48px; background-size: 48px; } -#public-upload #emptycontent .button { +#public-upload .emptycontent .button { display: inline-block; height: auto; width: auto; @@ -146,20 +146,20 @@ thead { padding-left: 42px; } -#public-upload #emptycontent ul { +#public-upload .emptycontent ul { width: 230px; margin: 5px auto 5vh; text-align: left; } -#public-upload #emptycontent li { +#public-upload .emptycontent li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 0; } -#public-upload #emptycontent li img { +#public-upload .emptycontent li img { margin-right: 5px; position: relative; top: 2px; diff --git a/apps/files_sharing/css/publicView.css b/apps/files_sharing/css/publicView.css index c10620e59bf..91429ffbdab 100644 --- a/apps/files_sharing/css/publicView.css +++ b/apps/files_sharing/css/publicView.css @@ -122,19 +122,19 @@ thead { margin: 0 auto; } -#emptycontent.has-note { +.emptycontent.has-note { margin-top: 5vh; } -#public-upload #emptycontent h2 { +#public-upload .emptycontent h2 { margin: 10px 0 5px 0; } -#public-upload #emptycontent h2 + p { +#public-upload .emptycontent h2 + p { margin-bottom: 30px; } -#public-upload #emptycontent .icon-folder { +#public-upload .emptycontent .icon-folder { height: 16px; width: 16px; background-size: 16px; @@ -145,13 +145,13 @@ thead { opacity: 1; } -#public-upload #emptycontent #displayavatar .icon-folder { +#public-upload .emptycontent #displayavatar .icon-folder { height: 48px; width: 48px; background-size: 48px; } -#public-upload #emptycontent .button { +#public-upload .emptycontent .button { display: inline-block; height: auto; width: auto; @@ -165,20 +165,20 @@ thead { padding-left: 42px; } -#public-upload #emptycontent ul { +#public-upload .emptycontent ul { width: 230px; margin: 5px auto 5vh; text-align: left; } -#public-upload #emptycontent li { +#public-upload .emptycontent li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 0; } -#public-upload #emptycontent li img { +#public-upload .emptycontent li img { margin-right: 5px; position: relative; top: 2px; @@ -261,9 +261,9 @@ thead { } /* hide size and date columns */ - table th#headerSize, + table th.column-size, table td.filesize, -table th#headerDate, +table th.column-mtime, table td.date { display: none; } @@ -286,12 +286,12 @@ table td.date { } /* some padding for better clickability */ - #fileList a.action img { + .files-fileList a.action img { padding: 0 6px 0 12px; } /* hide text of the actions on mobile */ - #fileList a.action:not(.menuitem) span { + .files-fileList a.action:not(.menuitem) span { display: none; } @@ -312,7 +312,7 @@ table td.date { padding: 0 20px; } - #emptycontent { + .emptycontent { margin-top: 10vh; } } diff --git a/apps/files_sharing/js/app.js b/apps/files_sharing/js/app.js index 24416fd5a3f..b9a60c73dab 100644 --- a/apps/files_sharing/js/app.js +++ b/apps/files_sharing/js/app.js @@ -46,7 +46,7 @@ OCA.Sharing.App = { this._extendFileList(this._inFileList) this._inFileList.appName = t('files_sharing', 'Shared with you') - this._inFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>' + this._inFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>' + '<h2>' + t('files_sharing', 'Nothing shared with you yet') + '</h2>' + '<p>' + t('files_sharing', 'Files and folders others share with you will show up here') + '</p>') return this._inFileList @@ -72,7 +72,7 @@ OCA.Sharing.App = { this._extendFileList(this._outFileList) this._outFileList.appName = t('files_sharing', 'Shared with others') - this._outFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>' + this._outFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>' + '<h2>' + t('files_sharing', 'Nothing shared yet') + '</h2>' + '<p>' + t('files_sharing', 'Files and folders you share will show up here') + '</p>') return this._outFileList @@ -98,7 +98,7 @@ OCA.Sharing.App = { this._extendFileList(this._linkFileList) this._linkFileList.appName = t('files_sharing', 'Shared by link') - this._linkFileList.$el.find('#emptycontent').html('<div class="icon-public"></div>' + this._linkFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-public"></div>' + '<h2>' + t('files_sharing', 'No shared links') + '</h2>' + '<p>' + t('files_sharing', 'Files and folders you share by link will show up here') + '</p>') return this._linkFileList @@ -126,7 +126,7 @@ OCA.Sharing.App = { this._extendFileList(this._deletedFileList) this._deletedFileList.appName = t('files_sharing', 'Deleted shares') - this._deletedFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>' + this._deletedFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>' + '<h2>' + t('files_sharing', 'No deleted shares') + '</h2>' + '<p>' + t('files_sharing', 'Shares you deleted will show up here') + '</p>') return this._deletedFileList @@ -155,7 +155,7 @@ OCA.Sharing.App = { this._extendFileList(this._pendingFileList) this._pendingFileList.appName = t('files_sharing', 'Pending shares') - this._pendingFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>' + this._pendingFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>' + '<h2>' + t('files_sharing', 'No pending shares') + '</h2>' + '<p>' + t('files_sharing', 'Shares you have received but not confirmed will show up here') + '</p>') return this._pendingFileList @@ -181,7 +181,7 @@ OCA.Sharing.App = { this._extendFileList(this._overviewFileList) this._overviewFileList.appName = t('files_sharing', 'Shares') - this._overviewFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>' + this._overviewFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>' + '<h2>' + t('files_sharing', 'No shares') + '</h2>' + '<p>' + t('files_sharing', 'Shares will show up here') + '</p>') return this._overviewFileList diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index e2830aeea9e..42151bca1cb 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -140,7 +140,7 @@ }); $('#public-upload .button.icon-upload').click(function(e) { e.preventDefault(); - $('#public-upload #emptycontent input').focus().trigger('click'); + $('#public-upload .emptycontent input').focus().trigger('click'); }); window.onbeforeunload = function() { return self.confirmBeforeUnload(); diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index bfb035fb817..c08d72d6e05 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -60,7 +60,7 @@ OCA.Sharing.PublicApp = { } // file list mode ? - if ($el.find('#filestable').length) { + if ($el.find('.files-filestable').length) { var filesClient = new OC.Files.Client({ host: OC.getHost(), port: OC.getPort(), @@ -277,7 +277,7 @@ OCA.Sharing.PublicApp = { }; this.fileList.updateEmptyContent = function() { - this.$el.find('#emptycontent .uploadmessage').text( + this.$el.find('.emptycontent .uploadmessage').text( t('files_sharing', 'You can upload into this folder') ); OCA.Files.FileList.prototype.updateEmptyContent.apply(this, arguments); diff --git a/apps/files_sharing/js/sharedfilelist.js b/apps/files_sharing/js/sharedfilelist.js index e8420113ad9..7d7e91dd965 100644 --- a/apps/files_sharing/js/sharedfilelist.js +++ b/apps/files_sharing/js/sharedfilelist.js @@ -17,7 +17,7 @@ * @classdesc Sharing file list. * Contains both "shared with others" and "shared with you" modes. * - * @param $el container element with existing markup for the #controls + * @param $el container element with existing markup for the .files-controls * and a table * @param [options] map of options, see other parameters * @param {boolean} [options.sharedWithUser] true to return files shared with @@ -158,8 +158,8 @@ var dir = this.getCurrentDirectory() if (dir === '/') { // root has special permissions - this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty) - this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty) + this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty) + this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty) // hide expiration date header for non link only shares if (!this._linksOnly) { diff --git a/apps/files_sharing/src/services/ConfigService.js b/apps/files_sharing/src/services/ConfigService.js index cd9bed2a2a7..bfef48a8ade 100644 --- a/apps/files_sharing/src/services/ConfigService.js +++ b/apps/files_sharing/src/services/ConfigService.js @@ -32,8 +32,8 @@ export default class Config { * @memberof Config */ get isPublicUploadEnabled() { - return document.getElementById('filestable') - && document.getElementById('filestable').dataset.allowPublicUpload === 'yes' + return document.getElementsByClassName('files-filestable')[0] + && document.getElementsByClassName('files-filestable')[0].dataset.allowPublicUpload === 'yes' } /** diff --git a/apps/files_sharing/templates/list.php b/apps/files_sharing/templates/list.php index 983e70d4433..6c91d701d1d 100644 --- a/apps/files_sharing/templates/list.php +++ b/apps/files_sharing/templates/list.php @@ -1,7 +1,7 @@ <?php /** @var \OCP\IL10N $l */ ?> <div id='notification'></div> -<div id="emptycontent" class="hidden"></div> +<div class="emptyfilelist emptycontent hidden"></div> <input type="hidden" name="dir" value="" id="dir"> @@ -10,23 +10,23 @@ <h2><?php p($l->t('No entries found in this folder')); ?></h2> </div> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> <thead> <tr> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a> </div> </th> - <th id="headerDate" class="hidden column-mtime"> - <a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a> + <th class="hidden column-mtime"> + <a class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a> </th> <th class="hidden column-expiration"> <a class="columntitle"><span><?php p($l->t('Expiration date')); ?></span></a> </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index d49c7a01b63..0e8f59e9f2a 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -105,7 +105,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size); <div id="public-upload"> <div id="emptycontent" - class="<?php if (!empty($_['note'])) { ?>has-note<?php } ?>"> + class="emptycontent <?php if (!empty($_['note'])) { ?>has-note<?php } ?>"> <?php if ($_['shareOwner']) { ?> <div id="displayavatar"><div class="avatardiv"></div></div> <h2><?php p($l->t('Upload files to %s', [$_['shareOwner']])) ?></h2> diff --git a/apps/files_sharing/tests/js/appSpec.js b/apps/files_sharing/tests/js/appSpec.js index e1249f5b4d7..4d2e5211d7c 100644 --- a/apps/files_sharing/tests/js/appSpec.js +++ b/apps/files_sharing/tests/js/appSpec.js @@ -95,7 +95,7 @@ describe('OCA.Sharing.App tests', function() { var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView'); // create dummy table so we can click the dom - var $table = '<table><thead></thead><tbody id="fileList"></tbody></table>'; + var $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>'; $('#app-content-sharingin').append($table); App._inFileList = null; diff --git a/apps/files_sharing/tests/js/publicAppSpec.js b/apps/files_sharing/tests/js/publicAppSpec.js index ed88913b1f6..b9d8cbe28e2 100644 --- a/apps/files_sharing/tests/js/publicAppSpec.js +++ b/apps/files_sharing/tests/js/publicAppSpec.js @@ -59,7 +59,7 @@ describe('OCA.Sharing.PublicApp tests', function() { '<input type="hidden" id="dir" value="/subdir"/>' + '<input type="hidden" id="permissions" value="31"/>' + // dummy controls - '<div id="controls">' + + '<div class="files-controls">' + ' <div class="actions creatable"></div>' + ' <div class="notCreatable"></div>' + '</div>' + @@ -67,9 +67,9 @@ describe('OCA.Sharing.PublicApp tests', function() { '<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable" class="list-container view-grid">' + + '<table class="files-filestable list-container view-grid">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + + '<th class="hidden column-name">' + '<input type="checkbox" id="select_all_files" class="select-all">' + '<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + '<span class="selectedActions hidden">' + @@ -78,11 +78,11 @@ describe('OCA.Sharing.PublicApp tests', function() { '<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' + '<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + // TODO: move to handlebars template - '<div id="emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' + + '<div class="emptyfilelist emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' + '<div class="nofilterresults hidden"></div>' + '</div>' ); diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js index f99c838eda3..6b4dd35ec85 100644 --- a/apps/files_sharing/tests/js/shareSpec.js +++ b/apps/files_sharing/tests/js/shareSpec.js @@ -46,9 +46,9 @@ describe('OCA.Sharing.Util tests', function() { // dummy file list var $div = $( '<div id="listContainer">' + - '<table id="filestable" class="list-container view-grid">' + + '<table class="files-filestable list-container view-grid">' + '<thead></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '</table>' + '</div>'); $('#content').append($div); 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 @@ <?php /** @var \OCP\IL10N $l */ ?> -<div id="controls"> - <div id="file_action_panel"></div> +<div class="files-controls"> + <div></div> </div> <div id='notification'></div> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-delete"></div> <h2><?php p($l->t('No deleted files')); ?></h2> <p><?php p($l->t('You will be able to recover deleted files from here')); ?></p> @@ -18,19 +18,19 @@ <p></p> </div> -<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> +<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>"> <thead> <tr> - <th id="headerSelection" class="hidden column-selection"> + <th class="hidden column-selection"> <input type="checkbox" id="select_all_trash" class="select-all checkbox"/> <label for="select_all_trash"> <span class="hidden-visually"><?php p($l->t('Select all'))?></span> </label> </th> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a> - <span id="selectedActionsList" class='selectedActions'> + <span class='selectedActions'> <a href="" class="actions-selected"> <span class="icon icon-more"></span> <span><?php p($l->t('Actions'))?></span> @@ -38,12 +38,12 @@ </span> </div> </th> - <th id="headerDate" class="hidden column-mtime"> + <th class="hidden column-mtime"> <a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Deleted')); ?></span><span class="sort-indicator"></span></a> </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/files_trashbin/tests/js/filelistSpec.js b/apps/files_trashbin/tests/js/filelistSpec.js index 0f4661ba09a..4b75e2a14fd 100644 --- a/apps/files_trashbin/tests/js/filelistSpec.js +++ b/apps/files_trashbin/tests/js/filelistSpec.js @@ -49,24 +49,24 @@ describe('OCA.Trashbin.FileList tests', function () { // files app) '<input type="hidden" id="permissions" value="31"></input>' + // dummy controls - '<div id="controls">' + + '<div class="files-controls">' + ' <div class="actions creatable"></div>' + ' <div class="notCreatable"></div>' + '</div>' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable" class="list-container view-grid">' + - '<thead><tr><th id="headerName" class="hidden">' + + '<table class="files-filestable list-container view-grid">' + + '<thead><tr><th class="hidden column-name">' + '<input type="checkbox" id="select_all_trash" class="select-all">' + '<span class="name">Name</span>' + '<span class="selectedActions hidden">' + '<a href="" class="actions-selected"><span class="icon icon-more"></span><span>Actions</span>' + '</span>' + '</th></tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + - '<div id="emptycontent">Empty content message</div>' + + '<div class="emptyfilelist emptycontent">Empty content message</div>' + '</div>' ); @@ -161,7 +161,7 @@ describe('OCA.Trashbin.FileList tests', function () { it('links the breadcrumb to the trashbin view', function () { fileList.changeDirectory('/subdir', false, true); fakeServer.respond(); - var $crumbs = fileList.$el.find('#controls .crumb'); + var $crumbs = fileList.$el.find('.files-controls .crumb'); expect($crumbs.length).toEqual(3); expect($crumbs.eq(1).find('a').text()).toEqual('Home'); expect($crumbs.eq(1).find('a').attr('href')) diff --git a/apps/systemtags/src/systemtagsfilelist.js b/apps/systemtags/src/systemtagsfilelist.js index a87b5a96c3e..404c85ea3f8 100644 --- a/apps/systemtags/src/systemtagsfilelist.js +++ b/apps/systemtags/src/systemtagsfilelist.js @@ -30,7 +30,7 @@ * @classdesc SystemTags file list. * Contains a list of files filtered by system tags. * - * @param {object} $el container element with existing markup for the #controls and a table + * @param {object} $el container element with existing markup for the .files-controls and a table * @param {Array} [options] map of options, see other parameters * @param {Array.<string>} [options.systemTagIds] array of system tag ids to * filter by @@ -75,7 +75,7 @@ OC.Plugins.attach('OCA.SystemTags.FileList', this) - const $controls = this.$el.find('#controls').empty() + const $controls = this.$el.find('.files-controls').empty() _.defer(_.bind(this._getLastUsedTags, this)) this._initFilterField($controls) @@ -248,7 +248,7 @@ if (!this._systemTagIds.length) { // no tags selected this.$el - .find('#emptycontent') + .find('.emptyfilelist.emptycontent') .html( '<div class="icon-systemtags"></div>' + '<h2>' @@ -261,7 +261,7 @@ } else { // tags selected but no results this.$el - .find('#emptycontent') + .find('.emptyfilelist.emptycontent') .html( '<div class="icon-systemtags"></div>' + '<h2>' @@ -273,10 +273,10 @@ ) } this.$el - .find('#emptycontent') + .find('.emptyfilelist.emptycontent') .toggleClass('hidden', !this.isEmpty) this.$el - .find('#filestable thead th') + .find('.files-filestable thead th') .toggleClass('hidden', this.isEmpty) } else { OCA.Files.FileList.prototype.updateEmptyContent.apply( diff --git a/apps/systemtags/templates/list.php b/apps/systemtags/templates/list.php index f6a0735881a..cea67413327 100644 --- a/apps/systemtags/templates/list.php +++ b/apps/systemtags/templates/list.php @@ -1,7 +1,7 @@ -<div id="controls"> +<div class="files-controls"> </div> -<div id="emptycontent" class="hidden"> +<div class="emptyfilelist emptycontent hidden"> <div class="icon-folder"></div> <h2><?php p($l->t('No files in here')); ?></h2> <p class="uploadmessage hidden"></p> @@ -13,23 +13,23 @@ <p></p> </div> -<table id="filestable" data-preview-x="250" data-preview-y="250" class="list-container"> +<table data-preview-x="250" data-preview-y="250" class="files-filestable list-container"> <thead> <tr> - <th id='headerName' class="hidden column-name"> - <div id="headerName-container"> + <th class="hidden column-name"> + <div class="column-name-container"> <a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a> </div> </th> - <th id="headerSize" class="hidden column-size"> + <th class="hidden column-size"> <a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a> </th> - <th id="headerDate" class="hidden column-mtime"> + <th class="hidden column-mtime"> <a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a> </th> </tr> </thead> - <tbody id="fileList"> + <tbody class="files-fileList"> </tbody> <tfoot> </tfoot> diff --git a/apps/systemtags/tests/js/systemtagsfilelistSpec.js b/apps/systemtags/tests/js/systemtagsfilelistSpec.js index 2c775466de4..068eb0cbf5c 100644 --- a/apps/systemtags/tests/js/systemtagsfilelistSpec.js +++ b/apps/systemtags/tests/js/systemtagsfilelistSpec.js @@ -32,12 +32,12 @@ describe('OCA.SystemTags.FileList tests', function() { // init horrible parameters '<input type="hidden" id="dir" value="/"></input>' + '<input type="hidden" id="permissions" value="31"></input>' + - '<div id="controls"></div>' + + '<div class="files-controls"></div>' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '<table id="filestable">' + + '<table class="files-filestable">' + '<thead><tr>' + - '<th id="headerName" class="hidden column-name">' + + '<th class="hidden column-name">' + '<input type="checkbox" id="select_all_files" class="select-all">' + '<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' + '<span class="selectedActions hidden">' + @@ -46,10 +46,10 @@ describe('OCA.SystemTags.FileList tests', function() { '<a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a>' + '</th>' + '</tr></thead>' + - '<tbody id="fileList"></tbody>' + + '<tbody class="files-fileList"></tbody>' + '<tfoot></tfoot>' + '</table>' + - '<div id="emptycontent">Empty content message</div>' + + '<div class="emptyfilelist emptycontent">Empty content message</div>' + '</div>' ); }); @@ -175,7 +175,7 @@ describe('OCA.SystemTags.FileList tests', function() { fileList.reload(); - expect(fileList.$el.find('#emptycontent').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(false); expect(getFilteredFilesSpec.notCalled).toEqual(true); }); @@ -233,7 +233,7 @@ describe('OCA.SystemTags.FileList tests', function() { requestDeferred.resolve(207, testFiles); return reloading.then(function() { - expect(fileList.$el.find('#emptycontent').hasClass('hidden')).toEqual(true); + expect(fileList.$el.find('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(true); expect(fileList.$el.find('tbody>tr').length).toEqual(4); }).then(done, done); }); |