General improvements to the UI
More work still needed, but still a meaningful step forward.
This commit is contained in:
Giulio Cesare Solaroli
parent
3d17482db4
commit
dac835b5c6
@ -886,7 +886,9 @@ div.cardContent {
|
||||
-moz-flex: 1 0;
|
||||
-ms-flex: 1 0;
|
||||
flex: 1 0;
|
||||
overflow-y: scroll; }
|
||||
overflow-y: scroll;
|
||||
z-index: 5;
|
||||
box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.1); }
|
||||
div.cardContent div.cardListColumn.column div.cardList {
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 120px; }
|
||||
@ -918,7 +920,7 @@ div.cardContent {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
font-size: 75pt;
|
||||
color: blue;
|
||||
color: #aaa;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float: right;
|
||||
@ -926,6 +928,8 @@ div.cardContent {
|
||||
margin-left: 100px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer; }
|
||||
div.cardContent div.cardListColumn.column div.addCardButton:hover {
|
||||
color: green; }
|
||||
div.cardContent div.cardDetail.column {
|
||||
-webkit-box-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
@ -980,6 +984,8 @@ div.cardContent {
|
||||
z-index: 11; }
|
||||
div.cardContent div.cardDetail.column div.editWrapper > div.edit .content {
|
||||
background-color: white; }
|
||||
div.cardContent div.cardDetail.column div.editWrapper .mask {
|
||||
background-color: rgba(255, 255, 255, 0.8); }
|
||||
div.cardContent div.cardDetail.column > div.view {
|
||||
-webkit-box-flex: auto;
|
||||
-webkit-flex: auto;
|
||||
@ -1194,8 +1200,6 @@ div.dialogBox {
|
||||
flex: none;
|
||||
cursor: pointer; }
|
||||
|
||||
.tagEditor.readWrite {
|
||||
border: 1px solid red; }
|
||||
.tagEditor ul {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -1483,6 +1487,8 @@ div.dialogBox {
|
||||
content: "clipperz"; }
|
||||
#selections ul.defaultSet li.recentCards:before {
|
||||
content: "recent"; }
|
||||
#selections ul.defaultSet li.untaggedCards {
|
||||
padding-left: 70px; }
|
||||
#selections .search form input {
|
||||
font-family: "clipperz-font";
|
||||
color: #999;
|
||||
@ -1575,20 +1581,20 @@ div.dialogBox {
|
||||
border-radius: 4px; }
|
||||
|
||||
#selections.ALL li.allCards {
|
||||
color: yellow; }
|
||||
color: #ff9900; }
|
||||
|
||||
#selections.RECENT li.recentCards {
|
||||
color: yellow; }
|
||||
color: #ff9900; }
|
||||
|
||||
#selections.UNTAGGED li.untaggedCards {
|
||||
color: yellow; }
|
||||
color: #ff9900; }
|
||||
|
||||
#selections.SEARCH div.search .searchResultInfo {
|
||||
color: yellow;
|
||||
color: #ff9900;
|
||||
display: block; }
|
||||
|
||||
#selections.TAG ul.tagList li.selected {
|
||||
color: yellow; }
|
||||
color: #ff9900; }
|
||||
|
||||
#extraFeaturesPanel {
|
||||
background-color: black;
|
||||
@ -1666,48 +1672,54 @@ div.dialogBox {
|
||||
|
||||
div.cardList.loadingCard li.selected {
|
||||
background-color: gray; }
|
||||
div.cardList ul li {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; }
|
||||
div.cardList ul li.selected {
|
||||
background-color: yellow; }
|
||||
div.cardList ul li.archived {
|
||||
background-color: #cccccc; }
|
||||
div.cardList ul li .favicon {
|
||||
width: 48px;
|
||||
-webkit-box-flex: none;
|
||||
-webkit-flex: none;
|
||||
-moz-box-flex: none;
|
||||
-moz-flex: none;
|
||||
-ms-flex: none;
|
||||
flex: none; }
|
||||
div.cardList ul li .favicon img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px; }
|
||||
div.cardList ul li .label {
|
||||
-webkit-box-flex: auto;
|
||||
-webkit-flex: auto;
|
||||
-moz-box-flex: auto;
|
||||
-moz-flex: auto;
|
||||
-ms-flex: auto;
|
||||
flex: auto;
|
||||
font-size: 18pt;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px; }
|
||||
div.cardList ul {
|
||||
background-color: #e38800; }
|
||||
div.cardList ul li {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: white;
|
||||
transition: margin-left 0.3s ease-in-out;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-moz-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; }
|
||||
div.cardList ul li.selected {
|
||||
margin-left: 50px;
|
||||
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); }
|
||||
div.cardList ul li.archived {
|
||||
background-color: #eeeeee;
|
||||
color: #999; }
|
||||
div.cardList ul li .favicon {
|
||||
width: 48px;
|
||||
-webkit-box-flex: none;
|
||||
-webkit-flex: none;
|
||||
-moz-box-flex: none;
|
||||
-moz-flex: none;
|
||||
-ms-flex: none;
|
||||
flex: none; }
|
||||
div.cardList ul li .favicon img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px; }
|
||||
div.cardList ul li .label {
|
||||
-webkit-box-flex: auto;
|
||||
-webkit-flex: auto;
|
||||
-moz-box-flex: auto;
|
||||
-moz-flex: auto;
|
||||
-ms-flex: auto;
|
||||
flex: auto;
|
||||
font-size: 18pt;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px; }
|
||||
|
||||
div.cardList.narrow.loadingCard li.selected:after {
|
||||
color: white;
|
||||
@ -1763,9 +1775,9 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
content: ""; }
|
||||
|
||||
#cardDetailPage .view.archived, .cardDetail .view.archived {
|
||||
background-color: #cccccc; }
|
||||
background-color: #eeeeee; }
|
||||
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
|
||||
background-color: brown;
|
||||
background-color: #e38800;
|
||||
color: white; }
|
||||
#cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow {
|
||||
font-size: 24pt; }
|
||||
@ -1831,7 +1843,7 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid black; }
|
||||
#cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar {
|
||||
background-color: brown;
|
||||
background-color: #e38800;
|
||||
color: white; }
|
||||
|
||||
.cardDetailToolbar.edit li {
|
||||
@ -1856,18 +1868,23 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
-o-user-select: text;
|
||||
user-select: text;
|
||||
font-size: 24pt;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 0px; }
|
||||
.content input.cardLabel {
|
||||
width: 100%;
|
||||
height: 52px; }
|
||||
.content .tagEditor {
|
||||
padding: 10px; }
|
||||
.content .cardNotes {
|
||||
padding: 10px;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
font-size: 10pt;
|
||||
font-style: italic;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word; }
|
||||
.content .dropArea {
|
||||
border: 3px dashed red;
|
||||
background-color: #ccc;
|
||||
width: 100%;
|
||||
height: 40px; }
|
||||
.content .cardField {
|
||||
@ -1881,33 +1898,23 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
-webkit-flex-direction: row;
|
||||
-moz-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row; }
|
||||
flex-direction: row;
|
||||
background-color: rgba(255, 255, 255, 0.75); }
|
||||
.content .cardField.dragged {
|
||||
display: none; }
|
||||
.content .cardField .fieldValues {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding: 10px; }
|
||||
.content .cardField .fieldValues .fieldLabel {
|
||||
color: gray; }
|
||||
.content .cardField .fieldValues .fieldValue {
|
||||
font-size: 18pt;
|
||||
-webkit-user-select: text;
|
||||
/* Chrome all / Safari all */
|
||||
-moz-user-select: text;
|
||||
/* Firefox all */
|
||||
-ms-user-select: text;
|
||||
/* IE 10+ */
|
||||
/* No support for these yet, use at own risk */
|
||||
-o-user-select: text;
|
||||
user-select: text; }
|
||||
.content .cardField .fieldValues .fieldValue.hidden {
|
||||
font-family: clipperz-password; }
|
||||
.content .cardField .fieldValues .removeField {
|
||||
.content .cardField .fieldEditAction {
|
||||
-webkit-box-flex: none;
|
||||
-webkit-flex: none;
|
||||
-moz-box-flex: none;
|
||||
-moz-flex: none;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 32px; }
|
||||
.content .cardField .fieldEditAction .removeField {
|
||||
-webkit-align-self: flex-start;
|
||||
-moz-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
font-family: 'clipperz-icons';
|
||||
-webkit-font-feature-settings: "$foo","$bar";
|
||||
-moz-font-feature-settings: "$foo=1, $bar=1";
|
||||
@ -1917,11 +1924,72 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
font-feature-settings: "$foo","$bar";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
display: block;
|
||||
margin: 6px;
|
||||
cursor: pointer;
|
||||
color: gray;
|
||||
color: #ccc;
|
||||
font-size: 20pt; }
|
||||
.content .cardField .fieldValues .removeField:hover {
|
||||
color: red; }
|
||||
.content .cardField .fieldEditAction .removeField:hover {
|
||||
color: #9b0000; }
|
||||
.content .cardField .fieldEditAction .toggleLock {
|
||||
-webkit-align-self: flex-end;
|
||||
-moz-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
font-family: 'clipperz-icons';
|
||||
-webkit-font-feature-settings: "$foo","$bar";
|
||||
-moz-font-feature-settings: "$foo=1, $bar=1";
|
||||
-moz-font-feature-settings: "$foo","$bar";
|
||||
-ms-font-feature-settings: "$foo","$bar";
|
||||
-o-font-feature-settings: "$foo","$bar";
|
||||
font-feature-settings: "$foo","$bar";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
display: block;
|
||||
margin: 6px;
|
||||
margin-left: 12px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
font-size: 20pt; }
|
||||
.content .cardField .fieldEditAction .toggleLock:hover {
|
||||
color: #888; }
|
||||
.content .cardField .fieldValues {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding: 10px; }
|
||||
.content .cardField .fieldValues .fieldLabel {
|
||||
color: gray;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px; }
|
||||
.content .cardField .fieldValues .fieldLabel input {
|
||||
font-size: 12pt;
|
||||
color: gray;
|
||||
border: 0px;
|
||||
width: 100%; }
|
||||
.content .cardField .fieldValues .fieldValue {
|
||||
font-size: 18pt;
|
||||
line-height: 28px;
|
||||
-webkit-user-select: text;
|
||||
/* Chrome all / Safari all */
|
||||
-moz-user-select: text;
|
||||
/* Firefox all */
|
||||
-ms-user-select: text;
|
||||
/* IE 10+ */
|
||||
/* No support for these yet, use at own risk */
|
||||
-o-user-select: text;
|
||||
user-select: text;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
border: 0px;
|
||||
width: 100%; }
|
||||
.content .cardField .fieldValues .fieldValue.hidden {
|
||||
font-family: clipperz-password;
|
||||
font-size: 23pt; }
|
||||
.content .cardField .fieldAction {
|
||||
-webkit-box-flex: none;
|
||||
-webkit-flex: none;
|
||||
@ -1929,13 +1997,11 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
-moz-flex: none;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
-webkit-align-self: center;
|
||||
-moz-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center; }
|
||||
-webkit-align-self: flex-start;
|
||||
-moz-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start; }
|
||||
.content .cardField .action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-family: 'clipperz-icons';
|
||||
-webkit-font-feature-settings: "$foo","$bar";
|
||||
-moz-font-feature-settings: "$foo=1, $bar=1";
|
||||
@ -1945,7 +2011,11 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
font-feature-settings: "$foo","$bar";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 20pt; }
|
||||
color: #aaa;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 15pt;
|
||||
margin: 6px; }
|
||||
.content .newCardField {
|
||||
font-family: 'clipperz-icons';
|
||||
-webkit-font-feature-settings: "$foo","$bar";
|
||||
@ -1956,8 +2026,9 @@ div.cardList.narrow.EXPIRED ul li:after {
|
||||
font-feature-settings: "$foo","$bar";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
margin: 6px;
|
||||
cursor: pointer;
|
||||
color: gray;
|
||||
color: #ccc;
|
||||
font-size: 20pt; }
|
||||
.content .newCardField:hover {
|
||||
color: green; }
|
||||
@ -2003,6 +2074,9 @@ body:after {
|
||||
input {
|
||||
font-family: "clipperz-font"; }
|
||||
|
||||
textarea {
|
||||
font-family: "clipperz-font"; }
|
||||
|
||||
/*
|
||||
|
||||
Bootstrap CSS suggests these size breakpoints:
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -304,7 +304,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58882,
|
||||
"name": "close",
|
||||
"ligatures": "failure, failed, delete, clear"
|
||||
"ligatures": "failure, failed, delete, clear, cancel"
|
||||
},
|
||||
"setIdx": 2,
|
||||
"iconIdx": 254
|
||||
@ -329,7 +329,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58883,
|
||||
"name": "checkmark",
|
||||
"ligatures": "done, ok"
|
||||
"ligatures": "done, ok, save"
|
||||
},
|
||||
"setIdx": 2,
|
||||
"iconIdx": 255
|
||||
@ -352,7 +352,7 @@
|
||||
"prevSize": 32,
|
||||
"code": 58890,
|
||||
"name": "popup",
|
||||
"ligatures": "url"
|
||||
"ligatures": "url, direct login"
|
||||
},
|
||||
"setIdx": 5,
|
||||
"iconIdx": 35
|
||||
@ -375,11 +375,36 @@
|
||||
"prevSize": 32,
|
||||
"code": 58895,
|
||||
"name": "plus",
|
||||
"ligatures": "add card"
|
||||
"ligatures": "add card, add new field"
|
||||
},
|
||||
"setIdx": 5,
|
||||
"iconIdx": 125
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M512 81.92c-237.568 0-430.080 192.614-430.080 430.080 0 237.568 192.563 430.080 430.080 430.080 237.517 0 430.080-192.563 430.080-430.080 0-237.517-192.563-430.080-430.080-430.080zM600.525 512l156.723 156.723-88.525 88.525-156.723-156.723-156.723 156.723-88.474-88.525 156.672-156.723-156.672-156.672 88.474-88.525 156.723 156.672 156.723-156.672 88.525 88.474-156.723 156.723z"
|
||||
],
|
||||
"tags": [
|
||||
"cross",
|
||||
"cancel",
|
||||
"close",
|
||||
"remove",
|
||||
"delete"
|
||||
],
|
||||
"grid": 20
|
||||
},
|
||||
"properties": {
|
||||
"id": 126,
|
||||
"order": 19,
|
||||
"prevSize": 32,
|
||||
"code": 58898,
|
||||
"name": "cross",
|
||||
"ligatures": "remove field"
|
||||
},
|
||||
"setIdx": 5,
|
||||
"iconIdx": 126
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
|
||||
@ -231,6 +231,26 @@ console.log("DROP"); //, anEvent);
|
||||
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
|
||||
},
|
||||
|
||||
toggleLock: function (aField) {
|
||||
var reference = this.props['_reference'];
|
||||
|
||||
return function (anEvent) {
|
||||
//console.log("FIELD", aField.isHidden(), aField);
|
||||
// aField.setIsHidden(!aField.isHidden());
|
||||
// MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
|
||||
|
||||
return Clipperz.Async.callbacks("Clipperz.PM.UI.Components.Cards.Edit.toggleLock", [
|
||||
MochiKit.Base.method(aField, 'isHidden'),
|
||||
MochiKit.Base.operator.lognot,
|
||||
MochiKit.Base.method(aField, 'setIsHidden'),
|
||||
function (aValue) {
|
||||
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference);
|
||||
},
|
||||
], {trace:false});
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
//============================================================================
|
||||
|
||||
renderLabel: function (aLabel) {
|
||||
@ -285,10 +305,17 @@ console.log("DROP"); //, anEvent);
|
||||
// 'onDrop':this.drop,
|
||||
'onDragEnd':this.dragEnd
|
||||
}, [
|
||||
React.DOM.div({'className':'fieldValues'}, [
|
||||
React.DOM.div({'className':'fieldEditAction'}, [
|
||||
React.DOM.span({'className':'removeField', 'onClick':this.removeField(field)}, "remove field"),
|
||||
React.DOM.input({'className':'fieldLabel', 'onChange':this.handleChange(field, 'setLabel'), 'defaultValue':aField['label'], 'placeholder': "label"}),
|
||||
React.DOM.textarea({'className':React.addons.classSet(cardFieldValueClasses), 'onChange':this.handleChange(field, 'setValue'), 'defaultValue':aField['value'], 'placeholder': "value"}),
|
||||
React.DOM.span({'className':'toggleLock', 'onClick':this.toggleLock(field)}, aField['isHidden'] ? "locked" : "unlocked"),
|
||||
]),
|
||||
React.DOM.div({'className':'fieldValues'}, [
|
||||
React.DOM.div({'className':'fieldLabel'}, [
|
||||
React.DOM.input({'_className_':'_fieldLabel_', 'onChange':this.handleChange(field, 'setLabel'), 'defaultValue':aField['label'], 'placeholder': "label"}),
|
||||
]),
|
||||
React.DOM.div({'className':'fieldValue'}, [
|
||||
React.DOM.textarea({'className':React.addons.classSet(cardFieldValueClasses), 'onChange':this.handleChange(field, 'setValue'), 'defaultValue':aField['value'], 'placeholder': "value"}),
|
||||
])
|
||||
]),
|
||||
React.DOM.div({'className':'fieldAction action'}, aField['actionType'].toLowerCase())
|
||||
]);
|
||||
@ -362,9 +389,9 @@ console.log("DROP"); //, anEvent);
|
||||
React.DOM.div({'className':'content'}, [
|
||||
this.renderLabel(this.props['label']),
|
||||
this.renderTags(this.props['tags']),
|
||||
this.renderNotes(this.props['notes']),
|
||||
this.renderFields(this.fields()),
|
||||
this.renderAddNewField(),
|
||||
this.renderNotes(this.props['notes']),
|
||||
this.renderDirectLogins(this.props['directLogins'])
|
||||
])
|
||||
]),
|
||||
|
||||
@ -50,7 +50,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
//----------------------------------------------------------------------------
|
||||
|
||||
renderEmpty: function () {
|
||||
return React.DOM.h4({}, "EMPTY");
|
||||
// return React.DOM.h4({}, "EMPTY");
|
||||
return React.DOM.h4({}, "");
|
||||
},
|
||||
|
||||
//----------------------------------------------------------------------------
|
||||
@ -58,8 +59,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
renderLoading: function () {
|
||||
return React.DOM.div({className:'loading'},[
|
||||
this.renderLabel(),
|
||||
React.DOM.h5({className:'message'}, "loading")
|
||||
/*
|
||||
// React.DOM.h5({className:'message'}, "loading")
|
||||
|
||||
React.DOM.div({className:'overlay'}, [
|
||||
React.DOM.div({className:'spinner'}, [
|
||||
React.DOM.div({className:'bar01'}),
|
||||
@ -76,7 +77,6 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
React.DOM.div({className:'bar12'})
|
||||
])
|
||||
])
|
||||
*/
|
||||
]);
|
||||
},
|
||||
|
||||
@ -87,7 +87,16 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
},
|
||||
|
||||
renderNotes: function (someNotes) {
|
||||
return React.DOM.div({'className':'cardNotes'}, someNotes);
|
||||
var result;
|
||||
|
||||
//console.log("NOTES", someNotes);
|
||||
if (someNotes != "") {
|
||||
result = React.DOM.div({'className':'cardNotes'}, someNotes);
|
||||
} else {
|
||||
result = null;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
//............................................................................
|
||||
@ -98,10 +107,18 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
|
||||
renderTags: function (someTags) {
|
||||
var tags;
|
||||
var result;
|
||||
|
||||
//console.log("TAGS", someTags);
|
||||
tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare);
|
||||
// return React.DOM.div({'className':'cardTags'}, MochiKit.Base.map(this.renderTag, tags));
|
||||
return Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'readOnly':true });
|
||||
|
||||
if (tags.length > 0) {
|
||||
result = Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'readOnly':true });
|
||||
} else {
|
||||
result = null;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
//............................................................................
|
||||
@ -119,6 +136,7 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
cardFieldValueClasses['hidden'] = aField['isHidden'];
|
||||
|
||||
return React.DOM.div({'className':React.addons.classSet(cardFieldClasses)}, [
|
||||
React.DOM.div({'className':'fieldEditAction'}, null),
|
||||
React.DOM.div({'className':'fieldValues'}, [
|
||||
React.DOM.div({'className':'fieldLabel'}, aField['label']),
|
||||
React.DOM.div({'className':React.addons.classSet(cardFieldValueClasses)}, aField['value']),
|
||||
@ -157,8 +175,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
|
||||
React.DOM.div({'className':'content'}, [
|
||||
this.renderLabel(this.props['label']),
|
||||
this.renderTags(this.props['tags']),
|
||||
this.renderNotes(this.props['notes']),
|
||||
this.renderFields(this.props['fields']),
|
||||
this.renderNotes(this.props['notes']),
|
||||
this.renderDirectLogins(this.props['directLogins'])
|
||||
])
|
||||
]);
|
||||
|
||||
@ -88,7 +88,8 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
|
||||
React.DOM.ul({'className':'defaultSet'}, [
|
||||
React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"),
|
||||
React.DOM.li({'className':'recentCards', 'onClick': this.selectRecent}, "Recent"),
|
||||
React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
|
||||
// React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
|
||||
React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged")
|
||||
]),
|
||||
React.DOM.div({'className':'search'}, [
|
||||
React.DOM.form({'className':'searchForm'}, [
|
||||
|
||||
@ -87,6 +87,7 @@ Clipperz.PM.UI.MainController = function() {
|
||||
Mousetrap.bind(['up', 'k'], MochiKit.Base.method(this, 'selectPreviousCard'));
|
||||
Mousetrap.bind(['down', 'j'], MochiKit.Base.method(this, 'selectNextCard'));
|
||||
|
||||
Mousetrap.bind(['* a'], MochiKit.Base.method(this, 'selectAllCards_handler'));
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -649,15 +650,15 @@ console.log("THE BROWSER IS OFFLINE");
|
||||
var deferredResult;
|
||||
|
||||
deferredResult = new Clipperz.Async.Deferred('MainController.refreshUI', {trace:false});
|
||||
// deferredResult.addMethod(this, 'resetRecordsInfo'),
|
||||
deferredResult.addMethod(this, 'refreshSelectedCards');
|
||||
deferredResult.addMethod(this, 'renderTags');
|
||||
|
||||
if (selectedCardReference != null) {
|
||||
deferredResult.addMethod(this.user(), 'getRecord', selectedCardReference);
|
||||
deferredResult.addMethod(this, 'collectRecordInfo');
|
||||
deferredResult.addMethod(this, 'setPageProperties', 'mainPage', 'selectedCard');
|
||||
deferredResult.addMethod(this, 'setPageProperties', this.currentPage(), 'selectedCard');
|
||||
}
|
||||
|
||||
deferredResult.callback();
|
||||
|
||||
return deferredResult;
|
||||
@ -1128,7 +1129,8 @@ console.log("THE BROWSER IS OFFLINE");
|
||||
|
||||
goBackToMainPage: function (anEvent) {
|
||||
if (this.currentPage() == 'cardDetailPage') {
|
||||
// this.updateSelectedCard(anEvent, true, false); // TODO: is this statement really needed?
|
||||
var resetSelection = null;
|
||||
this.updateSelectedCard(resetSelection, true, false);
|
||||
this.moveOutPage(this.currentPage(), 'mainPage');
|
||||
}
|
||||
},
|
||||
@ -1261,19 +1263,27 @@ console.log("THE BROWSER IS OFFLINE");
|
||||
|
||||
addCardClick_handler: function () {
|
||||
var newRecordReference;
|
||||
var newRecord;
|
||||
|
||||
return Clipperz.Async.callbacks("MainController.addCardClick_handler", [
|
||||
MochiKit.Base.method(this.user(), 'createNewRecord'),
|
||||
MochiKit.Base.methodcaller('reference'),
|
||||
// MochiKit.Base.method(this, 'selectCard'),
|
||||
function (aValue) {
|
||||
newRecordReference = aValue;
|
||||
// return {'reference': newRecordReference, 'label': ""};
|
||||
return newRecordReference;
|
||||
newRecord = aValue;
|
||||
return newRecord;
|
||||
},
|
||||
MochiKit.Base.methodcaller('addField', {'label':"", 'value':"", 'isHidden':false}),
|
||||
function () { return newRecord; },
|
||||
MochiKit.Base.methodcaller('reference'),
|
||||
// function (aValue) {
|
||||
// newRecordReference = aValue;
|
||||
// return newRecordReference;
|
||||
// },
|
||||
MochiKit.Base.method(this, 'refreshUI'),
|
||||
MochiKit.Base.bind(function () {
|
||||
function () { return newRecord; },
|
||||
MochiKit.Base.methodcaller('reference'),
|
||||
MochiKit.Base.bind(function (aRecordReference) {
|
||||
return this.selectCard({
|
||||
'reference': newRecordReference,
|
||||
'reference': aRecordReference,
|
||||
'label': ""
|
||||
}, true);
|
||||
}, this),
|
||||
|
||||
@ -32,6 +32,11 @@ body:after {
|
||||
input {
|
||||
font-family: "clipperz-font";
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: "clipperz-font";
|
||||
}
|
||||
|
||||
@import "core/sizes";
|
||||
|
||||
//@import "sizes/narrow";
|
||||
|
||||
@ -228,6 +228,9 @@ div.cardContent {
|
||||
@include flex($cardListWidth, 0);
|
||||
overflow-y: scroll;
|
||||
|
||||
z-index: 5;
|
||||
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
|
||||
|
||||
div.cardToolbar.narrow {
|
||||
}
|
||||
|
||||
@ -247,7 +250,8 @@ div.cardContent {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
font-size: 75pt;
|
||||
color: blue;
|
||||
// color: blue;
|
||||
color: #aaa;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
@ -258,6 +262,12 @@ div.cardContent {
|
||||
margin-bottom: 10px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
// color: $clipperz-orange;
|
||||
color: green;
|
||||
// color: brown;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -284,6 +294,10 @@ div.cardContent {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
& > div.view /*, & > div.editWrapper > div.edit */ {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.tagEditor {
|
||||
|
||||
&.readWrite {
|
||||
border: 1px solid red;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
$cardListHeight: 48px;
|
||||
$faviconSize: 32px;
|
||||
$padding: ($cardListHeight - $faviconSize) / 2;
|
||||
$cardArchivedColor: #ccc;
|
||||
$cardToolbarBackgroundColor: brown;
|
||||
$cardArchivedColor: #eee;
|
||||
$cardToolbarBackgroundColor: #e38800;
|
||||
//$cardToolbarBackgroundColor: $clipperz-blue;
|
||||
$iconMargin: 6px;
|
||||
$labelColor: gray;
|
||||
|
||||
div.cardList {
|
||||
// background-color: $yellow;
|
||||
@ -14,21 +17,32 @@ div.cardList {
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: #e38800;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: white;
|
||||
transition: margin-left 0.3s ease-in-out;
|
||||
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
|
||||
&.selected {
|
||||
background-color: yellow;
|
||||
// background-color: yellow;
|
||||
// background-color: brown;
|
||||
// background-color: $clipperz-blue;
|
||||
// color: white;
|
||||
margin-left: 50px;
|
||||
box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&.archived {
|
||||
// background-color: pink;
|
||||
background-color: $cardArchivedColor;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
|
||||
.favicon {
|
||||
@ -187,12 +201,13 @@ $cardViewBasePadding: 10px;
|
||||
}
|
||||
|
||||
.edit {
|
||||
// box-shadow: inset 2px 0 6px 0 rgba(0,0,0, 0.1);
|
||||
|
||||
.cardDetailToolbar {
|
||||
// background-color: purple;
|
||||
background-color: $cardToolbarBackgroundColor;
|
||||
color: white;
|
||||
// @include icon-font();
|
||||
// font-size: 20pt;
|
||||
|
||||
// box-shadow: inset 2px 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -244,7 +259,7 @@ $cardViewBasePadding: 10px;
|
||||
@include user-select(text);
|
||||
|
||||
font-size: 24pt;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
padding: $cardViewBasePadding;
|
||||
// height: 52px;
|
||||
// line-height: 32px;
|
||||
@ -252,20 +267,32 @@ $cardViewBasePadding: 10px;
|
||||
}
|
||||
|
||||
input.cardLabel {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.tagEditor {
|
||||
padding: $cardViewBasePadding;
|
||||
// background-color: cyan;
|
||||
}
|
||||
|
||||
.cardNotes {
|
||||
padding: $cardViewBasePadding;
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
|
||||
font-size: 10pt;
|
||||
font-style: italic;
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
// background-color: gold;
|
||||
}
|
||||
|
||||
.dropArea {
|
||||
border: 3px dashed red;
|
||||
// border: 3px dashed red;
|
||||
background-color: #ccc;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
@ -273,6 +300,8 @@ $cardViewBasePadding: 10px;
|
||||
.cardField {
|
||||
@include flexbox;
|
||||
@include flex-direction(row);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
// border-bottom: 1px solid #eee;
|
||||
|
||||
// background-color: lightgreen;
|
||||
|
||||
@ -280,53 +309,110 @@ $cardViewBasePadding: 10px;
|
||||
// border: 4px dotted red;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fieldEditAction {
|
||||
@include flex(none);
|
||||
width: 32px;
|
||||
// background-color: pink;
|
||||
|
||||
// @include flexbox;
|
||||
// @include flex-direction(column);
|
||||
|
||||
.removeField {
|
||||
@include align-self(flex-start);
|
||||
@include icon-font();
|
||||
|
||||
display: block;
|
||||
margin: $iconMargin;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
font-size: 20pt;
|
||||
|
||||
&:hover {
|
||||
color: rgb(155, 0, 0);
|
||||
};
|
||||
}
|
||||
|
||||
.toggleLock {
|
||||
@include align-self(flex-end);
|
||||
@include icon-font();
|
||||
|
||||
display: block;
|
||||
margin: $iconMargin;
|
||||
margin-left: $iconMargin * 2;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
font-size: 20pt;
|
||||
|
||||
&:hover {
|
||||
color: #888;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.fieldValues {
|
||||
@include flex(1);
|
||||
padding: $cardViewBasePadding;
|
||||
|
||||
.fieldLabel {
|
||||
color: gray;
|
||||
color: $labelColor;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
input {
|
||||
font-size: 12pt;
|
||||
color: $labelColor;
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldValue {
|
||||
font-size: 18pt;
|
||||
line-height: 28px;
|
||||
@include user-select(text);
|
||||
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
|
||||
&.hidden {
|
||||
font-family: clipperz-password;
|
||||
font-size: 23pt;
|
||||
}
|
||||
}
|
||||
|
||||
.removeField {
|
||||
@include icon-font();
|
||||
cursor: pointer;
|
||||
color: gray;
|
||||
font-size: 20pt;
|
||||
|
||||
&:hover {
|
||||
color: red;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.fieldAction {
|
||||
@include flex(none);
|
||||
@include align-self(center);
|
||||
// @include align-self(center);
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@include icon-font();
|
||||
font-size: 20pt;
|
||||
color: #aaa;
|
||||
|
||||
// width: 32px;
|
||||
width: 20px;
|
||||
// height: 32px;
|
||||
height: 20px;
|
||||
// font-size: 20pt;
|
||||
font-size: 15pt;
|
||||
margin: $iconMargin;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.newCardField {
|
||||
@include icon-font();
|
||||
margin: $iconMargin;
|
||||
cursor: pointer;
|
||||
color: gray;
|
||||
color: #ccc;
|
||||
font-size: 20pt;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -21,6 +21,10 @@
|
||||
&.recentCards:before {
|
||||
content: "recent";
|
||||
}
|
||||
|
||||
&.untaggedCards {
|
||||
padding-left: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,7 +129,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
$selectionColor: yellow;
|
||||
|
||||
//$selectionColor: yellow;
|
||||
$selectionColor: $clipperz-orange;
|
||||
|
||||
#selections.ALL {
|
||||
li.allCards {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user