From cfbd15942e3f93ca1d54e9674b69d5f98e3f917c 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 | 8 +- server/src/header.js | 2 +- server/src/pages/homepage/homepage-header.js | 9 +- server/src/pages/shot/editor.js | 4 +- server/src/pages/shot/shotpage-header.js | 18 +- server/src/pages/shot/view.js | 77 ++++---- server/src/signin-button.js | 14 +- static/css/frame.scss | 185 +++++++++---------- static/css/home.scss | 5 + static/css/partials/_header.scss | 63 ++++--- 11 files changed, 178 insertions(+), 217 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..ac06f63ede 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 - ; } return ( @@ -92,9 +88,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component { + ref={this.trashButtonRef} /> { confirmationPanel } 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..bba44227ae 100644 --- 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 = - - - My Shots - - - ; + + ; } const signin = this.renderFxASignIn(); 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..92bab21964 100644 --- 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 ( - - - All Shots - - + ); } @@ -55,14 +51,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 +68,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
{ linkTextShort ? { linkTextShort } : null } - { timeDiff } + { timeDiff } { expirationSubtitle }
@@ -110,8 +106,8 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component { { shotInfo }
{ this.props.children } - { signin }
+ { signin } ); } @@ -161,7 +157,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..bb293d072f 100644 --- a/server/src/pages/shot/view.js +++ b/server/src/pages/shot/view.js @@ -356,49 +356,25 @@ 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 activeFavClass = this.props.expireTime ? "" : "is-fav"; + const inactive = this.props.isFxaAuthenticated ? "" : "inactive"; + + favoriteShotButton =
+ +
; + trashOrFlagButton = { this.editButton = edit; }}> - - Draw - - + ref={(edit) => { this.editButton = edit; }} /> { highlight }
: null; + + downloadButton =
+ +
; + + copyButton = ; } let clip; diff --git a/server/src/signin-button.js b/server/src/signin-button.js index fe80c94c06..92e6ace42d 100644 --- 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 - - - Settings - - - ; + + ; } const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage; return - - - Sign In - - + ; } diff --git a/static/css/frame.scss b/static/css/frame.scss index dd9bfa1e90..6d3cb6e736 100644 --- a/static/css/frame.scss +++ b/static/css/frame.scss @@ -12,6 +12,13 @@ background-size: 24px auto; padding-left: 40px; border: 0; + margin: 0 2px; + span { + font-size: 20px; + &.small-text { + font-size: 14px; + } + } } background-position: left center; @@ -40,9 +47,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,20 +57,16 @@ @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; - .expire-widget { - @include respond-to("small") { - display: none; + .expire-info { + display: none; + @include respond-to("large") { + display: block; } } } @@ -72,12 +75,21 @@ .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 { @@ -96,20 +108,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: 200px; + } + @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 +138,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 +151,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 +171,7 @@ margin: 0 0 4px -6px; padding: 0 5px; overflow: auto; + max-width: 100px; } .subtitle-link, @@ -155,9 +185,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 +228,10 @@ .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; - } - } - - .button, - select { - margin-right: 8px; + top: 68px; } } -.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 +287,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 +380,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 +394,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 +481,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..8abdfab657 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") { @@ -14,15 +14,23 @@ } display: flex; - height: 96px; + height: 80px; background-color: $light-default; width: 100%; .logo { + @include respond-to("small") { + max-width: $grid-unit * 10; + } display: flex; - padding: 0 16px; + padding: 20px 0; flex: 1; + height: $grid-unit * 4; + .screenshots-logo { + @include respond-to("small") { + background-position: center 10px; + } background-image: url("../img/landing-Screenshot-logo.svg"); background-repeat: no-repeat; background-size: contain; @@ -30,15 +38,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,20 +57,26 @@ .nav-button { @include flex-container(column, center, center); + @include respond-to("large") { + background-position: center 28px; + background-size: 28px 28px; + flex-basis: 96px; + width: 96px; + height: 96px; + } + color: #4a4a4a; 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; + flex-basis: 60px; + height: 60px; + width: 60px; text-align: center; background-size: 24px 24px; - background-position: center 24px; + background-position: center 18px; background-repeat: no-repeat; &:active { @@ -88,10 +101,6 @@ 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"); } @@ -108,16 +117,10 @@ 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"); - } + &.icon-favorite { + background-image: url("../img/icon-heart-outline.svg"); + &.is-fav { + background-image: url("../img/icon-heart.svg"); } } @@ -149,7 +152,7 @@ @include flex-container(column, center, center); color: $black; border-right: 1px solid $light-border; - height: 96px; + height: 80px; &:active, &:hover { background-color: $light-hover;