From 44dc3811fca929905bd7d28d1eee1ff413b21a24 Mon Sep 17 00:00:00 2001 From: Punam Dahiya Date: Fri, 21 Sep 2018 17:39:24 -0700 Subject: [PATCH] Fixes #4848 - Header Without text labels --- locales/en-US/server.ftl | 10 - server/src/delete-shot-button.js | 9 +- server/src/header.js | 2 +- server/src/pages/homepage/homepage-header.js | 15 +- server/src/pages/homepage/view.js | 3 +- server/src/pages/shot/editor.js | 4 +- server/src/pages/shot/shotpage-header.js | 20 +- server/src/pages/shot/view.js | 94 +++++---- server/src/pages/shotindex/myshots-header.js | 4 +- server/src/pages/shotindex/view.js | 7 +- server/src/signin-button.js | 18 +- static/css/frame.scss | 196 ++++++++++--------- static/css/home.scss | 5 + static/css/partials/_header.scss | 130 +++++------- 14 files changed, 245 insertions(+), 272 deletions(-) diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl index 154079ccb7..85618816e8 100644 --- 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 = @@ -98,7 +96,6 @@ shotPageAlertErrorUpdatingTitle = Error saving title shotPageConfirmDelete = Are you sure you want to delete this shot permanently? shotPageShareButton = .title = Share -shotPageCopy = Copy shotPageCopyButton = .title = Copy image to clipboard shotPageCopied = Copied @@ -135,13 +132,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. shotPageDMCAMessage = This shot is no longer available due to a third party intellectual property claim. # Note: { $dmca } is a placeholder for a link to send email (a 'mailto' link) diff --git a/server/src/delete-shot-button.js b/server/src/delete-shot-button.js index 32a98c20c8..0491122136 100644 --- 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 = - Delete - ; + deleteButtonStyle = `button nav-button transparent ${deletePanelOpenClass}`; } return ( @@ -93,7 +89,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component { title="Delete this shot permanently" onClick={this.onClickDelete.bind(this)} ref={this.trashButtonRef}> - { deleteText } + { confirmationPanel } @@ -107,4 +103,5 @@ exports.DeleteShotButton.propTypes = { confirmDeleteHandler: PropTypes.func, cancelDeleteHandler: PropTypes.func, isIcon: PropTypes.bool, + staticLink: PropTypes.func, }; diff --git a/server/src/header.js b/server/src/header.js index 8648c1f3b4..a6ad3d30a3 100644 --- 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 index 419623363f..71c6f2170b 100644 --- a/server/src/pages/homepage/homepage-header.js +++ b/server/src/pages/homepage/homepage-header.js @@ -17,7 +17,8 @@ exports.HomePageHeader = class HomePageHeader extends React.Component { renderFxASignIn() { return ( this.props.isFirefox && this.props.isOwner ? - : null + : null ); } @@ -25,12 +26,11 @@ exports.HomePageHeader = class HomePageHeader extends React.Component { let myShots; if (this.props.isOwner) { myShots = - - - My Shots - - - ; + + + + ; } const signin = this.renderFxASignIn(); @@ -49,4 +49,5 @@ exports.HomePageHeader.propTypes = { hasFxa: PropTypes.bool, isOwner: PropTypes.bool, isFirefox: PropTypes.bool, + staticLink: PropTypes.func, }; diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js index eb9af3ebad..305dc288a3 100644 --- a/server/src/pages/homepage/view.js +++ b/server/src/pages/homepage/view.js @@ -78,7 +78,7 @@ class Body extends React.Component { return ( + hasFxa={this.props.hasFxa} staticLink={this.props.staticLink}/>
@@ -168,6 +168,7 @@ Body.propTypes = { firefoxVersion: PropTypes.string, isFirefox: PropTypes.bool, showMyShots: PropTypes.bool, + staticLink: PropTypes.func, }; exports.HeadFactory = React.createFactory(Head); diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js index f2367f491b..568209035e 100644 --- a/server/src/pages/shot/editor.js +++ b/server/src/pages/shot/editor.js @@ -184,7 +184,7 @@ exports.Editor = class Editor extends React.Component { const redoButtonState = this.state.canRedo ? "active" : "inactive"; return
-
+
@@ -217,7 +217,7 @@ exports.Editor = class Editor extends React.Component {
-
+
diff --git a/server/src/pages/shot/shotpage-header.js b/server/src/pages/shot/shotpage-header.js index 6a03639740..7fa52c9ff6 100644 --- a/server/src/pages/shot/shotpage-header.js +++ b/server/src/pages/shot/shotpage-header.js @@ -33,9 +33,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component { return ( - - All Shots - + ); @@ -55,14 +53,14 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component { const timeDiff = ; let expirationSubtitle; if (this.props.expireTime === null) { - expirationSubtitle = does not expire; + expirationSubtitle = does not expire; } else { const expired = this.props.expireTime < Date.now(); const expireTimeDiff = ; if (expired) { - expirationSubtitle = expired {expireTimeDiff}; + expirationSubtitle = expired {expireTimeDiff}; } else { - expirationSubtitle = expires {expireTimeDiff}; + expirationSubtitle = expires {expireTimeDiff}; } } @@ -72,7 +70,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
{ linkTextShort ? { linkTextShort } : null } - { timeDiff } + { timeDiff } { expirationSubtitle }
@@ -93,7 +91,8 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component { return ( this.props.isOwner ?
- +
: null ); } @@ -110,8 +109,8 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component { { shotInfo }
{ this.props.children } - { signin }
+ { signin } ); } @@ -124,6 +123,7 @@ exports.ShotPageHeader.propTypes = { isFxaAuthenticated: PropTypes.bool, expireTime: PropTypes.number, shouldGetFirefox: PropTypes.bool, + staticLink: PropTypes.func, }; class EditableTitle extends React.Component { @@ -161,7 +161,7 @@ class EditableTitle extends React.Component { this.textInput = input} className="shot-title-input" style={{minWidth: this.state.minWidth}} - type="text" defaultValue={this.props.title} autoFocus="true" + type="text" defaultValue={this.props.title} autoFocus={true} onBlur={this.onExit.bind(this)} onKeyUp={this.onKeyUp.bind(this)} onFocus={this.onFocus} /> ; } diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js index 85e9b5038c..149b285656 100644 --- a/server/src/pages/shot/view.js +++ b/server/src/pages/shot/view.js @@ -356,68 +356,63 @@ class Body extends React.Component { let favoriteShotButton = null; let trashOrFlagButton = null; let editButton = null; - const highlight = this.state.highlightEditButton - ?
- : null; - const activeFavClass = this.props.expireTime ? "" : "is-fav"; - const inactive = this.props.isFxaAuthenticated ? "" : "inactive"; - - favoriteShotButton =
- -
; - - const downloadButton =
- - -
; - - const copyButton = ; + let downloadButton = null; + let copyButton = null; if (this.props.isOwner) { + const highlight = this.state.highlightEditButton + ?
+ : null; + const favImgSrc = this.props.expireTime ? this.props.staticLink("/static/img/icon-heart-outline.svg") : + this.props.staticLink("/static/img/icon-heart.svg"); + const inactive = this.props.isFxaAuthenticated ? "" : "inactive"; + + favoriteShotButton =
+ + +
; + trashOrFlagButton = ; + clickDeleteHandler={this.clickDeleteHandler.bind(this)} + confirmDeleteHandler={this.confirmDeleteHandler.bind(this)} + cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} + staticLink={this.props.staticLink} />; editButton = this.props.enableAnnotations ?
- { highlight }
: null; + + downloadButton =
+ + +
; + + copyButton = ; } let clip; @@ -440,7 +435,8 @@ class Body extends React.Component {
+ shot={this.props.shot} expireTime={this.props.expireTime} shouldGetFirefox={renderGetFirefox} + staticLink={this.props.staticLink}> { favoriteShotButton } { editButton } { copyButton } diff --git a/server/src/pages/shotindex/myshots-header.js b/server/src/pages/shotindex/myshots-header.js index be2be92489..8bbecd151c 100644 --- a/server/src/pages/shotindex/myshots-header.js +++ b/server/src/pages/shotindex/myshots-header.js @@ -5,7 +5,8 @@ const { Header } = require("../../header.js"); exports.MyShotsHeader = function MyShotsHeader(props) { const signin = props.enableUserSettings && props.hasDeviceId ? - : null; + : null; return (
@@ -20,4 +21,5 @@ exports.MyShotsHeader.propTypes = { hasFxa: PropTypes.bool, hasDeviceId: PropTypes.bool, enableUserSettings: PropTypes.bool, + staticLink: PropTypes.func, }; diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js index d1feef15d6..e18a359dbe 100644 --- a/server/src/pages/shotindex/view.js +++ b/server/src/pages/shotindex/view.js @@ -41,7 +41,7 @@ class Body extends React.Component {
+ enableUserSettings={this.props.enableUserSettings} staticLink={this.props.staticLink}/> { this.props.disableSearch ? null : this.renderSearchForm() }
{ this.renderShots() } @@ -322,7 +322,7 @@ class Card extends React.Component { ; } else if (this.props.hasFxa) { favoriteIndicator = -
+
; } @@ -369,7 +369,8 @@ class Card extends React.Component { isIcon = {true} clickDeleteHandler={this.clickDeleteHandler.bind(this)} confirmDeleteHandler={this.confirmDeleteHandler.bind(this, shot)} - cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} /> + cancelDeleteHandler={this.cancelDeleteHandler.bind(this)} + staticLink={this.props.staticLink} />
{favoriteIndicator} {syncedShotIndicator} diff --git a/server/src/signin-button.js b/server/src/signin-button.js index fe80c94c06..cb747af3ee 100644 --- a/server/src/signin-button.js +++ b/server/src/signin-button.js @@ -18,20 +18,17 @@ exports.SignInButton = class SignInButton extends React.Component { render() { if (this.state.displaySettings) { return - - - Settings - - - ; + + + + ; } const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage; return - - - Sign In - + + ; } @@ -44,4 +41,5 @@ exports.SignInButton = class SignInButton extends React.Component { exports.SignInButton.propTypes = { initialPage: PropTypes.string, isAuthenticated: PropTypes.bool, + staticLink: PropTypes.func, }; diff --git a/static/css/frame.scss b/static/css/frame.scss index dd9bfa1e90..9d769fa151 100644 --- a/static/css/frame.scss +++ b/static/css/frame.scss @@ -10,8 +10,15 @@ .back-to-home { @include respond-to("small") { background-size: 24px auto; - padding-left: 40px; + padding-left: 35px; border: 0; + margin: 0 2px; + span { + font-size: 20px; + &.small-text { + font-size: 14px; + } + } } background-position: left center; @@ -30,6 +37,7 @@ &.small-text { font-size: 17px; padding-left: 0; + padding-right: 5px; } } @@ -40,9 +48,9 @@ .shot-main-actions { - @include respond-to("medium") { + @include respond-to("large") { @include flex-container(row, flex-start, center); - margin-right: 10px; + flex: initial; padding-top: 4px; overflow: hidden; } @@ -50,21 +58,23 @@ @include respond-to("small") { @include flex-container(row, flex-start, center); background: $light-default; - border-bottom: 1px solid rgba(#000, 0.1); - border-top: 1px solid $light-border; - flex: 0 0 100%; - height: $grid-unit * 3.6; - order: 1; - width: 100%; + height: $grid-unit * 3.5; } flex: 1; position: relative; - .expire-widget { + .expire-info { + display: block; @include respond-to("small") { display: none; } + @include respond-to("large") { + display: none; + } + @media (min-width: 1260px) { + display: block; + } } } @@ -72,16 +82,28 @@ .edit-shot-button { position: relative; } - @include flex-container(row, flex-end, center); - @include respond-to("small") { - flex-wrap: wrap; - justify-content: flex-start; - } + @include respond-to("large") { + background-color: $light-default; + justify-content: flex-end; + border: none; + flex: 1; + order: 0; + } + background-color: $white; + border-bottom: 1px solid rgba(#000, 0.1); + border-top: 1px solid $light-border; + flex: 0 0 100%; + flex-wrap: wrap; + justify-content: center; + order: 1; } .shot-info { @include flex-container(column, center, flex-start); + @include respond-to("small") { + padding: 0 0 0 $grid-unit * 0.5; + } color: $black; padding: 0 0 0 $grid-unit; @@ -96,20 +118,26 @@ text-overflow: ellipsis; white-space: nowrap; margin: 0; - max-width: 600px; } .shot-title { - @include respond-to("small") { - font-size: 20px; - line-height: 20px; - padding-bottom: 4px; + @include respond-to("medium") { + max-width: 500px; + } + @include respond-to("large") { + font-size: 32px; + line-height: 39px; + max-width: 250px; + padding-bottom: 8px; + } + @media (min-width: 1260px) { + max-width: 500px; } - - font-size: 28px; font-weight: bold; - line-height: 28px; - padding-bottom: 8px; + font-size: 24px; + line-height: 29px; + max-width: 150px; + padding-bottom: 4px; &.saving { opacity: 0.7; @@ -120,6 +148,9 @@ padding-right: 28px; &:hover { + @include respond-to("large") { + background-size: 24px 24px; + } background-image: url("/static/img/pencil.svg"); background-position: right 5px; background-repeat: no-repeat; @@ -130,10 +161,18 @@ .shot-subtitle { @include flex-container(row, flex-start, center); - font-size: 15px; + @include respond-to("large") { + font-size: 14px; + line-height: 17px; + } + font-size: 12px; + line-height: 15px; } .shot-title-input { + @include respond-to("large") { + max-width: 200px; + } border-radius: $border-radius; border: 1px solid $active-blue; font-size: 24px; @@ -142,6 +181,7 @@ margin: 0 0 4px -6px; padding: 0 5px; overflow: auto; + max-width: 100px; } .subtitle-link, @@ -155,9 +195,9 @@ box-shadow: $stroke-box-shadow, $medium-box-shadow; padding: 5px; position: absolute; + top: 70px; right: -30px; text-align: center; - top: 90px; width: 150px; z-index: 999; @@ -198,72 +238,13 @@ .delete-confirmation-dialog { &.right-align { - top: 88px; - } -} - -.keep-for-form { - @include flex-container(row, flex-start, center); - - select { - -moz-appearance: none; //sass-lint:disable-line no-vendor-prefixes - appearance: none; - background-color: $light-default; - background-image: url("/static/img/icon-dropdown.svg"); - background-position: right 8px top 8px; - background-repeat: no-repeat; - background-size: 10px auto; - border-radius: $border-radius; - border: 1px solid $light-border; - color: $dark-default; - cursor: pointer; - font-size: 14px; - font-weight: 400; - height: 26px; - margin-left: 8px; - outline: none; - padding: 0 24px 0 4px; - position: relative; - text-align: center; - text-decoration: none; - transition: background 150ms $bezier, border 150ms $bezier; - user-select: none; - white-space: nowrap; - - &:hover, - &:focus { - background-color: $light-hover; - border-color: $light-border-active; - } - - &:active { - background-color: $light-active; - border-color: $light-border-active; + @include respond-to("large") { + top: 78px; } - } - - .button, - select { - margin-right: 8px; + top:58px; } } -.shot-title-input { - border-radius: $border-radius; - border: 1px solid $active-blue; - font-size: 28px; - font-weight: 300; - height: 36px; - margin: -4px 0 4px -6px; - padding: 0 5px; - overflow: auto; -} - -.shot-subtitle { - @include flex-container(row, flex-start, center); - font-size: 15px; -} - .clips { @include flex-container(column, center, center); position: relative; @@ -319,12 +300,16 @@ } .edit-highlight { + @include respond-to("large") { + left: 50px; + top: 25px; + } background-image: url("../img/edit-highlight.svg"); height: 17px; width: 17px; position: absolute; - left: 50px; - top: 20px; + left: 30px; + top: 15px; cursor: pointer; } @@ -408,7 +393,7 @@ body { .editor-header { @include respond-to("medium") { - @include flex-container(row, space-between, stretch); + @include flex-container(row, space-between, stretch, wrap); height: $grid-unit * 5; } @@ -422,6 +407,33 @@ body { position: fixed; width: 100%; + .shot-edit-main-actions { + @include respond-to("medium") { + @include flex-container(row, flex-start, center); + margin-right: 10px; + padding-top: 4px; + overflow: hidden; + } + + @include respond-to("small") { + @include flex-container(row, flex-start, center); + background: $light-default; + border-bottom: 1px solid rgba(#000, 0.1); + border-top: 1px solid $light-border; + flex: 0 0 100%; + height: $grid-unit * 3.6; + order: 1; + width: 100%; + } + + flex: 1; + position: relative; + } + + .shot-edit-alt-actions { + @include flex-container(row, flex-end, center); + } + .button { margin: $grid-unit * 0.25; } @@ -482,7 +494,7 @@ body { z-index: 1; @include respond-to("small") { - top: $grid-unit * 4; + top: $grid-unit * 2; } } diff --git a/static/css/home.scss b/static/css/home.scss index b154073a2c..026db6bc3c 100644 --- a/static/css/home.scss +++ b/static/css/home.scss @@ -374,6 +374,11 @@ section .container { } @media (max-width: 768px) { + .container { + flex-direction: column; + justify-content: center; + text-align: center; + } .banner { background-image: url("../img/landing-screenshots_mobile.svg"); background-repeat: no-repeat; diff --git a/static/css/partials/_header.scss b/static/css/partials/_header.scss index f2b97c737f..098b1a4e68 100644 --- a/static/css/partials/_header.scss +++ b/static/css/partials/_header.scss @@ -1,7 +1,7 @@ .header-panel { @include respond-to("medium") { - @include flex-container(row, space-between, center); - height: $grid-unit * 4.8; + @include flex-container(row, center, center, wrap); + height: 100%; } @include respond-to("small") { @@ -13,16 +13,30 @@ @include flex-container(row, center, center); } - display: flex; - height: 96px; background-color: $light-default; + display: flex; + height: 70px; width: 100%; .logo { + @include respond-to("small") { + max-width: $grid-unit * 10; + } + + @include respond-to("large") { + height: $grid-unit * 4.8; + } + align-items: center; display: flex; - padding: 0 16px; + padding: 20px 0; flex: 1; + height: $grid-unit * 3.5; + .screenshots-logo { + @include respond-to("small") { + background-position: center 5px; + width: $grid-unit * 9; + } background-image: url("../img/landing-Screenshot-logo.svg"); background-repeat: no-repeat; background-size: contain; @@ -30,15 +44,14 @@ position: relative; width: 318px; } - - @include respond-to("small") { - margin: $grid-unit auto; - } } .alt-actions { - display: flex; + @include respond-to("small") { + margin-right: 0; + } align-items: center; + display: flex; margin-right: $grid-unit * 1.5; } @@ -50,75 +63,42 @@ .nav-button { @include flex-container(column, center, center); - cursor: pointer; - text-decoration: none; - background-color: transparent; - border: 0; - outline: none; - display: flex; - flex-basis: 96px; - font-size: 14px; - font-weight: bold; - height: 96px; - width: 96px; - text-align: center; - background-size: 24px 24px; - background-position: center 24px; - background-repeat: no-repeat; - &:active { - padding-left: 8px; - padding-right: 8px; + img { + width: 24px; + height: 24px; } - &:active, - &:hover { - background-color: $light-hover; + @include respond-to("large") { + flex-basis: 96px; + width: 96px; + height: 96px; + img { + width: 28px; + height: 28px; + } } - &.hidden { - display: none; - } + display: flex; + flex-basis: 60px; + height: 60px; + width: 60px; - &.icon-shots { - background-image: url("../img/icon-shots.svg"); + &:active, + &:hover { + background-color: $light-hover; } + &.icon-shots, &.icon-settings { - background-image: url("../img/icon-settings.svg"); - } - - .icon-favorite { - background-image: url("../img/icon-heart-outline.svg"); - } - - &.icon-trash { - background-image: url("../img/icon-trash.svg"); - } - - &.icon-edit { - background-image: url("../img/icon-pen.svg"); - } - - &.icon-copy { - background-image: url("../img/icon-copy.svg"); - } - - &.icon-download { - background-image: url("../img/icon-download.svg"); - } - - .icon-favorite { - &.favorite { - width: 24px; - height: 24px; - margin: 0 0 8px; - background-size: 24px 24px; - - &.is-fav { - background-image: url("../img/icon-heart.svg"); - } + @include respond-to("large") { + flex-basis: 96px; + height: 96px; + width: 96px; } + flex-basis: 70px; + height: 70px; + width: 70px; } &.inactive { @@ -133,23 +113,13 @@ text-overflow: ellipsis; width: 96px; } - - .favorite-text { - &.favorite { - margin-top: 0; - - &.is-fav { - color: #b5007f; - } - } - } } .nav-link { @include flex-container(column, center, center); color: $black; border-right: 1px solid $light-border; - height: 96px; + height: 70px; &:active, &:hover { background-color: $light-hover;