Fixed tag editor layout. Behaviour still incomplete, though.

This commit is contained in:
Giulio Cesare Solaroli 2015-02-13 16:44:18 +01:00
parent 182e9eb00f
commit 6141a7fce3
No known key found for this signature in database
GPG Key ID: 22E34C908F02CBA2
8 changed files with 138 additions and 49 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1,10 +1,16 @@
$tagEditor_lineHeight: 26px;
.tagEditor { .tagEditor {
@include flexbox();
@include flex-direction(row);
&.readWrite { &.readWrite {
// border: 1px solid red; // border: 1px solid red;
} }
ul { ul {
@include flex(none);
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
@include align-items(flex-start); @include align-items(flex-start);
@ -14,6 +20,7 @@
@include icon-font(); @include icon-font();
font-size: 16pt; font-size: 16pt;
padding-right: 11px; padding-right: 11px;
line-height: $tagEditor_lineHeight;
color: #ccc; color: #ccc;
} }
@ -23,6 +30,7 @@
font-weight: 100; font-weight: 100;
padding-right: 10px; padding-right: 10px;
line-height: $tagEditor_lineHeight;
// &:last-child:after { // &:last-child:after {
// content: ''; // content: '';
@ -36,9 +44,30 @@
span.tagRemoveButton { span.tagRemoveButton {
@include icon-font(); @include icon-font();
color: gray;
cursor: pointer; 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;
// }
} }
} }

View File

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