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

for #20: start onboarding UI in pop-up (#29)

Browse source 
* 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
This commit is contained in:
luke crouch 2017-01-06 11:09:22 -06:00 • committed by Jonathan Kingston
parent 96516c2b46
commit 679d8b9fbb
5 changed files with 71 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webextension/css/popup.css
View file

@ -8,6 +8,10 @@ table {
margin-bottom: 0;
}
.onboarding * {
text-align: center;
}
.popup-bumper {
width: 100%;
padding: .5em;

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

32
webextension/js/popup.js
View file

@ -1,4 +1,4 @@
/* global browser, window, document */
/* global browser, window, document, localStorage */
const CONTAINER_HIDE_SRC = '/img/container-hide.svg';
const CONTAINER_UNHIDE_SRC = '/img/container-unhide.svg';
@ -40,6 +40,33 @@ function showContainerTabs(containerId) {
hideorshowIcon.src = CONTAINER_HIDE_SRC;
}
if (localStorage.getItem('onboarded2')) {
for (const element of document.querySelectorAll('.onboarding')) {
element.classList.add('hide');
}
document.querySelector('#container-panel').classList.remove('hide');
} else if (localStorage.getItem('onboarded1')) {
document.querySelector('.onboarding-panel-1').classList.add('hide');
document.querySelector('#container-panel').classList.add('hide');
} else {
document.querySelector('.onboarding-panel-2').classList.add('hide');
document.querySelector('#container-panel').classList.add('hide');
}
document.querySelector('#onboarding-next-button').addEventListener('click', ()=> {
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();
});
});

53
webextension/popup.html
View file

@ -6,23 +6,46 @@
<link rel="stylesheet" href="/css/popup.css">
</head>
<body>
<div class="row popup-bumper">
<div class="small-2 columns header-column">
<img alt="Containers icon" class="icon" src="/img/container-site-d-24.png">
</div>
<div class="small-8 columns">
<h4>Containers</h4>
</div>
<div class="small-2 columns header-column">
<a id="sort-containers-link" title="Sort Containers"><img alt="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
<div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
<div class="row">
<div class="columns">
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>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><a href="#">Learn more</a></p>
<p><a href="#" id="onboarding-next-button" class="button expanded">Next</a></p>
</div>
</div>
</div>
<table class="unstriped hover">
<tbody class="identities-list"></tbody>
</table>
<div class="row popup-bumper edit-identities">
<div class="small-12 columns edit-containers-text">
<a id="edit-containers-link" href="about:preferences#containers">Edit Containers</a>
<div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
<div class="row">
<div class="columns">
<img alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>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><a href="#" id="onboarding-done-button" class="button expanded">Done</a></p>
</div>
</div>
</div>
<div class="panel container-panel" id="container-panel">
<div class="row popup-bumper">
<div class="small-2 columns header-column">
<img alt="Containers icon" class="icon" src="/img/container-site-d-24.png">
</div>
<div class="small-8 columns">
<h4>Containers</h4>
</div>
<div class="small-2 columns header-column">
<a id="sort-containers-link"><img alt="Sort Containers" title="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
</div>
</div>
<table class="unstriped hover">
<tbody class="identities-list"></tbody>
</table>
<div class="row popup-bumper edit-identities">
<div class="small-12 columns edit-containers-text">
<a id="edit-containers-link" href="about:preferences#containers">Edit Containers</a>
</div>
</div>
</div>
<script src="js/popup.js"></script>