Merge remote-tracking branch 'gcsolaroli/master'

Conflicts:
	frontend/delta/css/clipperz.css.map
This commit is contained in:
Giulio Cesare Solaroli 2015-08-20 11:22:41 +02:00
commit 9d9dd1e161
10 changed files with 1290 additions and 111 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,102 @@
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
"use strict";
Clipperz.Base.module('Clipperz.PM.UI.Components');
Clipperz.PM.UI.Components.HelpClass = React.createClass({
close: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'closeHelp');
},
//=========================================================================
render: function () {
return React.DOM.div({'className':'help', 'key':'help'}, [
React.DOM.div({'className':'helpBox'}, [
React.DOM.header({}, [
React.DOM.h3({}, "Keyboard shortcuts"),
React.DOM.div({'className':'button close', 'onClick':this.close}, "close")
]),
React.DOM.div({'className':'helpContent'}, [
React.DOM.div({'className':'helpBlock'}, [
React.DOM.h4({}, "Search"),
React.DOM.dl({}, [
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, '/')
]), React.DOM.dd({}, "search cards"),
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, '*'),
React.DOM.span({'className':'operator'}, 'then'),
React.DOM.span({'className':'key'}, 'a'),
]), React.DOM.dd({}, "select all cards"),
])
]),
React.DOM.div({'className':'helpBlock'}, [
React.DOM.h4({}, "Navigation"),
React.DOM.dl({}, [
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, 'h'),
React.DOM.span({'className':'operator'}, 'or'),
React.DOM.span({'className':'key'}, '<left>'),
React.DOM.span({'className':'operator'}, 'or'),
React.DOM.span({'className':'key'}, '<esc>'),
]), React.DOM.dd({}, "exit current selection"),
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, 'l'),
React.DOM.span({'className':'operator'}, 'or'),
React.DOM.span({'className':'key'}, '<right>'),
React.DOM.span({'className':'operator'}, 'or'),
React.DOM.span({'className':'key'}, '<enter>'),
]), React.DOM.dd({}, "select detail"),
React.DOM.dt({}, [
React.DOM.span({'className':'key'}, 'k'),
React.DOM.span({'className':'operator'}, '/'),
React.DOM.span({'className':'key'}, 'j'),
]), React.DOM.dd({}, "previous/next card"),
])
]),
/*
Mousetrap.bind(['left', 'h', 'esc'], MochiKit.Base.method(this, 'exitCurrentSelection'));
Mousetrap.bind(['right', 'l', 'enter'], MochiKit.Base.method(this, 'selectDetail'));
Mousetrap.bind(['up', 'k'], MochiKit.Base.method(this, 'selectPreviousCard'));
Mousetrap.bind(['down', 'j'], MochiKit.Base.method(this, 'selectNextCard'));
Mousetrap.bind(['/'], MochiKit.Base.method(this, 'focusOnSearch'));
Mousetrap.bind(['* a'], MochiKit.Base.method(this, 'selectAllCards_handler'));
Mousetrap.bind(['?'], MochiKit.Base.method(this, 'showHelp_handler'));
*/
])
])
]);
}
//=========================================================================
});
Clipperz.PM.UI.Components.Help = React.createFactory(Clipperz.PM.UI.Components.HelpClass);

View File

@ -184,7 +184,7 @@ Clipperz.PM.UI.Components.Panels.MainPanelClass = React.createClass({
},
render: function () {
//console.log("MainPanel.render", this.props['showGlobalMask']);
//console.log("MainPanel.render", this.props['showHelp']);
var classes = {
'panel': true,
'left': this.props['selectionPanelStatus'] == 'OPEN',
@ -193,9 +193,10 @@ Clipperz.PM.UI.Components.Panels.MainPanelClass = React.createClass({
};
classes[this.style()] = true;
return React.DOM.div({'key':'mainPanel', 'id':'mainPanel', 'className':Clipperz.PM.UI.Components.classNames(classes)}, [
React.DOM.div({'className':'mask', 'onClick':this.handleMaskClick, 'onTouchEnd':this.handleMaskClick}),
React.DOM.div({'className':'container'},
return React.DOM.div({'id':'mainPanel', 'className':Clipperz.PM.UI.Components.classNames(classes), 'key':'mainPanel'}, [
React.DOM.div({'className':'mask', 'onClick':this.handleMaskClick, 'onTouchEnd':this.handleMaskClick, 'key':'mask'}),
this.props['showHelp'] ? Clipperz.PM.UI.Components.Help(this.props) : null,
React.DOM.div({'className':'container', 'key':'container'},
// this.style() == 'extra-wide' ? this.renderExtraWide() : this.renderOther()
this.renderLayout(this.style())
)

View File

@ -81,6 +81,7 @@ Clipperz.PM.UI.MainController = function() {
'showArchivedCards', 'hideArchivedCards',
'goBackToMainPage',
'maskClick',
'closeHelp',
'downloadOfflineCopy',
'runDirectLogin',
'exitSearch'
@ -96,6 +97,8 @@ Clipperz.PM.UI.MainController = function() {
Mousetrap.bind(['* a'], MochiKit.Base.method(this, 'selectAllCards_handler'));
Mousetrap.bind(['?'], MochiKit.Base.method(this, 'showHelp_handler'));
return this;
}
@ -1670,6 +1673,7 @@ console.log("THE BROWSER IS OFFLINE");
//============================================================================
selectAllCards_handler: function () {
this.setPageProperties('mainPage', 'searchTerm', '');
this.resetSelectedCard();
this.setFilter('ALL');
return this.refreshSelectedCards();
@ -1729,6 +1733,22 @@ console.log("THE BROWSER IS OFFLINE");
this._closeMaskAction = null;
},
//............................................................................
showHelp_handler: function () {
if (this.currentPage() == 'mainPage') {
this.setPageProperties(this.currentPage(), 'showHelp', true);
}
},
closeHelp_handler: function () {
this.setPageProperties(this.currentPage(), 'showHelp', false);
},
isShowingHelp: function () {
return this.pages()[this.currentPage()].props['showHelp'];
},
//============================================================================
matchMediaQuery_handler: function (newQueryStyle) {
@ -1837,10 +1857,14 @@ console.log("THE BROWSER IS OFFLINE");
},
exitCurrentSelection: function () {
if (this.currentPage() == 'cardDetailPage') {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBackToMainPage', {'reference':this.selectedCardInfo()['reference']});
} else if (this.currentPage() == 'mainPage') {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', null, true);
if (this.isShowingHelp()) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'closeHelp');
} else {
if (this.currentPage() == 'cardDetailPage') {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBackToMainPage', {'reference':this.selectedCardInfo()['reference']});
} else if (this.currentPage() == 'mainPage') {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', null, true);
}
}
},

View File

@ -172,6 +172,7 @@
"Clipperz/PM/UI/Components/DialogBox.js",
"Clipperz/PM/UI/Components/Selections.js",
"Clipperz/PM/UI/Components/TagIndexItem.js",
"Clipperz/PM/UI/Components/Help.js",
"Clipperz/PM/UI/Components/ExpiredPanel.js",

View File

@ -41,6 +41,7 @@ refer to http://www.clipperz.com.
@import "style/accountStatus";
@import "style/card";
@import "style/dialogBox";
@import "style/help";
//----------------------------------------------------------------------------

View File

@ -102,10 +102,10 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flexbox {
// display: -webkit-box;
// display: -webkit-flex;
// display: -moz-flex;
// display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@ -114,10 +114,10 @@ http://jonibologna.com/flexbox-cheatsheet/
//----------------------------------
@mixin inline-flex {
// display: -webkit-inline-box;
// display: -webkit-inline-flex;
// display: -moz-inline-flex;
// display: -ms-inline-flexbox;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@ -137,22 +137,22 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
// @if $value == row-reverse {
// -webkit-box-direction: reverse;
// -webkit-box-orient: horizontal;
// } @else if $value == column {
// -webkit-box-direction: normal;
// -webkit-box-orient: vertical;
// } @else if $value == column-reverse {
// -webkit-box-direction: reverse;
// -webkit-box-orient: vertical;
// } @else {
// -webkit-box-direction: normal;
// -webkit-box-orient: horizontal;
// }
// -webkit-flex-direction: $value;
// -moz-flex-direction: $value;
// -ms-flex-direction: $value;
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@ -173,13 +173,13 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
// -webkit-flex-wrap: $value;
// -moz-flex-wrap: $value;
// @if $value == nowrap {
// -ms-flex-wrap: none;
// } @else {
// -ms-flex-wrap: $value;
// }
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
@ -198,9 +198,9 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
// -webkit-flex-flow: $values;
// -moz-flex-flow: $values;
// -ms-flex-flow: $values;
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
@ -216,10 +216,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) {
// -webkit-box-ordinal-group: $int + 1;
// -webkit-order: $int;
// -moz-order: $int;
// -ms-flex-order: $int;
-webkit-box-ordinal-group: $int + 1;
-webkit-order: $int;
-moz-order: $int;
-ms-flex-order: $int;
order: $int;
}
@ -235,10 +235,10 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) {
// -webkit-box-flex: $int;
// -webkit-flex-grow: $int;
// -moz-flex-grow: $int;
// -ms-flex-positive: $int;
-webkit-box-flex: $int;
-webkit-flex-grow: $int;
-moz-flex-grow: $int;
-ms-flex-positive: $int;
flex-grow: $int;
}
@ -254,9 +254,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) {
// -webkit-flex-shrink: $int;
// -moz-flex-shrink: $int;
// -ms-flex-negative: $int;
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
-ms-flex-negative: $int;
flex-shrink: $int;
}
@ -272,9 +272,9 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) {
// -webkit-flex-basis: $value;
// -moz-flex-basis: $value;
// -ms-flex-preferred-size: $value;
-webkit-flex-basis: $value;
-moz-flex-basis: $value;
-ms-flex-preferred-size: $value;
flex-basis: $value;
}
@ -304,11 +304,11 @@ http://jonibologna.com/flexbox-cheatsheet/
$fg-boxflex: nth($fg, 1);
}
// -webkit-box-flex: $fg-boxflex;
// -webkit-flex: $fg $fs $fb;
// -moz-box-flex: $fg-boxflex;
// -moz-flex: $fg $fs $fb;
// -ms-flex: $fg $fs $fb;
-webkit-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg-boxflex;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@ -331,21 +331,21 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
// @if $value == flex-start {
// -webkit-box-pack: start;
// -ms-flex-pack: start;
// } @else if $value == flex-end {
// -webkit-box-pack: end;
// -ms-flex-pack: end;
// } @else if $value == space-between {
// -webkit-box-pack: justify;
// -ms-flex-pack: justify;
// } @else {
// -webkit-box-pack: $value;
// -ms-flex-pack: $value;
// }
// -webkit-justify-content: $value;
// -moz-justify-content: $value;
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
// Shorter version:
@ -369,18 +369,18 @@ http://jonibologna.com/flexbox-cheatsheet/
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
// @if $value == flex-start {
// -webkit-box-align: start;
// -ms-flex-align: start;
// } @else if $value == flex-end {
// -webkit-box-align: end;
// -ms-flex-align: end;
// } @else {
// -webkit-box-align: $value;
// -ms-flex-align: $value;
// }
// -webkit-align-items: $value;
// -moz-align-items: $value;
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
@ -393,15 +393,15 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
// -webkit-align-self: $value;
// -moz-align-self: $value;
// @if $value == flex-start {
// -ms-flex-item-align: start;
// } @else if $value == flex-end {
// -ms-flex-item-align: end;
// } @else {
// -ms-flex-item-align: $value;
// }
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
@ -421,14 +421,14 @@ http://jonibologna.com/flexbox-cheatsheet/
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
// -webkit-align-content: $value;
// -moz-align-content: $value;
// @if $value == flex-start {
// -ms-flex-line-pack: start;
// } @else if $value == flex-end {
// -ms-flex-line-pack: end;
// } @else {
// -ms-flex-line-pack: $value;
// }
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}

View File

@ -606,8 +606,14 @@ div.dialogBox {
}
}
div.helpBox {
div.help {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0);
}
//@include fixHeighHack ($mainCardToolbarHeight /*, $cardListPadding*/)

View File

@ -0,0 +1,190 @@
/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
.helpBox {
color: white;
margin: 20px;
padding: 30px;
@include border-radius(20px);
background-color: rgba(0, 0, 0, 0.75);
header {
border-bottom: 1px solid white;
padding-bottom: 6px;
h3 {
display: inline-block;
}
.close {
float: right;
@include icon-font();
}
}
.helpContent {
padding-top: 4px;
$shortcutWidth: 160px;
.helpBlock {
padding-top: 8px;
h4 {
// font-size: 10pt;
margin-left: $shortcutWidth;
color: yellow;
padding-bottom: 3px;
}
dl {
dt {
float: left;
clear: left;
width: $shortcutWidth;
text-align: right;
padding-right: 4px;
&:after {
// font-size: 9pt;
content: ":";
};
span {
// font-size: 9pt;
vertical-align: middle;
&.operator {
// font-size: 7pt;
padding-left: 4px;
padding-right: 4px;
}
&.key {
color: yellow;
}
}
}
dd {
margin-left: $shortcutWidth;
// font-size: 8pt;
padding-bottom: 4px;
}
}
}
}
}
.narrow {
.helpBox {
.helpContent {
.helpBlock {
h4 {
font-size: 9pt;
}
dl {
font-size: 8pt;
dt {
&:after {
};
span {
&.operator {
font-size: 6pt;
}
&.key {
}
}
}
dd {
}
}
}
}
}
}
.wide {
.helpBox {
.helpContent {
.helpBlock {
h4 {
font-size: 10pt;
}
dl {
font-size: 9pt;
dt {
&:after {
};
span {
&.operator {
font-size: 7pt;
}
&.key {
}
}
}
dd {
}
}
}
}
}
}
.extra-wide {
.helpBox {
margin-left: 23%;
.helpContent {
.helpBlock {
h4 {
font-size: 10pt;
}
dl {
font-size: 9pt;
dt {
&:after {
};
span {
&.operator {
font-size: 7pt;
}
&.key {
}
}
}
dd {
}
}
}
}
}
}