Added “Offline copy” banner in the login page

This commit is contained in:
Giulio Cesare Solaroli 2015-08-20 12:04:31 +02:00
parent 9d9dd1e161
commit 4cfc1dcb77
6 changed files with 45 additions and 17 deletions

View File

@ -119,6 +119,7 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -132,6 +133,7 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -145,6 +147,7 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -158,6 +161,7 @@ http://jonibologna.com/flexbox-cheatsheet/
-ms-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0); } transform: rotate(0deg) translate(0, 0); }
100% { 100% {
-webkit-transform: rotate(359deg) translate(0, 0); -webkit-transform: rotate(359deg) translate(0, 0);
-moz-transform: rotate(359deg) translate(0, 0); -moz-transform: rotate(359deg) translate(0, 0);
@ -475,61 +479,73 @@ div.overlay {
@-webkit-keyframes overlay-spin { @-webkit-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-moz-keyframes overlay-spin { @-moz-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-ms-keyframes overlay-spin { @-ms-keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@keyframes overlay-spin { @keyframes overlay-spin {
from { from {
opacity: 1; } opacity: 1; }
to { to {
opacity: 0.25; } } opacity: 0.25; } }
@-webkit-keyframes ios-overlay-show { @-webkit-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-moz-keyframes ios-overlay-show { @-moz-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-ms-keyframes ios-overlay-show { @-ms-keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@keyframes ios-overlay-show { @keyframes ios-overlay-show {
0% { 0% {
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
@-webkit-keyframes ios-overlay-hide { @-webkit-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@-moz-keyframes ios-overlay-hide { @-moz-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@-ms-keyframes ios-overlay-hide { @-ms-keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
@keyframes ios-overlay-hide { @keyframes ios-overlay-hide {
0% { 0% {
opacity: 1; } opacity: 1; }
100% { 100% {
opacity: 0; } } opacity: 0; } }
/* /*
@ -1579,11 +1595,11 @@ div.help {
flex: 1; flex: 1;
font-size: 8pt; } font-size: 8pt; }
#loginPage div.loginForm footer .applicationVersion span { #loginPage div.loginForm footer .applicationVersion span {
color: #999; } color: #999999; }
#loginPage div.loginForm footer .applicationVersion span:after { #loginPage div.loginForm footer .applicationVersion span:after {
content: ":"; } content: ":"; }
#loginPage div.loginForm footer .applicationVersion a { #loginPage div.loginForm footer .applicationVersion a {
color: #999; color: #999999;
text-decoration: none; text-decoration: none;
padding-left: 5px; padding-left: 5px;
font-weight: bold; } font-weight: bold; }
@ -2210,13 +2226,13 @@ span.count {
#extraFeaturesPanel .extraFeatureIndex footer { #extraFeaturesPanel .extraFeatureIndex footer {
font-size: 8pt; font-size: 8pt;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
border-top: 1px solid #999; } border-top: 1px solid #999999; }
#extraFeaturesPanel .extraFeatureIndex footer span { #extraFeaturesPanel .extraFeatureIndex footer span {
color: #999; } color: #999999; }
#extraFeaturesPanel .extraFeatureIndex footer span:after { #extraFeaturesPanel .extraFeatureIndex footer span:after {
content: ":"; } content: ":"; }
#extraFeaturesPanel .extraFeatureIndex footer a { #extraFeaturesPanel .extraFeatureIndex footer a {
color: #999; color: #999999;
text-decoration: none; text-decoration: none;
padding-left: 5px; padding-left: 5px;
font-weight: bold; } font-weight: bold; }
@ -2876,7 +2892,7 @@ span.count {
color: white; color: white;
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
font-size: 9pt; } font-size: 9pt; }
.miscInfo .proxyInfo.OFFLINE_COPY .proxyDescription:after { .miscInfo .proxyInfo.OFFLINE_COPY.withReferenceDate .proxyDescription:after {
content: ':'; } content: ':'; }
.miscInfo .proxyInfo.OFFLINE_COPY .referenceDate { .miscInfo .proxyInfo.OFFLINE_COPY .referenceDate {
padding-left: 10px; } padding-left: 10px; }
@ -2885,6 +2901,9 @@ span.count {
background-color: green; background-color: green;
padding: 3px; padding: 3px;
font-size: 10pt; } font-size: 10pt; }
.miscInfo .accountStatus.undefined {
display: none;
visibility: hidden; }
.miscInfo .accountStatus.FULL { .miscInfo .accountStatus.FULL {
display: none; display: none;
visibility: hidden; } visibility: hidden; }
@ -2927,7 +2946,7 @@ div.cardList ul {
padding-right: 0px; padding-right: 0px;
box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); } box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
div.cardList ul li.archived { div.cardList ul li.archived {
background-color: #eee; background-color: #eeeeee;
color: #999; } color: #999; }
div.cardList ul li .favicon { div.cardList ul li .favicon {
width: 48px; width: 48px;
@ -3014,7 +3033,7 @@ div.cardList.narrow {
content: ""; } content: ""; }
#cardDetailPage .view.archived, .cardDetail .view.archived { #cardDetailPage .view.archived, .cardDetail .view.archived {
background-color: #eee; } background-color: #eeeeee; }
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar { #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
background-color: #1863a1; background-color: #1863a1;
color: white; } color: white; }
@ -3224,7 +3243,7 @@ div.cardList.narrow {
cursor: grab; cursor: grab;
cursor: -moz-grab; cursor: -moz-grab;
cursor: -webkit-grab; cursor: -webkit-grab;
background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px); background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
width: 28px; width: 28px;
height: 20px; height: 20px;
margin-left: 6px; margin-left: 6px;
@ -3449,7 +3468,7 @@ div.cardList.narrow {
min-width: 220px; min-width: 220px;
width: 80%; width: 80%;
max-width: 400px; max-width: 400px;
background-color: #333; background-color: #333333;
color: #fff; color: #fff;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
@ -3464,7 +3483,7 @@ div.cardList.narrow {
margin-left: 0px; margin-left: 0px;
width: 0; width: 0;
height: 0; height: 0;
border-top: 5px solid #333; border-top: 5px solid #333333;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; } border-right: 5px solid transparent; }
.passwordGenerator .passwordGeneratorBaloon form span { .passwordGenerator .passwordGeneratorBaloon form span {

File diff suppressed because one or more lines are too long

View File

@ -52,6 +52,7 @@ Clipperz.PM.UI.Components.AccountStatusClass = React.createClass({
'proxyInfo': true 'proxyInfo': true
} }
proxyInfoClasses[this.props['proxyType']] = true; proxyInfoClasses[this.props['proxyType']] = true;
proxyInfoClasses['withReferenceDate'] = (this.props['referenceDate'] != null);
return React.DOM.div({'className':'miscInfo'}, [ return React.DOM.div({'className':'miscInfo'}, [
React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(proxyInfoClasses)}, [ React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(proxyInfoClasses)}, [

View File

@ -168,8 +168,8 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
// ]); // ]);
var registrationLink = React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up"); var registrationLink = React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [ return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [
Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
React.DOM.header({'key':'header'}, [ React.DOM.header({'key':'header'}, [
React.DOM.h3({}, 'clipperz'), React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'), React.DOM.h5({}, 'keep it to yourself'),

View File

@ -1011,8 +1011,8 @@ console.log("THE BROWSER IS OFFLINE");
'proxyType': Clipperz.PM.Proxy.defaultProxy.type(), 'proxyType': Clipperz.PM.Proxy.defaultProxy.type(),
'proxyTypeDescription': Clipperz.PM.Proxy.defaultProxy.typeDescription() 'proxyTypeDescription': Clipperz.PM.Proxy.defaultProxy.typeDescription()
} }
}, },
//------------------------------------------------------------------------- //-------------------------------------------------------------------------
messageBoxContent: function () { messageBoxContent: function () {
@ -1054,6 +1054,7 @@ console.log("THE BROWSER IS OFFLINE");
'mode': 'CREDENTIALS', 'mode': 'CREDENTIALS',
'isNewUserRegistrationAvailable': Clipperz.PM.Proxy.defaultProxy.canRegisterNewUsers(), 'isNewUserRegistrationAvailable': Clipperz.PM.Proxy.defaultProxy.canRegisterNewUsers(),
'disabled': false, 'disabled': false,
'proxyInfo': this.proxyInfo(),
}; };
} else if (aPageName == 'registrationPage') { } else if (aPageName == 'registrationPage') {
} else if (aPageName == 'mainPage') { } else if (aPageName == 'mainPage') {

View File

@ -37,9 +37,11 @@ refer to http://www.clipperz.com.
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
font-size: 9pt; font-size: 9pt;
&.withReferenceDate {
.proxyDescription:after { .proxyDescription:after {
content: ':'; content: ':';
} }
}
.referenceDate { .referenceDate {
padding-left: 10px; padding-left: 10px;
@ -53,6 +55,11 @@ refer to http://www.clipperz.com.
padding: 3px; padding: 3px;
font-size: 10pt; font-size: 10pt;
&.undefined {
display: none;
visibility: hidden;
}
&.FULL { &.FULL {
display: none; display: none;
visibility: hidden; visibility: hidden;