Bug 1069028 - Implement Loop panel footer layout/styling with FxA pieces. r=MattN, a=sledru
authorTomasz Kołodziejski <tkolodziejski@mozilla.com>
Wed, 22 Oct 2014 17:53:00 -0700
changeset 225726 a6414ad2ef81750886f1ddcafa3e36d4597507ec
parent 225725 32ad158dd41a734e80acfc8693ddc6059dcb25c2
child 225727 c11621d7a35ca32a0398e68f4b0a80dca52f32e1
push id7165
push userryanvm@gmail.com
push dateTue, 28 Oct 2014 14:47:58 +0000
treeherdermozilla-aurora@8aa88cc51b86 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, sledru
bugs1069028
milestone35.0a2
Bug 1069028 - Implement Loop panel footer layout/styling with FxA pieces. r=MattN, a=sledru
browser/components/loop/content/js/panel.js
browser/components/loop/content/js/panel.jsx
browser/components/loop/content/shared/css/panel.css
browser/components/loop/ui/fake-mozLoop.js
browser/modules/Social.jsm
browser/themes/shared/aboutSocialError.css
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -712,18 +712,21 @@ loop.panel = (function(_, mozL10n) {
                                   selectTab: this.selectTab})
             )
           ), 
           React.DOM.div({className: "footer"}, 
             React.DOM.div({className: "user-details"}, 
               UserIdentity({displayName: displayName}), 
               AvailabilityDropdown(null)
             ), 
-            AuthLink(null), 
-            SettingsDropdown(null)
+            React.DOM.div({className: "signin-details"}, 
+              AuthLink(null), 
+              React.DOM.div({className: "footer-signin-separator"}), 
+              SettingsDropdown(null)
+            )
           )
         )
       );
     }
   });
 
   /**
    * Panel initialisation.
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -712,18 +712,21 @@ loop.panel = (function(_, mozL10n) {
                                   selectTab={this.selectTab}/>
             </Tab>
           </TabView>
           <div className="footer">
             <div className="user-details">
               <UserIdentity displayName={displayName} />
               <AvailabilityDropdown />
             </div>
-            <AuthLink />
-            <SettingsDropdown />
+            <div className="signin-details">
+              <AuthLink />
+              <div className="footer-signin-separator" />
+              <SettingsDropdown />
+            </div>
           </div>
         </div>
       );
     }
   });
 
   /**
    * Panel initialisation.
--- a/browser/components/loop/content/shared/css/panel.css
+++ b/browser/components/loop/content/shared/css/panel.css
@@ -263,17 +263,17 @@ body {
 /* Dropdown menu */
 
 .dropdown {
   position: relative;
 }
 
 .dropdown-menu {
   position: absolute;
-  top: -28px;
+  bottom: 0;
   left: 0;
   background-color: #fdfdfd;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
   list-style: none;
   padding: 5px;
   border-radius: 2px;
 }
 
@@ -340,16 +340,20 @@ body[dir=rtl] .dropdown-menu-item {
   color: #00caee;
 }
 
 /* DnD menu */
 
 .dnd-status {
   border: 1px solid transparent;
   padding: 2px 4px;
+  margin: 0;
+  /* Undo the start border + padding so that unhovered dnd-status is aligned
+     as if there was no additional spacing. */
+  -moz-margin-start: calc(-1px + -4px);
   font-size: .9em;
   cursor: pointer;
   border-radius: 3px;
 }
 
 .dnd-status:hover {
   border: 1px solid #DDD;
   background-color: #f1f1f1;
@@ -372,29 +376,32 @@ body[dir=rtl] .dropdown-menu-item {
 .status-dnd {
   border: 1px solid #888;
 }
 
 /* Sign in/up link */
 
 .signin-link {
   flex: 2 1 auto;
-  margin-top: 14px;
-  border-right: 1px solid #aaa;
-  padding-right: 1em;
-  margin-right: 1em;
+  margin: 0;
   text-align: right;
 }
 
 .signin-link a {
   font-size: .9em;
   text-decoration: none;
   color: #888;
 }
 
+.footer-signin-separator {
+  border-right: 1px solid #aaa;
+  height: 16px;
+  margin: 0 1em;
+}
+
 /* Settings (gear) menu */
 
 .button-settings {
   display: inline-block;
   overflow: hidden;
   margin: 0;
   padding: 0;
   border: none;
@@ -408,17 +415,16 @@ body[dir=rtl] .dropdown-menu-item {
   cursor: pointer;
   background: transparent url(../img/svg/glyph-settings-16x16.svg) no-repeat center center;
   background-size: contain;
   width: 12px;
   height: 12px;
 }
 
 .footer .button-settings {
-  margin-top: 17px; /* used to align the gear icon with the availability dropdown menu inner text */
   opacity: .6;      /* used to "grey" the icon a little */
 }
 
 .settings-menu .dropdown-menu {
   /* The panel can't have dropdown menu overflowing its iframe boudaries;
      let's anchor it from the bottom-right, while resetting the top & left values
      set by .dropdown-menu */
   top: auto;
@@ -454,15 +460,27 @@ body[dir=rtl] .dropdown-menu-item {
 /* Footer */
 
 .footer {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-content: stretch;
-  align-items: flex-start;
+  align-items: center;
   font-size: 1em;
   border-top: 1px solid #D1D1D1;
   background-color: #eaeaea;
   color: #7f7f7f;
   padding: 14px;
 }
+
+.footer .signin-details {
+  align-items: center;
+  display: flex;
+  -moz-margin-start: 5px;
+}
+
+.footer .user-identity {
+  color: #000;
+  font-weight: bold;
+  margin: 0;
+}
--- a/browser/components/loop/ui/fake-mozLoop.js
+++ b/browser/components/loop/ui/fake-mozLoop.js
@@ -16,10 +16,11 @@ navigator.mozLoop = {
     }
   },
   releaseCallData: function() {},
   contacts: {
     getAll: function(callback) {
       callback(null, []);
     },
     on: function() {}
-  }
+  },
+  fxAEnabled: true
 };
--- a/browser/modules/Social.jsm
+++ b/browser/modules/Social.jsm
@@ -9,17 +9,17 @@ this.EXPORTED_SYMBOLS = ["Social", "Crea
                          "DynamicResizeWatcher", "sizeSocialPanelToContent"];
 
 const Ci = Components.interfaces;
 const Cc = Components.classes;
 const Cu = Components.utils;
 
 // The minimum sizes for the auto-resize panel code, minimum size necessary to
 // properly show the error page in the panel.
-const PANEL_MIN_HEIGHT = 200;
+const PANEL_MIN_HEIGHT = 190;
 const PANEL_MIN_WIDTH = 330;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
   "resource:///modules/CustomizableUI.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "SocialService",
--- a/browser/themes/shared/aboutSocialError.css
+++ b/browser/themes/shared/aboutSocialError.css
@@ -1,13 +1,14 @@
 body {
   background-color: rgb(241, 244, 248);
   margin-top: 2em;
   font: message-box;
   font-size: 100%;
+  min-height: 200px;
 }
 
 p {
   font-size: .8em;
 }
 
 #error-box {
   background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;