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

Empty content message

Upload message

' + + '

Empty content message

Upload message

' + '' + '
' ); @@ -460,7 +460,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles([]); expect(fileList.isEmpty).toEqual(true); fileList.add(fileData); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); // yes, ugly... expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -468,8 +468,8 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.connector').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false); expect($summary.find('.filesize').text()).toEqual('12 B'); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(true); expect(fileList.isEmpty).toEqual(false); }); it('correctly adds the extension markup and show hidden files completely in gray', function() { @@ -529,11 +529,11 @@ describe('OCA.Files.FileList tests', function() { $removedEl = fileList.remove('One.txt'); expect($removedEl).toBeDefined(); expect($removedEl.attr('data-file')).toEqual('One.txt'); - expect($('#fileList tr').length).toEqual(3); + expect($('.files-fileList tr').length).toEqual(3); expect(fileList.files.length).toEqual(3); expect(fileList.findFileEl('One.txt').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('2 files'); @@ -546,14 +546,14 @@ describe('OCA.Files.FileList tests', function() { var $summary; fileList.setFiles([testFiles[0]]); fileList.remove('One.txt'); - expect($('#fileList tr').length).toEqual(0); + expect($('.files-fileList tr').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect(fileList.findFileEl('One.txt').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(true); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); expect(fileList.isEmpty).toEqual(true); }); }); @@ -603,7 +603,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.findFileEl('Three.pdf').length).toEqual(1); expect(fileList.$fileList.find('tr').length).toEqual(2); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -611,8 +611,8 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.fileinfo').hasClass('hidden')).toEqual(false); expect($summary.find('.filesize').text()).toEqual('57 KB'); expect(fileList.isEmpty).toEqual(false); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptycontent').hasClass('hidden')).toEqual(true); expect(notificationStub.notCalled).toEqual(true); }).then(done, done); @@ -677,12 +677,12 @@ describe('OCA.Files.FileList tests', function() { return doDelete().then(function(){ expect(fileList.$fileList.find('tr').length).toEqual(0); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(true); expect(fileList.isEmpty).toEqual(true); expect(fileList.files.length).toEqual(0); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); }).then(done, done); }); it('bring back deleted item when delete call failed', function(done) { @@ -804,7 +804,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.$fileList.find('.test').length).toEqual(0); }); it('Leaves the summary alone when reinserting renamed element', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); doRename(); deferredRename.resolve(201); @@ -813,7 +813,7 @@ describe('OCA.Files.FileList tests', function() { expect($summary.find('.fileinfo').text()).toEqual('3 files'); }); it('Leaves the summary alone when cancel renaming', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); doCancelRename(); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('3 files'); @@ -1105,7 +1105,7 @@ describe('OCA.Files.FileList tests', function() { describe('Update file', function() { it('does not change summary', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var fileData = new FileInfo({ type: 'file', name: 'test file', @@ -1127,14 +1127,14 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles(testFiles); - expect($('#fileList tr').length).toEqual(4); + expect($('.files-fileList tr').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect(fileList.files).toEqual(testFiles); }); it('updates summary using the file sizes', function() { var $summary; fileList.setFiles(testFiles); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); expect($summary.find('.fileinfo').text()).toEqual('3 files'); @@ -1142,23 +1142,23 @@ describe('OCA.Files.FileList tests', function() { }); it('shows headers, summary and hide empty content message after setting files', function(){ fileList.setFiles(testFiles); - expect($('#filestable thead th').hasClass('hidden')).toEqual(false); - expect($('#emptycontent').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(false); + expect($('.emptycontent').hasClass('hidden')).toEqual(true); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(false); }); it('hides headers, summary and show empty content message after setting empty file list', function(){ fileList.setFiles([]); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); - expect($('#emptycontent .uploadmessage').hasClass('hidden')).toEqual(false); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); + expect($('.emptycontent .uploadmessage').hasClass('hidden')).toEqual(false); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(true); }); it('hides headers, upload message, and summary when list is empty and user has no creation permission', function(){ $('#permissions').val(0); fileList.setFiles([]); - expect($('#filestable thead th').hasClass('hidden')).toEqual(true); - expect($('#emptycontent').hasClass('hidden')).toEqual(false); - expect($('#emptycontent .uploadmessage').hasClass('hidden')).toEqual(true); + expect($('.files-filestable thead th').hasClass('hidden')).toEqual(true); + expect($('.emptycontent').hasClass('hidden')).toEqual(false); + expect($('.emptycontent .uploadmessage').hasClass('hidden')).toEqual(true); expect(fileList.$el.find('.summary').hasClass('hidden')).toEqual(true); }); it('calling findFileEl() can find existing file element', function() { @@ -1220,7 +1220,7 @@ describe('OCA.Files.FileList tests', function() { var $summary; // single file fileList.setFiles([testFiles[0]]); - $summary = $('#filestable .summary'); + $summary = $('.files-filestable .summary'); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -1235,18 +1235,18 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles(testFiles); - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($nofilterresults.length).toEqual(1); expect($summary.hasClass('hidden')).toEqual(false); - expect($('#fileList tr:not(.hidden)').length).toEqual(4); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(3); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(3); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1255,7 +1255,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('ee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); @@ -1264,13 +1264,13 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('eee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(true); expect($nofilterresults.hasClass('hidden')).toEqual(false); fileList.setFilter('ee'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); @@ -1279,7 +1279,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(3); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(3); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1288,7 +1288,7 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter(''); - expect($('#fileList tr:not(.hidden)').length).toEqual(4); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(4); expect(fileList.files.length).toEqual(4); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').text()).toEqual('1 folder'); @@ -1296,12 +1296,12 @@ describe('OCA.Files.FileList tests', function() { expect($nofilterresults.hasClass('hidden')).toEqual(true); }); it('filters the list of non-rendered rows using filter()', function() { - var $summary = $('#filestable .summary'); + var $summary = $('.files-filestable .summary'); var $nofilterresults = fileList.$el.find(".nofilterresults"); fileList.setFiles(generateFiles(0, 64)); fileList.setFilter('63'); - expect($('#fileList tr:not(.hidden)').length).toEqual(1); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(1); expect($summary.hasClass('hidden')).toEqual(false); expect($summary.find('.dirinfo').hasClass('hidden')).toEqual(true); expect($summary.find('.fileinfo').text()).toEqual('1 file'); @@ -1312,27 +1312,27 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files.length).toEqual(0); expect(fileList.files).toEqual([]); fileList.setFiles([]); - var $summary = $('#filestable .summary'); - var $emptycontent = fileList.$el.find("#emptycontent"); + var $summary = $('.files-filestable .summary'); + var $emptycontent = fileList.$el.find(".emptycontent"); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($emptycontent.length).toEqual(1); expect($nofilterresults.length).toEqual(1); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(false); expect($nofilterresults.hasClass('hidden')).toEqual(true); fileList.setFilter('e'); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(true); expect($nofilterresults.hasClass('hidden')).toEqual(false); fileList.setFilter(''); - expect($('#fileList tr:not(.hidden)').length).toEqual(0); + expect($('.files-fileList tr:not(.hidden)').length).toEqual(0); expect(fileList.files.length).toEqual(0); expect($summary.hasClass('hidden')).toEqual(true); expect($emptycontent.hasClass('hidden')).toEqual(false); @@ -1343,7 +1343,7 @@ describe('OCA.Files.FileList tests', function() { expect(fileList.files).toEqual([]); fileList.showMask(); fileList.setFiles(testFiles); - var $emptycontent = fileList.$el.find("#emptycontent"); + var $emptycontent = fileList.$el.find(".emptycontent"); var $nofilterresults = fileList.$el.find(".nofilterresults"); expect($emptycontent.length).toEqual(1); expect($nofilterresults.length).toEqual(1); @@ -1368,7 +1368,7 @@ describe('OCA.Files.FileList tests', function() { }); it('renders only the first page', function() { expect(fileList.files.length).toEqual(65); - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); }); it('renders the full first page despite hidden rows', function() { filesConfig.set('showhidden', false); @@ -1382,7 +1382,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(files); expect(fileList.files.length).toEqual(25); // render 24 hidden elements + the visible one - expect($('#fileList tr').length).toEqual(25); + expect($('.files-fileList tr').length).toEqual(25); }); it('renders the full first page despite hidden rows', function() { filesConfig.set('showhidden', true); @@ -1396,19 +1396,19 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(files); expect(fileList.files.length).toEqual(25); // render 20 first hidden elements as visible - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); }); it('renders the second page when scrolling down (trigger nextPage)', function() { // TODO: can't simulate scrolling here, so calling nextPage directly fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); fileList._nextPage(true); // stays at 65 - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); }); it('inserts into the DOM if insertion point is in the visible page ', function() { fileList.add({ @@ -1416,7 +1416,7 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 15b.txt' }); - expect($('#fileList tr').length).toEqual(21); + expect($('.files-fileList tr').length).toEqual(21); expect(fileList.findFileEl('File with index 15b.txt').index()).toEqual(16); }); it('does not inserts into the DOM if insertion point is not the visible page ', function() { @@ -1425,10 +1425,10 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 28b.txt' }); - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); expect(fileList.findFileEl('File with index 28b.txt').length).toEqual(0); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); expect(fileList.findFileEl('File with index 28b.txt').index()).toEqual(29); }); it('appends into the DOM when inserting a file after the last visible element', function() { @@ -1437,43 +1437,43 @@ describe('OCA.Files.FileList tests', function() { type: 'file', name: 'File with index 19b.txt' }); - expect($('#fileList tr').length).toEqual(21); + expect($('.files-fileList tr').length).toEqual(21); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(41); + expect($('.files-fileList tr').length).toEqual(41); }); it('appends into the DOM when inserting a file on the last page when visible', function() { fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(65); + expect($('.files-fileList tr').length).toEqual(65); fileList._nextPage(true); fileList.add({ id: 2000, type: 'file', name: 'File with index 88.txt' }); - expect($('#fileList tr').length).toEqual(66); + expect($('.files-fileList tr').length).toEqual(66); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(66); + expect($('.files-fileList tr').length).toEqual(66); }); it('shows additional page when appending a page of files and scrolling down', function() { var newFiles = generateFiles(66, 81); for (var i = 0; i < newFiles.length; i++) { fileList.add(newFiles[i]); } - expect($('#fileList tr').length).toEqual(20); + expect($('.files-fileList tr').length).toEqual(20); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(40); + expect($('.files-fileList tr').length).toEqual(40); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(60); + expect($('.files-fileList tr').length).toEqual(60); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(80); + expect($('.files-fileList tr').length).toEqual(80); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(81); + expect($('.files-fileList tr').length).toEqual(81); fileList._nextPage(true); - expect($('#fileList tr').length).toEqual(81); + expect($('.files-fileList tr').length).toEqual(81); }); it('automatically renders next page when there are not enough elements visible', function() { // delete the 15 first elements @@ -1481,7 +1481,7 @@ describe('OCA.Files.FileList tests', function() { fileList.remove(fileList.files[0].name); } // still makes sure that there are 20 elements visible, if any - expect($('#fileList tr').length).toEqual(25); + expect($('.files-fileList tr').length).toEqual(25); }); }); describe('file previews', function() { @@ -1635,14 +1635,14 @@ describe('OCA.Files.FileList tests', function() { describe('viewer mode', function() { it('enabling viewer mode hides files table and action buttons', function() { fileList.setViewerMode(true); - expect($('#filestable').hasClass('hidden')).toEqual(true); + expect($('.files-filestable').hasClass('hidden')).toEqual(true); expect($('.actions').hasClass('hidden')).toEqual(true); expect($('.notCreatable').hasClass('hidden')).toEqual(true); }); it('disabling viewer mode restores files table and action buttons', function() { fileList.setViewerMode(true); fileList.setViewerMode(false); - expect($('#filestable').hasClass('hidden')).toEqual(false); + expect($('.files-filestable').hasClass('hidden')).toEqual(false); expect($('.actions').hasClass('hidden')).toEqual(false); expect($('.notCreatable').hasClass('hidden')).toEqual(true); }); @@ -1650,7 +1650,7 @@ describe('OCA.Files.FileList tests', function() { $('#permissions').val(0); fileList.setViewerMode(true); fileList.setViewerMode(false); - expect($('#filestable').hasClass('hidden')).toEqual(false); + expect($('.files-filestable').hasClass('hidden')).toEqual(false); expect($('.actions').hasClass('hidden')).toEqual(true); expect($('.notCreatable').hasClass('hidden')).toEqual(false); }); @@ -1684,7 +1684,7 @@ describe('OCA.Files.FileList tests', function() { expect(getFolderContentsStub.calledWith('/subdir')).toEqual(true); deferredList.resolve(200, [testRoot].concat(testFiles)); return reloading.then(function() { - expect($('#fileList tr').length).toEqual(4); + expect($('.files-fileList tr').length).toEqual(4); expect(fileList.findFileEl('One.txt').length).toEqual(1); }).then(done, done); }); @@ -2004,13 +2004,13 @@ describe('OCA.Files.FileList tests', function() { }); it('Selecting all files will automatically check "select all" checkbox', function() { expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr td.selection input:checkbox').click(); + $('.files-fileList tr td.selection input:checkbox').click(); expect($('.select-all').prop('checked')).toEqual(true); }); it('Selecting all files on the first visible page will not automatically check "select all" checkbox', function() { fileList.setFiles(generateFiles(0, 41)); expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr td.selection input:checkbox').click(); + $('.files-fileList tr td.selection input:checkbox').click(); expect($('.select-all').prop('checked')).toEqual(false); }); it('Selecting all files also selects hidden files when invisible', function() { @@ -2029,7 +2029,7 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(generateFiles(0, 41)); $('.select-all').click(); expect($('.select-all').prop('checked')).toEqual(true); - $('#fileList tr input:checkbox').each(function() { + $('.files-fileList tr input:checkbox').each(function() { expect($(this).prop('checked')).toEqual(true); }); expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(42); @@ -2037,7 +2037,7 @@ describe('OCA.Files.FileList tests', function() { $('.select-all').click(); expect($('.select-all').prop('checked')).toEqual(false); - $('#fileList tr input:checkbox').each(function() { + $('.files-fileList tr input:checkbox').each(function() { expect($(this).prop('checked')).toEqual(false); }); expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(0); @@ -2090,7 +2090,7 @@ describe('OCA.Files.FileList tests', function() { expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(42); }); it('Selecting files updates selection summary', function() { - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('Name'); fileList.findFileEl('One.txt').find('input:checkbox').click(); fileList.findFileEl('Three.pdf').find('input:checkbox').click(); @@ -2098,7 +2098,7 @@ describe('OCA.Files.FileList tests', function() { expect($summary.text()).toEqual('1 folder and 2 files'); }); it('Unselecting files hides selection summary', function() { - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); fileList.findFileEl('One.txt').find('input:checkbox').click().click(); expect($summary.text()).toEqual('Name'); }); @@ -2111,7 +2111,7 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)'); }); it('Does not displays the number of hidden files in selection summary if hidden files are visible', function() { @@ -2123,7 +2123,7 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files'); }); it('Toggling hidden file visibility updates selection summary', function() { @@ -2135,13 +2135,13 @@ describe('OCA.Files.FileList tests', function() { size: 150 })); $('.select-all').click(); - var $summary = $('#headerName a.name>span:first'); + var $summary = $('.column-name a.name>span:first'); expect($summary.text()).toEqual('2 folders and 3 files (including 1 hidden)'); filesConfig.set('showhidden', true); expect($summary.text()).toEqual('2 folders and 3 files'); }); it('Select/deselect files shows/hides file actions', function() { - var $actions = $('#headerName .selectedActions'); + var $actions = $('.column-name .selectedActions'); var $checkbox = fileList.findFileEl('One.txt').find('input:checkbox'); expect($actions.hasClass('hidden')).toEqual(true); $checkbox.click(); @@ -3390,7 +3390,7 @@ describe('OCA.Files.FileList tests', function() { }); it('does not render new button when no legacy upload button exists (public page)', function() { fileList.destroy(); - $('#controls').append(''); + $('.files-controls').append(''); fileList = new OCA.Files.FileList($('#app-content-files')); expect(fileList.$el.find('.button.upload').length).toEqual(1); expect(fileList.$el.find('.button.new').length).toEqual(0); diff --git a/apps/files/tests/js/tagspluginspec.js b/apps/files/tests/js/tagspluginspec.js index 2ac67e64cea..e59a9695592 100644 --- a/apps/files/tests/js/tagspluginspec.js +++ b/apps/files/tests/js/tagspluginspec.js @@ -32,9 +32,9 @@ describe('OCA.Files.TagsPlugin tests', function() { // dummy file list var $div = $( '
' + - '' + + '
' + '' + - '' + + '' + '
' + '
'); $('#content').append($div); diff --git a/apps/files_external/css/external.css b/apps/files_external/css/external.css index 122459c9624..489cd630fb9 100644 --- a/apps/files_external/css/external.css +++ b/apps/files_external/css/external.css @@ -1,3 +1,3 @@ -#filestable tbody tr.externalErroredRow { +.files-filestable tbody tr.externalErroredRow { background-color: #F2DEDE; } diff --git a/apps/files_external/js/mountsfilelist.js b/apps/files_external/js/mountsfilelist.js index c5817a916f6..58cd356ccff 100644 --- a/apps/files_external/js/mountsfilelist.js +++ b/apps/files_external/js/mountsfilelist.js @@ -18,7 +18,7 @@ * Displays a list of mount points visible * for the current user. * - * @param $el container element with existing markup for the #controls + * @param $el container element with existing markup for the .files-controls * and a table * @param [options] map of options, see other parameters **/ @@ -65,8 +65,8 @@ var dir = this.getCurrentDirectory(); if (dir === '/') { // root has special permissions - this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty); - this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty); + this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty); + this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty); } else { OCA.Files.FileList.prototype.updateEmptyContent.apply(this, arguments); diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js index 9bf7339a3bb..0a791001f63 100644 --- a/apps/files_external/js/settings.js +++ b/apps/files_external/js/settings.js @@ -972,7 +972,7 @@ MountConfigListView.prototype = _.extend({ if (result.length === 0 && mainForm.attr('data-can-create') === 'false') { mainForm.hide(); $('a[href="#external-storage"]').parent().hide(); - $('#emptycontent').show(); + $('.emptycontent').show(); } onCompletion.resolve(); onLoaded1.resolve(); diff --git a/apps/files_external/js/statusmanager.js b/apps/files_external/js/statusmanager.js index e80d764baa7..0ffaad9fe40 100644 --- a/apps/files_external/js/statusmanager.js +++ b/apps/files_external/js/statusmanager.js @@ -239,7 +239,7 @@ OCA.Files_External.StatusManager = { processMountList: function (mountList) { var elementList = null; $.each(mountList, function (name, value) { - var trElement = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point)); + var trElement = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(value.mount_point)); trElement.attr('data-external-backend', value.backend); if (elementList) { elementList = elementList.add(trElement); @@ -460,7 +460,7 @@ OCA.Files_External.StatusManager.Utils = { showIconError: function (folder, clickAction, errorImageUrl) { var imageUrl = "url(" + errorImageUrl + ")"; - var trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); + var trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); this.changeFolderIcon(folder, imageUrl); this.toggleLink(folder, false, clickAction); trFolder.addClass('externalErroredRow'); @@ -474,7 +474,7 @@ OCA.Files_External.StatusManager.Utils = { if (folder instanceof $) { trFolder = folder; } else { - trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); //$('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); + trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); //FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); //$('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); } trFolder.each(function () { var thisElement = $(this); @@ -501,7 +501,7 @@ OCA.Files_External.StatusManager.Utils = { trFolder = folder; } else { // can't use here FileList.findFileEl(OCA.Files_External.StatusManager.Utils.jqSelEscape(folder)); return incorrect instance of filelist - trFolder = $('#fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); + trFolder = $('.files-fileList tr[data-file=\"' + OCA.Files_External.StatusManager.Utils.jqSelEscape(folder) + '\"]'); } var tdChilds = trFolder.find("td.filename div.thumbnail"); tdChilds.each(function () { @@ -525,7 +525,7 @@ OCA.Files_External.StatusManager.Utils = { $(this).find('td.filename div.thumbnail').css('background-image', "url(" + route + ")").css('display', 'none').css('display', 'inline'); }); } else { - file = $("#fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename div.thumbnail"); + file = $(".files-fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename div.thumbnail"); var parentTr = file.parents('tr:first'); route = OCA.Files_External.StatusManager.Utils.getIconRoute(parentTr); parentTr.attr("data-icon", route); @@ -563,7 +563,7 @@ OCA.Files_External.StatusManager.Utils = { if (filename instanceof $) { link = filename; } else { - link = $("#fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename a.name"); + link = $(".files-fileList tr[data-file=\"" + this.jqSelEscape(filename) + "\"] > td.filename a.name"); } if (active) { link.off('click.connectivity'); diff --git a/apps/files_external/templates/list.php b/apps/files_external/templates/list.php index 1d4f6993168..576dbdcf3f5 100644 --- a/apps/files_external/templates/list.php +++ b/apps/files_external/templates/list.php @@ -1,21 +1,21 @@ -
-
+
+
- - +
- - - + diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index d49c7a01b63..0e8f59e9f2a 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -105,7 +105,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
+ class="emptycontent has-note">

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

diff --git a/apps/files_sharing/tests/js/appSpec.js b/apps/files_sharing/tests/js/appSpec.js index e1249f5b4d7..4d2e5211d7c 100644 --- a/apps/files_sharing/tests/js/appSpec.js +++ b/apps/files_sharing/tests/js/appSpec.js @@ -95,7 +95,7 @@ describe('OCA.Sharing.App tests', function() { var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView'); // create dummy table so we can click the dom - var $table = '
'; + var $table = '
'; $('#app-content-sharingin').append($table); App._inFileList = null; diff --git a/apps/files_sharing/tests/js/publicAppSpec.js b/apps/files_sharing/tests/js/publicAppSpec.js index ed88913b1f6..b9d8cbe28e2 100644 --- a/apps/files_sharing/tests/js/publicAppSpec.js +++ b/apps/files_sharing/tests/js/publicAppSpec.js @@ -59,7 +59,7 @@ describe('OCA.Sharing.PublicApp tests', function() { '' + '' + // dummy controls - '
' + + '
' + '
' + '
' + '
' + @@ -67,9 +67,9 @@ describe('OCA.Sharing.PublicApp tests', function() { '' + // dummy table // TODO: at some point this will be rendered by the fileList class itself! - '' + + '
' + '' + - '' + '' + '' + - '' + + '' + '' + '
' + // TODO: move to handlebars template - '

Empty content message

Upload message

' + + '

Empty content message

Upload message

' + '' + '
' ); diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js index f99c838eda3..6b4dd35ec85 100644 --- a/apps/files_sharing/tests/js/shareSpec.js +++ b/apps/files_sharing/tests/js/shareSpec.js @@ -46,9 +46,9 @@ describe('OCA.Sharing.Util tests', function() { // dummy file list var $div = $( '
' + - '' + + '
' + '' + - '' + + '' + '
' + '
'); $('#content').append($div); diff --git a/apps/files_trashbin/src/filelist.js b/apps/files_trashbin/src/filelist.js index c1bf1b280ca..7fb55d4b932 100644 --- a/apps/files_trashbin/src/filelist.js +++ b/apps/files_trashbin/src/filelist.js @@ -54,7 +54,7 @@ * @augments OCA.Files.FileList * @classdesc List of deleted files * - * @param $el container element with existing markup for the #controls + * @param $el container element with existing markup for the .files-controls * and a table * @param [options] map of options */ @@ -160,8 +160,8 @@ updateEmptyContent: function() { var exists = this.$fileList.find('tr:first').exists() - this.$el.find('#emptycontent').toggleClass('hidden', exists) - this.$el.find('#filestable th').toggleClass('hidden', !exists) + this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', exists) + this.$el.find('.files-filestable th').toggleClass('hidden', !exists) }, _removeCallback: function(files) { diff --git a/apps/files_trashbin/src/trash.scss b/apps/files_trashbin/src/trash.scss index 2ed57b51918..633107c9d6d 100644 --- a/apps/files_trashbin/src/trash.scss +++ b/apps/files_trashbin/src/trash.scss @@ -16,7 +16,7 @@ #app-content-trashbin .summary :last-child { padding: 0; } -#app-content-trashbin #filestable .summary .filesize { +#app-content-trashbin .files-filestable .summary .filesize { display: none; } diff --git a/apps/files_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php index fcd5448db4b..c134d2c75c6 100644 --- a/apps/files_trashbin/templates/index.php +++ b/apps/files_trashbin/templates/index.php @@ -1,10 +1,10 @@ -
-
+
+
-