mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-19 13:01:12 +02:00
Code Issues Releases Wiki Activity

give option to change replaceNewTab setting in onobarding

Browse Source
This commit is contained in:
Kushagra Gour
2017-01-16 03:56:51 +05:30
parent 722cffd973
commit 0030c02156
3 changed files with 78 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/index.html
View File

@@ -218,7 +218,7 @@
<div class="modal__content">
<div class="tac">
<svg width="186px" height="87.5px" viewBox="-145 -2 372 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="130px" height="60px" viewBox="-145 -2 372 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="logo-w/o-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)">
<polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon>
<polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon>
@@ -229,15 +229,46 @@
<h1 style="margin-top:20px">Welcome to Web Maker</h1>
</div>
<div class="tac">
<p>Web Maker lets you do web experiments quickly and even when you are offline.</p>
<!-- <p>Web Maker lets you do web experiments quickly and even when you are offline.</p> -->
<p>
By default, Web Maker shows up in every new tab you open. But you can change that setting:
<a d-click="onModalSettingsLinkClick">Click here to change setting</a>.
By default, Web Maker shows up in every new tab you open. But you can change that below:
</p>
<div class="onboard-selection-wrap flex">
<div class="onboard-selection selected" id="onboardShowInTabOption" d-click="onShowInTabClicked">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
C494.264,234.442,503.916,244.094,503.916,256z"></path>
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
<!-- E8BA52 -->
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="315px" style="fill:#252637;"></rect>
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="372px" style="fill:#252637;"></rect>
<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:#252637;"></rect>
<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
</svg>
<div class="onboard-selection-text">Show in new tab</div>
</div>
<div class="onboard-selection" id="onboardDontShowInTabOption" d-click="onDontShowInTabClicked">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" viewBox="180 200 340 320" xml:space="preserve">
<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
C494.264,234.442,503.916,244.094,503.916,256z"></path>
<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
<!-- E8BA52 -->
<rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
</svg>
<div class="onboard-selection-text">Don't show in new tab</div>
</div>
</div>
<p>
You can always open this app by clicking the Web Maker icon in the top-right side of your browser.
You can change this later from Settings in bottom right. Also you can open the app by clicking the Web Maker icon in the top-right side of your browser.
</p>
<p class="tac">

13
src/script.js
View File

@@ -711,6 +711,15 @@ settingsBtn, onboardModal, notificationsBtn */
trackEvent('ui', 'onboardSettingsBtnClick');
}
scope.onShowInTabClicked = function () {
onboardDontShowInTabOption.classList.remove('selected');
onboardShowInTabOption.classList.add('selected');
}
scope.onDontShowInTabClicked = function () {
onboardDontShowInTabOption.classList.add('selected');
onboardShowInTabOption.classList.remove('selected');
}
function compileNodes() {
var nodes = [].slice.call($all('[d-click]'));
nodes.forEach(function (el) {
@@ -966,6 +975,10 @@ settingsBtn, onboardModal, notificationsBtn */
chrome.storage.sync.set({
lastSeenVersion: version
}, function () {});
chrome.storage.sync.set({
replaceNewTab: onboardShowInTabOption.classList.contains('selected')
}, function () {});
});
}
// console.utils.log(result, hasSeenNotifications, version);

28
src/style.css
View File

@@ -614,3 +614,31 @@ select, input[type="text"], textarea {
padding: 1px 6px;
font-weight: bold;
}
.onboard-selection-wrap {
justify-content: center;
}
.onboard-selection {
padding: 10px;
margin: 0 40px;
border-radius: 5px;
transition: 0.25s ease;
position: relative;
border: 1px solid transparent;
}
.onboard-selection:hover {
cursor: pointer;
/*background-color: rgba(0,0,0,0.3);*/
transform: scale(1.15);
/*border-color: rgba(0,0,0,0.4);*/
}
.onboard-selection.selected:after {
content: '';
position: absolute;
right: -20px;
bottom: 40px;
width: 80px;
height: 80px;
border-radius: 50%;
background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
}