Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update welcome page content #884

Merged
merged 24 commits into from
May 27, 2020
Merged

feat: update welcome page content #884

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
c8a9744
LH: Peers in large message
jessicaschilling May 19, 2020
d702b58
Move discover text to right side; three action buttons in left
jessicaschilling May 19, 2020
20e2608
Add "not running" logo - will need to improve this later
jessicaschilling May 19, 2020
9eb2efe
Additional hard-coded text for LH side when node is off
jessicaschilling May 19, 2020
ca089b6
Change video links (but not thumbnails)
jessicaschilling May 19, 2020
703db4b
Add video thumbnails
jessicaschilling May 19, 2020
3abb361
Test: update "node connected to" string
jessicaschilling May 19, 2020
9efc9c3
Button language change (some still hard-coded), margin tweak
jessicaschilling May 20, 2020
7c654c3
Revert panel_openWebui language
jessicaschilling May 20, 2020
bc19046
Shorten button titles in LH on-state
jessicaschilling May 20, 2020
72d3b4c
Clean up English strings for LH node-off: "prefer to use command line…
jessicaschilling May 20, 2020
1555997
Update CLI quick-start link (note, this is broken until docs beta fin…
jessicaschilling May 20, 2020
87ede99
Update string, LH: ipfs is not running
jessicaschilling May 20, 2020
aa7ee2b
Add page_landingWelcome_installSteps_desktop_title to messages.json
jessicaschilling May 20, 2020
71ac5b4
Remove unused page_landingWelcome_welcome_title; add LH on-state butt…
jessicaschilling May 20, 2020
b386b0c
Node-on and node-off icons to ipfs-css standard ones; margin tweaks; …
jessicaschilling May 20, 2020
09419da
openWebUi -> openWebUiStatus (for specificity)
jessicaschilling May 20, 2020
03536b4
RH items to bullets
jessicaschilling May 20, 2020
fdd8189
Cleaned up the bullets: updated links, separated topics
jessicaschilling May 20, 2020
ff4cb17
full-width RH content; margin tweak
jessicaschilling May 20, 2020
11baf97
refactor: emit('openWebUi', page)
lidel May 27, 2020
20b2152
feat: clickable cube in browser action
lidel May 27, 2020
e64d8e0
Peers button in welcome screen gets its own translation key
jessicaschilling May 27, 2020
f6a873d
Made translation key names more explicit to avoid collision
jessicaschilling May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions add-on/_locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"description": "A menu item in Browser Action pop-up (panel_quickImport)"
},
"panel_openWebui": {
"message": "Open Web UI",
"message": "View Node Status",
jessicaschilling marked this conversation as resolved.
Show resolved Hide resolved
"description": "A menu item in Browser Action pop-up (panel_openWebui)"
},
"panel_redirectToggle": {
Expand Down Expand Up @@ -612,7 +612,7 @@
"description": "Ready message title (page_landingWelcome_welcome_title)"
},
"page_landingWelcome_welcome_peers": {
"message": "Right now your node is connected to <0>$1</0> peers.",
"message": "Your node is connected to <0>$1</0> peers.",
"description": "Ready message copy (page_landingWelcome_welcome_peers)"
},
"page_landingWelcome_welcome_discover": {
Expand Down
42 changes: 21 additions & 21 deletions add-on/src/landing-pages/welcome/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,14 @@ const renderWelcome = (i18n, peerCount, onOpenWebUi) => {

return html`
<div class="w-80 flex flex-column justify-center">
<div class="mb4 flex flex-column justify-center items-center">
<div class="mb3 flex flex-column justify-center items-center">
${checkmarkSvg()}
<p class="mt2 mb0 f3">${i18n.getMessage('page_landingWelcome_welcome_title')}</p>
<p class="mt2 mb0 f3 tc">${renderTranslatedSpans('page_landingWelcome_welcome_peers', [peerCount], 'class="aqua fw6"')}</p>
</div>
<p class="${copyClass}">${renderTranslatedSpans('page_landingWelcome_welcome_peers', [peerCount], 'class="aqua fw6"')}</p>
<p class="${copyClass} mb4">${renderTranslatedLinks('page_landingWelcome_welcome_discover', ['https://github.com/ipfs-shipyard/ipfs-companion#features'], `target="_blank" class="${anchorClass}"`)}</p>
<div class="mt4 f5 flex justify-center items-center">
<button class="pv3 ph4 b navy br2 bn bg-white hover-bg-white-90 pointer" onclick=${onOpenWebUi}>${i18n.getMessage('panel_openWebui')}</button>
<div class="mt3 f5 flex justify-center items-center">
<button class="pv3 ph4 mh2 b navy br2 bn bg-white hover-bg-white-90 pointer" onclick=${onOpenWebUi}>${i18n.getMessage('panel_openWebui')}</button>
<button class="pv3 ph4 mh2 b navy br2 bn bg-white hover-bg-white-90 pointer" onclick=${onOpenWebUi}>Browse Files</button>
<button class="pv3 ph4 mh2 b navy br2 bn bg-white hover-bg-white-90 pointer" onclick=${onOpenWebUi}>Explore Peers</button>
jessicaschilling marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
`
Expand All @@ -99,15 +99,14 @@ const renderInstallSteps = (i18n, isIpfsOnline) => {

return html`
<div class="w-80 mt3 flex flex-column transition-all ${stateUnknown && 'state-unknown'}">
<p class="mt0 mb2 yellow f4 lh-title">${i18n.getMessage('page_landingWelcome_installSteps_notRunning_title')}</p>
<p class="${copyClass}">${renderTranslatedLinks('page_landingWelcome_installSteps_desktop_install', ['https://github.com/ipfs-shipyard/ipfs-desktop#ipfs-desktop'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="mb2 yellow f4 lh-title">${i18n.getMessage('page_landingWelcome_installSteps_cli_title')}</p>
<p class="${copyClass}">${renderTranslatedLinks('page_landingWelcome_installSteps_cli_install', ['https://docs.ipfs.io/introduction/usage/'], `target="_blank" class="${anchorClass}"`)}</p>
<div className='db w-100 mw6 mv3 pa3 bg-black-70 bt bw4 br2 snow f7'>
<code className='db'>$ ipfs daemon</code>
<code className='db'>Initializing daemon...</code>
<code className='db'>API server listening on /ip4/127.0.0.1/tcp/5001</code>
<div class="mb4 flex flex-column justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="120" fill="#ffffff"><path d="M86.39 70.49L58.6 22.37a7.13 7.13 0 00-12.37 0L18.45 70.49a7.15 7.15 0 006.19 10.72H80.2a7.15 7.15 0 006.19-10.72zm-2.26 5.84a4.48 4.48 0 01-3.93 2.28H24.64a4.55 4.55 0 01-3.94-6.82l27.78-48.12a4.55 4.55 0 017.87 0l27.78 48.12a4.45 4.45 0 010 4.54z"/><path d="M55.16 64.24h-5.49a.76.76 0 00-.75.75v5.49a.76.76 0 00.75.75h5.49a.76.76 0 00.75-.75V65a.76.76 0 00-.75-.76zm-.75 5.49h-4v-4h4zm.75-32.02h-5.49a.76.76 0 00-.75.75v21.76a.76.76 0 00.75.75h5.49a.76.76 0 00.75-.75V38.46a.76.76 0 00-.75-.75zm-.75 21.76h-4V39.21h4z"/></svg>
<p class="mt2 mb0 f3 tc">${i18n.getMessage('page_landingWelcome_installSteps_notRunning_title')}</p>
</div>
<p class="mb2 aqua b f4 lh-title">IPFS Desktop users</p>
<p class="${copyClass}">Make sure your copy of IPFS Desktop is running. Don't have IPFS Desktop? ${renderTranslatedLinks('page_landingWelcome_installSteps_desktop_install', ['https://github.com/ipfs-shipyard/ipfs-desktop#ipfs-desktop'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="mb2 aqua b f4 lh-title">${i18n.getMessage('page_landingWelcome_installSteps_cli_title')}</p>
<p class="${copyClass}">If you already have IPFS installed on the command line, start a daemon by entering <code class="yellow">ipfs daemon</code> in your terminal. Don't have it installed yet? ${renderTranslatedLinks('page_landingWelcome_installSteps_cli_install', ['https://docs.ipfs.io/introduction/usage/'], `target="_blank" class="${anchorClass}"`)}</p>
</div>
`
}
Expand All @@ -124,6 +123,7 @@ const renderResources = (i18n) => {
return html`
<div class="w-80 mv4 navy f5">
<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_resources_title_new_ipfs')}</p>
<p class="${copyClass}">${renderTranslatedLinks('page_landingWelcome_welcome_discover', ['https://github.com/ipfs-shipyard/ipfs-companion#features'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="${copyClass}">${renderTranslatedLinks('page_landingWelcome_resources_new_ipfs', ['https://docs.ipfs.io', 'https://docs.ipfs.io/guides/concepts'], `target="_blank" class="${anchorClass}"`)}</p>

<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_resources_title_discover')}</p>
Expand Down Expand Up @@ -159,17 +159,17 @@ const renderVideos = (i18n) => {
<div class="w-80 flex flex-column flex-row-ns justify-between-ns aqua f5">
<div class="flex flex-column mr1">
<p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}</p>
<a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=8CMxDNuuAiQ" target="_blank">
<img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhoo8LXEwek8HLLYsXhra9YuYxRDEun3rHRc18mLvK3A5w" alt="${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}" />
<a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=zE_WSLbqqvo" target="_blank">
<img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/QmS4Ae3WBzkaANSPD82Dsax8QuJQpS4TEfaC53FMPkdxMA" alt="${i18n.getMessage('page_landingWelcome_videos_alpha_demo')}" />
${overlayDiv()}
${playSvg()}
</a>
</div>

<div class="flex flex-column">
<p class="ttu tracked f6 fw4 teal mt0 mb3">${i18n.getMessage('page_landingWelcome_videos_permanent_web')}</p>
<a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=HUVmypx9HGI" target="_blank">
<img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/zb2rhbCqh6W5Veot1sgZC5v7oLMnrkxq8ikd7auyy9UKSLBBa" alt="${i18n.getMessage('page_landingWelcome_videos_permanent_web')}" />
<a class="${anchorClass}" style="height: ${videoHeight}px" href="https://www.youtube.com/watch?feature=player_embedded&v=0IGzEYixJHk" target="_blank">
<img width="${videoWidth}" height="${videoHeight}" src="https://ipfs.io/ipfs/QmP5uNwDjYZmoLxw8zJeeheSJEnBKYpFn4uuEQQWFYGKvM" alt="${i18n.getMessage('page_landingWelcome_videos_permanent_web')}" />
${overlayDiv()}
${playSvg()}
</a>
Expand All @@ -189,17 +189,17 @@ const renderProjects = (i18n) => {
<div class="flex justify-between-ns">
<a class="${anchorClass}" href="https://multiformats.io/" target="_blank">
<img width="${logoWidth}" src="${multiformatsLogo}" alt="Multiformats Logo">
<p>multiformats.io</p>
<p>Multiformats</p>
</a>

<a class="${anchorClass}" href="https://ipld.io/" target="_blank">
<img width="${logoWidth}" src="${ipldLogo}" alt="IPLD Logo">
<p>ipld.io</p>
<p>IPLD</p>
</a>

<a class="${anchorClass}" href="https://libp2p.io/" target="_blank">
<img width="${logoWidth}" src="${libp2pLogo}" alt="libp2p Logo">
<p>libp2p.io</p>
<p>libp2p</p>
</a>
</div>
</div>
Expand Down