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

2015-09-10 12:01:16 +01:00 · 2015-09-10 12:01:16 +01:00 · 6ac53b4afe
--- a/browser/components/loop/content/js/conversation.js
+++ b/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: {
--- a/browser/components/loop/content/js/conversation.jsx
+++ b/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: {
--- a/browser/components/loop/content/js/conversationViews.js
+++ b/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: {
--- a/browser/components/loop/content/js/conversationViews.jsx
+++ b/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: {
--- a/browser/components/loop/content/js/roomViews.js
+++ b/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})
        )
      );
    }
--- a/browser/components/loop/content/js/roomViews.jsx
+++ b/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>
      );
    }
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/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 {
--- a/browser/components/loop/content/shared/js/views.js
+++ b/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
--- a/browser/components/loop/content/shared/js/views.jsx
+++ b/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}
--- a/browser/components/loop/test/desktop-local/conversationViews_test.js
+++ b/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(
--- a/browser/components/loop/test/desktop-local/roomViews_test.js
+++ b/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));
--- a/browser/components/loop/test/shared/views_test.js
+++ b/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 = [
        {
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/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})
              )
            )
          ), 
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/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>