upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-12 10:10:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

Replace input checkbox CSS selector with .electCheckBox

Browse source
This commit is contained in:
Vincent Petry 2014-12-11 18:20:04 +01:00
parent 81e9d43e23
commit a89aad05c0
2 changed files with 18 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/files/css/files.css
View file

@ -357,7 +357,7 @@ table td.filename .uploadtext {
}
/* File checkboxes */
#fileList tr td.filename>input[type="checkbox"]:first-child {
#fileList tr td.filename>.selectCheckBox {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
@ -366,38 +366,34 @@ table td.filename .uploadtext {
margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
}
/* Show checkbox when hovering, checked, or selected */
#fileList tr:hover td.filename>input[type="checkbox"]:first-child,
#fileList tr:focus td.filename>input[type="checkbox"]:first-child,
#fileList tr td.filename>input[type="checkbox"]:checked:first-child,
#fileList tr.selected td.filename>input[type="checkbox"]:first-child {
#fileList tr:hover td.filename>.selectCheckBox,
#fileList tr:focus td.filename>.selectCheckBox,
#fileList tr td.filename>.selectCheckBox:checked,
#fileList tr.selected td.filename>.selectCheckBox {
opacity: 1;
}
.lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
.lte9 #fileList tr:focus td.filename>input[type="checkbox"]:first-child,
.lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
.lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
.lte9 #fileList tr:hover td.filename>.selectCheckBox,
.lte9 #fileList tr:focus td.filename>.selectCheckBox,
.lte9 #fileList tr td.filename>.selectCheckBox[checked=checked],
.lte9 #fileList tr.selected td.filename>.selectCheckBox {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
/* Use label to have bigger clickable size for checkbox */
#fileList tr td.filename>input[type="checkbox"] + label,
#fileList tr td.filename>.selectCheckBox + label,
.select-all + label {
height: 50px;
position: absolute;
width: 50px;
z-index: 5;
}
#fileList tr td.filename>input[type="checkbox"]{
#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;
}
#fileList tr td.filename>input[type="checkbox"] + label {
left: 0;
top: 0;
}
.select-all + label {
top: 0;
}

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

@ -206,7 +206,7 @@
this.$el.on('show', this._onResize);
this.$fileList.on('click','td.filename>a.name', _.bind(this._onClickFile, this));
this.$fileList.on('change', 'td.filename>input:checkbox', _.bind(this._onClickFileCheckbox, this));
this.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(this._onClickFileCheckbox, this));
this.$el.on('urlChanged', _.bind(this._onUrlChanged, this));
this.$el.find('.select-all').click(_.bind(this._onClickSelectAll, this));
this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this));
@ -281,7 +281,7 @@
* @param state true to select, false to deselect
*/
_selectFileEl: function($tr, state) {
var $checkbox = $tr.find('td.filename>input:checkbox');
var $checkbox = $tr.find('td.filename>.selectCheckBox');
var oldData = !!this._selectedFiles[$tr.data('id')];
var data;
$checkbox.prop('checked', state);
@ -330,7 +330,7 @@
else {
this._lastChecked = $tr;
}
var $checkbox = $tr.find('td.filename>input:checkbox');
var $checkbox = $tr.find('td.filename>.selectCheckBox');
this._selectFileEl($tr, !$checkbox.prop('checked'));
this.updateSelectionSummary();
} else {
@ -372,7 +372,7 @@
*/
_onClickSelectAll: function(e) {
var checked = $(e.target).prop('checked');
this.$fileList.find('td.filename>input:checkbox').prop('checked', checked)
this.$fileList.find('td.filename>.selectCheckBox').prop('checked', checked)
.closest('tr').toggleClass('selected', checked);
this._selectedFiles = {};
this._selectionSummary.clear();
@ -560,7 +560,7 @@
this.$fileList.append(tr);
if (isAllSelected || this._selectedFiles[fileData.id]) {
tr.addClass('selected');
tr.find('input:checkbox').prop('checked', true);
tr.find('.selectCheckBox').prop('checked', true);
}
if (animate) {
tr.addClass('appear transparent');
@ -698,7 +698,7 @@
if (this._allowSelection) {
td.append(
'<input id="select-' + this.id + '-' + fileData.id +
'" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '">' +
'" type="checkbox" class="selectCheckBox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
'<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
'</label>'
);
@ -1526,7 +1526,7 @@
var fileEl = self.remove(file, {updateSummary: false});
// FIXME: not sure why we need this after the
// element isn't even in the DOM any more
fileEl.find('input[type="checkbox"]').prop('checked', false);
fileEl.find('.selectCheckBox').prop('checked', false);
fileEl.removeClass('selected');
self.fileSummary.remove({type: fileEl.attr('data-type'), size: fileEl.attr('data-size')});
});