Merge pull request #4821 from punamdahiya/4685-header

Fixes #4685 - [FxA] Common Header Component
mozilla-services · Sep 13, 2018 · cc11529 · cc11529
2 parents c5d84f5 + 493dfc2
commit cc11529
Show file tree

Hide file tree

Showing 30 changed files with 677 additions and 558 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -11,10 +11,13 @@ gSettings = Settings
 gSignIn = Sign In
 
 ## Header
-signInButton =
-    .aria-label = Sign In
-settingsButton =
-    .aria-label = Settings
+buttonSettings =
+    .title = Settings
+buttonSignIn =
+    .title = Sign In
+screenshotsLogo =
+    .title = Screenshots Home
+
 
 ## Footer
 
@@ -125,7 +128,17 @@ shotPageEditButton =
     .title = Edit this image
 shotPagefavoriteButton =
     .title = Favorite this shot
+shotPageBackToHomeButton =
+    .title = Homepage
+shotPageAllShotsButton =
+    .title = All Shots
+shotPageAllShots = All Shots
 shotPageDownload = Download
+# Note: Draw text is used on shot page as a verb (action)
+shotPageDraw = Draw
+# Note: Favorite text is used on shot page as a verb (action)
+shotPageFavorite = Favorite
+shotPageDelete = Delete
 shotPageScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
 shotPageUpsellFirefox = Get Firefox now
 shotPageDMCAMessage = This shot is no longer available due to a third party intellectual property claim.
@@ -285,6 +298,8 @@ shotIndexPageNoShotsInvitation = Go on, create some.
 shotIndexPageLookingForShots = Looking for your shots…
 shotIndexPageNoSearchResultsIntro = Hmm
 shotIndexPageNoSearchResults = We canʼt find any shots that match your search.
+shotIndexPageMyShotsButton =
+    .title = My Shots
 shotIndexPageClearSearchButton =
     .title = Clear search
 shotIndexPageConfirmShotDelete = Delete this shot?

diff --git a/server/src/delete-shot-button.js b/server/src/delete-shot-button.js
@@ -78,10 +78,14 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
     return (
       <div className="delete-shot-button">
         <Localized id="shotPageDeleteButton">
-          <button className={`button transparent trash ${deletePanelOpenClass}`}
+          <button className={`nav-button transparent icon-trash trash ${deletePanelOpenClass} `}
             title="Delete this shot permanently"
             onClick={this.onClickDelete.bind(this)}
-            ref={this.trashButtonRef}></button>
+            ref={this.trashButtonRef}>
+            <Localized id="shotPageDelete">
+              <span>Delete</span>
+            </Localized>
+          </button>
         </Localized>
         { confirmationPanel }
       </div>

diff --git a/server/src/header.js b/server/src/header.js
@@ -0,0 +1,21 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+
+exports.Header = function Header(props) {
+  const logo = props.hasLogo ? <div className="logo">
+      <Localized id="screenshotsLogo">
+        <a href="/" title="Screenshots home" className="screenshots-logo"></a>
+      </Localized>
+    </div> : null;
+
+  return <header className="header-panel default-color-scheme">
+      {logo}
+      {props.children}
+    </header>;
+};
+
+exports.Header.propTypes = {
+  hasLogo: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
diff --git a/server/src/pages/homepage/homepage-header.js b/server/src/pages/homepage/homepage-header.js
@@ -0,0 +1,52 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+const { SignInButton } = require("../../signin-button.js");
+const sendEvent = require("../../browser-send-event.js");
+const { Header } = require("../../header.js");
+
+exports.HomePageHeader = class HomePageHeader extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  onClickMyShots() {
+    sendEvent("goto-myshots", "homepage", {useBeacon: true});
+  }
+
+  renderFxASignIn() {
+      return (
+        this.props.isFirefox && this.props.isOwner ?
+          <SignInButton isAuthenticated={this.props.hasFxa} initialPage="" /> : null
+      );
+  }
+
+  render() {
+    let myShots;
+    if (this.props.isOwner) {
+      myShots = <Localized id="shotIndexPageMyShotsButton">
+        <a className="nav-button icon-shots" title="My Shots" href="/shots" onClick={ this.onClickMyShots.bind(this) } tabIndex="0">
+          <Localized id="gMyShots">
+            <span>My Shots</span>
+          </Localized>
+        </a>
+      </Localized>;
+    }
+
+    const signin = this.renderFxASignIn();
+    return (
+      <Header hasLogo={true}>
+        <div className="alt-actions">
+          { myShots }
+          { signin }
+        </div>
+      </Header>
+    );
+  }
+};
+
+exports.HomePageHeader.propTypes = {
+  hasFxa: PropTypes.bool,
+  isOwner: PropTypes.bool,
+  isFirefox: PropTypes.bool,
+};
diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js
@@ -3,9 +3,9 @@ const PropTypes = require("prop-types");
 const reactruntime = require("../../reactruntime");
 const classnames = require("classnames");
 const sendEvent = require("../../browser-send-event.js");
-const { SignInButton } = require("../../signin-button.js");
 const { Footer } = require("../../footer-view.js");
 const { Localized } = require("fluent-react/compat");
+const { HomePageHeader } = require("./homepage-header");
 
 class Head extends React.Component {
   generateFullLink(link) {
@@ -48,11 +48,6 @@ Head.propTypes = {
 };
 
 class Body extends React.Component {
-  onClickMyShots() {
-    sendEvent("goto-myshots", "homepage", {useBeacon: true});
-    window.location = "/shots";
-  }
-
   onClickInstallFirefox() {
     sendEvent("click-install-firefox-home", {useBeacon: true});
   }
@@ -79,46 +74,25 @@ class Body extends React.Component {
   }
 
   render() {
-    let myShots;
-    if (this.props.showMyShots) {
-      myShots = <a className="myshots-button" onClick={ this.onClickMyShots.bind(this) }>
-        <Localized id="gMyShots">
-          <span className="myshots-text">My Shots</span>
-        </Localized>
-      </a>;
-    }
-    const signin = (this.props.isFirefox && this.props.showMyShots) ? <SignInButton isAuthenticated={this.props.hasFxa} initiatePage="" /> : null;
     const is57 = this.props.isFirefox && this.props.firefoxVersion >= 57;
     return (
       <reactruntime.BodyTemplate {...this.props}>
         <div className="default-color-scheme">
-          <header>
-            <nav>
-              <div className="container">
-                <div className="header-logo">
-                  <a href="#" className="screenshots-logo"></a>
-                </div>
-                <div className="nav-links">
-                  { myShots }
-                  { signin }
-                </div>
-              </div>
-            </nav>
-            <div className="banner-spacer" />
-            <div className="banner">
-              <div className="banner-image-back" />
-              <div className="banner-container">
-                <div className="banner-content">
-                  <h1>Firefox Screenshots</h1>
-                  <Localized id="gScreenshotsDescription">
-                    <p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
-                  </Localized>
-                  { this.renderGetFirefox() }
-                </div>
-                <div className="banner-image-front" />
+          <HomePageHeader isOwner={this.props.showMyShots} isFirefox={this.props.isFirefox}
+            hasFxa={this.props.hasFxa} />
+          <div className="banner">
+            <div className="banner-image-back" />
+            <div className="banner-container">
+              <div className="banner-content">
+                <h1>Firefox Screenshots</h1>
+                <Localized id="gScreenshotsDescription">
+                  <p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
+                </Localized>
+                { this.renderGetFirefox() }
               </div>
+              <div className="banner-image-front" />
             </div>
-          </header>
+          </div>
           <Localized id="homePageHowScreenshotsWorks">
             <h2 id="how-screenshots-works">How Screenshots Works</h2>
           </Localized>

diff --git a/server/src/pages/not-found/view.js b/server/src/pages/not-found/view.js
@@ -3,6 +3,7 @@ const { Footer } = require("../../footer-view.js");
 const { Localized } = require("fluent-react/compat");
 const React = require("react");
 const PropTypes = require("prop-types");
+const { Header } = require("../../header.js");
 
 class Head extends React.Component {
   render() {
@@ -28,9 +29,7 @@ class Body extends React.Component {
     return (
       <reactruntime.BodyTemplate {...this.props}>
         <div className="column-space full-height default-color-scheme">
-          <div id="shot-index-header" className="header">
-            <h1><a href="/shots">Firefox <strong>Screenshots</strong> <sup>Beta</sup></a></h1>
-          </div>
+          <Header hasLogo={true} />
           <div id="shot-index" className="flex-1">
             <div className="no-shots" key="no-shots-found">
               <Localized id="gNoShots">