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

added onboarding panel

Browse source
This commit is contained in:
Kendall Werts 2020-01-23 00:27:05 -06:00
parent 61b5c2e4b2
commit 268c638508
3 changed files with 53 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/css/popup.css
View file

@ -974,3 +974,9 @@ span ~ .panel-header-text {
.amo-rate-cta {
background: #0f1126;
}
.no-sync {
margin-left: 160px;
line-height: 0px;
text-decoration: underline;
}

39
src/js/popup.js
View file

@ -17,6 +17,7 @@ const P_ONBOARDING_2 = "onboarding2";
const P_ONBOARDING_3 = "onboarding3";
const P_ONBOARDING_4 = "onboarding4";
const P_ONBOARDING_5 = "onboarding5";
const P_ONBOARDING_6 = "onboarding6";
const P_CONTAINERS_LIST = "containersList";
const P_CONTAINERS_EDIT = "containersEdit";
const P_CONTAINER_INFO = "containerInfo";
@ -99,9 +100,12 @@ const Logic = {
}
switch (onboarded) {
case 5:
case 6:
this.showAchievementOrContainersListPanel();
break;
case 5:
this.showPanel(P_ONBOARDING_6);
break;
case 4:
this.showPanel(P_ONBOARDING_5);
break;
@ -503,6 +507,39 @@ Logic.registerPanel(P_ONBOARDING_5, {
// Let's move to the containers list panel.
Logic.addEnterHandler(document.querySelector("#onboarding-longpress-button"), async () => {
await Logic.setOnboardingStage(5);
Logic.showPanel(P_ONBOARDING_6);
});
},
// This method is called when the panel is shown.
prepare() {
return Promise.resolve(null);
},
});
// P_ONBOARDING_6: Sixth page for Onboarding: new tab long-press behavior
// ----------------------------------------------------------------------------
Logic.registerPanel(P_ONBOARDING_6, {
panelSelector: ".onboarding-panel-6",
// This method is called when the object is registered.
initialize() {
// Let's move to the containers list panel.
Logic.addEnterHandler(document.querySelector("#start-sync-button"), async () => {
await Logic.setOnboardingStage(6);
await browser.storage.local.set({syncEnabled: true});
await browser.runtime.sendMessage({
method: "resetSync"
});
Logic.showPanel(P_CONTAINERS_LIST);
});
Logic.addEnterHandler(document.querySelector("#no-sync"), async () => {
await Logic.setOnboardingStage(6);
await browser.storage.local.set({syncEnabled: false});
await browser.runtime.sendMessage({
method: "resetSync"
});
Logic.showPanel(P_CONTAINERS_LIST);
});
},

10
src/popup.html
View file

@ -64,7 +64,15 @@
<img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
<h3 class="onboarding-title">Container tabs when you need them.</h3>
<p>Long-press the New Tab button to create a new container tab.</p>
<a href="#" id="onboarding-longpress-button" class="onboarding-button">Done</a>
<a href="#" id="onboarding-longpress-button" class="onboarding-button">Next</a>
</div>
<div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
<img class="onboarding-img" alt="Click below to start syncing" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">Container and site assignments everywhere.</h3>
<p>Now containers will sync between installs of the add-on.</p>
<a href="#" id="start-sync-button" class="onboarding-button">Start Syncing</a>
<div><a herf="#" id="no-sync" class="no-sync">No Thanks</a></div>
</div>
<div class="panel achievement-panel hide" id="achievement-panel">