rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #122 from mozilla/onboarding-v2-20

Browse source 
for #20: start 3rd onboarding panel; update images
This commit is contained in:
luke crouch 2017-02-01 14:41:36 -06:00 • committed by GitHub
commit 3e078e7ca6
14 changed files with 59 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webextension/css/popup.css
View file

@ -35,20 +35,27 @@ table {
margin-block-start: 16px; margin-block-start: 16px;
margin-inline-end: 16px; margin-inline-end: 16px;
margin-inline-start: 16px; margin-inline-start: 16px;
min-block-size: 480px;
}
.onboarding h3 {
margin-block-start: 16px;
} }
.onboarding * { .onboarding * {
text-align: center; text-align: center;
} }
/* Make button placement to be consistent on tour */ .onboarding-img {
.onboarding .spacing { inline-size: 180px;
margin-block-start: auto; block-size: 132px;
}
.onboarding-title {
margin-block-start: 20px;
margin-block-end: 10px;
font-size: 14px;
color: #43484E;
}
.onboarding-subtext {
font-size: 10px;
color: #4a4a4a;
} }
.popup-bumper { .popup-bumper {

BIN
webextension/img/container-site-d-192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
webextension/img/container-site-d-24.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 342 B

BIN
webextension/img/container-site-d-48.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 578 B

BIN
webextension/img/container-site-d-96.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1 KiB

BIN
webextension/img/container-site-w-192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
webextension/img/container-site-w-24.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 406 B

After

Width:  |  Height:  |  Size: 307 B

BIN
webextension/img/container-site-w-48.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 633 B

After

Width:  |  Height:  |  Size: 534 B

BIN
webextension/img/container-site-w-96.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

BIN
webextension/img/onboarding-1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
webextension/img/onboarding-2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
webextension/img/onboarding-3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

30
webextension/js/popup.js
View file

@ -11,6 +11,7 @@ const DEFAULT_ICON = "circle";
// List of panels // List of panels
const P_ONBOARDING_1 = "onboarding1"; const P_ONBOARDING_1 = "onboarding1";
const P_ONBOARDING_2 = "onboarding2"; const P_ONBOARDING_2 = "onboarding2";
const P_ONBOARDING_3 = "onboarding3";
const P_CONTAINERS_LIST = "containersList"; const P_CONTAINERS_LIST = "containersList";
const P_CONTAINERS_EDIT = "containersEdit"; const P_CONTAINERS_EDIT = "containersEdit";
const P_CONTAINER_INFO = "containerInfo"; const P_CONTAINER_INFO = "containerInfo";
@ -31,8 +32,10 @@ const Logic = {
// Routing to the correct panel. // Routing to the correct panel.
.then(() => { .then(() => {
if (localStorage.getItem("onboarded2")) { if (localStorage.getItem("onboarded3")) {
this.showPanel(P_CONTAINERS_LIST); this.showPanel(P_CONTAINERS_LIST);
} else if (localStorage.getItem("onboarded2")) {
this.showPanel(P_ONBOARDING_3);
} else if (localStorage.getItem("onboarded1")) { } else if (localStorage.getItem("onboarded1")) {
this.showPanel(P_ONBOARDING_2); this.showPanel(P_ONBOARDING_2);
} else { } else {
@ -133,7 +136,7 @@ Logic.registerPanel(P_ONBOARDING_1, {
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
// Let's move to the next panel. // Let's move to the next panel.
document.querySelector("#onboarding-next-button").addEventListener("click", () => { document.querySelector("#onboarding-start-button").addEventListener("click", () => {
localStorage.setItem("onboarded1", true); localStorage.setItem("onboarded1", true);
Logic.showPanel(P_ONBOARDING_2); Logic.showPanel(P_ONBOARDING_2);
}); });
@ -154,8 +157,29 @@ Logic.registerPanel(P_ONBOARDING_2, {
// This method is called when the object is registered. // This method is called when the object is registered.
initialize() { initialize() {
// Let's move to the containers list panel. // Let's move to the containers list panel.
document.querySelector("#onboarding-done-button").addEventListener("click", () => { document.querySelector("#onboarding-next-button").addEventListener("click", () => {
localStorage.setItem("onboarded2", true); localStorage.setItem("onboarded2", true);
Logic.showPanel(P_ONBOARDING_3);
});
},
// This method is called when the panel is shown.
prepare() {
return Promise.resolve(null);
},
});
// P_ONBOARDING_3: Third page for Onboarding.
// ----------------------------------------------------------------------------
Logic.registerPanel(P_ONBOARDING_3, {
panelSelector: ".onboarding-panel-3",
// This method is called when the object is registered.
initialize() {
// Let's move to the containers list panel.
document.querySelector("#onboarding-done-button").addEventListener("click", () => {
localStorage.setItem("onboarded3", true);
Logic.showPanel(P_CONTAINERS_LIST); Logic.showPanel(P_CONTAINERS_LIST);
}); });
}, },

25
webextension/popup.html
View file

@ -8,21 +8,30 @@
<body> <body>
<div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1"> <div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" /> <img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>A better way to manage all the things you do online</h3> <h3 class="onboarding-title">A better way to manage all the things you do online</h3>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p> <p>
<p class="spacing" ><a href="#">Learn more</a></p> Use containers to organize tasks, manage accounts, and keep your focus where you want it.
<a href="#" id="onboarding-next-button" class="button expanded">Next</a> <br/>
<a href="#">Learn more</a>
</p>
<a href="#" id="onboarding-start-button" class="button expanded onboarding-button">Get Started</a>
</div> </div>
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2"> <div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
<img alt="How Containers Work" src="/img/onboarding-2.png" /> <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>Put containers to work for you.</h3> <h3 class="onboarding-title">Put containers to work for you.</h3>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p> <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a> <a href="#" id="onboarding-next-button" class="button expanded spacing">Next</a>
</div> </div>
<div class="panel onboarding onboarding-panel-3 hide" id="onboarding-panel-3">
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
<p>Start with the containers we've created, or create your own.</p>
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
</div>
<div class="panel container-panel" id="container-panel"> <div class="panel container-panel" id="container-panel">
<div class="row panel-header"> <div class="row panel-header">