From 679d8b9fbb0f3ebceb7448f1ef5b979609264919 Mon Sep 17 00:00:00 2001 From: luke crouch Date: Fri, 6 Jan 2017 11:09:22 -0600 Subject: [PATCH] for #20: start onboarding UI in pop-up (#29) * for #20: start onboarding UI in pop-up * updated onboarding images * fix open-containers-preferences message method * add title text to sort-containers-link img --- webextension/css/popup.css | 4 +++ webextension/img/onboarding-1.png | Bin 0 -> 3086 bytes webextension/img/onboarding-2.png | Bin 0 -> 2448 bytes webextension/js/popup.js | 32 ++++++++++++++++-- webextension/popup.html | 53 +++++++++++++++++++++--------- 5 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 webextension/img/onboarding-1.png create mode 100644 webextension/img/onboarding-2.png diff --git a/webextension/css/popup.css b/webextension/css/popup.css index f81f463..6edbabf 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -8,6 +8,10 @@ table { margin-bottom: 0; } +.onboarding * { + text-align: center; +} + .popup-bumper { width: 100%; padding: .5em; diff --git a/webextension/img/onboarding-1.png b/webextension/img/onboarding-1.png new file mode 100644 index 0000000000000000000000000000000000000000..afd54d4101a381b72e639379743744afa4114283 GIT binary patch literal 3086 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 { + localStorage.setItem('onboarded1', true); + document.querySelector('.onboarding-panel-2').classList.remove('hide'); + document.querySelector('.onboarding-panel-1').classList.add('hide'); + document.querySelector('#container-panel').classList.add('hide'); +}); + +document.querySelector('#onboarding-done-button').addEventListener('click', ()=> { + localStorage.setItem('onboarded2', true); + document.querySelector('.onboarding-panel-1').classList.add('hide'); + document.querySelector('.onboarding-panel-2').classList.add('hide'); + document.querySelector('#container-panel').classList.remove('hide'); +}); + browser.runtime.sendMessage({method: 'query'}).then(identities=> { const identitiesListElement = document.querySelector('.identities-list'); @@ -101,9 +128,8 @@ browser.runtime.sendMessage({method: 'query'}).then(identities=> { }); }); - document.querySelector('#edit-containers-link').addEventListener('click', ()=> { - browser.runtime.sendMessage('open-containers-preferences').then(()=> { + browser.runtime.sendMessage({method: 'open-containers-preferences'}).then(()=> { window.close(); }); }); diff --git a/webextension/popup.html b/webextension/popup.html index 4b69a48..725f234 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -6,23 +6,46 @@ -
-
- Containers icon -
-
-

Containers

-
-
- Sort Containers +
+
+
+ Container Tabs Overview +

A better way to manage all the things you do online

+

Use containers to organize tasks, manage accounts, and keep your focus where you want it.

+

Learn more

+

Next

+
- - -
-
-
- Edit Containers +
+
+
+ How Containers Work +

Put containers to work for you.

+

Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.

+

Done

+
+
+
+
+
+
+ Containers icon +
+
+

Containers

+
+
+ Sort Containers +
+
+ + +
+
+
+ Edit Containers +