You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ro...@apache.org on 2014/10/22 11:49:06 UTC
fauxton commit: updated refs/heads/master to 506e814
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master 0c551d37e -> 506e81456
Query option tray style updates
- Query options and Api Url button and tray style updates
- New trays.less file added to group common styles across trays
- hover border now white
- Checkbox transition and effect updated
- API Url now remains in position after shrinking sidebar
- increased size of icon next to database name
Closes COUCHDB-2395
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/506e8145
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/506e8145
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/506e8145
Branch: refs/heads/master
Commit: 506e8145696b916a74f3022845ce8e746c751b6c
Parents: 0c551d3
Author: Benjamin Keen <be...@gmail.com>
Authored: Fri Oct 17 11:37:07 2014 -0700
Committer: Robert Kowalski <ro...@apache.org>
Committed: Wed Oct 22 11:48:20 2014 +0200
----------------------------------------------------------------------
app/addons/databases/assets/less/databases.less | 27 ++++---
.../databases/templates/header_alldbs.html | 20 ++---
.../documents/assets/less/queryOptions.less | 22 +++---
.../templates/query_options_main_fields.html | 4 +-
app/addons/documents/views-queryoptions.js | 6 +-
app/addons/fauxton/components.js | 14 ++--
app/addons/fauxton/templates/api_bar.html | 4 +-
assets/less/fauxton.less | 47 ++++++-----
assets/less/formstyles.less | 24 ++++--
assets/less/templates.less | 6 ++
assets/less/trays.less | 82 ++++++++++++++++++++
11 files changed, 190 insertions(+), 66 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/databases/assets/less/databases.less
----------------------------------------------------------------------
diff --git a/app/addons/databases/assets/less/databases.less b/app/addons/databases/assets/less/databases.less
index 021319c..27784f9 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -18,20 +18,25 @@
@import "../../../../../assets/less/bootstrap/mixins.less";
.tools .nav {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.databases {
- a.db-actions,
- a.db-actions:visited {
- color: @linkColor;
- border: 1px solid #e3e3e3;
- padding: 5px 7px;
- .border-radius(6px);
- text-decoration: none;
- font-size: 19px;
- }
+ a.db-actions,
+ a.db-actions:visited {
+ color: @linkColor;
+ border: 1px solid #e3e3e3;
+ padding: 5px 7px;
+ .border-radius(6px);
+ text-decoration: none;
+ font-size: 19px;
+ }
}
-#new a {
+
+#new {
+ line-height: 40px;
+
+ a {
text-decoration: none;
+ }
}
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/databases/templates/header_alldbs.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/header_alldbs.html b/app/addons/databases/templates/header_alldbs.html
index 492b5bf..da12f76 100644
--- a/app/addons/databases/templates/header_alldbs.html
+++ b/app/addons/databases/templates/header_alldbs.html
@@ -1,4 +1,4 @@
-<!--
+<% /*
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
@@ -10,17 +10,13 @@ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
--->
+*/ %>
- <!-- floats right -->
-
- <div id="header-api-bar" class="button"></div>
-
- <!-- add database-->
- <div class="button" id="add-db-button">
- </div>
-
- <!-- search (jump to doc)-->
- <div id="header-search" class="js-search searchbox-container"></div>
+<!-- floats right -->
+<div id="header-api-bar" class="button"></div>
+<!-- add database-->
+<div class="button" id="add-db-button"></div>
+<!-- search (jump to doc)-->
+<div id="header-search" class="js-search searchbox-container"></div>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/documents/assets/less/queryOptions.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/queryOptions.less b/app/addons/documents/assets/less/queryOptions.less
index f326c5e..51bb4ac 100644
--- a/app/addons/documents/assets/less/queryOptions.less
+++ b/app/addons/documents/assets/less/queryOptions.less
@@ -41,6 +41,7 @@
.controls-group:last-child {
margin: 0;
}
+
form {
overflow: scroll;
margin-bottom: 0;
@@ -48,17 +49,8 @@
display: inline-block;
}
- input[type="text"],
- textarea {
- .border-radius(5px);
- background-color: #666;
- padding: 8px;
- border: none;
- color: #eee;
- font-size: 13px;
- }
.input-small {
- width: 70px;
+ width: 74px;
margin-left: 5px;
}
.checkbox {
@@ -135,6 +127,16 @@
width: 34%;
}
}
+ .qo-main-fields-row .row-fluid.fieldsets {
+ .inline:nth-child(2) {
+ width: 30%;
+ }
+ .inline:nth-child(3) {
+ text-align: right;
+ width: 36%;
+ }
+ }
+
.row-fluid.fieldsets {
margin-bottom: 5px;
:last-child {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/documents/templates/query_options_main_fields.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/query_options_main_fields.html b/app/addons/documents/templates/query_options_main_fields.html
index 48b5d3c..606763a 100644
--- a/app/addons/documents/templates/query_options_main_fields.html
+++ b/app/addons/documents/templates/query_options_main_fields.html
@@ -21,7 +21,7 @@ the License.
<div class="errors-container"></div>
-<div class="controls-group">
+<div class="controls-group qo-main-fields-row">
<div class="row-fluid fieldsets">
<div class="checkbox inline">
<input id="qoIncludeDocs" name="include_docs" type="checkbox" value="true" />
@@ -52,4 +52,4 @@ the License.
</label>
<% } %>
</div>
-</div>
\ No newline at end of file
+</div>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/documents/views-queryoptions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-queryoptions.js b/app/addons/documents/views-queryoptions.js
index 52676f7..e3817e2 100644
--- a/app/addons/documents/views-queryoptions.js
+++ b/app/addons/documents/views-queryoptions.js
@@ -107,8 +107,11 @@ define([
if (!this.trayIsVisible()) {
$("#query-options-tray").velocity("transition.slideDownIn", 250); // TODO constant
FauxtonAPI.Events.trigger("APIbar:closeTray");
- // make sure the query button is active again. As we can only expand for completed results, this is sufficient to prevent double submission
+
+ // make sure the query button is active again. As we can only expand for completed results, this is sufficient
+ // to prevent double submission
this.$('#query-options-tray button[type="submit"]').removeAttr("disabled");
+ this.$('.query-options-btn').addClass('enabled');
}
},
@@ -197,6 +200,7 @@ define([
$("#query-options-tray").velocity("reverse", 250, function () { // TODO constant
$("#query-options-tray").hide();
});
+ this.$('.query-options-btn').removeClass('enabled');
}
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 21fb2bd..490ae95 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -103,7 +103,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
template: "addons/fauxton/templates/api_bar",
events: {
- "click .api-url-btn" : "showAPIbar"
+ "click .api-url-btn": "showAPIbar"
},
initialize: function (options) {
@@ -117,7 +117,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
$('body').on('click.apibar',function(e) {
var $navbar = $(e.target);
if (!navbarVisible()) { return;}
- if ($navbar.hasClass('.api-url-btn')) { return;}
+ if ($navbar.hasClass('.api-url-btn')) { return; }
if (!$navbar.closest('.api-navbar').length){
hideAPIbar();
@@ -140,14 +140,16 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
$navBar.velocity("reverse", 250, function () {
$navBar.hide();
});
+ this.$('.api-url-btn').removeClass('enabled');
},
//we only need to show the api-bar here. The `click.apibar` event
//in the initialize will close the api bar if a user clicks the api button
//and the api bar is visible.
- showAPIbar: function(event){
+ showAPIbar: function() {
if (!this.navbarVisible()) {
this.$('.api-navbar').velocity("transition.slideDownIn", 250);
+ this.$('.api-url-btn').addClass('enabled');
}
},
@@ -158,12 +160,14 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
};
},
- hide: function(){
+ hide: function () {
this.$el.addClass('hide');
},
- show: function(){
+
+ show: function () {
this.$el.removeClass('hide');
},
+
update: function(endpoint) {
this.endpoint = endpoint[0];
this.documentation = endpoint[1];
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index dbc10d5..eee43f3 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -1,4 +1,4 @@
-<!--
+<% /*
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
@@ -10,7 +10,7 @@ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
--->
+*/ %>
<a class="btn btn-primary pull-right api-url-btn">
<i class="fonticon-link header-icon"></i>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 1050ce7..9341b02 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -24,6 +24,8 @@
@import "templates.less";
@import "formstyles.less";
@import "pagination.less";
+@import "trays.less";
+
/**
* HTML-wide overrides
@@ -332,12 +334,7 @@ div.spinner {
}
#api-navbar{
- > div{
- > .api-url-btn, > .query-options-btn {
- padding:10px;
- }
- }
-
+ padding: 10px;
.header-icon {
font-size: 20px;
&:before {
@@ -358,7 +355,7 @@ header .header-icon {
.api-url-btn, .query-options-btn {
background: none;
border: none;
- padding: 0;
+ padding: 0px 3px;
margin: 0;
}
.api-url-btn:hover, .query-options-btn:hover {
@@ -374,17 +371,13 @@ header .header-icon {
}
.input-xxlarge {
.border-radius(5px 0 0 5px);
- border: none;
- padding: 9px;
- -moz-transition: background-color 100ms linear;
- -webkit-transition: background-color 100ms linear;
- transition: background-color 100ms linear;
+
}
.btn{
background-color: @navBG;
color: #fff;
margin-left: -1px;
- padding: 10px 10px 8px;
+ padding: 10px 10px 9px;
border: none;
line-height: 1.5em;
.border-radius(5px);
@@ -483,6 +476,9 @@ REUSEABLE SHADOW BORDER
> div {
height: 60px;
}
+ .closeMenu & {
+ left: -64px;
+ }
}
#breadcrumbs{
.bottom-shadow-border;
@@ -493,7 +489,8 @@ REUSEABLE SHADOW BORDER
.two-pane &,
.with-sidebar & {
#header-api-bar {
- width: 87px;
+ width: 98px;
+ padding: 10px 15px;
}
}
@@ -501,7 +498,7 @@ REUSEABLE SHADOW BORDER
.bottom-shadow-border;
left: auto;
- #api-navbar{
+ #api-navbar {
position: relative;
float: right;
left: 0px;
@@ -619,10 +616,14 @@ REUSEABLE SHADOW BORDER
a {
padding: 10px;
text-decoration: none;
+ &:before {
+ font-size: 20px;
+ margin-top: 4px;
+ }
}
.dropdown {
border-left: 1px solid #ccc;
- padding: 20px 0px;
+ padding: 17px 0px;
}
.dropdown-menu {
left: -115px;
@@ -632,7 +633,7 @@ REUSEABLE SHADOW BORDER
}
.tray {
- .bottom-shadow-border;
+ .bottom-left-shadow-border;
display: none;
position: absolute;
right: 5px;
@@ -680,6 +681,16 @@ REUSEABLE SHADOW BORDER
font-size: 13px;
line-height: 33px;
}
+ .query-options-btn.enabled,
+ .query-options-btn:hover,
+ .api-url-btn.enabled,
+ .api-url-btn:hover {
+ background-color: transparent;
+ color: @red;
+ }
+ .btn:active {
+ box-shadow: none;
+ }
}
.header-right {
@@ -717,7 +728,7 @@ REUSEABLE SHADOW BORDER
height: 60px;
border-left: 1px solid #ccc;
margin: 0;
- padding: 10px 15px;
+ padding: 10px;
line-height: 40px;
}
> div:last-child {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/assets/less/formstyles.less
----------------------------------------------------------------------
diff --git a/assets/less/formstyles.less b/assets/less/formstyles.less
index 6bddf24..746a2e7 100644
--- a/assets/less/formstyles.less
+++ b/assets/less/formstyles.less
@@ -145,7 +145,6 @@ form.view-query-update, form.view-query-save {
}
.custom-inputs {
-
input[type=radio],
input[type=checkbox] {
display: none;
@@ -153,6 +152,11 @@ form.view-query-update, form.view-query-save {
.checkbox label:before {
border-radius: 12px;
+ background-color: rgba(255, 255, 255, 0.1);
+ border: 2px solid rgba(255, 255, 255, 0.1);
+ transition: linear .2s, box-shadow linear .2s;
+ -moz-transition: linear .2s, box-shadow linear .2s;
+ -webkit-transition: linear .2s, box-shadow linear .2s;
}
.controls > .radio:first-child, .controls > .checkbox:first-child {
@@ -167,7 +171,20 @@ form.view-query-update, form.view-query-save {
}
input[type=checkbox] + label:hover:before {
- border: 2px solid #fff;
+ border: 2px solid @white;
+ transition: linear .2s, box-shadow linear .2s;
+ -moz-transition: linear .2s, box-shadow linear .2s;
+ -webkit-transition: linear .2s, box-shadow linear .2s;
+ }
+
+ /* if the checkbox is disabled, we don't want the red border on hover */
+ input[type=checkbox]:disabled + label:hover:before {
+ border: none;
+ }
+
+ /* if the checkbox is disabled, we don't want the white border on hover */
+ input[type=checkbox]:disabled + label:hover:before {
+ border: none;
}
input[type=checkbox]:checked + label:before {
@@ -193,9 +210,6 @@ form.view-query-update, form.view-query-save {
left: 0;
bottom: 0px;
background-color: #7C8085;
- -webkit-box-shadow: inset 0px 3px 0px 0px rgba(50, 50, 50, 0.40);
- -moz-box-shadow: inset 0px 3px 0px 0px rgba(50, 50, 50, 0.40);
- box-shadow: inset 0px 3px 0px 0px rgba(50, 50, 50, 0.40);
}
.radio label:before {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index 12a1fdd..7a690b4 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -265,6 +265,12 @@
.box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}
+.bottom-left-shadow-border {
+ border-bottom: 1px solid #999;
+ border-left: 1px solid #999;
+ .box-shadow(-6px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
/*
FIXED HEADER, DASHBOARD & BREADCRUMBS:
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/506e8145/assets/less/trays.less
----------------------------------------------------------------------
diff --git a/assets/less/trays.less b/assets/less/trays.less
new file mode 100644
index 0000000..ddffd08
--- /dev/null
+++ b/assets/less/trays.less
@@ -0,0 +1,82 @@
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+.tray {
+ .bottom-left-shadow-border;
+ display: none;
+ position: absolute;
+ right: 5px;
+ top: 55px;
+ z-index: 11;
+ background-color: #333;
+ color: #fff;
+ margin: 0;
+
+ .add-on {
+ font-size: 16px;
+ background: none;
+ padding: 0px;
+ margin: 10px 0;
+ border: none;
+ display: block;
+ text-align: left;
+ color: #fff;
+ text-shadow: none;
+ height: auto;
+ line-height: 1em;
+ }
+
+ input[type="text"],
+ textarea {
+ .border-radius(5px);
+ background-color: #666;
+ padding: 8px;
+ border: none;
+ color: #eee;
+ font-size: 13px;
+ }
+
+ input[type="text"]:focus,
+ textarea:focus,
+ input[type="text"]:hover,
+ textarea:hover {
+ border: 2px solid @white;
+ }
+ input[type="text"], textarea {
+ box-shadow: none;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ background-color: rgba(255,255,255,0.1);
+ padding: 8px;
+ border: 2px solid rgba(255,255,255,0.1);
+ color: rgba(255,255,255,0.8);
+ font-size: 13px;
+ }
+ input:-webkit-input-placeholder,
+ form input:-moz-placeholder,
+ input:-ms-input-placeholder {
+ color: rgba(255,255,255,0.4);
+ }
+}
+
+.tray:before {
+ content: '';
+ position: absolute;
+ top: -25px;
+ border-color: transparent transparent #333 transparent;
+ border-style: solid;
+ border-width: 15px;
+ width: 0;
+ height: 0;
+}