mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1184933 - Part 2. Add the settings menu onto the failure view. r=Mardak

This commit is contained in:
Mark Banner 2015-09-10 12:01:16 +01:00
Родитель 9d3c10d581
Коммит 6ac53b4afe
14 изменённых файлов: 129 добавлений и 11 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
browser/components/loop/content/js/conversation.js
Просмотреть файл

@ -87,6 +87,7 @@ loop.conversation = (function(mozL10n) {
return (React.createElement(DirectCallFailureView, {
contact: {},
dispatcher: this.props.dispatcher,
mozLoop: this.props.mozLoop,
outgoing: false}));
}
default: {

1
browser/components/loop/content/js/conversation.jsx
Просмотреть файл

@ -87,6 +87,7 @@ loop.conversation = (function(mozL10n) {
return (<DirectCallFailureView
contact={{}}
dispatcher={this.props.dispatcher}
mozLoop={this.props.mozLoop}
outgoing={false} />);
}
default: {

13
browser/components/loop/content/js/conversationViews.js
Просмотреть файл

@ -447,6 +447,7 @@ loop.conversationViews = (function(mozL10n) {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
// This is used by the UI showcase.
emailLinkError: React.PropTypes.bool,
mozLoop: React.PropTypes.object.isRequired,
outgoing: React.PropTypes.bool.isRequired
},
@ -518,6 +519,11 @@ loop.conversationViews = (function(mozL10n) {
hide: !this.props.outgoing
});
var settingsMenuItems = [
{ id: "feedback" },
{ id: "help" }
];
var extraMessage;
if (this.props.outgoing) {
@ -552,7 +558,11 @@ loop.conversationViews = (function(mozL10n) {
onClick: this.emailLink},
mozL10n.get("share_button3")
)
)
),
React.createElement(loop.shared.views.SettingsControlButton, {
menuBelow: true,
menuItems: settingsMenuItems,
mozLoop: this.props.mozLoop})
)
);
}
@ -802,6 +812,7 @@ loop.conversationViews = (function(mozL10n) {
case CALL_STATES.TERMINATED: {
return (React.createElement(DirectCallFailureView, {
dispatcher: this.props.dispatcher,
mozLoop: this.props.mozLoop,
outgoing: this.state.outgoing}));
}
case CALL_STATES.ONGOING: {

11
browser/components/loop/content/js/conversationViews.jsx
Просмотреть файл

@ -447,6 +447,7 @@ loop.conversationViews = (function(mozL10n) {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
// This is used by the UI showcase.
emailLinkError: React.PropTypes.bool,
mozLoop: React.PropTypes.object.isRequired,
outgoing: React.PropTypes.bool.isRequired
},
@ -518,6 +519,11 @@ loop.conversationViews = (function(mozL10n) {
hide: !this.props.outgoing
});
var settingsMenuItems = [
{ id: "feedback" },
{ id: "help" }
];
var extraMessage;
if (this.props.outgoing) {
@ -553,6 +559,10 @@ loop.conversationViews = (function(mozL10n) {
{mozL10n.get("share_button3")}
</button>
</div>
<loop.shared.views.SettingsControlButton
menuBelow={true}
menuItems={settingsMenuItems}
mozLoop={this.props.mozLoop} />
</div>
);
}
@ -802,6 +812,7 @@ loop.conversationViews = (function(mozL10n) {
case CALL_STATES.TERMINATED: {
return (<DirectCallFailureView
dispatcher={this.props.dispatcher}
mozLoop={this.props.mozLoop}
outgoing={this.state.outgoing} />);
}
case CALL_STATES.ONGOING: {

13
browser/components/loop/content/js/roomViews.js
Просмотреть файл

@ -82,7 +82,8 @@ loop.roomViews = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
failureReason: React.PropTypes.string
failureReason: React.PropTypes.string,
mozLoop: React.PropTypes.object.isRequired
},
componentDidMount: function() {
@ -94,6 +95,10 @@ loop.roomViews = (function(mozL10n) {
},
render: function() {
var settingsMenuItems = [
{ id: "feedback" },
{ id: "help" }
];
return (
React.createElement("div", {className: "room-failure"},
React.createElement(loop.conversationViews.FailureInfoView, {
@ -103,7 +108,11 @@ loop.roomViews = (function(mozL10n) {
onClick: this.handleRejoinCall},
mozL10n.get("rejoin_button")
)
)
),
React.createElement(loop.shared.views.SettingsControlButton, {
menuBelow: true,
menuItems: settingsMenuItems,
mozLoop: this.props.mozLoop})
)
);
}

11
browser/components/loop/content/js/roomViews.jsx
Просмотреть файл

@ -82,7 +82,8 @@ loop.roomViews = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
failureReason: React.PropTypes.string
failureReason: React.PropTypes.string,
mozLoop: React.PropTypes.object.isRequired
},
componentDidMount: function() {
@ -94,6 +95,10 @@ loop.roomViews = (function(mozL10n) {
},
render: function() {
var settingsMenuItems = [
{ id: "feedback" },
{ id: "help" }
];
return (
<div className="room-failure">
<loop.conversationViews.FailureInfoView
@ -104,6 +109,10 @@ loop.roomViews = (function(mozL10n) {
{mozL10n.get("rejoin_button")}
</button>
</div>
<loop.shared.views.SettingsControlButton
menuBelow={true}
menuItems={settingsMenuItems}
mozLoop={this.props.mozLoop} />
</div>
);
}

23
browser/components/loop/content/shared/css/conversation.css
Просмотреть файл

@ -208,6 +208,7 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
height: 28px;
background-size: 28px;
background-image: url("../img/svg/settings.svg");
background-color: transparent;
}
.btn-settings:hover,
@ -271,6 +272,10 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
/* General Call (incoming or outgoing). */
/* XXX call-window currently relates to multiple things like the AcceptCallView,
DirectCallFailureView, PendingConversationView. It doesn't relate to the direct
call media views. We should probably make this more explicit at some stage. */
/*
* Height matches the height of the docked window
* but the UI breaks when you pop out
@ -335,6 +340,19 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
flex: auto;
}
.direct-call-failure > .settings-control,
.room-failure > .settings-control {
position: absolute;
top: 1rem;
right: .5rem;
}
html[dir="rtl"] .direct-call-failure > .settings-control,
html[dir="rtl"] .room-failure > .settings-control {
left: .5rem;
right: auto;
}
.failure-info {
text-align: center;
/* This flex is designed to set the logo in a standard place, but if the
@ -450,6 +468,11 @@ html[dir="rtl"] .settings-menu.dropdown-menu {
right: auto;
}
.settings-menu.dropdown-menu.menu-below {
top: 11.5rem;
bottom: auto;
}
/* Expired call url page */
.expired-url-info {

13
browser/components/loop/content/shared/js/views.js
Просмотреть файл

@ -185,6 +185,8 @@ loop.shared.views = (function(_, mozL10n) {
*/
var SettingsControlButton = React.createClass({displayName: "SettingsControlButton",
propTypes: {
// Set to true if the menu should be below the button rather than above.
menuBelow: React.PropTypes.bool,
menuItems: React.PropTypes.array,
mozLoop: React.PropTypes.object
},
@ -194,6 +196,12 @@ loop.shared.views = (function(_, mozL10n) {
React.addons.PureRenderMixin
],
getDefaultProps: function() {
return {
menuBelow: false
};
},
/**
* Show or hide the settings menu
*/
@ -304,13 +312,14 @@ loop.shared.views = (function(_, mozL10n) {
var settingsDropdownMenuClasses = cx({
"settings-menu": true,
"dropdown-menu": true,
"menu-below": this.props.menuBelow,
"hide": !this.state.showMenu
});
return (
React.createElement("div", null,
React.createElement("div", {className: "settings-control"},
React.createElement("button", {className: "btn btn-settings transparent-button",
onClick: this.toggleDropdownMenu,
ref: "menu-button",
ref: "anchor",
title: mozL10n.get("settings_menu_button_tooltip")}),
React.createElement("ul", {className: settingsDropdownMenuClasses, ref: "menu"},
menuItemRows

13
browser/components/loop/content/shared/js/views.jsx
Просмотреть файл

@ -185,6 +185,8 @@ loop.shared.views = (function(_, mozL10n) {
*/
var SettingsControlButton = React.createClass({
propTypes: {
// Set to true if the menu should be below the button rather than above.
menuBelow: React.PropTypes.bool,
menuItems: React.PropTypes.array,
mozLoop: React.PropTypes.object
},
@ -194,6 +196,12 @@ loop.shared.views = (function(_, mozL10n) {
React.addons.PureRenderMixin
],
getDefaultProps: function() {
return {
menuBelow: false
};
},
/**
* Show or hide the settings menu
*/
@ -304,13 +312,14 @@ loop.shared.views = (function(_, mozL10n) {
var settingsDropdownMenuClasses = cx({
"settings-menu": true,
"dropdown-menu": true,
"menu-below": this.props.menuBelow,
"hide": !this.state.showMenu
});
return (
<div>
<div className="settings-control">
<button className="btn btn-settings transparent-button"
onClick={this.toggleDropdownMenu}
ref="menu-button"
ref="anchor"
title={mozL10n.get("settings_menu_button_tooltip")} />
<ul className={settingsDropdownMenuClasses} ref="menu">
{menuItemRows}

1
browser/components/loop/test/desktop-local/conversationViews_test.js
Просмотреть файл

@ -351,6 +351,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent(options) {
var props = _.extend({
dispatcher: dispatcher,
mozLoop: fakeMozLoop,
outgoing: true
}, options);
return TestUtils.renderIntoDocument(

3
browser/components/loop/test/desktop-local/roomViews_test.js
Просмотреть файл

@ -139,7 +139,8 @@ describe("loop.roomViews", function () {
function mountTestComponent(props) {
props = _.extend({
dispatcher: dispatcher,
failureReason: FAILURE_DETAILS.UNKNOWN
failureReason: FAILURE_DETAILS.UNKNOWN,
mozLoop: fakeMozLoop
});
return TestUtils.renderIntoDocument(
React.createElement(loop.roomViews.RoomFailureView, props));

25
browser/components/loop/test/shared/views_test.js
Просмотреть файл

@ -325,6 +325,31 @@ describe("loop.shared.views", function() {
expect(comp.state.showMenu).eql(true);
});
it("should have a `menu-below` class on the dropdown when the prop is set.", function() {
var settingsMenuItems = [
{ id: "help" }
];
var comp = mountTestComponent({
menuBelow: true,
menuItems: settingsMenuItems
});
var menuItems = comp.getDOMNode().querySelector(".settings-menu");
expect(menuItems.classList.contains("menu-below")).eql(true);
});
it("should not have a `menu-below` class on the dropdown when the prop is not set.", function() {
var settingsMenuItems = [
{ id: "help" }
];
var comp = mountTestComponent({
menuItems: settingsMenuItems
});
var menuItems = comp.getDOMNode().querySelector(".settings-menu");
expect(menuItems.classList.contains("menu-below")).eql(false);
});
it("should show edit Context on menu when the option is enabled", function() {
var settingsMenuItems = [
{

6
browser/components/loop/ui/ui-showcase.js
Просмотреть файл

@ -1170,6 +1170,7 @@
React.createElement(DirectCallFailureView, {
conversationStore: conversationStores[0],
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
outgoing: false})
)
),
@ -1182,6 +1183,7 @@
React.createElement(DirectCallFailureView, {
conversationStore: conversationStores[1],
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
outgoing: true})
)
),
@ -1195,6 +1197,7 @@
conversationStore: conversationStores[0],
dispatcher: dispatcher,
emailLinkError: true,
mozLoop: navigator.mozLoop,
outgoing: true})
)
)
@ -1360,7 +1363,8 @@
React.createElement("div", {className: "fx-embedded"},
React.createElement(RoomFailureView, {
dispatcher: dispatcher,
failureReason: FAILURE_DETAILS.UNKNOWN})
failureReason: FAILURE_DETAILS.UNKNOWN,
mozLoop: navigator.mozLoop})
)
)
),

6
browser/components/loop/ui/ui-showcase.jsx
Просмотреть файл

@ -1170,6 +1170,7 @@
<DirectCallFailureView
conversationStore={conversationStores[0]}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
outgoing={false} />
</div>
</FramedExample>
@ -1182,6 +1183,7 @@
<DirectCallFailureView
conversationStore={conversationStores[1]}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
outgoing={true} />
</div>
</FramedExample>
@ -1195,6 +1197,7 @@
conversationStore={conversationStores[0]}
dispatcher={dispatcher}
emailLinkError={true}
mozLoop={navigator.mozLoop}
outgoing={true} />
</div>
</FramedExample>
@ -1360,7 +1363,8 @@
<div className="fx-embedded">
<RoomFailureView
dispatcher={dispatcher}
failureReason={FAILURE_DETAILS.UNKNOWN} />
failureReason={FAILURE_DETAILS.UNKNOWN}
mozLoop={navigator.mozLoop} />
</div>
</FramedExample>
</Section>