Replace input checkbox CSS selector with .electCheckBox

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 20f402e90b604f5726c8aff9075499119ef80db9..d8336847e005f6b2f1b985987a4124d5aee816d0 100644 (file)
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -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;
 }

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 15f257bba92493a491e4fe271314081f83cd09b6..67b0adc6553bf2a837bc5a6db64db5548b2d5eee 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -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')});
                                                                });