clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

General improvements to the UI

Browse Source 
More work still needed, but still a meaningful step forward.
This commit is contained in:
Giulio Cesare Solaroli 2015-02-04 23:44:32 +01:00
parent 3d17482db4
commit dac835b5c6
12 changed files with 414 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
frontend/delta/css/clipperz.css
View File

@ -886,7 +886,9 @@ div.cardContent {
-moz-flex: 1 0; -moz-flex: 1 0;
-ms-flex: 1 0; -ms-flex: 1 0;
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 { div.cardContent div.cardListColumn.column div.cardList {
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 120px; } padding-bottom: 120px; }
@ -918,7 +920,7 @@ div.cardContent {
position: relative; position: relative;
bottom: 0px; bottom: 0px;
font-size: 75pt; font-size: 75pt;
color: blue; color: #aaa;
width: 100px; width: 100px;
height: 100px; height: 100px;
float: right; float: right;
@ -926,6 +928,8 @@ div.cardContent {
margin-left: 100px; margin-left: 100px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; } cursor: pointer; }
div.cardContent div.cardListColumn.column div.addCardButton:hover {
color: green; }
div.cardContent div.cardDetail.column { div.cardContent div.cardDetail.column {
-webkit-box-flex: 2; -webkit-box-flex: 2;
-webkit-flex: 2; -webkit-flex: 2;
@ -980,6 +984,8 @@ div.cardContent {
z-index: 11; } z-index: 11; }
div.cardContent div.cardDetail.column div.editWrapper > div.edit .content { div.cardContent div.cardDetail.column div.editWrapper > div.edit .content {
background-color: white; } 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 { div.cardContent div.cardDetail.column > div.view {
-webkit-box-flex: auto; -webkit-box-flex: auto;
-webkit-flex: auto; -webkit-flex: auto;
@ -1194,8 +1200,6 @@ div.dialogBox {
flex: none; flex: none;
cursor: pointer; } cursor: pointer; }
.tagEditor.readWrite {
border: 1px solid red; }
.tagEditor ul { .tagEditor ul {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -1483,6 +1487,8 @@ div.dialogBox {
content: "clipperz"; } content: "clipperz"; }
#selections ul.defaultSet li.recentCards:before { #selections ul.defaultSet li.recentCards:before {
content: "recent"; } content: "recent"; }
#selections ul.defaultSet li.untaggedCards {
padding-left: 70px; }
#selections .search form input { #selections .search form input {
font-family: "clipperz-font"; font-family: "clipperz-font";
color: #999; color: #999;
@ -1575,20 +1581,20 @@ div.dialogBox {
border-radius: 4px; } border-radius: 4px; }
#selections.ALL li.allCards { #selections.ALL li.allCards {
color: yellow; } color: #ff9900; }
#selections.RECENT li.recentCards { #selections.RECENT li.recentCards {
color: yellow; } color: #ff9900; }
#selections.UNTAGGED li.untaggedCards { #selections.UNTAGGED li.untaggedCards {
color: yellow; } color: #ff9900; }
#selections.SEARCH div.search .searchResultInfo { #selections.SEARCH div.search .searchResultInfo {
color: yellow; color: #ff9900;
display: block; } display: block; }
#selections.TAG ul.tagList li.selected { #selections.TAG ul.tagList li.selected {
color: yellow; } color: #ff9900; }
#extraFeaturesPanel { #extraFeaturesPanel {
background-color: black; background-color: black;
@ -1666,48 +1672,54 @@ div.dialogBox {
div.cardList.loadingCard li.selected { div.cardList.loadingCard li.selected {
background-color: gray; } background-color: gray; }
div.cardList ul li { div.cardList ul {
cursor: pointer; background-color: #e38800; }
border-bottom: 1px solid #eee; div.cardList ul li {
display: -webkit-box; cursor: pointer;
display: -webkit-flex; border-bottom: 1px solid #eee;
display: -moz-flex; background-color: white;
display: -ms-flexbox; transition: margin-left 0.3s ease-in-out;
display: flex; display: -webkit-box;
-webkit-box-direction: normal; display: -webkit-flex;
-webkit-box-orient: horizontal; display: -moz-flex;
-webkit-flex-direction: row; display: -ms-flexbox;
-moz-flex-direction: row; display: flex;
-ms-flex-direction: row; -webkit-box-direction: normal;
flex-direction: row; } -webkit-box-orient: horizontal;
div.cardList ul li.selected { -webkit-flex-direction: row;
background-color: yellow; } -moz-flex-direction: row;
div.cardList ul li.archived { -ms-flex-direction: row;
background-color: #cccccc; } flex-direction: row; }
div.cardList ul li .favicon { div.cardList ul li.selected {
width: 48px; margin-left: 50px;
-webkit-box-flex: none; box-shadow: -3px 1px 3px 0 rgba(0, 0, 0, 0.2); }
-webkit-flex: none; div.cardList ul li.archived {
-moz-box-flex: none; background-color: #eeeeee;
-moz-flex: none; color: #999; }
-ms-flex: none; div.cardList ul li .favicon {
flex: none; } width: 48px;
div.cardList ul li .favicon img { -webkit-box-flex: none;
width: 32px; -webkit-flex: none;
height: 32px; -moz-box-flex: none;
padding: 8px; } -moz-flex: none;
div.cardList ul li .label { -ms-flex: none;
-webkit-box-flex: auto; flex: none; }
-webkit-flex: auto; div.cardList ul li .favicon img {
-moz-box-flex: auto; width: 32px;
-moz-flex: auto; height: 32px;
-ms-flex: auto; padding: 8px; }
flex: auto; div.cardList ul li .label {
font-size: 18pt; -webkit-box-flex: auto;
padding-top: 0.5em; -webkit-flex: auto;
padding-bottom: 0.5em; -moz-box-flex: auto;
padding-left: 8px; -moz-flex: auto;
padding-right: 8px; } -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 { div.cardList.narrow.loadingCard li.selected:after {
color: white; color: white;
@ -1763,9 +1775,9 @@ div.cardList.narrow.EXPIRED ul li:after {
content: ""; } content: ""; }
#cardDetailPage .view.archived, .cardDetail .view.archived { #cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #cccccc; } background-color: #eeeeee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar { #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: brown; background-color: #e38800;
color: white; } color: white; }
#cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow { #cardDetailPage .view .cardDetailToolbar.narrow, .cardDetail .view .cardDetailToolbar.narrow {
font-size: 24pt; } font-size: 24pt; }
@ -1831,7 +1843,7 @@ div.cardList.narrow.EXPIRED ul li:after {
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid black; } border-bottom: 1px solid black; }
#cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar { #cardDetailPage .edit .cardDetailToolbar, .cardDetail .edit .cardDetailToolbar {
background-color: brown; background-color: #e38800;
color: white; } color: white; }
.cardDetailToolbar.edit li { .cardDetailToolbar.edit li {
@ -1856,18 +1868,23 @@ div.cardList.narrow.EXPIRED ul li:after {
-o-user-select: text; -o-user-select: text;
user-select: text; user-select: text;
font-size: 24pt; font-size: 24pt;
width: 100%;
padding: 10px; padding: 10px;
border: 0px; } border: 0px; }
.content input.cardLabel { .content input.cardLabel {
width: 100%;
height: 52px; } height: 52px; }
.content .tagEditor { .content .tagEditor {
padding: 10px; } padding: 10px; }
.content .cardNotes { .content .cardNotes {
padding: 10px; padding: 10px;
width: 100%; } width: 100%;
border: 0px;
font-size: 10pt;
font-style: italic;
white-space: pre-wrap;
word-wrap: break-word; }
.content .dropArea { .content .dropArea {
border: 3px dashed red; background-color: #ccc;
width: 100%; width: 100%;
height: 40px; } height: 40px; }
.content .cardField { .content .cardField {
@ -1881,33 +1898,23 @@ div.cardList.narrow.EXPIRED ul li:after {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-moz-flex-direction: row; -moz-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; } flex-direction: row;
background-color: rgba(255, 255, 255, 0.75); }
.content .cardField.dragged { .content .cardField.dragged {
display: none; } display: none; }
.content .cardField .fieldValues { .content .cardField .fieldEditAction {
-webkit-box-flex: 1; -webkit-box-flex: none;
-webkit-flex: 1; -webkit-flex: none;
-moz-box-flex: 1; -moz-box-flex: none;
-moz-flex: 1; -moz-flex: none;
-ms-flex: 1; -ms-flex: none;
flex: 1; flex: none;
padding: 10px; } width: 32px; }
.content .cardField .fieldValues .fieldLabel { .content .cardField .fieldEditAction .removeField {
color: gray; } -webkit-align-self: flex-start;
.content .cardField .fieldValues .fieldValue { -moz-align-self: flex-start;
font-size: 18pt; -ms-flex-item-align: start;
-webkit-user-select: text; align-self: flex-start;
/* 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 {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
-moz-font-feature-settings: "$foo=1, $bar=1"; -moz-font-feature-settings: "$foo=1, $bar=1";
@ -1917,11 +1924,72 @@ div.cardList.narrow.EXPIRED ul li:after {
font-feature-settings: "$foo","$bar"; font-feature-settings: "$foo","$bar";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
display: block;
margin: 6px;
cursor: pointer; cursor: pointer;
color: gray; color: #ccc;
font-size: 20pt; } font-size: 20pt; }
.content .cardField .fieldValues .removeField:hover { .content .cardField .fieldEditAction .removeField:hover {
color: red; } 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 { .content .cardField .fieldAction {
-webkit-box-flex: none; -webkit-box-flex: none;
-webkit-flex: none; -webkit-flex: none;
@ -1929,13 +1997,11 @@ div.cardList.narrow.EXPIRED ul li:after {
-moz-flex: none; -moz-flex: none;
-ms-flex: none; -ms-flex: none;
flex: none; flex: none;
-webkit-align-self: center; -webkit-align-self: flex-start;
-moz-align-self: center; -moz-align-self: flex-start;
-ms-flex-item-align: center; -ms-flex-item-align: start;
align-self: center; } align-self: flex-start; }
.content .cardField .action { .content .cardField .action {
width: 32px;
height: 32px;
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
-moz-font-feature-settings: "$foo=1, $bar=1"; -moz-font-feature-settings: "$foo=1, $bar=1";
@ -1945,7 +2011,11 @@ div.cardList.narrow.EXPIRED ul li:after {
font-feature-settings: "$foo","$bar"; font-feature-settings: "$foo","$bar";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-size: 20pt; } color: #aaa;
width: 20px;
height: 20px;
font-size: 15pt;
margin: 6px; }
.content .newCardField { .content .newCardField {
font-family: 'clipperz-icons'; font-family: 'clipperz-icons';
-webkit-font-feature-settings: "$foo","$bar"; -webkit-font-feature-settings: "$foo","$bar";
@ -1956,8 +2026,9 @@ div.cardList.narrow.EXPIRED ul li:after {
font-feature-settings: "$foo","$bar"; font-feature-settings: "$foo","$bar";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
margin: 6px;
cursor: pointer; cursor: pointer;
color: gray; color: #ccc;
font-size: 20pt; } font-size: 20pt; }
.content .newCardField:hover { .content .newCardField:hover {
color: green; } color: green; }
@ -2003,6 +2074,9 @@ body:after {
input { input {
font-family: "clipperz-font"; } font-family: "clipperz-font"; }
textarea {
font-family: "clipperz-font"; }
/* /*
Bootstrap CSS suggests these size breakpoints: Bootstrap CSS suggests these size breakpoints:

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

33
frontend/delta/fonts/IcoMoon/Clipperz Icon font.json
View File

@ -304,7 +304,7 @@
"prevSize": 32, "prevSize": 32,
"code": 58882, "code": 58882,
"name": "close", "name": "close",
"ligatures": "failure, failed, delete, clear" "ligatures": "failure, failed, delete, clear, cancel"
}, },
"setIdx": 2, "setIdx": 2,
"iconIdx": 254 "iconIdx": 254
@ -329,7 +329,7 @@
"prevSize": 32, "prevSize": 32,
"code": 58883, "code": 58883,
"name": "checkmark", "name": "checkmark",
"ligatures": "done, ok" "ligatures": "done, ok, save"
}, },
"setIdx": 2, "setIdx": 2,
"iconIdx": 255 "iconIdx": 255
@ -352,7 +352,7 @@
"prevSize": 32, "prevSize": 32,
"code": 58890, "code": 58890,
"name": "popup", "name": "popup",
"ligatures": "url" "ligatures": "url, direct login"
}, },
"setIdx": 5, "setIdx": 5,
"iconIdx": 35 "iconIdx": 35
@ -375,11 +375,36 @@
"prevSize": 32, "prevSize": 32,
"code": 58895, "code": 58895,
"name": "plus", "name": "plus",
"ligatures": "add card" "ligatures": "add card, add new field"
}, },
"setIdx": 5, "setIdx": 5,
"iconIdx": 125 "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": { "icon": {
"paths": [ "paths": [

35
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
View File

@ -231,6 +231,26 @@ console.log("DROP"); //, anEvent);
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference); 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) { renderLabel: function (aLabel) {
@ -285,10 +305,17 @@ console.log("DROP"); //, anEvent);
// 'onDrop':this.drop, // 'onDrop':this.drop,
'onDragEnd':this.dragEnd '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.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.span({'className':'toggleLock', 'onClick':this.toggleLock(field)}, aField['isHidden'] ? "locked" : "unlocked"),
React.DOM.textarea({'className':React.addons.classSet(cardFieldValueClasses), 'onChange':this.handleChange(field, 'setValue'), 'defaultValue':aField['value'], 'placeholder': "value"}), ]),
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()) React.DOM.div({'className':'fieldAction action'}, aField['actionType'].toLowerCase())
]); ]);
@ -362,9 +389,9 @@ console.log("DROP"); //, anEvent);
React.DOM.div({'className':'content'}, [ React.DOM.div({'className':'content'}, [
this.renderLabel(this.props['label']), this.renderLabel(this.props['label']),
this.renderTags(this.props['tags']), this.renderTags(this.props['tags']),
this.renderNotes(this.props['notes']),
this.renderFields(this.fields()), this.renderFields(this.fields()),
this.renderAddNewField(), this.renderAddNewField(),
this.renderNotes(this.props['notes']),
this.renderDirectLogins(this.props['directLogins']) this.renderDirectLogins(this.props['directLogins'])
]) ])
]), ]),

34
frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js
View File

@ -50,7 +50,8 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
//---------------------------------------------------------------------------- //----------------------------------------------------------------------------
renderEmpty: function () { 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 () { renderLoading: function () {
return React.DOM.div({className:'loading'},[ return React.DOM.div({className:'loading'},[
this.renderLabel(), this.renderLabel(),
React.DOM.h5({className:'message'}, "loading") // React.DOM.h5({className:'message'}, "loading")
/*
React.DOM.div({className:'overlay'}, [ React.DOM.div({className:'overlay'}, [
React.DOM.div({className:'spinner'}, [ React.DOM.div({className:'spinner'}, [
React.DOM.div({className:'bar01'}), React.DOM.div({className:'bar01'}),
@ -76,7 +77,6 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
React.DOM.div({className:'bar12'}) React.DOM.div({className:'bar12'})
]) ])
]) ])
*/
]); ]);
}, },
@ -87,7 +87,16 @@ Clipperz.PM.UI.Components.Cards.View = React.createClass({
}, },
renderNotes: function (someNotes) { 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) { renderTags: function (someTags) {
var tags; var tags;
var result;
//console.log("TAGS", someTags);
tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare); 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']; cardFieldValueClasses['hidden'] = aField['isHidden'];
return React.DOM.div({'className':React.addons.classSet(cardFieldClasses)}, [ return React.DOM.div({'className':React.addons.classSet(cardFieldClasses)}, [
React.DOM.div({'className':'fieldEditAction'}, null),
React.DOM.div({'className':'fieldValues'}, [ React.DOM.div({'className':'fieldValues'}, [
React.DOM.div({'className':'fieldLabel'}, aField['label']), React.DOM.div({'className':'fieldLabel'}, aField['label']),
React.DOM.div({'className':React.addons.classSet(cardFieldValueClasses)}, aField['value']), 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'}, [ React.DOM.div({'className':'content'}, [
this.renderLabel(this.props['label']), this.renderLabel(this.props['label']),
this.renderTags(this.props['tags']), this.renderTags(this.props['tags']),
this.renderNotes(this.props['notes']),
this.renderFields(this.props['fields']), this.renderFields(this.props['fields']),
this.renderNotes(this.props['notes']),
this.renderDirectLogins(this.props['directLogins']) this.renderDirectLogins(this.props['directLogins'])
]) ])
]); ]);

3
frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
View File

@ -88,7 +88,8 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
React.DOM.ul({'className':'defaultSet'}, [ React.DOM.ul({'className':'defaultSet'}, [
React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"), React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"),
React.DOM.li({'className':'recentCards', 'onClick': this.selectRecent}, "Recent"), 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.div({'className':'search'}, [
React.DOM.form({'className':'searchForm'}, [ React.DOM.form({'className':'searchForm'}, [

30
frontend/delta/js/Clipperz/PM/UI/MainController.js
View File

@ -87,6 +87,7 @@ Clipperz.PM.UI.MainController = function() {
Mousetrap.bind(['up', 'k'], MochiKit.Base.method(this, 'selectPreviousCard')); Mousetrap.bind(['up', 'k'], MochiKit.Base.method(this, 'selectPreviousCard'));
Mousetrap.bind(['down', 'j'], MochiKit.Base.method(this, 'selectNextCard')); Mousetrap.bind(['down', 'j'], MochiKit.Base.method(this, 'selectNextCard'));
Mousetrap.bind(['* a'], MochiKit.Base.method(this, 'selectAllCards_handler'));
return this; return this;
} }
@ -649,15 +650,15 @@ console.log("THE BROWSER IS OFFLINE");
var deferredResult; var deferredResult;
deferredResult = new Clipperz.Async.Deferred('MainController.refreshUI', {trace:false}); deferredResult = new Clipperz.Async.Deferred('MainController.refreshUI', {trace:false});
// deferredResult.addMethod(this, 'resetRecordsInfo'),
deferredResult.addMethod(this, 'refreshSelectedCards'); deferredResult.addMethod(this, 'refreshSelectedCards');
deferredResult.addMethod(this, 'renderTags'); deferredResult.addMethod(this, 'renderTags');
if (selectedCardReference != null) { if (selectedCardReference != null) {
deferredResult.addMethod(this.user(), 'getRecord', selectedCardReference); deferredResult.addMethod(this.user(), 'getRecord', selectedCardReference);
deferredResult.addMethod(this, 'collectRecordInfo'); deferredResult.addMethod(this, 'collectRecordInfo');
deferredResult.addMethod(this, 'setPageProperties', 'mainPage', 'selectedCard'); deferredResult.addMethod(this, 'setPageProperties', this.currentPage(), 'selectedCard');
} }
deferredResult.callback(); deferredResult.callback();
return deferredResult; return deferredResult;
@ -1128,7 +1129,8 @@ console.log("THE BROWSER IS OFFLINE");
goBackToMainPage: function (anEvent) { goBackToMainPage: function (anEvent) {
if (this.currentPage() == 'cardDetailPage') { 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'); this.moveOutPage(this.currentPage(), 'mainPage');
} }
}, },
@ -1261,19 +1263,27 @@ console.log("THE BROWSER IS OFFLINE");
addCardClick_handler: function () { addCardClick_handler: function () {
var newRecordReference; var newRecordReference;
var newRecord;
return Clipperz.Async.callbacks("MainController.addCardClick_handler", [ return Clipperz.Async.callbacks("MainController.addCardClick_handler", [
MochiKit.Base.method(this.user(), 'createNewRecord'), MochiKit.Base.method(this.user(), 'createNewRecord'),
MochiKit.Base.methodcaller('reference'),
// MochiKit.Base.method(this, 'selectCard'),
function (aValue) { function (aValue) {
newRecordReference = aValue; newRecord = aValue;
// return {'reference': newRecordReference, 'label': ""}; return newRecord;
return newRecordReference;
}, },
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.method(this, 'refreshUI'),
MochiKit.Base.bind(function () { function () { return newRecord; },
MochiKit.Base.methodcaller('reference'),
MochiKit.Base.bind(function (aRecordReference) {
return this.selectCard({ return this.selectCard({
'reference': newRecordReference, 'reference': aRecordReference,
'label': "" 'label': ""
}, true); }, true);
}, this), }, this),

5
frontend/delta/scss/clipperz.scss
View File

@ -32,6 +32,11 @@ body:after {
input { input {
font-family: "clipperz-font"; font-family: "clipperz-font";
} }
textarea {
font-family: "clipperz-font";
}
@import "core/sizes"; @import "core/sizes";
//@import "sizes/narrow"; //@import "sizes/narrow";

16
frontend/delta/scss/core/layout.scss
View File

@ -228,6 +228,9 @@ div.cardContent {
@include flex($cardListWidth, 0); @include flex($cardListWidth, 0);
overflow-y: scroll; overflow-y: scroll;
z-index: 5;
box-shadow: 2px 0 6px 0 rgba(0,0,0, 0.1);
div.cardToolbar.narrow { div.cardToolbar.narrow {
} }
@ -247,7 +250,8 @@ div.cardContent {
position: relative; position: relative;
bottom: 0px; bottom: 0px;
font-size: 75pt; font-size: 75pt;
color: blue; // color: blue;
color: #aaa;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -258,6 +262,12 @@ div.cardContent {
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
&:hover {
// color: $clipperz-orange;
color: green;
// color: brown;
};
} }
} }
@ -284,6 +294,10 @@ div.cardContent {
background-color: white; background-color: white;
} }
} }
.mask {
background-color: rgba(255, 255, 255, 0.8);
}
} }
& > div.view /*, & > div.editWrapper > div.edit */ { & > div.view /*, & > div.editWrapper > div.edit */ {

2
frontend/delta/scss/core/tagEditor.scss
View File

@ -1,7 +1,7 @@
.tagEditor { .tagEditor {
&.readWrite { &.readWrite {
border: 1px solid red; // border: 1px solid red;
} }
ul { ul {

134
frontend/delta/scss/style/card.scss
View File

@ -1,8 +1,11 @@
$cardListHeight: 48px; $cardListHeight: 48px;
$faviconSize: 32px; $faviconSize: 32px;
$padding: ($cardListHeight - $faviconSize) / 2; $padding: ($cardListHeight - $faviconSize) / 2;
$cardArchivedColor: #ccc; $cardArchivedColor: #eee;
$cardToolbarBackgroundColor: brown; $cardToolbarBackgroundColor: #e38800;
//$cardToolbarBackgroundColor: $clipperz-blue;
$iconMargin: 6px;
$labelColor: gray;
div.cardList { div.cardList {
// background-color: $yellow; // background-color: $yellow;
@ -14,21 +17,32 @@ div.cardList {
} }
ul { ul {
background-color: #e38800;
li { li {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background-color: white;
transition: margin-left 0.3s ease-in-out;
@include flexbox(); @include flexbox();
@include flex-direction(row); @include flex-direction(row);
&.selected { &.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 { &.archived {
// background-color: pink; // background-color: pink;
background-color: $cardArchivedColor; background-color: $cardArchivedColor;
color: #999;
} }
.favicon { .favicon {
@ -187,12 +201,13 @@ $cardViewBasePadding: 10px;
} }
.edit { .edit {
// box-shadow: inset 2px 0 6px 0 rgba(0,0,0, 0.1);
.cardDetailToolbar { .cardDetailToolbar {
// background-color: purple;
background-color: $cardToolbarBackgroundColor; background-color: $cardToolbarBackgroundColor;
color: white; 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); @include user-select(text);
font-size: 24pt; font-size: 24pt;
width: 100%; // width: 100%;
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
// height: 52px; // height: 52px;
// line-height: 32px; // line-height: 32px;
@ -252,20 +267,32 @@ $cardViewBasePadding: 10px;
} }
input.cardLabel { input.cardLabel {
width: 100%;
height: 52px; height: 52px;
} }
.tagEditor { .tagEditor {
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
// background-color: cyan;
} }
.cardNotes { .cardNotes {
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
width: 100%; width: 100%;
border: 0px;
font-size: 10pt;
font-style: italic;
white-space: pre-wrap;
word-wrap: break-word;
// background-color: gold;
} }
.dropArea { .dropArea {
border: 3px dashed red; // border: 3px dashed red;
background-color: #ccc;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
@ -273,6 +300,8 @@ $cardViewBasePadding: 10px;
.cardField { .cardField {
@include flexbox; @include flexbox;
@include flex-direction(row); @include flex-direction(row);
background-color: rgba(255, 255, 255, 0.75);
// border-bottom: 1px solid #eee;
// background-color: lightgreen; // background-color: lightgreen;
@ -280,53 +309,110 @@ $cardViewBasePadding: 10px;
// border: 4px dotted red; // border: 4px dotted red;
display: none; 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 { .fieldValues {
@include flex(1); @include flex(1);
padding: $cardViewBasePadding; padding: $cardViewBasePadding;
.fieldLabel { .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 { .fieldValue {
font-size: 18pt; font-size: 18pt;
line-height: 28px;
@include user-select(text); @include user-select(text);
white-space: pre-wrap;
word-wrap: break-word;
border: 0px;
width: 100%;
&.hidden { &.hidden {
font-family: clipperz-password; font-family: clipperz-password;
font-size: 23pt;
} }
} }
.removeField {
@include icon-font();
cursor: pointer;
color: gray;
font-size: 20pt;
&:hover {
color: red;
};
}
} }
.fieldAction { .fieldAction {
@include flex(none); @include flex(none);
@include align-self(center); // @include align-self(center);
@include align-self(flex-start);
} }
.action { .action {
width: 32px;
height: 32px;
@include icon-font(); @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 { .newCardField {
@include icon-font(); @include icon-font();
margin: $iconMargin;
cursor: pointer; cursor: pointer;
color: gray; color: #ccc;
font-size: 20pt; font-size: 20pt;
&:hover { &:hover {

8
frontend/delta/scss/style/selectionPanel.scss
View File

@ -21,6 +21,10 @@
&.recentCards:before { &.recentCards:before {
content: "recent"; content: "recent";
} }
&.untaggedCards {
padding-left: 70px;
}
} }
} }
@ -125,7 +129,9 @@
} }
} }
$selectionColor: yellow;
//$selectionColor: yellow;
$selectionColor: $clipperz-orange;
#selections.ALL { #selections.ALL {
li.allCards { li.allCards {