anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #112 from jamal-jackson/feature/onboarding_push_notifications

Browse source 
Finished onboarding notifications view
This commit is contained in:
Gustavo Maximiliano Cortez 2016-09-14 17:00:54 -03:00 • committed by GitHub
commit 805a4fcef2
5 changed files with 101 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

37
public/img/onboarding-push-notifications.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="247px" height="248px" viewBox="0 0 247 248" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Group 7</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-1">
<stop stop-color="#3950B5" offset="0%"></stop>
<stop stop-color="#162360" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="122" height="34"></rect>
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="122" height="34" fill="white">
<use xlink:href="#path-2"></use>
</mask>
</defs>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="0.4---Allow-Push-Notifications" transform="translate(-64.000000, -209.000000)">
<g id="Group-7" transform="translate(64.000000, 210.000000)">
<path d="M123.5,247 C191.707167,247 247,191.707167 247,123.5 C247,55.2928334 191.707167,1.42108547e-14 123.5,1.42108547e-14 C55.2928334,1.42108547e-14 1.42108547e-14,55.2928334 1.42108547e-14,123.5 C1.42108547e-14,191.707167 55.2928334,247 123.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
<g id="Phone" transform="translate(62.000000, 0.000000)" stroke="#647CE8" stroke-width="2">
<rect id="Combined-Shape" fill="#253377" x="0" y="0" width="122.16932" height="220.464844" rx="8"></rect>
<path d="M0.636298539,187 L121.533021,187" id="Line" stroke-linecap="square"></path>
<path d="M50.2675846,203 L73.174332,203" id="Line" stroke-linecap="square"></path>
</g>
<ellipse id="Oval-2" stroke="#647CE8" stroke-width="2" fill-opacity="0.41907269" fill="#5462B1" opacity="0.945615695" cx="169" cy="57.4884375" rx="47" ry="44.4884375"></ellipse>
<g id="Group-3" transform="translate(62.000000, 33.000000)">
<path d="M12.7105489,19.5 L50.4911698,19.5" id="Line" stroke="#12E5B6" stroke-width="3" stroke-linecap="square"></path>
<path d="M21.96,10.4166666 L43.0026407,10.4166666" id="Line" stroke="#12E5B6" stroke-width="3" stroke-linecap="square"></path>
<use id="Rectangle-3" stroke="#677AE7" mask="url(#mask-3)" stroke-width="2" xlink:href="#path-2"></use>
</g>
<g id="android-notifications-none" opacity="0.900000036" transform="translate(144.642407, 28.000000)" fill="#FFFFFF">
<path d="M24.5218837,9.5815024 C25.5031747,9.5815024 27.8345547,10.1736779 27.8345547,10.1736779 C34.1505329,11.5548918 38.5961981,17.1067187 38.5961981,23.375 L38.5961981,38.5 L38.5961981,40.2467788 L39.8875454,41.4848077 L40.9665083,42.5190986 L7.80017568,42.5190986 L8.87913857,41.4848077 L10.1704859,40.2467788 L10.1704859,38.5 L10.1704859,23.375 C10.1704859,17.106851 14.616151,11.5548918 20.9321293,10.1736779 C20.9321293,10.1736779 23.4318375,9.5815024 24.2448003,9.5815024 L24.5218837,9.5815024 Z M24.383342,0 C21.9447307,0 20.0803748,1.78723558 20.0803748,4.125 L20.0803748,6.04986779 C11.9043355,7.83776442 5.73715099,14.9875 5.73715099,23.375 L5.73715099,38.5 L-6.82121026e-13,44 L-6.82121026e-13,46.75 L48.766684,46.75 L48.766684,44 L43.029533,38.5 L43.029533,23.375 C43.029533,14.9875 36.8622099,7.83776442 28.6863091,6.04986779 L28.6863091,4.125 C28.6863091,1.78723558 26.8219533,0 24.383342,0 L24.383342,0 L24.383342,0 Z M30.120493,49.5 L18.6460524,49.5 C18.6460524,52.5251322 21.2275002,55 24.383342,55 C27.5391837,55 30.120493,52.5251322 30.120493,49.5 L30.120493,49.5 L30.120493,49.5 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

27
public/views/onboarding/notifications.html
View file

@ -1,16 +1,21 @@
<ion-view>
<ion-content ng-controller="notificationsController" scroll="false">
<div class="text-center">
<h1 translate>
<ion-view class="onboarding" id="onboarding-push-notifications">
<ion-content ng-controller="notificationsController">
<div class="text-center row">
<h2 translate class="col col-80">
Push Notifications
</h1>
<span translate>
</h2>
</div>
<div class="row text-center">
<p class="col col-75 tagline" translate>
Would you like to receive push notifications about payments?
</span>
<button class="button button-block button-positive" ng-click="allowNotif()" translate>Allow notifications</button>
<button class="button button-block button-light" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
</p>
</div>
<div id="cta">
</div>
<div class="cta-buttons">
<button class="button button-block button-primary col col-75" ng-click="allowNotif()" translate>Allow notifications</button>
<button class="button button-block button-translucent col col-75" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
</div>
</div>
</ion-content>
</ion-view>

4
public/views/onboarding/tour.html
View file

@ -31,7 +31,7 @@
</p>
</div>
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
Got it <i class="icon ion-ios-arrow-thin-right"></i>
</button>
</div>
@ -55,7 +55,7 @@
</p>
</div>
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
</button>
</div>

40
src/sass/views/onboarding/onboard-push-notifications.scss Normal file
View file

@ -0,0 +1,40 @@
#onboarding-push-notifications{
h2{
margin-top:2rem;
}
#cta{
background-image: url('../img/onboarding-push-notifications.svg');
height: 15rem;
margin-top: .75rem;
}
.cta-buttons{
float:none;
bottom:0;
position: absolute;
width:100%;
button{
max-width: 400px;
}
}
}
@media (max-width: 400px){
#onboarding-push-notifications{
.cta-buttons{
float:none;
bottom:0;
position: absolute;
}
}
}
@media (max-height: 540px){
#onboarding-push-notifications{
#cta{
margin-bottom: 0;
}
.cta-buttons{
float:left;
position: relative;
}
}
}

9
src/sass/views/onboarding/onboarding.scss
View file

@ -48,9 +48,7 @@
}
}
button {
&.next-slide {
background: rgba(215, 215, 215, 0.10);
}
color:#fff;
}
}
.col {
@ -67,8 +65,12 @@
.button-transparent{
background: none !important;
}
.button-translucent{
background: rgba(215, 215, 215, 0.1)
}
.button-primary{
background: rgb(100, 124, 232) !important;
color:#fff;
}
.light-blue{
color:rgb(100, 124, 232);
@ -98,3 +100,4 @@
@import "onboard-backup-request";
@import "onboard-backup-warning";
@import "onboard-disclaimer";
@import "onboard-push-notifications";