From 415ac9b3ac0e3f1f563b570f658d2622fee66c3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Thu, 28 Sep 2017 14:42:37 +0200 Subject: [PATCH] Move favorite mark to the top right corner of the thumbnail MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The favorite icon was shown on its own "column" (not a real column in the table, but a visual column achieved through margins and left positions). Now the icon was moved to the top right corner of the file thumbnail, and the thumbnail and file name were moved to the left to fill the space left by the "column". To keep the markup in line with its visual representation (and to ease the placing through CSS), the favorite mark is no longer prepended to the row, but appended to the thumbnail instead. In the same way, the thumbnail is no longer appended to the checkbox label, but to the link with the name of the file instead (although the checkbox is still shown at the bottom right corner of the thumbnail, and clicking on the thumbnail still selects the file). In order to show the "busy" state on a file the "icon-loading-small" CSS class is set to the parent element of the thumbnail, so the thumbnail is also wrapped now by another div with the same size and position as the label. Signed-off-by: Daniel Calviño Sánchez --- apps/files/css/files.scss | 38 ++++++++++++----------------- apps/files/js/filelist.js | 5 ++-- apps/files/js/tagsplugin.js | 2 +- apps/files/tests/js/filelistSpec.js | 8 +++--- core/search/css/results.css | 7 ------ 5 files changed, 22 insertions(+), 38 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 45c453e2b5..80a2b44ac1 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -232,9 +232,6 @@ table th#headerName { position: relative; height: 50px; } -.has-favorites #headerName-container { - padding-left: 50px; -} table th#headerSize, table td.filesize { text-align: right; @@ -296,7 +293,12 @@ table td.filename a.name { line-height: 50px; padding: 0; } -table td.filename label.icon-loading-small { +table td.filename .thumbnail-wrapper { + position: absolute; + width: 50px; + height: 50px; +} +table td.filename .thumbnail-wrapper.icon-loading-small { &:after { z-index: 10; } @@ -312,7 +314,6 @@ table td.filename .thumbnail { margin-left: 9px; margin-top: 9px; cursor: pointer; - float: left; position: absolute; z-index: 4; } @@ -322,12 +323,9 @@ table td.filename input.filename { margin-left: 48px; cursor: text; } -.has-favorites table td.filename input.filename { - margin-left: 52px; -} table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; } -table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; } +table td.filename .nametext, .modified, .column-last>span:first-child { float:left; padding:15px 0; } .modified, .column-last>span:first-child { position: relative; @@ -347,14 +345,14 @@ table td.filename .nametext { max-width: 800px; height: 100%; } +table td.filename .uploadtext { + position: absolute; + left: 55px; +} /* ellipsis on file names */ table td.filename .nametext .innernametext { max-width: calc(100% - 100px) !important; } -.has-favorites #fileList td.filename a.name { - left: 50px; - margin-right: 50px; -} .hide-hidden-files #fileList tr.hidden-file, .hide-hidden-files #fileList tr.hidden-file.dragging { @@ -481,9 +479,6 @@ table td.filename .uploadtext { left: 18px; z-index: 10; } -.has-favorites .select-all { - left: 68px; -} #fileList tr td.filename { position: relative; @@ -504,9 +499,10 @@ table td.filename .uploadtext { float: left; } #fileList tr td.filename .favorite-mark { + position: absolute; display: block; - float: left; - width: 30px; + top: -6px; + right: -6px; line-height: 100%; text-align: center; } @@ -570,8 +566,7 @@ a.action > img { margin-bottom: -1px; } -#fileList a.action, -#fileList div.favorite-mark { +#fileList a.action { display: inline; padding: 17px 8px; line-height: 50px; @@ -663,9 +658,6 @@ table tr.summary td { .summary .info { margin-left: 40px; } -.has-favorites .summary .info { - margin-left: 90px; -} table.dragshadow { width:auto; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index c636544e6c..2c97bf737b 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1207,18 +1207,17 @@ td.append( '' ); - } else { - td.append('
'); } var linkElem = $('').attr({ "class": "name", "href": linkUrl }); + linkElem.append('
'); + // from here work on the display name name = fileData.displayName || name; diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js index e6724e371c..caa7b731f7 100644 --- a/apps/files/js/tagsplugin.js +++ b/apps/files/js/tagsplugin.js @@ -175,7 +175,7 @@ } } var $icon = $(renderStar(isFavorite)); - $tr.find('td:first').prepend($icon); + $tr.find('td.filename .thumbnail').append($icon); return $tr; }; var oldElementToFile = fileList.elementToFile; diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 836a5e5ce7..8530e330d4 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -750,7 +750,7 @@ describe('OCA.Files.FileList tests', function() { doRename(); expect(fileList.findFileEl('Tu_after_three.txt').find('.thumbnail').parent().attr('class')) - .toEqual('icon-loading-small'); + .toContain('icon-loading-small'); deferredRename.reject(409); @@ -838,7 +838,7 @@ describe('OCA.Files.FileList tests', function() { fileList.move('One.txt', '/somedir'); expect(fileList.findFileEl('One.txt').find('.thumbnail').parent().attr('class')) - .toEqual('icon-loading-small'); + .toContain('icon-loading-small'); expect(moveStub.calledOnce).toEqual(true); @@ -935,7 +935,7 @@ describe('OCA.Files.FileList tests', function() { fileList.copy('One.txt', '/somedir'); expect(fileList.findFileEl('One.txt').find('.thumbnail').parent().attr('class')) - .toEqual('icon-loading-small'); + .toContain('icon-loading-small'); expect(copyStub.calledOnce).toEqual(true); @@ -3150,7 +3150,7 @@ describe('OCA.Files.FileList tests', function() { fileList.showFileBusyState('Two.jpg', true); expect($tr.hasClass('busy')).toEqual(true); expect($tr.find('.thumbnail').parent().attr('class')) - .toEqual('icon-loading-small'); + .toContain('icon-loading-small'); fileList.showFileBusyState('Two.jpg', false); diff --git a/core/search/css/results.css b/core/search/css/results.css index 2e3791a47f..5369a3093d 100644 --- a/core/search/css/results.css +++ b/core/search/css/results.css @@ -30,9 +30,6 @@ padding: 28px 0 28px 56px; font-size: 18px; } -.has-favorites:not(.hidden) ~ #searchresults .status { - padding-left: 102px; -} #searchresults .status.fixed { position: fixed; bottom: 0; @@ -67,10 +64,6 @@ background-position: right center; background-repeat: no-repeat; } -.has-favorites:not(.hidden) ~ #searchresults td.icon { - width: 86px; - background-size: 32px; -} #searchresults tr.template { display: none;