Bug 1205206 - Move Loop Standalone Terms of Service text from footer to under Join button. r=Standard8
authorDavid Critchley <david@priologic.com>
Wed, 30 Sep 2015 09:38:24 +0100
changeset 297436 99c2739225b043e76d236605e9d756dea3874fc7
parent 297435 65dce864edc511de3f5e24c129c9f738fe75ecb7
child 297437 762808bf6c45fd5772ba4fad1ef03ea701970eb3
child 297572 4eb1b72f16f4e5ff6a498cb8dc098cddb9814ca1
push id5961
push usermratcliffe@mozilla.com
push dateWed, 30 Sep 2015 10:35:29 +0000
reviewersStandard8
bugs1205206
milestone44.0a1
Bug 1205206 - Move Loop Standalone Terms of Service text from footer to under Join button. r=Standard8
browser/components/loop/standalone/content/css/webapp.css
browser/components/loop/standalone/content/js/standaloneRoomViews.js
browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
browser/components/loop/standalone/content/l10n/en-US/loop.properties
--- a/browser/components/loop/standalone/content/css/webapp.css
+++ b/browser/components/loop/standalone/content/css/webapp.css
@@ -249,18 +249,17 @@ html[dir="rtl"] .rooms-footer .footer-lo
   background-image: url("../img/gum-opera.svg");
 }
 
 /* Room Info area layout */
 
 .room-inner-info-area {
   color: #fff;
   margin: auto;
-  /* 290px is the width of the widest info child, i.e., a tile */
-  width: 290px;
+  padding: 0 5px;
 }
 
 .room-inner-info-area > button {
   border-radius: 3px;
   font-size: 1.2em;
   padding: .2em 1.2em;
   cursor: pointer;
 }
@@ -295,8 +294,19 @@ html[dir="rtl"] .rooms-footer .footer-lo
 .room-inner-info-area > .room-waiting-tile {
   border: 0;
   border-radius: 5px;
   /* These sizes are the size of the tile image and title */
   height: 204px;
   /* Override the default iframe 300px width with the inherited width */
   width: 100%;
 }
+
+/* Terms of Service */
+
+.room-inner-info-area > .terms-service {
+  margin-top: 20px;
+}
+
+.room-inner-info-area > .terms-service,
+.room-inner-info-area > .terms-service > a {
+  color: #999;
+}
\ No newline at end of file
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.js
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.js
@@ -113,18 +113,17 @@ loop.standaloneRoomViews = (function(moz
               React.createElement("p", {className: "roomName"},  this.state.roomName), 
               React.createElement("p", {className: "loop-logo"}), 
               
                 this.state.failureReason ?
                   this._renderFailureText() :
                   this._renderJoinButton()
               
             ), 
-            React.createElement(ToSView, {
-              dispatcher: this.props.dispatcher}), 
+            React.createElement(ToSView, {dispatcher: this.props.dispatcher}), 
             React.createElement("p", {className: "mozilla-logo"})
           )
         )
       );
     }
   });
 
   /**
@@ -304,17 +303,18 @@ loop.standaloneRoomViews = (function(moz
       switch(this.props.roomState) {
         case ROOM_STATES.ENDED:
         case ROOM_STATES.READY: {
           return (
             React.createElement("div", {className: "room-inner-info-area"}, 
               React.createElement("button", {className: "btn btn-join btn-info", 
                       onClick: this.props.joinRoom}, 
                 mozL10n.get("rooms_room_join_label")
-              )
+              ), 
+              React.createElement(ToSView, {dispatcher: this.props.dispatcher})
             )
           );
         }
         case ROOM_STATES.MEDIA_WAIT: {
           var msg = mozL10n.get("call_progress_getting_media_description",
                                 {clientShortname: mozL10n.get("clientShortname2")});
           var utils = loop.shared.utils;
           var isChrome = utils.isChrome(navigator.userAgent);
@@ -417,19 +417,17 @@ loop.standaloneRoomViews = (function(moz
   var StandaloneRoomFooter = React.createClass({displayName: "StandaloneRoomFooter",
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
     },
 
     render: function() {
       return (
         React.createElement("footer", {className: "rooms-footer"}, 
-          React.createElement("div", {className: "footer-logo"}), 
-          React.createElement(ToSView, {
-            dispatcher: this.props.dispatcher})
+          React.createElement("div", {className: "footer-logo"})
         )
       );
     }
   });
 
   var StandaloneRoomView = React.createClass({displayName: "StandaloneRoomView",
     mixins: [
       Backbone.Events,
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
@@ -113,18 +113,17 @@ loop.standaloneRoomViews = (function(moz
               <p className="roomName">{ this.state.roomName }</p>
               <p className="loop-logo" />
               {
                 this.state.failureReason ?
                   this._renderFailureText() :
                   this._renderJoinButton()
               }
             </div>
-            <ToSView
-              dispatcher={this.props.dispatcher} />
+            <ToSView dispatcher={this.props.dispatcher} />
             <p className="mozilla-logo" />
           </div>
         </div>
       );
     }
   });
 
   /**
@@ -305,16 +304,17 @@ loop.standaloneRoomViews = (function(moz
         case ROOM_STATES.ENDED:
         case ROOM_STATES.READY: {
           return (
             <div className="room-inner-info-area">
               <button className="btn btn-join btn-info"
                       onClick={this.props.joinRoom}>
                 {mozL10n.get("rooms_room_join_label")}
               </button>
+              <ToSView dispatcher={this.props.dispatcher} />
             </div>
           );
         }
         case ROOM_STATES.MEDIA_WAIT: {
           var msg = mozL10n.get("call_progress_getting_media_description",
                                 {clientShortname: mozL10n.get("clientShortname2")});
           var utils = loop.shared.utils;
           var isChrome = utils.isChrome(navigator.userAgent);
@@ -418,18 +418,16 @@ loop.standaloneRoomViews = (function(moz
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
     },
 
     render: function() {
       return (
         <footer className="rooms-footer">
           <div className="footer-logo" />
-          <ToSView
-            dispatcher={this.props.dispatcher} />
         </footer>
       );
     }
   });
 
   var StandaloneRoomView = React.createClass({
     mixins: [
       Backbone.Events,
--- a/browser/components/loop/standalone/content/l10n/en-US/loop.properties
+++ b/browser/components/loop/standalone/content/l10n/en-US/loop.properties
@@ -25,17 +25,17 @@ unsupported_platform_heading=Sorry!
 unsupported_platform_message={{platform}} does not currently support {{clientShortname}}
 unsupported_platform_ios=iOS
 unsupported_platform_windows_phone=Windows Phone
 unsupported_platform_blackberry=Blackberry
 unsupported_platform_learn_more_link=Learn more about why your platform doesn't support {{clientShortname}}
 promote_firefox_hello_heading=Download {{brandShortname}} to make free audio and video calls!
 get_firefox_button=Get {{brandShortname}}
 initiate_call_cancel_button=Cancel
-legal_text_and_links=By using {{clientShortname}} you agree to the {{terms_of_use_url}} and {{privacy_notice_url}}
+legal_text_and_links=By using {{clientShortname}} you agree to the {{terms_of_use_url}} and {{privacy_notice_url}}.
 terms_of_use_link_text=Terms of use
 privacy_notice_link_text=Privacy notice
 self_view_hidden_message=Self-view hidden but still being sent; resize window \
   to show
 
 ## LOCALIZATION NOTE(brandShortname): This should not be localized and
 ## should remain "Firefox" for all locales.
 brandShortname=Firefox