You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by de...@apache.org on 2013/08/23 22:53:40 UTC
git commit: updated refs/heads/1807-Replication to 7a32352
Updated Branches:
refs/heads/1807-Replication b1d4b7640 -> 7a32352c8
Fixed continuous, scrubbed whitepaces from db names, updated layout
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/7a32352c
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/7a32352c
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/7a32352c
Branch: refs/heads/1807-Replication
Commit: 7a32352c80b93239f87158b58f5fcf7ebb725c2d
Parents: b1d4b76
Author: suelockwood <de...@gmail.com>
Authored: Fri Aug 23 16:53:33 2013 -0400
Committer: suelockwood <de...@gmail.com>
Committed: Fri Aug 23 16:53:33 2013 -0400
----------------------------------------------------------------------
.../replication/assets/less/replication.less | 102 +++++++++++++++++--
.../app/addons/replication/templates/form.html | 53 ++++------
.../addons/replication/templates/progress.html | 4 +-
src/fauxton/app/addons/replication/views.js | 35 ++++---
4 files changed, 140 insertions(+), 54 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/7a32352c/src/fauxton/app/addons/replication/assets/less/replication.less
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/assets/less/replication.less b/src/fauxton/app/addons/replication/assets/less/replication.less
index bcfdb56..fe544ea 100644
--- a/src/fauxton/app/addons/replication/assets/less/replication.less
+++ b/src/fauxton/app/addons/replication/assets/less/replication.less
@@ -1,6 +1,66 @@
+/**/
+
+@brown: #3A2C2B;
+@red: #E33F3B;
+@darkRed: #AF2D24;
+@linkRed: #DA4F49;
+@greyBrown: #A59D9D;
+@fontGrey: #808080;
+@secondarySidebar: #E4DFDC;
+
+
#replication {
position: relative;
+ .form_set{
+ width: 300px;
+ display: inline-block;
+ border: 1px solid @greyBrown;
+ padding: 10px;
+ margin-bottom: 20px;
+ &.middle{
+ width: 200px;
+ border: none;
+ position: relative;
+ height: 100px;
+ margin: 0;
+ }
+ input, select {
+ margin: 0 0 16px 35px;
+ height: 40px;
+ }
+ .btn-group{
+ margin: 0 0 16px 35px;
+ .btn {
+ padding: 10px 30px;
+ }
+ }
+ &.local{
+ .local_option{
+ display: block;
+ }
+ .remote_option{
+ display: none;
+ }
+ .local-btn{
+ background-color: @red;
+ color: #fff;
+ }
+ .remote-btn{
+ background-color: #f5f5f5;
+ color: @fontGrey;
+ }
+ }
+ .local_option{
+ display: none;
+ }
+ .remote-btn{
+ background-color: @red;
+ color: #fff;
+ }
+ }
+
+
.options {
position: relative;
&:after{
@@ -39,27 +99,47 @@
vertical-align: top;
padding-right: 5px;
min-width: 130px;
+ padding-left: 0px;
}
input[type=text],
input[type=radio],
input[type=checkbox],
select {
- margin-top: -2px;
+
}
}
+ .circle{
+ z-index: 0;
+ position: absolute;
+ top: 20px;
+ left: 63px;
+ &:after {
+ width: 70px;
+ height: 70px;
+ content: '';
+ display: block;
+ position: relative;
+ margin: 0 auto;
+ border: 1px solid @greyBrown;
+ -webkit-border-radius: 40px;
+ -moz-border-radius: 40px;
+ border-radius:40px;
+ }
+ }
.swap {
+ z-index: 30;
cursor: pointer;
position: absolute;
font-size: 12px;
width: 27px;
height: 12px;
display: block;
- border-top: 3px solid #8E9292;
- border-bottom: 3px solid #8E9292;
- top: 20%;
- left: 42%;
+ border-top: 3px solid @greyBrown;
+ border-bottom: 3px solid @greyBrown;
+ top: 50px;
+ left: 84px;
&:hover {
border-color: #2C2C2C;
&:before {
@@ -85,7 +165,7 @@
bottom: -8px;
right: 23px;
position: absolute;
- border-right: 7px solid #8E9292;
+ border-right: 7px solid @greyBrown;
border-top: 7px solid rgba(44, 44, 44, 0);
border-bottom: 7px solid rgba(44, 44, 44, 0);
content: "";
@@ -95,7 +175,7 @@
top: -8px;
left: 23px;
position: absolute;
- border-left: 7px solid #8E9292;
+ border-left: 7px solid @greyBrown;
border-top: 7px solid rgba(44, 44, 44, 0);
border-bottom: 7px solid rgba(44, 44, 44, 0);
content: "";
@@ -107,6 +187,10 @@
&.showHeader{
li.header{
display: block;
+ border: none;
+ }
+ ul {
+ border:1px solid @greyBrown;
}
}
li.header{
@@ -120,10 +204,10 @@
margin: 0px;
vertical-align: bottom;
}
- padding: 10px 0 ;
+ padding: 10px 10px;
margin: 0;
list-style: none;
- border-bottom: 1px solid #e3e3e3;
+ border-top: 1px solid @greyBrown;
}
}
}
http://git-wip-us.apache.org/repos/asf/couchdb/blob/7a32352c/src/fauxton/app/addons/replication/templates/form.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/templates/form.html b/src/fauxton/app/addons/replication/templates/form.html
index c1711b5..2a70889 100644
--- a/src/fauxton/app/addons/replication/templates/form.html
+++ b/src/fauxton/app/addons/replication/templates/form.html
@@ -13,58 +13,49 @@ the License.
-->
<form id="replication" class="form-horizontal">
- <div class="row">
- <div class="span5 from form_set">
- <div class="control-group from_local">
- <label for="from_local">
- <input type="radio" id="from_local" name="from_type" value="local" checked="" class="setType">
- Local database:
- </label>
+ <div class="from form_set local">
+ <div class="btn-group">
+ <button class="btn local-btn" type="button" value="local">Local</button>
+ <button class="btn remote-btn" type="button" value="remote">Remote</button>
+ </div>
+
+ <div class="from_local local_option">
<select id="from_name" name="source">
<% _.each( databases, function( db, i ){ %>
<option value="<%=db.name%>"><%=db.name%></option>
<% }); %>
</select>
</div>
-
- <div class="control-group from_to_remote">
- <label for="from_to_remote">
- <input type="radio" id="from_to_remote" name="from_type" value="remote" class="setType">
- Remote database:
- </label>
- <input type="text" id="from_url" name="source" size="30" value="http://" disabled="true">
+ <div class="from_to_remote remote_option">
+ <input type="text" id="from_url" name="source" size="30" value="http://">
</div>
</div>
-
- <div class="span2">
+ <div class="form_set middle">
+ <span class="circle "></span>
<span class="swap">
</span>
</div>
- <div class="to form_set span5">
- <div class="to_local control-group">
- <label for="to_local">
- <input type="radio" id="to_local" name="to_type" value="local" checked="" class="setType">
- Local database:
- </label>
- <input type="text" id="to_name" name="target" size="30">
+ <div class="to form_set local">
+ <div class="btn-group">
+ <button class="btn local-btn" type="button" value="local">Local</button>
+ <button class="btn remote-btn" type="button" value="remote">Remote</button>
+ </div>
+ <div class="to_local local_option">
+ <input type="text" id="to_name" name="target" size="30" placeholder="database name">
</div>
- <div class="to_remote control-group">
- <label for="to_remote">
- <input type="radio" id="to_remote" name="to_type" value="remote" class="setType">
- Remote database:
- </label>
- <input type="text" id="to_url" name="target" size="30" value="http://" disabled="true">
+ <div class="to_remote remote_option">
+ <input type="text" id="to_url" name="target" size="30" value="http://">
</div>
</div>
- </div>
+
<div class="actions">
<div class="control-group">
<label for="continuous">
- <input type="checkbox" name="continuous" value="continuous" id="continuous">
+ <input type="checkbox" name="continuous" value="true" id="continuous">
Continuous
</label>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/7a32352c/src/fauxton/app/addons/replication/templates/progress.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/templates/progress.html b/src/fauxton/app/addons/replication/templates/progress.html
index d93db68..02c47f2 100644
--- a/src/fauxton/app/addons/replication/templates/progress.html
+++ b/src/fauxton/app/addons/replication/templates/progress.html
@@ -11,9 +11,9 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
-<p class="span6">Replicating <%=source%> to <%=target%>. Please wait... :)</p>
+<p class="span6">Replicating <strong><%=source%></strong> to <strong><%=target%></strong></p>
-<div class="span5 progress progress-striped active">
+<div class="span4 progress progress-striped active">
<div class="bar" style="width: <%=progress || 0%>%;"><%=progress || "0"%>%</div>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/7a32352c/src/fauxton/app/addons/replication/views.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/views.js b/src/fauxton/app/addons/replication/views.js
index 30c642f..ea87432 100644
--- a/src/fauxton/app/addons/replication/views.js
+++ b/src/fauxton/app/addons/replication/views.js
@@ -45,7 +45,7 @@ function(app, FauxtonAPI, replication) {
template: "addons/replication/templates/form",
events: {
"submit #replication": "submit",
- "click input[type=radio]": "enableFields",
+ "click .btn-group .btn": "showFields",
"click .swap": "swapFields",
"click .options": "toggleAdvancedOptions"
},
@@ -89,22 +89,31 @@ function(app, FauxtonAPI, replication) {
cleanup: function(){
clearInterval(pollingInfo.intervalId);
},
- disableFields: function(){
- this.$('input[type=radio]').attr('disabled',true);
- this.$('.advancedOptions:hidden').find('input').attr('disabled',true);
+
+ disableFields: function(disable){
+ if(disable){
+ this.$el.find('input:hidden','select:hidden').attr('disabled',true);
+ }else{
+ this.$el.find('input','select').attr('disabled',false);
+ }
},
- enableFields: function(e){
- var $currentTarget = this.$(e.currentTarget);
- $currentTarget.parents(".form_set").find('input[type="text"], select').attr('disabled','true').addClass('disabled');
- $currentTarget.parents('.control-group').find('input[type="text"], select').removeAttr('disabled').removeClass('disabled');
+ showFields: function(e){
+ var $currentTarget = $(e.currentTarget),
+ targetVal = $currentTarget.val();
+
+ if (targetVal === "local"){
+ $currentTarget.parents('.form_set').addClass('local');
+ }else{
+ $currentTarget.parents('.form_set').removeClass('local');
+ }
},
establish: function(){
return [ this.collection.fetch(), this.status.fetch()];
},
formValidation: function(){
- var $remote = this.$el.find("[value='remote']:checked").parents('.control-group').find('input[type=text]'),
+ var $remote = this.$el.find('input:visible'),
error = false;
for(var i=0; i<$remote.length; i++){
if ($remote[i].value =="http://" || $remote[i].value ==" "){
@@ -140,6 +149,7 @@ function(app, FauxtonAPI, replication) {
that.updateButtonText(false);
}
});
+ this.disableFields(false);
},
updateButtonText: function(wait){
var $button = this.$('#replication button[type=submit]');
@@ -151,12 +161,13 @@ function(app, FauxtonAPI, replication) {
},
submit: function(e){
e.preventDefault();
- this.disableFields(); //disable fields not relevant to submitting
+ this.disableFields(true); //disable fields not relevant to submitting
var formJSON = {};
_.map(this.$(e.currentTarget).serializeArray(), function(formData){
if(formData.value !== ''){
- formJSON[formData.name] = formData.value;
+ formJSON[formData.name] = (formData.value ==="true"? true: formData.value.replace(/\s/g, ''));
+
}
});
@@ -194,7 +205,7 @@ View.ReplicationList = FauxtonAPI.View.extend({
initialize: function(){
Events.bind('update:tasks', this.establish, this);
this.listenTo(this.collection, "reset", this.render);
- this.$el.prepend("<li class='header'><h2>Active Replication Tasks</h2></li>");
+ this.$el.prepend("<li class='header'><h4>Active Replication Tasks</h4></li>");
},
establish: function(){
return [this.collection.fetch({reset: true})];