Fixes mozilla-services#4848 - Header Without text labels

punamdahiya · Sep 26, 2018 · 8db6018 · 8db6018
1 parent bd409f4
commit 8db6018
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 188 deletions.
diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
@@ -7,8 +7,6 @@ gHomeLink = Home
 gNoShots
     .alt = No shots found
 gScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
-gSettings = Settings
-gSignIn = Sign In
 
 ## Header
 buttonSettings =
@@ -132,13 +130,6 @@ 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.

diff --git a/server/src/delete-shot-button.js b/server/src/delete-shot-button.js
@@ -76,14 +76,10 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
     }
 
     let deleteButtonStyle = null;
-    let deleteText = null;
     if (this.props.isIcon) {
       deleteButtonStyle = `button transparent trash ${deletePanelOpenClass}`;
     } else {
       deleteButtonStyle = `nav-button transparent icon-trash trash ${deletePanelOpenClass}`;
-      deleteText = <Localized id="shotPageDelete">
-          <span>Delete</span>
-        </Localized>;
     }
 
     return (
@@ -92,9 +88,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
           <button className={deleteButtonStyle}
             title="Delete this shot permanently"
             onClick={this.onClickDelete.bind(this)}
-            ref={this.trashButtonRef}>
-            { deleteText }
-          </button>
+            ref={this.trashButtonRef} />
         </Localized>
         { confirmationPanel }
       </div>

diff --git a/server/src/header.js b/server/src/header.js
@@ -21,7 +21,7 @@ exports.Header = function Header(props) {
 
 exports.Header.propTypes = {
   hasLogo: PropTypes.bool,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   isOwner: PropTypes.bool,
   hasFxa: PropTypes.bool,
   shouldGetFirefox: PropTypes.bool,

diff --git a/server/src/pages/homepage/homepage-header.js b/server/src/pages/homepage/homepage-header.js
@@ -25,12 +25,9 @@ exports.HomePageHeader = class HomePageHeader extends React.Component {
     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>;
+          <a className="nav-button icon-shots" title="My Shots" href="/shots"
+            onClick={ this.onClickMyShots.bind(this) } tabIndex="0" />
+        </Localized>;
     }
 
     const signin = this.renderFxASignIn();

diff --git a/server/src/pages/shot/shotpage-header.js b/server/src/pages/shot/shotpage-header.js
@@ -32,11 +32,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     }
     return (
       <Localized id="shotPageAllShotsButton">
-        <a className="nav-button icon-shots" href="/shots" tabIndex="0" title="All Shots">
-          <Localized id="shotPageAllShots">
-            <span>All Shots</span>
-          </Localized>
-        </a>
+        <a className="nav-button icon-shots" href="/shots" tabIndex="0" title="All Shots" />
       </Localized>
     );
   }
@@ -55,14 +51,14 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     const timeDiff = <TimeDiff date={shot.createdDate} />;
     let expirationSubtitle;
     if (this.props.expireTime === null) {
-      expirationSubtitle = <Localized id="shotPageDoesNotExpire"><span>does not expire</span></Localized>;
+      expirationSubtitle = <Localized id="shotPageDoesNotExpire"><span className="expire-info">does not expire</span></Localized>;
     } else {
       const expired = this.props.expireTime < Date.now();
       const expireTimeDiff = <TimeDiff date={this.props.expireTime}/>;
       if (expired) {
-        expirationSubtitle = <Localized id="shotPageExpired" $timediff={expireTimeDiff}><span>expired {expireTimeDiff}</span></Localized>;
+        expirationSubtitle = <Localized id="shotPageExpired" $timediff={expireTimeDiff}><span className="expire-info">expired {expireTimeDiff}</span></Localized>;
       } else {
-        expirationSubtitle = <Localized id="shotPageExpiresIn" $timediff={expireTimeDiff}><span>expires {expireTimeDiff}</span></Localized>;
+        expirationSubtitle = <Localized id="shotPageExpiresIn" $timediff={expireTimeDiff}><span className="expire-info">expires {expireTimeDiff}</span></Localized>;
       }
     }
 
@@ -72,7 +68,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
           <EditableTitle title={shot.title} isOwner={this.props.isOwner} />
           <div className="shot-subtitle">
             { linkTextShort ? <a className="subtitle-link" rel="noopener noreferrer" href={ shot.url } target="_blank" onClick={ this.onClickOrigUrl.bind(this, "navbar") }>{ linkTextShort }</a> : null }
-            <span className="time-diff">{ timeDiff }</span>
+            <span className="time-diff expire-info">{ timeDiff }</span>
             { expirationSubtitle }
           </div>
         </div>
@@ -110,8 +106,8 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
         { shotInfo }
         <div className="shot-alt-actions">
         { this.props.children }
-        { signin }
         </div>
+        { signin }
       </Header>
     );
   }

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -343,28 +343,18 @@ class Body extends React.Component {
     let favoriteShotButton = null;
     let trashOrFlagButton = null;
     let editButton = null;
-    const highlight = this.state.highlightEditButton ? <div className="edit-highlight" onClick={ this.onClickEdit.bind(this) } onMouseOver={ this.onMouseOverHighlight.bind(this) } onMouseOut={ this.onMouseOutHighlight.bind(this) }></div> : null;
-    const activeFavClass = this.props.expireTime ? "" : "is-fav";
-    const inactive = this.props.isFxaAuthenticated ? "" : "inactive";
-
-    favoriteShotButton = <div className="favorite-shot-button"><Localized id="shotPagefavoriteButton">
-      <button className={`nav-button ${inactive}`} disabled={!this.props.isFxaAuthenticated} onClick={this.onClickFavorite.bind(this)}>
-        <span className={`icon-favorite favorite ${activeFavClass}`} ></span>
-        <Localized id="shotPageFavorite">
-          <span className={`favorite-text favorite ${activeFavClass} `}>Favorite</span>
-        </Localized>
-      </button></Localized></div>;
-
-    const downloadButton = <div className="download-shot-button"><Localized id="shotPageDownloadShot">
-      <button className={`nav-button icon-download`} onClick={this.onClickDownload.bind(this)}
-        title="Download the shot image">
-        <Localized id="shotPageDownload">
-          <span>Download</span>
-        </Localized>
-      </button>
-    </Localized></div>;
+    let downloadButton = null;
 
     if (this.props.isOwner) {
+      const highlight = this.state.highlightEditButton ? <div className="edit-highlight" onClick={ this.onClickEdit.bind(this) } onMouseOver={ this.onMouseOverHighlight.bind(this) } onMouseOut={ this.onMouseOutHighlight.bind(this) }></div> : null;
+      const activeFavClass = this.props.expireTime ? "" : "is-fav";
+      const inactive = this.props.isFxaAuthenticated ? "" : "inactive";
+
+      favoriteShotButton = <div className="favorite-shot-button"><Localized id="shotPagefavoriteButton">
+          <button className={`nav-button ${inactive} icon-favorite ${activeFavClass}`}
+            disabled={!this.props.isFxaAuthenticated} onClick={this.onClickFavorite.bind(this)} />
+        </Localized></div>;
+
       trashOrFlagButton = <DeleteShotButton
         clickDeleteHandler={ this.clickDeleteHandler.bind(this) }
         confirmDeleteHandler={ this.confirmDeleteHandler.bind(this) }
@@ -375,15 +365,17 @@ class Body extends React.Component {
           <button className="nav-button icon-edit transparent edit"
             title="Edit this image"
             onClick={this.onClickEdit.bind(this)}
-            ref={(edit) => { this.editButton = edit; }}>
-            <Localized id="shotPageDraw">
-              <span>Draw</span>
-            </Localized>
-          </button>
+            ref={(edit) => { this.editButton = edit; }} />
         </Localized>
         <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
         { highlight }
         </div> : null;
+
+      downloadButton = <div className="download-shot-button">
+        <Localized id="shotPageDownloadShot">
+          <button className={`nav-button icon-download`} onClick={this.onClickDownload.bind(this)}
+            title="Download the shot image" />
+        </Localized></div>;
     }
 
     let clip;

diff --git a/server/src/signin-button.js b/server/src/signin-button.js
@@ -18,21 +18,13 @@ exports.SignInButton = class SignInButton extends React.Component {
   render() {
     if (this.state.displaySettings) {
       return <Localized id="buttonSettings">
-        <a className="nav-button icon-settings" tabIndex="0" href="/settings" title="Settings">
-          <Localized id="gSettings">
-            <span>Settings</span>
-          </Localized>
-        </a>
-      </Localized>;
+          <a className="nav-button icon-settings" tabIndex="0" href="/settings" title="Settings" />
+        </Localized>;
     }
 
     const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage;
     return <Localized id="buttonSignIn">
-        <a className="nav-button icon-settings" tabIndex="0" href={logInURI} title="SignIn" onClick={this.clickHandler.bind(this)}>
-          <Localized id="gSignIn">
-            <span>Sign In</span>
-          </Localized>
-        </a>
+        <a className="nav-button icon-settings" tabIndex="0" href={logInURI} title="SignIn" onClick={this.clickHandler.bind(this)} />
       </Localized>;
   }