styling: labels / checkboxes
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/9d1b02c9 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/9d1b02c9 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/9d1b02c9 Branch: refs/heads/doc-design Commit: 9d1b02c96a76ac3e76a2a9691624f5c85f9941b8 Parents: f39e053 Author: Robert Kowalski <[email protected]> Authored: Thu Nov 13 22:33:47 2014 +0100 Committer: Robert Kowalski <[email protected]> Committed: Fri Nov 21 11:49:06 2014 +0100 ---------------------------------------------------------------------- app/addons/documents/assets/less/documents.less | 31 +++++++++++++++----- .../documents/templates/all_docs_item.html | 11 +++++-- app/addons/documents/views.js | 4 +-- assets/less/variables.less | 9 +++++- 4 files changed, 41 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/9d1b02c9/app/addons/documents/assets/less/documents.less ---------------------------------------------------------------------- diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less index 6404a0a..7e2b119 100644 --- a/app/addons/documents/assets/less/documents.less +++ b/app/addons/documents/assets/less/documents.less @@ -149,17 +149,32 @@ button.string-edit[disabled] { } } + #doc-list { + label.label-checkbox-doclist { + // https://code.google.com/p/chromium/issues/detail?id=411065 + -webkit-user-select: none; + } + /* checkboxes in doc-list */ + label.label-checkbox-doclist:before { + background-color: @docCheckBoxUncheckedBG; + border: @docCheckBoxUncheckedBorder; + } + label.label-checkbox-doclist:hover:before { + border: @docCheckBoxHoverBorder; + } + input[type='checkbox']:checked + label::before { + border: @docCheckBoxCheckedBorder; + background-color: @docCheckBoxCheckedBG; + } padding: 30px 12px 0 12px; .all-docs-item { - .show-select { - .select { - display:block; - width: 10%; - } - .doc-item { - width: 90%; - } + .custom-inputs { + display:block; + width: 10%; + } + .doc-item { + width: 90%; } } div.doc-row { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/9d1b02c9/app/addons/documents/templates/all_docs_item.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/all_docs_item.html b/app/addons/documents/templates/all_docs_item.html index 93033be..2e6cee3 100644 --- a/app/addons/documents/templates/all_docs_item.html +++ b/app/addons/documents/templates/all_docs_item.html @@ -12,11 +12,16 @@ License for the specific language governing permissions and limitations under the License. */%> -<div class="select"><input <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"></div> -<div class="doc-item"> +<div class="custom-inputs"> + <div class="checkbox inline"> + <input id="checkbox-<%- docIdentifier %>" <%- checked ? 'checked="checked"' : '' %> type="checkbox" class="js-row-select"> + <label class="label-checkbox-doclist" for="checkbox-<%- docIdentifier %>"></label> + </div> +</div> +<div class="doc-item"> <header> - <span class="header-keylabel"><%- doc.isEditable() ? 'id' : 'key' %></span> <span class="header-doc-id">"<%- doc.isEditable() ? docId : doc.get('key') %>"</span> + <span class="header-keylabel"><%- doc.isEditable() ? 'id' : 'key' %></span> <span class="header-doc-id">"<%- docIdentifier %>"</span> <% if (doc.isEditable()) { %> <div class="pull-right"> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/9d1b02c9/app/addons/documents/views.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index de9b0e7..3efb1d2 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -196,7 +196,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions) serialize: function() { return { - docId: this.model.get('_id'), + docIdentifier: this.model.isEditable() ? this.model.get('_id') : this.model.get('key'), doc: this.model, checked: this.checked }; @@ -369,7 +369,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions) }, toggleDocument: function (event) { - var $row = this.$(event.target).closest('tr'), + var $row = this.$(event.target).closest('.doc-row'), docId = $row.attr('data-id'), rev = this.collection.get(docId).get('_rev'), data = {_id: docId, _rev: rev, _deleted: true}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/9d1b02c9/assets/less/variables.less ---------------------------------------------------------------------- diff --git a/assets/less/variables.less b/assets/less/variables.less index 87827c9..f1ad02a 100644 --- a/assets/less/variables.less +++ b/assets/less/variables.less @@ -63,13 +63,20 @@ @breadcrumbArrow: #999999; @breadcrumbBorder: @brandPrimary; -/* document-header in list */ +/* document-header in doclist */ @docHeaderBG: #3a3a3a; @docHeaderBorderBottom: #2a2a2a; @docHeaderOtherBorders: #000; @docHeaderLabels: #909090; @docHeaderDocId: @red; +/* checkboxes in doc-list */ +@docCheckBoxUncheckedBG: #EFEFEF; +@docCheckBoxUncheckedBorder: 2px solid #999; +@docCheckBoxHoverBorder: 2px solid #fff; +@docCheckBoxCheckedBorder: 2px solid #000; +@docCheckBoxCheckedBG: #3a3a3a; + /* sidebar */ @sidebarBG: #F2F2F2; @sidebarWidth: 330px;
