Bug 1106010: make sure enough UI elements are always visible when not signed in to FxA. r=Niko

This commit is contained in:
Mike de Boer 2014-12-10 12:05:49 +01:00
parent 1146fefa22
commit 4f624a9f2d
3 changed files with 29 additions and 12 deletions

View File

@ -23,14 +23,14 @@ loop.panel = (function(_, mozL10n) {
var TabView = React.createClass({displayName: 'TabView',
propTypes: {
buttonsHidden: React.PropTypes.bool,
buttonsHidden: React.PropTypes.array,
// The selectedTab prop is used by the UI showcase.
selectedTab: React.PropTypes.string
},
getDefaultProps: function() {
return {
buttonsHidden: false
buttonsHidden: []
};
},
@ -60,6 +60,9 @@ loop.panel = (function(_, mozL10n) {
return;
}
var tabName = tab.props.name;
if (this.props.buttonsHidden.indexOf(tabName) > -1) {
return;
}
var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) {
tabButtons.push(
@ -77,9 +80,7 @@ loop.panel = (function(_, mozL10n) {
}, this);
return (
React.DOM.div({className: "tab-view-container"},
!this.props.buttonsHidden
? React.DOM.ul({className: "tab-view"}, tabButtons)
: null,
React.DOM.ul({className: "tab-view"}, tabButtons),
tabs
)
);
@ -782,6 +783,7 @@ loop.panel = (function(_, mozL10n) {
// Mostly used for UI components showcase and unit tests
callUrl: React.PropTypes.string,
userProfile: React.PropTypes.object,
// Used only for unit tests.
showTabButtons: React.PropTypes.bool,
selectedTab: React.PropTypes.string,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
@ -929,12 +931,18 @@ loop.panel = (function(_, mozL10n) {
);
}
// Determine which buttons to NOT show.
var hideButtons = [];
if (!this.state.userProfile && !this.props.showTabButtons) {
hideButtons.push("contacts");
}
return (
React.DOM.div(null,
NotificationListView({notifications: this.props.notifications,
clearOnDocumentHidden: true}),
TabView({ref: "tabView", selectedTab: this.props.selectedTab,
buttonsHidden: !this.state.userProfile && !this.props.showTabButtons},
buttonsHidden: hideButtons},
this._renderRoomsOrCallTab(),
Tab({name: "contacts"},
ContactsList({selectTab: this.selectTab,

View File

@ -23,14 +23,14 @@ loop.panel = (function(_, mozL10n) {
var TabView = React.createClass({
propTypes: {
buttonsHidden: React.PropTypes.bool,
buttonsHidden: React.PropTypes.array,
// The selectedTab prop is used by the UI showcase.
selectedTab: React.PropTypes.string
},
getDefaultProps: function() {
return {
buttonsHidden: false
buttonsHidden: []
};
},
@ -60,6 +60,9 @@ loop.panel = (function(_, mozL10n) {
return;
}
var tabName = tab.props.name;
if (this.props.buttonsHidden.indexOf(tabName) > -1) {
return;
}
var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) {
tabButtons.push(
@ -77,9 +80,7 @@ loop.panel = (function(_, mozL10n) {
}, this);
return (
<div className="tab-view-container">
{!this.props.buttonsHidden
? <ul className="tab-view">{tabButtons}</ul>
: null}
<ul className="tab-view">{tabButtons}</ul>
{tabs}
</div>
);
@ -782,6 +783,7 @@ loop.panel = (function(_, mozL10n) {
// Mostly used for UI components showcase and unit tests
callUrl: React.PropTypes.string,
userProfile: React.PropTypes.object,
// Used only for unit tests.
showTabButtons: React.PropTypes.bool,
selectedTab: React.PropTypes.string,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
@ -929,12 +931,18 @@ loop.panel = (function(_, mozL10n) {
);
}
// Determine which buttons to NOT show.
var hideButtons = [];
if (!this.state.userProfile && !this.props.showTabButtons) {
hideButtons.push("contacts");
}
return (
<div>
<NotificationListView notifications={this.props.notifications}
clearOnDocumentHidden={true} />
<TabView ref="tabView" selectedTab={this.props.selectedTab}
buttonsHidden={!this.state.userProfile && !this.props.showTabButtons}>
buttonsHidden={hideButtons}>
{this._renderRoomsOrCallTab()}
<Tab name="contacts">
<ContactsList selectTab={this.selectTab}

View File

@ -193,6 +193,7 @@ body {
.room-list {
max-height: 335px; /* XXX better computation needed */
min-height: 7px;
overflow: auto;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;