diff --git a/webextension/img/onboarding-1.png b/webextension/img/onboarding-1.png index afd54d4..be06d26 100644 Binary files a/webextension/img/onboarding-1.png and b/webextension/img/onboarding-1.png differ diff --git a/webextension/img/onboarding-2.png b/webextension/img/onboarding-2.png index cd648ac..a476bc0 100644 Binary files a/webextension/img/onboarding-2.png and b/webextension/img/onboarding-2.png differ diff --git a/webextension/img/onboarding-3.png b/webextension/img/onboarding-3.png new file mode 100644 index 0000000..77e3649 Binary files /dev/null and b/webextension/img/onboarding-3.png differ diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 97ae573..70042b8 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -11,6 +11,7 @@ const DEFAULT_ICON = "circle"; // List of panels const P_ONBOARDING_1 = "onboarding1"; const P_ONBOARDING_2 = "onboarding2"; +const P_ONBOARDING_3 = "onboarding3"; const P_CONTAINERS_LIST = "containersList"; const P_CONTAINERS_EDIT = "containersEdit"; const P_CONTAINER_INFO = "containerInfo"; @@ -31,8 +32,10 @@ const Logic = { // Routing to the correct panel. .then(() => { - if (localStorage.getItem("onboarded2")) { + if (localStorage.getItem("onboarded3")) { this.showPanel(P_CONTAINERS_LIST); + } else if (localStorage.getItem("onboarded2")) { + this.showPanel(P_ONBOARDING_3); } else if (localStorage.getItem("onboarded1")) { this.showPanel(P_ONBOARDING_2); } else { @@ -133,7 +136,7 @@ Logic.registerPanel(P_ONBOARDING_1, { // This method is called when the object is registered. initialize() { // 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); Logic.showPanel(P_ONBOARDING_2); }); @@ -154,8 +157,29 @@ Logic.registerPanel(P_ONBOARDING_2, { // 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", () => { + document.querySelector("#onboarding-next-button").addEventListener("click", () => { 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_2: Second 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); }); }, diff --git a/webextension/popup.html b/webextension/popup.html index 47c774a..6c99af4 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -12,7 +12,7 @@
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
- Next + Get Started @@ -20,9 +20,15 @@
Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.
- Done + Next +