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

Fixed OTP rendering

Browse Source
This commit is contained in:
Giulio Cesare Solaroli 2015-09-23 13:40:20 +02:00
parent 4218ba33bb
commit 7bc16cc649
6 changed files with 338 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -795,9 +795,6 @@ input[type=text] {
z-index: 10;
background-color: rgba(0, 0, 0, 0.5); }
.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
width: 0px; }
#extraFeaturesPanel {
position: fixed;
z-index: 20;
@ -824,7 +821,17 @@ input[type=text] {
#extraFeaturesPanel.fullOpen {
width: 100%; }
#extraFeaturesPanel.fullOpen .extraFeatureContent {
display: block; }
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
#extraFeaturesPanel .extraFeatureIndex {
-webkit-box-flex: none;
-webkit-flex: none;
@ -875,10 +882,16 @@ input[type=text] {
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
width: 100%;
height: 100%;
background-color: black; }
#extraFeaturesPanel .extraFeatureContent .extraFeature {
-webkit-box-flex: auto;
-webkit-flex: auto;
-moz-box-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
@ -889,8 +902,7 @@ input[type=text] {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%; }
flex-direction: column; }
#extraFeaturesPanel .extraFeatureContent .extraFeature .header {
-webkit-box-flex: none;
-webkit-flex: none;
@ -910,6 +922,18 @@ input[type=text] {
overflow: auto;
-webkit-overflow-scrolling: touch; }
.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
width: 0px; }
.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureContent header {
-webkit-box-flex: none;
-webkit-flex: none;
-moz-box-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
display: block;
height: 48px; }
.container {
height: 100%;
width: 100%; }
@ -2323,8 +2347,52 @@ span.count {
#extraFeaturesPanel .extraFeatureContent .extraFeature .button.disabled {
background-color: #c0c0c0;
cursor: default; }
#extraFeaturesPanel .extraFeatureContent .OTP {
height: 100%; }
#extraFeaturesPanel .extraFeatureContent .preferences h3 {
border-bottom: 1px solid white; }
#extraFeaturesPanel .extraFeatureContent .preferences .row {
padding-top: 4px; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.one {
padding-left: 40px; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.two {
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; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.one {
-webkit-box-flex: none;
-webkit-flex: none;
-moz-box-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
width: 40px; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.two {
-webkit-box-flex: auto;
-webkit-flex: auto;
-moz-box-flex: auto;
-moz-flex: auto;
-ms-flex: auto;
flex: auto; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.lockEnabled input {
margin-left: auto;
margin-right: auto;
display: block; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout span:after {
content: ": "; }
#extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout input {
width: 50px;
align: right; }
#extraFeaturesPanel .extraFeatureContent .preferences span {
vertical-align: middle; }
#extraFeaturesPanel .extraFeatureContent .preferences input {
vertical-align: middle; }
#extraFeaturesPanel .extraFeatureContent .OTP .header .description {
padding-bottom: 0px; }
#extraFeaturesPanel .extraFeatureContent .OTP .header .description p {
@ -2484,8 +2552,6 @@ span.count {
padding-right: 10px; }
#extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED {
background-color: #222; }
#extraFeaturesPanel .extraFeatureContent .OTP .button {
margin: 1em 1em 0 0; }
#extraFeaturesPanel .extraFeatureContent .OTP table tr td a {
font-size: small;
padding: 0 1em;
@ -2819,8 +2885,6 @@ span.count {
visibility: hidden; }
.mainPage.narrow #extraFeaturesPanel .extraFeatureContent header {
display: block;
height: 48px;
border-bottom: 1px solid white; }
.mainPage.narrow #extraFeaturesPanel .extraFeatureContent header .button {
font-family: 'clipperz-icons';

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

File diff suppressed because one or more lines are too long

9
frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/OTP.js
View File

@ -214,17 +214,20 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
return React.DOM.div({'className':'extraFeature OTP'}, [
React.DOM.div({'className':'header'}, [
React.DOM.h1({}, "One-Time Passwords"),
]),
React.DOM.div({'className':'content'}, [
React.DOM.div({},[
React.DOM.div({'className':'description'}, [
React.DOM.p({}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."),
]),
React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print")
]),
React.DOM.div({'className':'content'}, [
React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print"),
React.DOM.ul({'className':'otpList'}, this.renderOtpRows()),
React.DOM.div({'className':'actions'}, [
React.DOM.a({'onClick': this.handleNew}, "create new OTP"),
]),
])
])
]);
},

4
frontend/delta/js/Clipperz/PM/UI/Components/Panels/ExtraFeaturesPanel.js
View File

@ -303,8 +303,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
React.DOM.header({}, [
React.DOM.div({'className':'button', 'onClick':this.hideExtraFeatureContent}, "close")
]),
// this.state['extraFeatureContent']
this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null
this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null,
// React.DOM.footer({}, "")
]);
},

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

@ -169,28 +169,11 @@ input[type=text] {
}
.mainPage.narrow {
#extraFeaturesPanel {
&.fullOpen {
.extraFeatureIndex {
width: 0px;
}
}
.extraFeatureContent {
.extraFeature {
// height: calc(100% - $mainCardToolbarHeight);
}
}
}
}
//=============================================================================
#extraFeaturesPanel {
@include sliding-panel(right, $settingsPanelWidth);
// transition: right 0.3s ease-in-out;
&.open {
@include sliding-panel-open(right, $settingsPanelWidth);
}
@ -200,10 +183,11 @@ input[type=text] {
}
&.fullOpen {
// right: 0px;
width: 100%;
.extraFeatureContent {
display: block;
@include flexbox();
@include flex-direction(column);
}
}
@ -224,10 +208,7 @@ input[type=text] {
& > div {
@include flex(auto);
@include overflow-auto();
// overflow: auto;
}
footer {
@ -236,32 +217,62 @@ input[type=text] {
}
.extraFeatureContent {
// display: none;
@include flex(auto);
width: 100%;
height: 100%;
// background-color: rgba( 0, 0, 0, 0.95);
background-color: black;
header {
}
.extraFeature {
@include flex(auto);
@include overflow-auto();
@include flexbox();
@include flex-direction(column);
height: 100%;
.header {
@include flex(none);
padding: 20px;
}
.content {
@include flex(auto);
// height: 100%;
padding: 0px 20px 20px 20px;
@include overflow-auto();
}
}
// footer {
// @include flex(none);
// height: 48px;
// width: 100%;
// }
}
}
//.............................................................................
.mainPage.narrow {
#extraFeaturesPanel.fullOpen {
.extraFeatureIndex {
width: 0px;
}
.extraFeatureContent {
header {
@include flex(none);
display: block;
height: 48px;
}
.extraFeature {
}
}
}
}
//=============================================================================
.container {
height: 100%;
width: 100%;

72
frontend/delta/scss/style/settingsPanel.scss
View File

@ -236,7 +236,6 @@ refer to http://www.clipperz.com.
.extraFeatureContent {
border-right: 1px solid #222;
color: white;
// padding: 20px;
header {
display: none;
@ -244,7 +243,6 @@ refer to http://www.clipperz.com.
.extraFeature {
.header {
// padding-bottom: 20px;
h1 {
font-size: 20pt;
@ -387,10 +385,63 @@ refer to http://www.clipperz.com.
}
}
.preferences {
h3 {
border-bottom: 1px solid white;
}
.row {
$firstColumnWidth: 40px;
padding-top: 4px;
&.one {
padding-left: $firstColumnWidth;
}
&.two {
@include flexbox();
@include flex-direction(row);
.col.one {
@include flex(none);
width: $firstColumnWidth;
}
.col.two {
@include flex(auto);
}
}
&.lockEnabled {
input {
margin-left: auto;
margin-right: auto;
display: block;
}
}
&.lockTimeout {
span {
&:after {
content: ": ";
};
}
input {
width: 50px;
align: right;
}
}
}
span {
vertical-align: middle;
}
input {
vertical-align: middle;
}
}
.OTP {
height: 100%;
.header {
.description {
padding-bottom: 0px;
@ -417,6 +468,7 @@ refer to http://www.clipperz.com.
};
}
}
.selectMenu {
margin-top: 1em;
@ -550,7 +602,7 @@ refer to http://www.clipperz.com.
}
}
.button {
margin:1em 1em 0 0;
// margin:1em 1em 0 0;
}
table {
@ -980,8 +1032,6 @@ refer to http://www.clipperz.com.
#extraFeaturesPanel {
.extraFeatureContent {
header {
display: block;
height: 48px;
border-bottom : 1px solid white;
.button {
@ -994,6 +1044,14 @@ refer to http://www.clipperz.com.
padding-left: 10px;
}
}
.extraFeature {
}
}
&.fullOpen {
.extraFeatureContent {
}
}
}
}