Bug 1077332: hide tabs when not logged in with FxA. r=paolo
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -50,17 +50,19 @@ loop.panel = (function(_, mozL10n) {
tabs.push(
React.DOM.div({key: i, className: cx({tab: true, selected: isSelected})},
tab.props.children
)
);
}, this);
return (
React.DOM.div({className: "tab-view-container"},
- React.DOM.ul({className: "tab-view"}, tabButtons),
+ !this.props.buttonsHidden
+ ? React.DOM.ul({className: "tab-view"}, tabButtons)
+ : null,
tabs
)
);
}
});
var Tab = React.createClass({displayName: 'Tab',
render: function() {
@@ -470,17 +472,22 @@ loop.panel = (function(_, mozL10n) {
detailsButtonLabel: serviceError.error.friendlyDetailsButtonLabel,
});
} else {
this.props.notifications.remove(this.props.notifications.get("service-error"));
}
},
_onStatusChanged: function() {
- this.setState({userProfile: navigator.mozLoop.userProfile});
+ var profile = navigator.mozLoop.userProfile;
+ if (profile != this.state.userProfile) {
+ // On profile change (login, logout), switch back to the default tab.
+ this.selectTab("call");
+ }
+ this.setState({userProfile: profile});
this.updateServiceErrors();
},
startForm: function(name, contact) {
this.refs[name].initForm(contact);
this.selectTab(name);
},
@@ -503,17 +510,17 @@ loop.panel = (function(_, mozL10n) {
render: function() {
var NotificationListView = sharedViews.NotificationListView;
var displayName = this.state.userProfile && this.state.userProfile.email ||
__("display_name_guest");
return (
React.DOM.div(null,
NotificationListView({notifications: this.props.notifications,
clearOnDocumentHidden: true}),
- TabView({ref: "tabView"},
+ TabView({ref: "tabView", buttonsHidden: !this.state.userProfile},
Tab({name: "call"},
React.DOM.div({className: "content-area"},
CallUrlResult({client: this.props.client,
notifications: this.props.notifications,
callUrl: this.props.callUrl}),
ToSView(null)
)
),
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -50,17 +50,19 @@ loop.panel = (function(_, mozL10n) {
tabs.push(
<div key={i} className={cx({tab: true, selected: isSelected})}>
{tab.props.children}
</div>
);
}, this);
return (
<div className="tab-view-container">
- <ul className="tab-view">{tabButtons}</ul>
+ {!this.props.buttonsHidden
+ ? <ul className="tab-view">{tabButtons}</ul>
+ : null}
{tabs}
</div>
);
}
});
var Tab = React.createClass({
render: function() {
@@ -470,17 +472,22 @@ loop.panel = (function(_, mozL10n) {
detailsButtonLabel: serviceError.error.friendlyDetailsButtonLabel,
});
} else {
this.props.notifications.remove(this.props.notifications.get("service-error"));
}
},
_onStatusChanged: function() {
- this.setState({userProfile: navigator.mozLoop.userProfile});
+ var profile = navigator.mozLoop.userProfile;
+ if (profile != this.state.userProfile) {
+ // On profile change (login, logout), switch back to the default tab.
+ this.selectTab("call");
+ }
+ this.setState({userProfile: profile});
this.updateServiceErrors();
},
startForm: function(name, contact) {
this.refs[name].initForm(contact);
this.selectTab(name);
},
@@ -503,17 +510,17 @@ loop.panel = (function(_, mozL10n) {
render: function() {
var NotificationListView = sharedViews.NotificationListView;
var displayName = this.state.userProfile && this.state.userProfile.email ||
__("display_name_guest");
return (
<div>
<NotificationListView notifications={this.props.notifications}
clearOnDocumentHidden={true} />
- <TabView ref="tabView">
+ <TabView ref="tabView" buttonsHidden={!this.state.userProfile}>
<Tab name="call">
<div className="content-area">
<CallUrlResult client={this.props.client}
notifications={this.props.notifications}
callUrl={this.props.callUrl} />
<ToSView />
</div>
</Tab>