Many small overall UI improvements

- proxy are now aware of their respective features;
- updated account status info and added also proxy info (especially to show when using an offline copy)
- conditionally enabled different features across the UI, based on user account / proxy available features
This commit is contained in:
Giulio Cesare Solaroli
2015-03-10 22:59:24 +01:00
parent 3d809a71db
commit 187959fd1e
19 changed files with 270 additions and 132 deletions

View File

@@ -36,7 +36,7 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel = React.createClass({
},
propTypes: {
'accountInfo': React.PropTypes.object.isRequired,
'accountInfo': React.PropTypes.object.isRequired,
},
getInitialState: function() {
@@ -90,6 +90,12 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel = React.createClass({
React.DOM.p({}, "")
])
]),
React.DOM.li({}, [
React.DOM.h2({}, "Device PIN"),
React.DOM.div({}, [
React.DOM.p({}, "Configure a PIN that will allow to get access to your cards, but only on this device.")
])
]),
React.DOM.li({}, [
React.DOM.h2({}, "Preferences"),
React.DOM.div({}, [

View File

@@ -31,7 +31,8 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({
propTypes: {
'allTags': React.PropTypes.array,
'messageBox': React.PropTypes.object.isRequired,
'featureSet': React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL', 'OFFLINE']).isRequired,
'featureSet': React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
'features': React.PropTypes.array.isRequired,
'style': React.PropTypes.oneOf(Clipperz_PM_UI_availableStyles).isRequired,
},
@@ -43,6 +44,14 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({
return this.props['featureSet'];
},
features: function () {
return this.props['features'];
},
isFeatureEnabled: function (aValue) {
return (this.features().indexOf(aValue) > -1);
},
handleMaskClick: function () {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'maskClick');
},
@@ -62,15 +71,22 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({
renderCardFrame: function (firstColumnComponents, secondColumnComponents) {
var addCardButton;
var cardColumnClasses;
if ((this.props['featureSet'] != 'EXPIRED') && (this.props['featureSet'] != 'OFFLINE')) {
// if ((this.props['featureSet'] != 'EXPIRED') && (this.props['featureSet'] != 'OFFLINE')) {
if (this.isFeatureEnabled('ADD_CARD')) {
addCardButton = React.DOM.div({'className': 'addCardButton', 'onClick':this.handleAddCardClick}, 'add card');
} else {
addCardButton = null;
}
cardColumnClasses = {
'cardListColumn': true,
'column': true,
'addCard': this.isFeatureEnabled('ADD_CARD')
}
return React.DOM.div({'key':'cardContent', 'className':'cardContent'}, [
React.DOM.div({'className':'cardListColumn column'}, [addCardButton, firstColumnComponents]),
React.DOM.div({'className':React.addons.classSet(cardColumnClasses)}, [addCardButton, firstColumnComponents]),
React.DOM.div({'className':'cardDetail column right'}, secondColumnComponents)
])
},