upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-20 00:12:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 38

Merge pull request #33320 from nextcloud/bugfix/noid/remove-files-duplicate-dom-ids

Browse source 
Replace files app ids to classes
This commit is contained in:
Vincent Petry 2022-07-26 12:21:13 +02:00 committed by GitHub
commit b4353c4651
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 798 additions and 795 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments/tests/js/filespluginSpec.js
View file

@ -31,9 +31,9 @@ describe('OCA.Comments.FilesPlugin tests', function() {
// dummy file list
var $div = $(
'<div>' +
'<table id="filestable">' +
'<table class="files-filestable">' +
'<thead></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'</table>' +
'</div>');
$('#content').append($div);

300
apps/files/css/files.css
View file

@ -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 {

152
apps/files/css/files.scss
View file

@ -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;

316
apps/files/css/merged.css
View file

@ -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;

10
apps/files/css/mobile.css
View file

@ -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;

10
apps/files/css/mobile.scss
View file

@ -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;

6
apps/files/css/upload.css
View file

@ -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;
}

6
apps/files/css/upload.scss
View file

@ -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;
}

6
apps/files/js/favoritesfilelist.js
View file

@ -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);

4
apps/files/js/file-upload.js
View file

@ -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');

59
apps/files/js/filelist.js
View file

@ -18,7 +18,7 @@
* A file list view consists of a controls bar and
* a file list table.
*
* @param $el container element with existing markup for the #controls
* @param $el container element with existing markup for the .files-controls
* and a table
* @param {Object} [options] map of options, see other parameters
* @param {Object} [options.scrollContainer] scrollable container, defaults to $(window)
@ -224,7 +224,7 @@
/**
* Initialize the file list and its components
*
* @param $el container element with existing markup for the #controls
* @param $el container element with existing markup for the .files-controls
* and a table
* @param options map of options, see other parameters
* @param options.scrollContainer scrollable container, defaults to $(window)
@ -276,9 +276,9 @@
}
this.$container = options.scrollContainer || $(window);
this.$table = $el.find('table:first');
this.$fileList = $el.find('#fileList');
this.$header = $el.find('#filelist-header');
this.$footer = $el.find('#filelist-footer');
this.$fileList = $el.find('.files-fileList');
this.$header = $el.find('.filelist-header');
this.$footer = $el.find('.filelist-footer');
if (!_.isUndefined(this._filesConfig)) {
this._filesConfig.on('change:showhidden', function() {
@ -357,7 +357,7 @@
}
this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions);
var $controls = this.$el.find('#controls');
var $controls = this.$el.find('.files-controls');
if ($controls.length > 0) {
$controls.prepend(this.breadcrumb.$el);
this.$table.addClass('has-controls');
@ -735,7 +735,7 @@
_onResize: function() {
var containerWidth = this.$el.width();
var actionsWidth = 0;
$.each(this.$el.find('#controls .actions'), function(index, action) {
$.each(this.$el.find('.files-controls .actions'), function(index, action) {
actionsWidth += $(action).outerWidth();
});
@ -763,7 +763,7 @@
isGridView ? t('files', 'Show list view') : t('files', 'Show grid view'),
)
$('.list-container').toggleClass('view-grid', isGridView);
this.$table.toggleClass('view-grid', isGridView);
if (isGridView) {
// If switching into grid view from list view, too few files might be displayed
// Try rendering the next page
@ -1898,6 +1898,7 @@
* @return new tr element (not appended to the table)
*/
add: function(fileData, options) {
var self = this;
var index;
var $tr;
var $rows;
@ -1940,7 +1941,7 @@
$tr.addClass('appear transparent');
window.setTimeout(function() {
$tr.removeClass('transparent');
$("#fileList tr").removeClass('mouseOver');
self.$fileList.find('tr').removeClass('mouseOver');
$tr.addClass('mouseOver');
});
}
@ -2480,7 +2481,7 @@
this.$el.find('.creatable').toggleClass('hidden', !isCreatable);
this.$el.find('.notCreatable').toggleClass('hidden', isCreatable);
// remove old style breadcrumbs (some apps might create them)
this.$el.find('#controls .crumb').remove();
this.$el.find('.files-controls .crumb').remove();
// refresh breadcrumbs in case it was replaced by an app
this.breadcrumb.render();
}
@ -2496,7 +2497,7 @@
*/
setViewerMode: function(show){
this.showActions(!show);
this.$el.find('#filestable').toggleClass('hidden', show);
this.$el.find('.files-filestable').toggleClass('hidden', show);
this.$el.trigger(new $.Event('changeViewerMode', {viewerModeEnabled: show}));
},
/**
@ -3304,11 +3305,11 @@
updateEmptyContent: function() {
var permissions = this.getDirectoryPermissions();
var isCreatable = (permissions & OC.PERMISSION_CREATE) !== 0;
this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('#emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty);
this.$el.find('#filestable').toggleClass('hidden', this.isEmpty);
this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('.emptyfilelist.emptycontent .uploadmessage').toggleClass('hidden', !isCreatable || !this.isEmpty);
this.$el.find('.files-filestable').toggleClass('hidden', this.isEmpty);
this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty);
},
/**
* Shows the loading mask.
@ -3323,7 +3324,7 @@
}
this.$table.addClass('hidden');
this.$el.find('#emptycontent').addClass('hidden');
this.$el.find('.emptyfilelist.emptycontent').addClass('hidden');
$mask = $('<div class="mask transparent icon-loading"></div>');
@ -3408,8 +3409,8 @@
},
hideIrrelevantUIWhenNoFilesMatch:function() {
if (this._filter && this.fileSummary.summary.totalDirs + this.fileSummary.summary.totalFiles === 0) {
this.$el.find('#filestable thead th').addClass('hidden');
this.$el.find('#emptycontent').addClass('hidden');
this.$el.find('.files-filestable thead th').addClass('hidden');
this.$el.find('.emptyfilelist.emptycontent').addClass('hidden');
$('#searchresults').addClass('filter-empty');
$('#searchresults .emptycontent').addClass('emptycontent-search');
if ( $('#searchresults').length === 0 || $('#searchresults').hasClass('hidden') ) {
@ -3425,9 +3426,9 @@
} else {
$('#searchresults').removeClass('filter-empty');
$('#searchresults .emptycontent').removeClass('emptycontent-search');
this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty);
if (!this.$el.find('.mask').exists()) {
this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty);
}
this.$el.find('.nofilterresults').addClass('hidden');
}
@ -3449,15 +3450,15 @@
var showHidden = !!this._filesConfig.get('showhidden');
if (summary.totalFiles === 0 && summary.totalDirs === 0) {
this.$el.find('#headerName a.name>span:first').text(t('files','Name'));
this.$el.find('#headerSize a>span:first').text(t('files','Size'));
this.$el.find('#modified a>span:first').text(t('files','Modified'));
this.$el.find('.column-name a.name>span:first').text(t('files','Name'));
this.$el.find('.column-size a>span:first').text(t('files','Size'));
this.$el.find('.column-mtime a>span:first').text(t('files','Modified'));
this.$el.find('table').removeClass('multiselect');
this.$el.find('.selectedActions').addClass('hidden');
}
else {
this.$el.find('.selectedActions').removeClass('hidden');
this.$el.find('#headerSize a>span:first').text(OC.Util.humanFileSize(summary.totalSize));
this.$el.find('.column-size a>span:first').text(OC.Util.humanFileSize(summary.totalSize));
var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs);
var fileInfo = n('files', '%n file', '%n files', summary.totalFiles);
@ -3479,8 +3480,8 @@
selection += ' (' + hiddenInfo + ')';
}
this.$el.find('#headerName a.name>span:first').text(selection);
this.$el.find('#modified a>span:first').text('');
this.$el.find('.column-name a.name>span:first').text(selection);
this.$el.find('.column-mtime a>span:first').text('');
this.$el.find('table').addClass('multiselect');
if (this.fileMultiSelectMenu) {
@ -3792,7 +3793,7 @@
}
var currentOffset = this.$container.scrollTop();
var additionalOffset = this.$el.find("#controls").height()+this.$el.find("#controls").offset().top;
var additionalOffset = this.$el.find(".files-controls").height()+this.$el.find(".files-controls").offset().top;
// Animation
var _this = this;
@ -3835,7 +3836,7 @@
_renderNewButton: function() {
// if an upload button (legacy) already exists or no actions container exist, skip
var $actionsContainer = this.$el.find('#controls .actions');
var $actionsContainer = this.$el.find('.files-controls .actions');
if (!$actionsContainer.length || this.$el.find('.button.upload').length) {
return;
}

20
apps/files/js/keyboardshortcuts.js
View file

@ -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');

6
apps/files/js/recentfilelist.js
View file

@ -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);

28
apps/files/templates/list.php
View file

@ -1,4 +1,4 @@
<div id="controls">
<div class="files-controls">
<div class="actions creatable hidden">
<div id="uploadprogresswrapper">
</div>
@ -11,7 +11,7 @@
<?php /* Note: the template attributes are here only for the public page. These are normally loaded
through ajax instead (updateStorageStatistics).
*/ ?>
<input type="hidden" name="permissions" value="" id="permissions">
<input type="hidden" id="permissions" value="">
<input type="hidden" id="free_space" value="<?php isset($_['freeSpace']) ? p($_['freeSpace']) : '' ?>">
<?php if (isset($_['dirToken'])):?>
<input type="hidden" id="publicUploadRequestToken" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
@ -20,9 +20,9 @@
<input type="hidden" class="max_human_file_size"
value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
</div>
<div id="filelist-header"></div>
<div class="filelist-header"></div>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-folder"></div>
<h2><?php p($l->t('No files in here')); ?></h2>
<p class="uploadmessage hidden"><?php p($l->t('Upload some content or sync with your devices!')); ?></p>
@ -33,23 +33,23 @@
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
<p></p>
</div>
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
<thead>
<tr>
<th id="headerSelection" class="hidden column-selection">
<th class="hidden column-selection">
<input type="checkbox" id="select_all_files" class="select-all checkbox"/>
<label for="select_all_files">
<span class="hidden-visually"><?php p($l->t('Select all'))?></span>
</label>
</th>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name">
<span><?php p($l->t('Name')); ?></span>
<span class="sort-indicator"></span>
</a>
<span id="selectedActionsList" class="selectedActions">
<span class="selectedActions">
<a href="#" onclick="event.preventDefault()" class="actions-selected">
<span class="icon icon-more"></span>
<span><?php p($l->t('Actions'))?></span>
@ -57,20 +57,20 @@
</span>
</div>
</th>
<th id="headerSize" class="hidden column-size">
<th class="hidden column-size">
<a class="size sort columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
</th>
<th id="headerDate" class="hidden column-mtime">
<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
<th class="hidden column-mtime">
<a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>
</table>
<div id="filelist-footer"></div>
<div class="filelist-footer"></div>
<input type="hidden" name="dir" id="dir" value="" />
<div class="hiddenuploadfield">
<input type="file" id="file_upload_start" class="hiddenuploadfield" name="files[]" />

14
apps/files/templates/recentlist.php
View file

@ -1,7 +1,7 @@
<?php /** @var \OCP\IL10N $l */ ?>
<div id='notification'></div>
<div id="emptycontent" class="hidden"></div>
<div class="emptyfilelist emptycontent hidden"></div>
<input type="hidden" name="dir" value="" id="dir">
@ -11,20 +11,20 @@
<p></p>
</div>
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<thead>
<tr>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" href="#" onclick="event.preventDefault()"
data-sort="name"><span><?php p($l->t('Name')); ?></span></a>
</div>
</th>
<th id="headerSize" class="hidden column-size">
<th class="hidden column-size">
<a class="size sort columntitle" href="#" onclick="event.preventDefault()"
data-sort="size"><span><?php p($l->t('Size')); ?></span></a>
</th>
<th id="headerDate" class="hidden column-mtime">
<th class="hidden column-mtime">
<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()"
data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span
class="sort-indicator"></span></a>
@ -37,7 +37,7 @@
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

14
apps/files/templates/simplelist.php
View file

@ -1,6 +1,6 @@
<div id='notification'></div>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-starred"></div>
<h2><?php p($l->t('No favorites yet')); ?></h2>
<p><?php p($l->t('Files and folders you mark as favorite will show up here')); ?></p>
@ -13,18 +13,18 @@
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
<p></p>
</div>
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<thead>
<tr>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
</div>
</th>
<th id="headerSize" class="hidden column-size">
<th class="hidden column-size">
<a class="size sort columntitle" onclick="event.preventDefault()" href="#" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
</th>
<th id="headerDate" class="hidden column-mtime">
<th class="hidden column-mtime">
<a id="modified" class="columntitle" onclick="event.preventDefault()" href="#" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
<span class="selectedActions">
<a onclick="event.preventDefault()" href="#" class="delete-selected">
@ -36,7 +36,7 @@
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

62
apps/files/tests/js/breadcrumbSpec.js
View file

@ -183,9 +183,9 @@ describe('OCA.Files.BreadCrumb tests', function() {
// append dummy navigation and controls
// as they are currently used for measurements
$('#testArea').append(
'<div id="controls"></div>'
'<div class="files-controls"></div>'
);
$('#controls').append(bc.$el);
$('.files-controls').append(bc.$el);
bc.setDirectory(dummyDir);
@ -197,11 +197,11 @@ describe('OCA.Files.BreadCrumb tests', function() {
$('div.crumbhome').css('width', 51);
$('div.crumbmenu').css('width', 51);
$('#controls').width(1000);
$('.files-controls').width(1000);
bc._resize();
// Shrink to show popovermenu
$('#controls').width(300);
$('.files-controls').width(300);
bc._resize();
$crumbmenuLink = bc.$el.find('.crumbmenu > a');
@ -232,9 +232,9 @@ describe('OCA.Files.BreadCrumb tests', function() {
// append dummy navigation and controls
// as they are currently used for measurements
$('#testArea').append(
'<div id="controls"></div>'
'<div class="files-controls"></div>'
);
$('#controls').append(bc.$el);
$('.files-controls').append(bc.$el);
// triggers resize implicitly
bc.setDirectory(dummyDir);
@ -260,7 +260,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
it('Hides breadcrumbs to fit available width', function() {
var $crumbs;
$('#controls').width(500);
$('.files-controls').width(500);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -280,7 +280,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
it('Hides breadcrumbs to fit available width', function() {
var $crumbs;
$('#controls').width(700);
$('.files-controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -306,7 +306,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
$(this).css('padding', paddings[index]);
});
$('#controls').width(700);
$('.files-controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -333,7 +333,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
$(this).css('margin', margins[index]);
});
$('#controls').width(700);
$('.files-controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -353,7 +353,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
it('Hides breadcrumbs to fit available width left by siblings', function() {
var $crumbs;
$('#controls').width(700);
$('.files-controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -375,28 +375,28 @@ describe('OCA.Files.BreadCrumb tests', function() {
// handling in the browsers used to run the tests.
$previousSibling.css('width', '50px');
$previousSibling.css('min-width', '50px');
$('#controls').prepend($previousSibling);
$('.files-controls').prepend($previousSibling);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$creatableActions.css('width', '100px');
$creatableActions.css('min-width', '100px');
$('#controls').append($creatableActions);
$('.files-controls').append($creatableActions);
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextHiddenSibling.css('width', '200px');
$nextHiddenSibling.css('min-width', '200px');
$('#controls').append($nextHiddenSibling);
$('.files-controls').append($nextHiddenSibling);
var $nextSibling = $('<div class="otherSibling"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextSibling.css('width', '50px');
$nextSibling.css('min-width', '50px');
$('#controls').append($nextSibling);
$('.files-controls').append($nextSibling);
bc._resize();
@ -415,7 +415,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
it('Hides breadcrumbs to fit available width left by siblings with paddings and margins', function() {
var $crumbs;
$('#controls').width(700);
$('.files-controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -438,7 +438,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
$previousSibling.css('width', '10px');
$previousSibling.css('min-width', '10px');
$previousSibling.css('margin', '20px');
$('#controls').prepend($previousSibling);
$('.files-controls').prepend($previousSibling);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
@ -447,14 +447,14 @@ describe('OCA.Files.BreadCrumb tests', function() {
$creatableActions.css('min-width', '20px');
$creatableActions.css('margin-left', '40px');
$creatableActions.css('padding-right', '40px');
$('#controls').append($creatableActions);
$('.files-controls').append($creatableActions);
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$nextHiddenSibling.css('width', '200px');
$nextHiddenSibling.css('min-width', '200px');
$('#controls').append($nextHiddenSibling);
$('.files-controls').append($nextHiddenSibling);
var $nextSibling = $('<div class="otherSibling"></div>');
// Set both the width and the min-width to even differences in width
@ -462,7 +462,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
$nextSibling.css('width', '10px');
$nextSibling.css('min-width', '10px');
$nextSibling.css('padding', '20px');
$('#controls').append($nextSibling);
$('.files-controls').append($nextSibling);
bc._resize();
@ -482,7 +482,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $crumbs;
// enough space
$('#controls').width(1800);
$('.files-controls').width(1800);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -491,7 +491,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
// simulate decrease
$('#controls').width(950);
$('.files-controls').width(950);
bc._resize();
// Third crumb is hidden and everything else is visible
@ -509,7 +509,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $crumbs;
// enough space
$('#controls').width(1800);
$('.files-controls').width(1800);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -529,7 +529,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
// 650 is enough for all the crumbs except the third and fourth
// ones, but not enough for the menu and all the crumbs except the
// third and fourth ones; the second one has to be hidden too.
$('#controls').width(650);
$('.files-controls').width(650);
bc._resize();
// Second, third and fourth crumb are hidden and everything else is
@ -548,7 +548,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $crumbs;
// limited space
$('#controls').width(850);
$('.files-controls').width(850);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -565,7 +565,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// simulate increase
$('#controls').width(1000);
$('.files-controls').width(1000);
bc._resize();
// Third crumb is hidden and everything else is visible
@ -583,7 +583,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $crumbs;
// limited space
$('#controls').width(850);
$('.files-controls').width(850);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -601,7 +601,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
// simulate increase
// 1030 is enough for all the crumbs if the menu is hidden.
$('#controls').width(1030);
$('.files-controls').width(1030);
bc._resize();
// Menu is hidden and everything else is visible
@ -629,10 +629,10 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $nextSiblingChild = $('<div class="siblingChild"></div>');
$nextSiblingChild.css('margin-left', 'auto');
$nextSibling.append($nextSiblingChild);
$('#controls').append($nextSibling);
$('.files-controls').append($nextSibling);
// limited space
$('#controls').width(850);
$('.files-controls').width(850);
bc._resize();
$crumbs = bc.$el.find('.crumb');
@ -649,7 +649,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
// simulate increase
$('#controls').width(1000);
$('.files-controls').width(1000);
bc._resize();
// Third crumb is hidden and everything else is visible

10
apps/files/tests/js/favoritesfilelistspec.js
View file

@ -33,25 +33,25 @@ describe('OCA.Files.FavoritesFileList tests', function() {
'<input type="hidden" id="dir" value="/"></input>' +
'<input type="hidden" id="permissions" value="31"></input>' +
// dummy controls
'<div id="controls">' +
'<div class="files-controls">' +
' <div class="actions creatable"></div>' +
' <div class="notCreatable"></div>' +
'</div>' +
// dummy table
// TODO: at some point this will be rendered by the fileList class itself!
'<table id="filestable" class="list-container view-grid">' +
'<table class="files-filestable list-container view-grid">' +
'<thead><tr>' +
'<th id="headerName" class="hidden column-name">' +
'<th class="hidden column-name">' +
'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
'</th>' +
'<th class="hidden column-mtime">' +
'<a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a>' +
'</th>' +
'</tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
'<div id="emptycontent">Empty content message</div>' +
'<div class="emptyfilelist emptycontent">Empty content message</div>' +
'</div>'
);
});

2
apps/files/tests/js/favoritespluginspec.js
View file

@ -88,7 +88,7 @@ describe('OCA.Files.FavoritesPlugin tests', function() {
var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView');
// create dummy table so we can click the dom
var $table = '<table><thead></thead><tbody id="fileList"></tbody></table>';
var $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>';
$('#app-content-favorites').append($table);
Plugin.favoritesFileList = null;

6
apps/files/tests/js/fileUploadSpec.js
View file

@ -136,9 +136,9 @@ describe('OC.Upload tests', function() {
beforeEach(function() {
$('#testArea').append(
'<div id="tableContainer">' +
'<table id="filestable" class="list-container view-grid">' +
'<table class="files-filestable list-container view-grid">' +
'<thead><tr>' +
'<th id="headerName" class="hidden column-name">' +
'<th class="hidden column-name">' +
'<input type="checkbox" id="select_all_files" class="select-all">' +
'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
'<span id="selectedActionsList" class="selectedActions hidden">' +
@ -148,7 +148,7 @@ describe('OC.Upload tests', function() {
'<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' +
'<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' +
'</tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
'</div>'

6
apps/files/tests/js/fileactionsSpec.js
View file

@ -35,7 +35,7 @@ describe('OCA.Files.FileActions tests', function() {
var $body = $('#testArea');
$body.append('<input type="hidden" id="dir" value="/subdir"></input>');
$body.append('<input type="hidden" id="permissions" value="31"></input>');
$body.append('<table id="filestable" class="list-container view-grid"><tbody id="fileList"></tbody></table>');
$body.append('<table class="files-filestable list-container view-grid"><tbody class="files-fileList"></tbody></table>');
// dummy files table
fileActions = new OCA.Files.FileActions();
fileActions.registerAction({
@ -72,7 +72,7 @@ describe('OCA.Files.FileActions tests', function() {
fileList.destroy();
fileList = undefined;
clock.restore();
$('#dir, #permissions, #filestable').remove();
$('#dir, #permissions, .files-filestable').remove();
});
it('calling clear() clears file actions', function() {
fileActions.clear();
@ -307,6 +307,8 @@ describe('OCA.Files.FileActions tests', function() {
});
it('passes context to action handler', function() {
var notifyUpdateListenersSpy = sinon.spy(fileList.fileActions, '_notifyUpdateListeners');
expect($tr.length).toEqual(1);
expect($tr.find('.action-test').length).toEqual(1);
$tr.find('.action-test').click();
expect(actionStub.calledOnce).toEqual(true);
expect(actionStub.getCall(0).args[0]).toEqual('testName.txt');

2
apps/files/tests/js/fileactionsmenuSpec.js
View file

@ -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() {

178
apps/files/tests/js/filelistSpec.js
View file

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

4
apps/files/tests/js/tagspluginspec.js
View file

@ -32,9 +32,9 @@ describe('OCA.Files.TagsPlugin tests', function() {
// dummy file list
var $div = $(
'<div>' +
'<table id="filestable">' +
'<table class="files-filestable">' +
'<thead></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'</table>' +
'</div>');
$('#content').append($div);

2
apps/files_external/css/external.css
View file

@ -1,3 +1,3 @@
#filestable tbody tr.externalErroredRow {
.files-filestable tbody tr.externalErroredRow {
background-color: #F2DEDE;
}

6
apps/files_external/js/mountsfilelist.js
View file

@ -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);

2
apps/files_external/js/settings.js
View file

@ -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();

12
apps/files_external/js/statusmanager.js
View file

@ -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');

14
apps/files_external/templates/list.php
View file

@ -1,21 +1,21 @@
<?php /** @var \OCP\IL10N $l */ ?>
<div id="controls">
<div id="file_action_panel"></div>
<div class="files-controls">
<div></div>
</div>
<div id='notification'></div>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-external"></div>
<h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2>
</div>
<input type="hidden" name="dir" value="" id="dir">
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<thead>
<tr>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
</div>
</th>
@ -27,7 +27,7 @@
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

2
apps/files_external/templates/settings.php
View file

@ -95,7 +95,7 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN ||
}
?>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-external"></div>
<h2><?php p($l->t('No external storage configured or you don\'t have the permission to configure them')); ?></h2>
</div>

2
apps/files_external/tests/appSpec.js
View file

@ -72,7 +72,7 @@ describe('OCA.Files_External.App tests', function() {
const setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView')
// create dummy table so we can click the dom
const $table = '<table><thead></thead><tbody id="fileList"></tbody></table>'
const $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>'
$('#app-content-extstoragemounts').append($table)
App._inFileList = null

12
apps/files_external/tests/js/mountsfilelistSpec.js
View file

@ -36,16 +36,16 @@ describe('OCA.Files_External.FileList tests', function() {
'<input type="hidden" id="dir" value="/"></input>' +
'<input type="hidden" id="permissions" value="31"></input>' +
// dummy controls
'<div id="controls">' +
'<div class="files-controls">' +
' <div class="actions creatable"></div>' +
' <div class="notCreatable"></div>' +
'</div>' +
// dummy table
// TODO: at some point this will be rendered by the fileList class itself!
'<table id="filestable">' +
'<table class="files-filestable">' +
'<thead><tr>' +
'<th id="headerName" class="hidden column-name">' +
' <div id="headerName-container">' +
'<th class="hidden column-name">' +
' <div id="column-name-container">' +
' <a class="name sort columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
' </div>' +
'</th>' +
@ -56,10 +56,10 @@ describe('OCA.Files_External.FileList tests', function() {
' <a class="scope sort columntitle" data-sort="scope"><span>Scope</span><span class="sort-indicator"></span></a>' +
'</th>' +
'</tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
'<div id="emptycontent">Empty content message</div>' +
'<div class="emptyfilelist emptycontent">Empty content message</div>' +
'</div>'
);
});

10
apps/files_sharing/css/mobile.css
View file

@ -27,9 +27,9 @@
}
/* hide size and date columns */
table th#headerSize,
table th.column-size,
table td.filesize,
table th#headerDate,
table th.column-mtime,
table td.date {
display: none;
}
@ -52,12 +52,12 @@ table td.date {
}
/* some padding for better clickability */
#fileList a.action img {
.files-fileList a.action img {
padding: 0 6px 0 12px;
}
/* hide text of the actions on mobile */
#fileList a.action:not(.menuitem) span {
.files-fileList a.action:not(.menuitem) span {
display: none;
}
@ -78,7 +78,7 @@ table td.date {
padding: 0 20px;
}
#emptycontent {
.emptycontent {
margin-top: 10vh;
}
}

10
apps/files_sharing/css/mobile.scss
View file

@ -8,9 +8,9 @@
}
/* hide size and date columns */
table th#headerSize,
table th.column-size,
table td.filesize,
table th#headerDate,
table th.column-mtime,
table td.date {
display: none;
}
@ -32,11 +32,11 @@ table td.filename .nametext {
}
/* some padding for better clickability */
#fileList a.action img {
.files-fileList a.action img {
padding: 0 6px 0 12px;
}
/* hide text of the actions on mobile */
#fileList a.action:not(.menuitem) span {
.files-fileList a.action:not(.menuitem) span {
display: none;
}
@ -56,7 +56,7 @@ table td.filename .nametext {
padding: 0 20px;
}
#emptycontent {
.emptycontent {
margin-top: 10vh;
}
}

18
apps/files_sharing/css/public.css
View file

@ -122,19 +122,19 @@ thead {
margin: 0 auto;
}
#emptycontent.has-note {
.emptycontent.has-note {
margin-top: 5vh;
}
#public-upload #emptycontent h2 {
#public-upload .emptycontent h2 {
margin: 10px 0 5px 0;
}
#public-upload #emptycontent h2 + p {
#public-upload .emptycontent h2 + p {
margin-bottom: 30px;
}
#public-upload #emptycontent .icon-folder {
#public-upload .emptycontent .icon-folder {
height: 16px;
width: 16px;
background-size: 16px;
@ -145,13 +145,13 @@ thead {
opacity: 1;
}
#public-upload #emptycontent #displayavatar .icon-folder {
#public-upload .emptycontent #displayavatar .icon-folder {
height: 48px;
width: 48px;
background-size: 48px;
}
#public-upload #emptycontent .button {
#public-upload .emptycontent .button {
display: inline-block;
height: auto;
width: auto;
@ -165,20 +165,20 @@ thead {
padding-left: 42px;
}
#public-upload #emptycontent ul {
#public-upload .emptycontent ul {
width: 230px;
margin: 5px auto 5vh;
text-align: left;
}
#public-upload #emptycontent li {
#public-upload .emptycontent li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 0;
}
#public-upload #emptycontent li img {
#public-upload .emptycontent li img {
margin-right: 5px;
position: relative;
top: 2px;

18
apps/files_sharing/css/public.scss
View file

@ -101,21 +101,21 @@ thead {
margin: 0 auto;
}
#emptycontent {
.emptycontent {
&.has-note {
margin-top: 5vh;
}
}
#public-upload #emptycontent h2 {
#public-upload .emptycontent h2 {
margin: 10px 0 5px 0;
}
#public-upload #emptycontent h2+p {
#public-upload .emptycontent h2+p {
margin-bottom: 30px;
}
#public-upload #emptycontent .icon-folder {
#public-upload .emptycontent .icon-folder {
height: 16px;
width: 16px;
background-size: 16px;
@ -126,13 +126,13 @@ thead {
opacity: 1;
}
#public-upload #emptycontent #displayavatar .icon-folder {
#public-upload .emptycontent #displayavatar .icon-folder {
height: 48px;
width: 48px;
background-size: 48px;
}
#public-upload #emptycontent .button {
#public-upload .emptycontent .button {
display: inline-block;
height: auto;
width: auto;
@ -146,20 +146,20 @@ thead {
padding-left: 42px;
}
#public-upload #emptycontent ul {
#public-upload .emptycontent ul {
width: 230px;
margin: 5px auto 5vh;
text-align: left;
}
#public-upload #emptycontent li {
#public-upload .emptycontent li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 0;
}
#public-upload #emptycontent li img {
#public-upload .emptycontent li img {
margin-right: 5px;
position: relative;
top: 2px;

28
apps/files_sharing/css/publicView.css
View file

@ -122,19 +122,19 @@ thead {
margin: 0 auto;
}
#emptycontent.has-note {
.emptycontent.has-note {
margin-top: 5vh;
}
#public-upload #emptycontent h2 {
#public-upload .emptycontent h2 {
margin: 10px 0 5px 0;
}
#public-upload #emptycontent h2 + p {
#public-upload .emptycontent h2 + p {
margin-bottom: 30px;
}
#public-upload #emptycontent .icon-folder {
#public-upload .emptycontent .icon-folder {
height: 16px;
width: 16px;
background-size: 16px;
@ -145,13 +145,13 @@ thead {
opacity: 1;
}
#public-upload #emptycontent #displayavatar .icon-folder {
#public-upload .emptycontent #displayavatar .icon-folder {
height: 48px;
width: 48px;
background-size: 48px;
}
#public-upload #emptycontent .button {
#public-upload .emptycontent .button {
display: inline-block;
height: auto;
width: auto;
@ -165,20 +165,20 @@ thead {
padding-left: 42px;
}
#public-upload #emptycontent ul {
#public-upload .emptycontent ul {
width: 230px;
margin: 5px auto 5vh;
text-align: left;
}
#public-upload #emptycontent li {
#public-upload .emptycontent li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 0;
}
#public-upload #emptycontent li img {
#public-upload .emptycontent li img {
margin-right: 5px;
position: relative;
top: 2px;
@ -261,9 +261,9 @@ thead {
}
/* hide size and date columns */
table th#headerSize,
table th.column-size,
table td.filesize,
table th#headerDate,
table th.column-mtime,
table td.date {
display: none;
}
@ -286,12 +286,12 @@ table td.date {
}
/* some padding for better clickability */
#fileList a.action img {
.files-fileList a.action img {
padding: 0 6px 0 12px;
}
/* hide text of the actions on mobile */
#fileList a.action:not(.menuitem) span {
.files-fileList a.action:not(.menuitem) span {
display: none;
}
@ -312,7 +312,7 @@ table td.date {
padding: 0 20px;
}
#emptycontent {
.emptycontent {
margin-top: 10vh;
}
}

12
apps/files_sharing/js/app.js
View file

@ -46,7 +46,7 @@ OCA.Sharing.App = {
this._extendFileList(this._inFileList)
this._inFileList.appName = t('files_sharing', 'Shared with you')
this._inFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>'
this._inFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>'
+ '<h2>' + t('files_sharing', 'Nothing shared with you yet') + '</h2>'
+ '<p>' + t('files_sharing', 'Files and folders others share with you will show up here') + '</p>')
return this._inFileList
@ -72,7 +72,7 @@ OCA.Sharing.App = {
this._extendFileList(this._outFileList)
this._outFileList.appName = t('files_sharing', 'Shared with others')
this._outFileList.$el.find('#emptycontent').html('<div class="icon-shared"></div>'
this._outFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-shared"></div>'
+ '<h2>' + t('files_sharing', 'Nothing shared yet') + '</h2>'
+ '<p>' + t('files_sharing', 'Files and folders you share will show up here') + '</p>')
return this._outFileList
@ -98,7 +98,7 @@ OCA.Sharing.App = {
this._extendFileList(this._linkFileList)
this._linkFileList.appName = t('files_sharing', 'Shared by link')
this._linkFileList.$el.find('#emptycontent').html('<div class="icon-public"></div>'
this._linkFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-public"></div>'
+ '<h2>' + t('files_sharing', 'No shared links') + '</h2>'
+ '<p>' + t('files_sharing', 'Files and folders you share by link will show up here') + '</p>')
return this._linkFileList
@ -126,7 +126,7 @@ OCA.Sharing.App = {
this._extendFileList(this._deletedFileList)
this._deletedFileList.appName = t('files_sharing', 'Deleted shares')
this._deletedFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
this._deletedFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
+ '<h2>' + t('files_sharing', 'No deleted shares') + '</h2>'
+ '<p>' + t('files_sharing', 'Shares you deleted will show up here') + '</p>')
return this._deletedFileList
@ -155,7 +155,7 @@ OCA.Sharing.App = {
this._extendFileList(this._pendingFileList)
this._pendingFileList.appName = t('files_sharing', 'Pending shares')
this._pendingFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
this._pendingFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
+ '<h2>' + t('files_sharing', 'No pending shares') + '</h2>'
+ '<p>' + t('files_sharing', 'Shares you have received but not confirmed will show up here') + '</p>')
return this._pendingFileList
@ -181,7 +181,7 @@ OCA.Sharing.App = {
this._extendFileList(this._overviewFileList)
this._overviewFileList.appName = t('files_sharing', 'Shares')
this._overviewFileList.$el.find('#emptycontent').html('<div class="icon-share"></div>'
this._overviewFileList.$el.find('.emptyfilelist.emptycontent').html('<div class="icon-share"></div>'
+ '<h2>' + t('files_sharing', 'No shares') + '</h2>'
+ '<p>' + t('files_sharing', 'Shares will show up here') + '</p>')
return this._overviewFileList

2
apps/files_sharing/js/files_drop.js
View file

@ -140,7 +140,7 @@
});
$('#public-upload .button.icon-upload').click(function(e) {
e.preventDefault();
$('#public-upload #emptycontent input').focus().trigger('click');
$('#public-upload .emptycontent input').focus().trigger('click');
});
window.onbeforeunload = function() {
return self.confirmBeforeUnload();

4
apps/files_sharing/js/public.js
View file

@ -60,7 +60,7 @@ OCA.Sharing.PublicApp = {
}
// file list mode ?
if ($el.find('#filestable').length) {
if ($el.find('.files-filestable').length) {
var filesClient = new OC.Files.Client({
host: OC.getHost(),
port: OC.getPort(),
@ -277,7 +277,7 @@ OCA.Sharing.PublicApp = {
};
this.fileList.updateEmptyContent = function() {
this.$el.find('#emptycontent .uploadmessage').text(
this.$el.find('.emptycontent .uploadmessage').text(
t('files_sharing', 'You can upload into this folder')
);
OCA.Files.FileList.prototype.updateEmptyContent.apply(this, arguments);

6
apps/files_sharing/js/sharedfilelist.js
View file

@ -17,7 +17,7 @@
* @classdesc Sharing file list.
* Contains both "shared with others" and "shared with you" modes.
*
* @param $el container element with existing markup for the #controls
* @param $el container element with existing markup for the .files-controls
* and a table
* @param [options] map of options, see other parameters
* @param {boolean} [options.sharedWithUser] true to return files shared with
@ -158,8 +158,8 @@
var dir = this.getCurrentDirectory()
if (dir === '/') {
// root has special permissions
this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty)
this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty)
this.$el.find('.emptyfilelist.emptycontent').toggleClass('hidden', !this.isEmpty)
this.$el.find('.files-filestable thead th').toggleClass('hidden', this.isEmpty)
// hide expiration date header for non link only shares
if (!this._linksOnly) {

4
apps/files_sharing/src/services/ConfigService.js
View file

@ -32,8 +32,8 @@ export default class Config {
* @memberof Config
*/
get isPublicUploadEnabled() {
return document.getElementById('filestable')
&& document.getElementById('filestable').dataset.allowPublicUpload === 'yes'
return document.getElementsByClassName('files-filestable')[0]
&& document.getElementsByClassName('files-filestable')[0].dataset.allowPublicUpload === 'yes'
}
/**

14
apps/files_sharing/templates/list.php
View file

@ -1,7 +1,7 @@
<?php /** @var \OCP\IL10N $l */ ?>
<div id='notification'></div>
<div id="emptycontent" class="hidden"></div>
<div class="emptyfilelist emptycontent hidden"></div>
<input type="hidden" name="dir" value="" id="dir">
@ -10,23 +10,23 @@
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
</div>
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<thead>
<tr>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
</div>
</th>
<th id="headerDate" class="hidden column-mtime">
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a>
<th class="hidden column-mtime">
<a class="columntitle" data-sort="mtime"><span><?php p($l->t('Share time')); ?></span><span class="sort-indicator"></span></a>
</th>
<th class="hidden column-expiration">
<a class="columntitle"><span><?php p($l->t('Expiration date')); ?></span></a>
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

2
apps/files_sharing/templates/public.php
View file

@ -105,7 +105,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
<div id="public-upload">
<div
id="emptycontent"
class="<?php if (!empty($_['note'])) { ?>has-note<?php } ?>">
class="emptycontent <?php if (!empty($_['note'])) { ?>has-note<?php } ?>">
<?php if ($_['shareOwner']) { ?>
<div id="displayavatar"><div class="avatardiv"></div></div>
<h2><?php p($l->t('Upload files to %s', [$_['shareOwner']])) ?></h2>

2
apps/files_sharing/tests/js/appSpec.js
View file

@ -95,7 +95,7 @@ describe('OCA.Sharing.App tests', function() {
var setActiveViewStub = sinon.stub(OCA.Files.App, 'setActiveView');
// create dummy table so we can click the dom
var $table = '<table><thead></thead><tbody id="fileList"></tbody></table>';
var $table = '<table><thead></thead><tbody class="files-fileList"></tbody></table>';
$('#app-content-sharingin').append($table);
App._inFileList = null;

10
apps/files_sharing/tests/js/publicAppSpec.js
View file

@ -59,7 +59,7 @@ describe('OCA.Sharing.PublicApp tests', function() {
'<input type="hidden" id="dir" value="/subdir"/>' +
'<input type="hidden" id="permissions" value="31"/>' +
// dummy controls
'<div id="controls">' +
'<div class="files-controls">' +
' <div class="actions creatable"></div>' +
' <div class="notCreatable"></div>' +
'</div>' +
@ -67,9 +67,9 @@ describe('OCA.Sharing.PublicApp tests', function() {
'<input type="file" id="file_upload_start" name="files[]" multiple="multiple">' +
// dummy table
// TODO: at some point this will be rendered by the fileList class itself!
'<table id="filestable" class="list-container view-grid">' +
'<table class="files-filestable list-container view-grid">' +
'<thead><tr>' +
'<th id="headerName" class="hidden column-name">' +
'<th class="hidden column-name">' +
'<input type="checkbox" id="select_all_files" class="select-all">' +
'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
'<span class="selectedActions hidden">' +
@ -78,11 +78,11 @@ describe('OCA.Sharing.PublicApp tests', function() {
'<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' +
'<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' +
'</tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
// TODO: move to handlebars template
'<div id="emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' +
'<div class="emptyfilelist emptycontent"><h2>Empty content message</h2><p class="uploadmessage">Upload message</p></div>' +
'<div class="nofilterresults hidden"></div>' +
'</div>'
);

4
apps/files_sharing/tests/js/shareSpec.js
View file

@ -46,9 +46,9 @@ describe('OCA.Sharing.Util tests', function() {
// dummy file list
var $div = $(
'<div id="listContainer">' +
'<table id="filestable" class="list-container view-grid">' +
'<table class="files-filestable list-container view-grid">' +
'<thead></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'</table>' +
'</div>');
$('#content').append($div);

6
apps/files_trashbin/src/filelist.js
View file

@ -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) {

2
apps/files_trashbin/src/trash.scss
View file

@ -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;
}

20
apps/files_trashbin/templates/index.php
View file

@ -1,10 +1,10 @@
<?php /** @var \OCP\IL10N $l */ ?>
<div id="controls">
<div id="file_action_panel"></div>
<div class="files-controls">
<div></div>
</div>
<div id='notification'></div>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-delete"></div>
<h2><?php p($l->t('No deleted files')); ?></h2>
<p><?php p($l->t('You will be able to recover deleted files from here')); ?></p>
@ -18,19 +18,19 @@
<p></p>
</div>
<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<table class="files-filestable list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
<thead>
<tr>
<th id="headerSelection" class="hidden column-selection">
<th class="hidden column-selection">
<input type="checkbox" id="select_all_trash" class="select-all checkbox"/>
<label for="select_all_trash">
<span class="hidden-visually"><?php p($l->t('Select all'))?></span>
</label>
</th>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
<span id="selectedActionsList" class='selectedActions'>
<span class='selectedActions'>
<a href="" class="actions-selected">
<span class="icon icon-more"></span>
<span><?php p($l->t('Actions'))?></span>
@ -38,12 +38,12 @@
</span>
</div>
</th>
<th id="headerDate" class="hidden column-mtime">
<th class="hidden column-mtime">
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Deleted')); ?></span><span class="sort-indicator"></span></a>
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

12
apps/files_trashbin/tests/js/filelistSpec.js
View file

@ -49,24 +49,24 @@ describe('OCA.Trashbin.FileList tests', function () {
// files app)
'<input type="hidden" id="permissions" value="31"></input>' +
// dummy controls
'<div id="controls">' +
'<div class="files-controls">' +
' <div class="actions creatable"></div>' +
' <div class="notCreatable"></div>' +
'</div>' +
// dummy table
// TODO: at some point this will be rendered by the fileList class itself!
'<table id="filestable" class="list-container view-grid">' +
'<thead><tr><th id="headerName" class="hidden">' +
'<table class="files-filestable list-container view-grid">' +
'<thead><tr><th class="hidden column-name">' +
'<input type="checkbox" id="select_all_trash" class="select-all">' +
'<span class="name">Name</span>' +
'<span class="selectedActions hidden">' +
'<a href="" class="actions-selected"><span class="icon icon-more"></span><span>Actions</span>' +
'</span>' +
'</th></tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
'<div id="emptycontent">Empty content message</div>' +
'<div class="emptyfilelist emptycontent">Empty content message</div>' +
'</div>'
);
@ -161,7 +161,7 @@ describe('OCA.Trashbin.FileList tests', function () {
it('links the breadcrumb to the trashbin view', function () {
fileList.changeDirectory('/subdir', false, true);
fakeServer.respond();
var $crumbs = fileList.$el.find('#controls .crumb');
var $crumbs = fileList.$el.find('.files-controls .crumb');
expect($crumbs.length).toEqual(3);
expect($crumbs.eq(1).find('a').text()).toEqual('Home');
expect($crumbs.eq(1).find('a').attr('href'))

12
apps/systemtags/src/systemtagsfilelist.js
View file

@ -30,7 +30,7 @@
* @classdesc SystemTags file list.
* Contains a list of files filtered by system tags.
*
* @param {object} $el container element with existing markup for the #controls and a table
* @param {object} $el container element with existing markup for the .files-controls and a table
* @param {Array} [options] map of options, see other parameters
* @param {Array.<string>} [options.systemTagIds] array of system tag ids to
* filter by
@ -75,7 +75,7 @@
OC.Plugins.attach('OCA.SystemTags.FileList', this)
const $controls = this.$el.find('#controls').empty()
const $controls = this.$el.find('.files-controls').empty()
_.defer(_.bind(this._getLastUsedTags, this))
this._initFilterField($controls)
@ -248,7 +248,7 @@
if (!this._systemTagIds.length) {
// no tags selected
this.$el
.find('#emptycontent')
.find('.emptyfilelist.emptycontent')
.html(
'<div class="icon-systemtags"></div>'
+ '<h2>'
@ -261,7 +261,7 @@
} else {
// tags selected but no results
this.$el
.find('#emptycontent')
.find('.emptyfilelist.emptycontent')
.html(
'<div class="icon-systemtags"></div>'
+ '<h2>'
@ -273,10 +273,10 @@
)
}
this.$el
.find('#emptycontent')
.find('.emptyfilelist.emptycontent')
.toggleClass('hidden', !this.isEmpty)
this.$el
.find('#filestable thead th')
.find('.files-filestable thead th')
.toggleClass('hidden', this.isEmpty)
} else {
OCA.Files.FileList.prototype.updateEmptyContent.apply(

16
apps/systemtags/templates/list.php
View file

@ -1,7 +1,7 @@
<div id="controls">
<div class="files-controls">
</div>
<div id="emptycontent" class="hidden">
<div class="emptyfilelist emptycontent hidden">
<div class="icon-folder"></div>
<h2><?php p($l->t('No files in here')); ?></h2>
<p class="uploadmessage hidden"></p>
@ -13,23 +13,23 @@
<p></p>
</div>
<table id="filestable" data-preview-x="250" data-preview-y="250" class="list-container">
<table data-preview-x="250" data-preview-y="250" class="files-filestable list-container">
<thead>
<tr>
<th id='headerName' class="hidden column-name">
<div id="headerName-container">
<th class="hidden column-name">
<div class="column-name-container">
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
</div>
</th>
<th id="headerSize" class="hidden column-size">
<th class="hidden column-size">
<a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
</th>
<th id="headerDate" class="hidden column-mtime">
<th class="hidden column-mtime">
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
</th>
</tr>
</thead>
<tbody id="fileList">
<tbody class="files-fileList">
</tbody>
<tfoot>
</tfoot>

14
apps/systemtags/tests/js/systemtagsfilelistSpec.js
View file

@ -32,12 +32,12 @@ describe('OCA.SystemTags.FileList tests', function() {
// init horrible parameters
'<input type="hidden" id="dir" value="/"></input>' +
'<input type="hidden" id="permissions" value="31"></input>' +
'<div id="controls"></div>' +
'<div class="files-controls"></div>' +
// dummy table
// TODO: at some point this will be rendered by the fileList class itself!
'<table id="filestable">' +
'<table class="files-filestable">' +
'<thead><tr>' +
'<th id="headerName" class="hidden column-name">' +
'<th class="hidden column-name">' +
'<input type="checkbox" id="select_all_files" class="select-all">' +
'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
'<span class="selectedActions hidden">' +
@ -46,10 +46,10 @@ describe('OCA.SystemTags.FileList tests', function() {
'<a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a>' +
'</th>' +
'</tr></thead>' +
'<tbody id="fileList"></tbody>' +
'<tbody class="files-fileList"></tbody>' +
'<tfoot></tfoot>' +
'</table>' +
'<div id="emptycontent">Empty content message</div>' +
'<div class="emptyfilelist emptycontent">Empty content message</div>' +
'</div>'
);
});
@ -175,7 +175,7 @@ describe('OCA.SystemTags.FileList tests', function() {
fileList.reload();
expect(fileList.$el.find('#emptycontent').hasClass('hidden')).toEqual(false);
expect(fileList.$el.find('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(false);
expect(getFilteredFilesSpec.notCalled).toEqual(true);
});
@ -233,7 +233,7 @@ describe('OCA.SystemTags.FileList tests', function() {
requestDeferred.resolve(207, testFiles);
return reloading.then(function() {
expect(fileList.$el.find('#emptycontent').hasClass('hidden')).toEqual(true);
expect(fileList.$el.find('.emptyfilelist.emptycontent').hasClass('hidden')).toEqual(true);
expect(fileList.$el.find('tbody>tr').length).toEqual(4);
}).then(done, done);
});

10
core/css/mobile.css
View file

@ -112,12 +112,12 @@
}
/* position controls for apps with app-navigation */
#app-navigation + #app-content #controls {
#app-navigation + #app-content .files-controls {
padding-left: 44px;
}
/* .viewer-mode is when text editor, PDF viewer, etc is open */
#body-user .app-files.viewer-mode #controls {
#body-user .app-files.viewer-mode .files-controls {
padding-left: 0 !important;
}
@ -134,13 +134,13 @@
display: none;
}
#body-settings #controls {
#body-settings .files-controls {
min-width: 1024px !important;
}
/* do not show dates in filepicker */
#oc-dialog-filepicker-content .filelist #headerSize,
#oc-dialog-filepicker-content .filelist #headerDate,
#oc-dialog-filepicker-content .filelist .column-size,
#oc-dialog-filepicker-content .filelist .column-mtime,
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
display: none;

10
core/css/mobile.scss
View file

@ -98,12 +98,12 @@
}
/* position controls for apps with app-navigation */
#app-navigation + #app-content #controls {
#app-navigation + #app-content .files-controls {
padding-left: 44px;
}
/* .viewer-mode is when text editor, PDF viewer, etc is open */
#body-user .app-files.viewer-mode #controls {
#body-user .app-files.viewer-mode .files-controls {
padding-left: 0 !important;
}
.app-files.viewer-mode #app-navigation-toggle {
@ -118,13 +118,13 @@
#usersearchform {
display: none;
}
#body-settings #controls {
#body-settings .files-controls {
min-width: variables.$breakpoint-mobile !important;
}
/* do not show dates in filepicker */
#oc-dialog-filepicker-content .filelist #headerSize,
#oc-dialog-filepicker-content .filelist #headerDate,
#oc-dialog-filepicker-content .filelist .column-size,
#oc-dialog-filepicker-content .filelist .column-mtime,
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
display: none;

18
core/css/server.css
View file

@ -210,7 +210,7 @@ body {
}
/* CONTENT ------------------------------------------------------------------ */
#controls {
.files-controls {
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
@ -229,7 +229,7 @@ body {
}
/* position controls for apps with app-navigation */
.viewer-mode #app-navigation + #app-content #controls {
.viewer-mode #app-navigation + #app-content .files-controls {
left: 0;
}
@ -237,7 +237,7 @@ body {
box-sizing: border-box;
}
#controls .actions > div > .button, #controls .actions > div button, #controls .actions > .button, #controls .actions button {
.files-controls .actions > div > .button, .files-controls .actions > div button, .files-controls .actions > .button, .files-controls .actions button {
box-sizing: border-box;
display: inline-block;
display: flex;
@ -247,7 +247,7 @@ body {
align-items: center;
justify-content: center;
}
#controls .actions > div .button.hidden, #controls .actions .button.hidden {
.files-controls .actions > div .button.hidden, .files-controls .actions .button.hidden {
display: none;
}
@ -4905,12 +4905,12 @@ kbd {
}
/* position controls for apps with app-navigation */
#app-navigation + #app-content #controls {
#app-navigation + #app-content .files-controls {
padding-left: 44px;
}
/* .viewer-mode is when text editor, PDF viewer, etc is open */
#body-user .app-files.viewer-mode #controls {
#body-user .app-files.viewer-mode .files-controls {
padding-left: 0 !important;
}
@ -4927,13 +4927,13 @@ kbd {
display: none;
}
#body-settings #controls {
#body-settings .files-controls {
min-width: 1024px !important;
}
/* do not show dates in filepicker */
#oc-dialog-filepicker-content .filelist #headerSize,
#oc-dialog-filepicker-content .filelist #headerDate,
#oc-dialog-filepicker-content .filelist .column-size,
#oc-dialog-filepicker-content .filelist .column-mtime,
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
display: none;

8
core/css/styles.css
View file

@ -209,7 +209,7 @@ body {
}
/* CONTENT ------------------------------------------------------------------ */
#controls {
.files-controls {
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
@ -228,7 +228,7 @@ body {
}
/* position controls for apps with app-navigation */
.viewer-mode #app-navigation + #app-content #controls {
.viewer-mode #app-navigation + #app-content .files-controls {
left: 0;
}
@ -236,7 +236,7 @@ body {
box-sizing: border-box;
}
#controls .actions > div > .button, #controls .actions > div button, #controls .actions > .button, #controls .actions button {
.files-controls .actions > div > .button, .files-controls .actions > div button, .files-controls .actions > .button, .files-controls .actions button {
box-sizing: border-box;
display: inline-block;
display: flex;
@ -246,7 +246,7 @@ body {
align-items: center;
justify-content: center;
}
#controls .actions > div .button.hidden, #controls .actions .button.hidden {
.files-controls .actions > div .button.hidden, .files-controls .actions .button.hidden {
display: none;
}

6
core/css/styles.scss
View file

@ -195,7 +195,7 @@ body {
/* CONTENT ------------------------------------------------------------------ */
#controls {
.files-controls {
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
@ -214,7 +214,7 @@ body {
/* position controls for apps with app-navigation */
.viewer-mode #app-navigation + #app-content #controls {
.viewer-mode #app-navigation + #app-content .files-controls {
left: 0;
}
@ -222,7 +222,7 @@ body {
box-sizing: border-box;
}
#controls .actions {
.files-controls .actions {
> div,
& {
> .button, button {

8
core/templates/filepicker.html
View file

@ -22,20 +22,20 @@
<table id="picker-filestable" class="filelist list-container view-grid">
<thead>
<tr>
<th id="headerName" class="column-name">
<div id="headerName-container">
<th class="column-name">
<div id="column-name-container">
<a class="name sort columntitle" data-sort="name" tabindex="0">
<span>{nameCol}</span>
<span class="sort-indicator hidden icon-triangle-n"></span>
</a>
</div>
</th>
<th id="headerSize" class="column-size">
<th class="column-size">
<a class="size sort columntitle" data-sort="size" tabindex="0">
<span>{sizeCol}</span>
<span class="sort-indicator hidden icon-triangle-n"></span></a>
</th>
<th id="headerDate" class="column-mtime">
<th class="column-mtime">
<a id="modified" class="columntitle" data-sort="mtime" tabindex="0">
<span>{modifiedCol}</span>
<span class="sort-indicator hidden icon-triangle-n"></span></a>

4
dist/files_sharing-files_sharing.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/files_sharing-files_sharing.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/files_sharing-files_sharing_tab.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/files_sharing-files_sharing_tab.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/files_trashbin-files_trashbin.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/files_trashbin-files_trashbin.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/systemtags-systemtags.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/systemtags-systemtags.js.map vendored
View file

File diff suppressed because one or more lines are too long

6
tests/acceptance/features/bootstrap/FileListContext.php
View file

@ -92,7 +92,7 @@ class FileListContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function breadcrumbs($fileListAncestor) {
return Locator::forThe()->css("#controls .breadcrumb")->
return Locator::forThe()->css(".files-controls .breadcrumb")->
descendantOf($fileListAncestor)->
describedAs("Breadcrumbs in file list");
}
@ -101,7 +101,7 @@ class FileListContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function createMenuButton($fileListAncestor) {
return Locator::forThe()->css("#controls .button.new")->
return Locator::forThe()->css(".files-controls .button.new")->
descendantOf($fileListAncestor)->
describedAs("Create menu button in file list");
}
@ -186,7 +186,7 @@ class FileListContext implements Context, ActorAwareInterface {
* @return Locator
*/
public static function rowForFile($fileListAncestor, $fileName) {
return Locator::forThe()->xpath("//*[@id = 'fileList']//span[contains(concat(' ', normalize-space(@class), ' '), ' nametext ') and normalize-space() = '$fileName']/ancestor::tr")->
return Locator::forThe()->xpath("//*[@class = 'files-fileList']//span[contains(concat(' ', normalize-space(@class), ' '), ' nametext ') and normalize-space() = '$fileName']/ancestor::tr")->
descendantOf($fileListAncestor)->
describedAs("Row for file $fileName in file list");
}