couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From deathb...@apache.org
Subject git commit: updated refs/heads/1807-Replication to 7a32352
Date Fri, 23 Aug 2013 20:53:40 GMT
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 <deathbearbrown@gmail.com>
Authored: Fri Aug 23 16:53:33 2013 -0400
Committer: suelockwood <deathbearbrown@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})];


Mime
View raw message