Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Commit

Permalink
lots of ui changes for a serverless future
Browse files Browse the repository at this point in the history
  • Loading branch information
@johngruen
johngruen committed Jan 14, 2019
1 parent d33477e commit 23ae30b
Show file tree
Hide file tree
Showing 18 changed files with 138 additions and 361 deletions.
10 changes: 4 additions & 6 deletions locales/en-US/server.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ gMyShots = My Shots
gHomeLink = Home
gNoShots =
.alt = No shots found
gScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
gScreenshotsDescriptionServerless = Screenshots made simple. Capture and download screenshots without leaving Firefox.
## Header
buttonSettings =
Expand Down Expand Up @@ -69,11 +69,9 @@ homePageCaptureRegion = Capture a Region
homePageCaptureRegionDescription = Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.
homePageCapturePage = Capture a Page
homePageCapturePageDescription = Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and Save Full Page will capture everything on the page.
homePageSaveShare = Save and Share
homePageDownloadCopy = Download and Copy
# Note: Screenshots is an abbreviation for Firefox Screenshots, and should not be translated.
homePageShaveShareFavoriteDescription = Take your best shot. Then save it to the online Screenshots library, and Firefox copies the link to your clipboard for easy sharing. Shots in the library automatically expire after two weeks, but you can delete them at any time or choose to keep them longer.
homePageSignInTitle = Your Shots Everywhere
homePageSignInDescription = # to Screenshots with your Firefox Account to access your shots everywhere you use Firefox. An added bonus: you can also save your favorite shots forever.
homePageDownloadCopyDescription = Take your best shot. Screenshots lets you download your selection it or copy it right to your clipboard.
homePageLegalLink = Legal
homePagePrivacyLink = Privacy
homePageTermsLink = Terms
Expand Down Expand Up @@ -144,7 +142,7 @@ shotPageBackToHomeButton =
.title = Homepage
shotPageAllShotsButton =
.title = All Shots
shotPageScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
shotPageScreenshotsDescriptionServerless = Screenshots made simple. Capture and download 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)
shotPageDMCAContact = Please email { $dmca } to request further information.
Expand Down
9 changes: 3 additions & 6 deletions locales/en-US/webextension.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ saveScreenshotVisibleArea = Save visible
saveScreenshotFullPage = Save full page
cancelScreenshot = Cancel
downloadScreenshot = Download
downloadScreenshotTitle = Download screenshot
downloadOnlyNotice = You are currently in Download-Only mode.
# The downloadOnlyDetails string introduces a list of items. The keys
# downloadOnlyDetailsPrivate, downloadOnlyDetailsThirdParty,
Expand All @@ -30,6 +31,7 @@ notificationLinkCopiedTitle = Link Copied
notificationLinkCopiedDetails = The link to your shot has been copied to the clipboard. Press {meta_key}-V to paste.
# This is a verb, as in "Copy image to the system clipboard."
copyScreenshot = Copy
copyScreenshotTitle = Copy screenshot to clipboard
notificationImageCopiedTitle = Shot Copied
# The string "{meta_key}-V" should be translated to the region-specific
# shorthand for the Paste keyboard shortcut. {meta_key} is a placeholder for the
Expand Down Expand Up @@ -58,7 +60,7 @@ genericErrorTitle = Whoa! Firefox Screenshots went haywire.
genericErrorDetails = We’re not sure what just happened. Care to try again or take a shot of a different page?
# Section for onboarding strings
# Slide number 1:
tourBodyIntro = Take, save, and share screenshots without leaving Firefox.
tourBodyIntroServerless = Take screenshots without leaving Firefox.
# Slide number 2:
tourHeaderPageAction = A new way to save
tourBodyPageAction = Expand the page actions menu in the address bar any time you want to take a screenshot.
Expand All @@ -68,11 +70,6 @@ tourBodyClickAndDrag = Click and drag to capture just a portion of a page. You c
# Slide number 4:
tourHeaderFullPage = Capture Windows or Entire Pages
tourBodyFullPage = Select the buttons in the upper right to capture the visible area in the window or to capture an entire page.
# Slide number 5:
tourHeaderDownloadUpload = As You Like It
tourBodyDownloadUpload = Save your cropped shots to the web for easier sharing, or download them to your computer. You also can click on the My Shots button to find all the shots you’ve taken.
tourHeaderAccounts = Screenshots to Go
tourBodyAccounts = # with your Firefox Account to access your shots on all of your devices and save your favorite shots forever.
tourSkip = SKIP
tourNext = Next Slide
tourPrevious = Previous Slide
Expand Down
10 changes: 8 additions & 2 deletions server/src/ad-banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,17 @@ exports.AdBanner = class AdBanner extends React.Component {
</Localized>;
} else if (promoStrategy.shouldShowDeprecation()) {
// eslint-disable-next-line no-unused-vars
const deprecationLink = <a className="deprecationLink" href="/hosting-shutdown" onClick={ this.clickedDeprecation.bind(this) }></a>;
bannerContent = /* <Localized id="deprecationWarning" a={deprecationLink}> */
<div>
<p>
Please note: <a>the screenshots.firefox.com service is shutting down</a>. But Firefox will still support Screenshots!
The Firefox Screenshots server is shutting down in June of 2019. Download any saved screenshots you want to keep.
</p>
<p>
Screenshots will continue to be a part of Firefox. You can still
capture screenshots, download them or copy them to your clipboard.
<a href="SUMO-PAGE">&nbsp;Learn more</a>.
</p>
</div>
/* </Localized> */;
}

Expand Down
54 changes: 17 additions & 37 deletions server/src/pages/homepage/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,22 @@ class Head extends React.Component {
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
name="description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
content="Intuitive screenshots baked right into the browser. Capture and download screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta property="og:title" content={this.props.title} />
<meta property="og:url" content={this.props.backend} />
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
property="og:description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
content="Intuitive screenshots baked right into the browser. Capture and download screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta name="twitter:title" content={this.props.title} />
<Localized id="homePageDescription" attrs={{ content: true }}>
<meta
name="twitter:description"
content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox."
content="Intuitive screenshots baked right into the browser. Capture and download screenshots as you browse the Web using Firefox."
/>
</Localized>
<meta name="twitter:card" content="summary" />
Expand Down Expand Up @@ -109,9 +109,9 @@ class Body extends React.Component {
<div className="banner-container">
<div className="banner-content">
<h1>Firefox Screenshots</h1>
<Localized id="gScreenshotsDescription">
<Localized id="gScreenshotsDescriptionServerless">
<p>
Screenshots made simple. Take, save, and share screenshots
Screenshots made simple. Capture and download screenshots
without leaving Firefox.
</p>
</Localized>
Expand All @@ -131,9 +131,9 @@ class Body extends React.Component {
</Localized>
<Localized id="homePageGetStartedDescriptionPageAction">
<p>
Select the Screenshots icon from the page actions menu in
the address bar, and the Screenshots menu will appear on top
of your browser window.
Select the Screenshots icon from the page actions menu in the
address bar, and the Screenshots menu will appear on top of
your browser window.
</p>
</Localized>
</div>
Expand Down Expand Up @@ -167,10 +167,10 @@ class Body extends React.Component {
</Localized>
<Localized id="homePageCapturePageDescription">
<p>
Use the buttons in the upper right to capture full pages.
The Save Visible button will capture the area you can view
without scrolling, and the Save Full Page will capture
everything on the page.
Use the buttons in the upper right to capture full pages. The
Save Visible button will capture the area you can view without
scrolling, and the Save Full Page will capture everything on
the page.
</p>
</Localized>
</div>
Expand All @@ -180,39 +180,19 @@ class Body extends React.Component {
<section id="section-4">
<div className="container">
<div className="section-content align-right">
<Localized id="homePageSaveShare">
<h3>Save and Share</h3>
<Localized id="homePageDownloadCopy">
<h3>Download or Copy</h3>
</Localized>
<Localized id="homePageShaveShareFavoriteDescription">
<Localized id="homePageDownloadCopyDescription">
<p>
Take your best shot. Then save it to the online Screenshots
library, and Firefox copies the link to your clipboard for
easy sharing. Shots in the library automatically expire after
two weeks, but you can delete them at any time or choose to
keep them longer.
Take your best shot. Screenshots lets you download your
selection it or copy it right to your clipboard.
</p>
</Localized>
</div>
<div className="section-image align-left" />
</div>
</section>
<section id="section-5">
<div className="container">
<div className="section-content align-left">
<Localized id="homePageSignInTitle">
<h3>Your Shots Everywhere</h3>
</Localized>
<Localized id="homePageSignInDescription">
<p>
# to Screenshots with your Firefox Account to access
your shots everywhere you use Firefox. An added bonus: you can
also save your favorite shots forever.
</p>
</Localized>
</div>
<div className="section-image align-right" />
</div>
</section>
<Footer {...this.props} />
</reactruntime.BodyTemplate>
);
Expand Down
35 changes: 25 additions & 10 deletions server/src/pages/hosting-shutdown/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ class Head extends React.Component {
render() {
return (
<reactruntime.HeadTemplate {...this.props}>
<link rel="stylesheet" href={this.props.staticLink("/static/css/shot-index.css")} />
<link
rel="stylesheet"
href={this.props.staticLink("/static/css/shot-index.css")}
/>
</reactruntime.HeadTemplate>
);
}
Expand All @@ -20,20 +23,33 @@ Head.propTypes = {
};

class Body extends React.Component {

render() {
return (
<reactruntime.BodyTemplate {...this.props}>
<div className="column-space full-height">
<Header hasLogo={true} hasFxa={this.props.hasFxa} />
<div id="shot-index" className="flex-1">
<div className="no-shots" key="no-shots-found">
{ /* <Localized id="shutdownPageIntro"> */ }
<h1>Hosting shutdown notice.</h1>
{ /* </Localized> */ }
{ /* <Localized id="shutdownPageDescription"> */ }
<p>We will be discontinuing hosted screenshots. You will still be able to download and copy screenshots in Firefox.</p>
{ /* </Localized> */ }
{/* <Localized id="shutdownPageIntro"> */}
<h1>Screenshots is changing</h1>
{/* </Localized> */}
{/* <Localized id="shutdownPageDescription"> */}
<p>
The Firefox Screenshots server is shutting down in June of this
year. Thank you for using this feature, and we apologize for any
inconvenience.&nbsp;
<span className="if-indefinite">
<a href="/export">Follow this link</a> to download all of the
screenshots you currently have saved on our server.
</span>
</p>
<p>
Screenshots will continue to be a part of Firefox. You can still
capture screenshots, download them or copy them to your
clipboard.
</p>
Thank you
{/* </Localized> */}
</div>
</div>
<Footer {...this.props} />
Expand All @@ -43,8 +59,7 @@ class Body extends React.Component {
}
}

Body.propTypes = {
};
Body.propTypes = {};

exports.HeadFactory = React.createFactory(Head);
exports.BodyFactory = React.createFactory(Body);
Loading

0 comments on commit 23ae30b

Please # to comment.