From f392e78d5b525abbb04057b91c0adfba212c00c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 29 Sep 2017 01:36:10 +0200 Subject: [PATCH] Move checkboxes to their own column MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The selection column is not only a visual column, but also a real column of the file list table. Unlike other columns whose width is reduced in space constrained screens the selection column must stay the same so the tapping area is large enough to be easily usable The selection column does not appear in the search results table, so its contents have to be explicitly aligned with those of the main table based on whether the main table has a selection column or not (using the "has-selection" CSS class in the same way as the "has-favorite" CSS class was being used when there was a column for favorite actions). In the tests the ":visible" selector can no longer be used. That selector matches elements with a width or height that is greater than zero, but the dimensions calculated in the unit tests are not reliable; the width of the link was zero before these changes, and now moving the checkbox to its own column causes the height of the link to become zero too, so it no longer matches the ":visible" selector even if it is not hidden. As hidding and showing the link is based on its "display" CSS property its value is the one checked now. Signed-off-by: Daniel Calviño Sánchez --- apps/files/css/files.scss | 41 +++++++---------------- apps/files/css/mobile.scss | 4 --- apps/files/js/filelist.js | 44 ++++++++++++++++++------- apps/files/templates/list.php | 10 +++--- apps/files/tests/js/filelistSpec.js | 22 ++++++++----- apps/files_trashbin/templates/index.php | 10 +++--- core/search/css/results.css | 9 ++++- 7 files changed, 77 insertions(+), 63 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 80a2b44ac1..65519ae2e1 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -438,46 +438,27 @@ table td.filename .uploadtext { opacity: .5; } +table td.selection { + padding: 0; +} + /* File checkboxes */ -#fileList tr td.filename>.selectCheckBox + label:before { +#fileList tr td.selection>.selectCheckBox + label:before { opacity: 0.3; - position: absolute; - bottom: 4px; - right: 0; - z-index: 10; } /* Show checkbox with full opacity when hovering, checked, or selected */ -#fileList tr:hover td.filename>.selectCheckBox + label:before, -#fileList tr:focus td.filename>.selectCheckBox + label:before, -#fileList tr td.filename>.selectCheckBox:checked + label:before, -#fileList tr.selected td.filename>.selectCheckBox + label:before { +#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 { opacity: 1; } /* Use label to have bigger clickable size for checkbox */ -#fileList tr td.filename>.selectCheckBox + label, +#fileList tr td.selection>.selectCheckBox + label, .select-all + label { - background-position: 30px 30px; - height: 50px; - position: absolute; - width: 50px; - z-index: 5; -} -#fileList tr td.filename>.selectCheckBox { - /* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute - * to prevent it to increase the height */ - position: absolute; - z-index: 10; -} -.select-all + label { - top: 0; -} -.select-all + label:before { - position: absolute; - top: 18px; - left: 18px; - z-index: 10; + padding: 16px; } #fileList tr td.filename { diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index eefc92c816..e7b75910fa 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -24,10 +24,6 @@ table td.date { table td { padding: 0; } -/* and accordingly fix left margin of file list summary on mobile */ -.summary .info { - margin-left: 105px; -} /* remove shift for multiselect bar to account for missing navigation */ table.multiselect thead { diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 2c97bf737b..0d45c29b25 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -332,7 +332,7 @@ this.$fileList.on('click','td.filename>a.name, td.filesize, td.date', _.bind(this._onClickFile, this)); - this.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(this._onClickFileCheckbox, this)); + this.$fileList.on('change', 'td.selection>.selectCheckBox', _.bind(this._onClickFileCheckbox, this)); this.$el.on('show', _.bind(this._onShow, this)); this.$el.on('urlChanged', _.bind(this._onUrlChanged, this)); this.$el.find('.select-all').click(_.bind(this._onClickSelectAll, this)); @@ -593,7 +593,7 @@ * @param {bool} state true to select, false to deselect */ _selectFileEl: function($tr, state, showDetailsView) { - var $checkbox = $tr.find('td.filename>.selectCheckBox'); + var $checkbox = $tr.find('td.selection>.selectCheckBox'); var oldData = !!this._selectedFiles[$tr.data('id')]; var data; $checkbox.prop('checked', state); @@ -649,7 +649,7 @@ else { this._lastChecked = $tr; } - var $checkbox = $tr.find('td.filename>.selectCheckBox'); + var $checkbox = $tr.find('td.selection>.selectCheckBox'); this._selectFileEl($tr, !$checkbox.prop('checked')); this.updateSelectionSummary(); } else { @@ -704,7 +704,7 @@ */ _onClickSelectAll: function(e) { var checked = $(e.target).prop('checked'); - this.$fileList.find('td.filename>.selectCheckBox').prop('checked', checked) + this.$fileList.find('td.selection>.selectCheckBox').prop('checked', checked) .closest('tr').toggleClass('selected', checked); this._selectedFiles = {}; this._selectionSummary.clear(); @@ -1063,6 +1063,13 @@ this.$fileList.empty(); + if (this._allowSelection) { + // The results table, which has no selection column, checks + // whether the main table has a selection column or not in order + // to align its contents with those of the main table. + this.$el.addClass('has-selection'); + } + // clear "Select all" checkbox this.$el.find('.select-all').prop('checked', false); @@ -1192,6 +1199,20 @@ path = this.getCurrentDirectory(); } + // selection td + if (this._allowSelection) { + td = $(''); + + td.append( + '' + ); + + tr.append(td); + } + // filename td td = $(''); @@ -1203,14 +1224,6 @@ else { linkUrl = this.getDownloadUrl(name, path, type === 'dir'); } - if (this._allowSelection) { - td.append( - '' - ); - } var linkElem = $('').attr({ "class": "name", "href": linkUrl @@ -2613,6 +2626,13 @@ */ _createSummary: function() { var $tr = $(''); + + if (this._allowSelection) { + // Dummy column for selection, as all rows must have the same + // number of columns. + $tr.append(''); + } + this.$el.find('tfoot').append($tr); return new OCA.Files.FileSummary($tr, {config: this._filesConfig}); diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index 46bd9351e3..483bdcd2e3 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -41,12 +41,14 @@ +