Fixed tag editor layout. Behaviour still incomplete, though.

frontend/delta/fonts/IcoMoon/Clipperz Icon font.json

@@ -97,7 +97,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 120,
-				"order": 11,
+				"order": 10,
 				"prevSize": 32,
 				"code": 58891,
 				"name": "spinner",
@@ -151,7 +151,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 136,
-				"order": 9,
+				"order": 8,
 				"prevSize": 32,
 				"code": 58889,
 				"name": "lock",
@@ -178,7 +178,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 137,
-				"order": 17,
+				"order": 15,
 				"prevSize": 32,
 				"code": 58896,
 				"name": "lock2",
@@ -203,7 +203,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 138,
-				"order": 18,
+				"order": 16,
 				"prevSize": 32,
 				"code": 58897,
 				"name": "unlocked",
@@ -231,7 +231,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 184,
-				"order": 14,
+				"order": 13,
 				"prevSize": 32,
 				"code": 58881,
 				"name": "menu2",
@@ -310,7 +310,7 @@
 				]
 			},
 			"properties": {
-				"order": 20,
+				"order": 18,
 				"id": 1,
 				"prevSize": 32,
 				"code": 58899,
@@ -359,7 +359,7 @@
 			},
 			"properties": {
 				"id": 4,
-				"order": 22,
+				"order": 19,
 				"prevSize": 32,
 				"code": 58894,
 				"name": "mail",
@@ -382,7 +382,7 @@
 			},
 			"properties": {
 				"id": 35,
-				"order": 10,
+				"order": 9,
 				"prevSize": 32,
 				"code": 58890,
 				"name": "popup",
@@ -405,7 +405,7 @@
 			},
 			"properties": {
 				"id": 125,
-				"order": 15,
+				"order": 14,
 				"prevSize": 32,
 				"code": 58895,
 				"name": "plus",
@@ -430,11 +430,11 @@
 			},
 			"properties": {
 				"id": 126,
-				"order": 19,
+				"order": 17,
 				"prevSize": 32,
 				"code": 58898,
 				"name": "cross",
-				"ligatures": "remove field"
+				"ligatures": "remove field, remove tag"
 			},
 			"setIdx": 6,
 			"iconIdx": 126
@@ -453,7 +453,7 @@
 			},
 			"properties": {
 				"id": 128,
-				"order": 26,
+				"order": 20,
 				"prevSize": 32,
 				"code": 58888,
 				"name": "plus3",
@@ -476,7 +476,7 @@
 			},
 			"properties": {
 				"id": 205,
-				"order": 12,
+				"order": 11,
 				"prevSize": 32,
 				"code": 58892,
 				"name": "arrow-left",
@@ -499,7 +499,7 @@
 			},
 			"properties": {
 				"id": 208,
-				"order": 13,
+				"order": 12,
 				"prevSize": 32,
 				"code": 58893,
 				"name": "arrow-right",

frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js

@@ -115,12 +115,12 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
 	renderTag: function (aTag) {
 		return	React.DOM.li({'className':'tag'}, [
 			React.DOM.span({'className':'tagLabel'}, aTag),
-			this.isReadOnly() ? null : React.DOM.span({'className':'tagRemoveButton', 'onClick':this.removeTagHandler, 'data-label':aTag}, 'delete')
+			this.isReadOnly() ? null : React.DOM.span({'className':'tagRemoveButton', 'onClick':this.removeTagHandler, 'data-label':aTag}, 'remove tag')
 		])
 	},
 	
 	renderEditField: function () {
-		return	React.DOM.input({'type':'text', 'onKeyDown': this.handleKeyDown});
+		return	React.DOM.input({'type':'text', 'onKeyDown':this.handleKeyDown, 'placeholder': "tag"});
 	},
 	
 	render: function () {
@@ -133,8 +133,8 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
 		return	React.DOM.div({'className':React.addons.classSet(classes)}, [
 			React.DOM.ul({},[
 				MochiKit.Base.map(this.renderTag, this.props['selectedTags']),
-				this.isReadOnly() ? null : this.renderEditField()
-			])
+			]),
+			this.isReadOnly() ? null : this.renderEditField()
 		]);
 	},
 

frontend/delta/scss/core/mixin.scss

@@ -159,3 +159,9 @@
 	-webkit-overflow-scrolling: touch;
 }
 
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content}
+	&:-moz-placeholder           {@content}
+	&::-moz-placeholder          {@content}
+	&:-ms-input-placeholder      {@content}  
+}

frontend/delta/scss/core/tagEditor.scss

@@ -1,10 +1,16 @@
+$tagEditor_lineHeight: 26px;
 .tagEditor {
+	@include flexbox();
+	@include flex-direction(row);
+	
 
 	&.readWrite {
 //		border: 1px solid red;
 	}
 
 	ul {
+		@include flex(none);
+
 		@include flexbox();
 		@include flex-direction(row);
 		@include align-items(flex-start);
@@ -14,6 +20,7 @@
 			@include icon-font();
 			font-size: 16pt;
 			padding-right: 11px;
+			line-height: $tagEditor_lineHeight;
 			color: #ccc;
 		}
 
@@ -23,6 +30,7 @@
 			font-weight: 100;
 
 			padding-right: 10px;
+			line-height: $tagEditor_lineHeight;
 
 //			&:last-child:after {
 //				content: '';
@@ -36,9 +44,30 @@
 			
 			span.tagRemoveButton {
 				@include icon-font();
-				color: gray;
 				cursor: pointer;
+				line-height: 22px;
+				color: #ccc;
+
+				&:hover {
+					color: rgb(155, 0, 0);
+				};
 			}
 		}
+		
+	}
+	
+	input {
+		@include flex(auto);
+		font-size: 13pt;
+		font-weight: 100;
+
+		line-height: 24px;
+		border: 0px;
+		
+//		@include placeholder {
+//			font-style: italic;
+//			color: #ccc;
+///			font-weight:100;
+//		}
 	}
 }

frontend/delta/scss/style/card.scss

@@ -229,6 +229,14 @@ $cardViewBasePadding: 10px;
 				background-color: #eee;
 			}
 		}	
+
+		input, textarea {
+			@include placeholder {
+				font-style: italic;
+				color: #ccc;
+	//			font-weight:100;
+			}
+		}
 	}
 }