Inputosaurus small fixes

dev/Styles/_InputosaurusFix.less

@@ -14,20 +14,28 @@
 		background-color: #eee;
 		border: 1px solid #aaa;
 		line-height: 18px;
-		padding: 2px 4px;
+		padding: 2px 15px 2px 5px;
 		margin: 2px 2px 2px;
 		color: #555;
 
+		position: relative;
+
 		a {
 			color: #999;
-			float: right;
+			font-size: 12px;
-			font-size: 14px;
+			position: absolute;
+			top: 1px;
+			right: 2px;
 
 			&:hover {
 				color: #666;
 			}
 		}
 
+		&.inputosaurus-required {
+			padding-rigth: 5px;
+		}
+
 		&.inputosaurus-selected {
 			background-color: #ddd;
 		}
@@ -41,7 +49,7 @@
 
 	.inputosaurus-input {
 
-		margin: 2px 10px 2px 0px;
+		margin: 1px 10px 1px 0px;
 		height: 22px;
 
 		input {

dev/ViewModels/PopupsComposeViewModel.js

@@ -153,8 +153,8 @@ function PopupsComposeViewModel()
 
 	}, this);
 
-	this.to.subscribe(function (aValue) {
+	this.to.subscribe(function (sValue) {
-		if (this.emptyToError() && 0 < aValue.length)
+		if (this.emptyToError() && 0 < sValue.length)
 		{
 			this.emptyToError(false);
 		}
@@ -217,7 +217,7 @@ function PopupsComposeViewModel()
 
 	this.sendCommand = Utils.createCommand(this, function () {
 		var
-			sTo = this.to(),
+			sTo = Utils.trim(this.to()),
 			sSentFolder = RL.data().sentFolder(),
 			aFlagsCache = []
 		;
@@ -557,6 +557,7 @@ PopupsComposeViewModel.prototype.saveMessageResponse = function (sResult, oData)
 
 PopupsComposeViewModel.prototype.onHide = function ()
 {
+	this.reset();
 	kn.routeOn();
 };
 

rainloop/v/0.0.0/static/css/app.css

@@ -5621,18 +5621,24 @@ html.no-rgba .modal {
   background-color: #eee;
   border: 1px solid #aaa;
   line-height: 18px;
-  padding: 2px 4px;
+  padding: 2px 15px 2px 5px;
   margin: 2px 2px 2px;
   color: #555;
+  position: relative;
 }
 .inputosaurus-container li a {
   color: #999;
-  float: right;
+  font-size: 12px;
-  font-size: 14px;
+  position: absolute;
+  top: 1px;
+  right: 2px;
 }
 .inputosaurus-container li a:hover {
   color: #666;
 }
+.inputosaurus-container li.inputosaurus-required {
+  padding-rigth: 5px;
+}
 .inputosaurus-container li.inputosaurus-selected {
   background-color: #ddd;
 }
@@ -5642,7 +5648,7 @@ html.no-rgba .modal {
   left: -5000px;
 }
 .inputosaurus-container .inputosaurus-input {
-  margin: 2px 10px 2px 0px;
+  margin: 1px 10px 1px 0px;
   height: 22px;
 }
 .inputosaurus-container .inputosaurus-input input {

rainloop/v/0.0.0/static/css/less.css

@@ -3468,18 +3468,24 @@ html.no-rgba .modal {
   background-color: #eee;
   border: 1px solid #aaa;
   line-height: 18px;
-  padding: 2px 4px;
+  padding: 2px 15px 2px 5px;
   margin: 2px 2px 2px;
   color: #555;
+  position: relative;
 }
 .inputosaurus-container li a {
   color: #999;
-  float: right;
+  font-size: 12px;
-  font-size: 14px;
+  position: absolute;
+  top: 1px;
+  right: 2px;
 }
 .inputosaurus-container li a:hover {
   color: #666;
 }
+.inputosaurus-container li.inputosaurus-required {
+  padding-rigth: 5px;
+}
 .inputosaurus-container li.inputosaurus-selected {
   background-color: #ddd;
 }
@@ -3489,7 +3495,7 @@ html.no-rgba .modal {
   left: -5000px;
 }
 .inputosaurus-container .inputosaurus-input {
-  margin: 2px 10px 2px 0px;
+  margin: 1px 10px 1px 0px;
   height: 22px;
 }
 .inputosaurus-container .inputosaurus-input input {

rainloop/v/0.0.0/static/js/app.js

@@ -7716,8 +7716,8 @@ function PopupsComposeViewModel()
 
 	}, this);
 
-	this.to.subscribe(function (aValue) {
+	this.to.subscribe(function (sValue) {
-		if (this.emptyToError() && 0 < aValue.length)
+		if (this.emptyToError() && 0 < sValue.length)
 		{
 			this.emptyToError(false);
 		}
@@ -7780,7 +7780,7 @@ function PopupsComposeViewModel()
 
 	this.sendCommand = Utils.createCommand(this, function () {
 		var
-			sTo = this.to(),
+			sTo = Utils.trim(this.to()),
 			sSentFolder = RL.data().sentFolder(),
 			aFlagsCache = []
 		;
@@ -8120,6 +8120,7 @@ PopupsComposeViewModel.prototype.saveMessageResponse = function (sResult, oData)
 
 PopupsComposeViewModel.prototype.onHide = function ()
 {
+	this.reset();
 	kn.routeOn();
 };
 

vendors/inputosaurus/inputosaurus.js

@@ -236,21 +236,15 @@
 
 		// the input dynamically resizes based on the length of its value
 		_resizeInput : function(ev) {
-			var
+			var widget = (ev && ev.data.widget) || this;
-				mixWidth = 50,
-				maxWidth = 400,
-				widget = (ev && ev.data.widget) || this,
-//				maxWidth = widget.elements.ul.width(),
-				txtWidth = 0
-			;
-
 			widget.elements.fakeSpan.text(widget.elements.input.val());
-			txtWidth = 20 + widget.elements.fakeSpan.width();
-
-			txtWidth = txtWidth < maxWidth ? txtWidth : maxWidth;
-			txtWidth = txtWidth < mixWidth ? mixWidth : txtWidth;
 			
+//			window.setTimeout(function  () {
+				var txtWidth = 25 + widget.elements.fakeSpan.width();
+				txtWidth = txtWidth > 50 ? txtWidth : 50;
+				txtWidth = txtWidth < 500 ? txtWidth : 500;
 				widget.elements.input.width(txtWidth);
+//			}, 1);
 		},
 		
 		// resets placeholder on representative input
@@ -317,7 +311,9 @@
 			$li.after(widget.elements.inputCont);
 
 			widget.elements.input.val(tagName);
+			window.setTimeout(function () {
 				widget.elements.input.select();
+			}, 100);
 
 			widget._removeTag(ev);
 			widget._resizeInput(ev);
@@ -336,7 +332,7 @@
 
 				// 'e' - edit tag (removes tag and places value into visible input
 				case 69:
-//				case $.ui.keyCode.ENTER:
+				case $.ui.keyCode.ENTER:
 					widget._editTag(ev);
 					break;
 
@@ -440,6 +436,13 @@
 					self._renderTags();
 				}
 			});
+
+			if (valArr.length === 1 && valArr[0] === '' && self.elements.lastEdit !== '')
+			{
+				self.elements.lastEdit = '';
+				self._renderTags();
+			}
+
 			self._setValue(self._buildValue());
 		},
 
@@ -473,7 +476,7 @@
 		},
 
 		_renderTags : function() {
-			var	self = this	;
+			var self = this;
 
 			this.elements.ul.find('li:not(.inputosaurus-required)').remove();
 
@@ -500,7 +503,13 @@
 			widget._setValue(widget._buildValue());
 
 			$(ev.currentTarget).closest('li').remove();
+			window.setTimeout(function () {
 				widget.elements.input.focus();
+			}, 100);
+		},
+
+		focus : function () {
+			this.elements.input.focus();
 		},
 
 		_focus : function(ev) {