BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #5037 from gabrielbazan7/feat/icons-feedback 

adding icon to feedback flow
This commit is contained in:
Gustavo Maximiliano Cortez 2016-11-15 09:17:39 -03:00 committed by GitHub
parent 98fe0f78f9 b65a42396a
commit e16520997f
10 changed files with 165 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/js/controllers/feedback/rateApp.js
View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('rateAppController', function($scope, $state, $stateParams, externalLinkService, configService, gettextCatalog, platformInfo) {
angular.module('copayApp.controllers').controller('rateAppController', function($scope, $state, $stateParams, lodash, externalLinkService, configService, gettextCatalog, platformInfo, feedbackService, ongoingProcess) {
$scope.score = parseInt($stateParams.score);
var isAndroid = platformInfo.isAndroid;
var isIOS = platformInfo.isIOS;
@ -8,9 +8,24 @@ angular.module('copayApp.controllers').controller('rateAppController', function(
var config = configService.getSync();
$scope.skip = function() {
$state.go('feedback.complete', {
score: $scope.score,
skipped: true
var dataSrc = {
"Email": lodash.values(config.emailFor)[0] || ' ',
"Feedback": ' ',
"Score": $stateParams.score
};
ongoingProcess.set('sendingFeedback', true);
feedbackService.send(dataSrc, function(err) {
ongoingProcess.set('sendingFeedback', false);
if (err) {
popupService.showAlert(gettextCatalog.getString('Error'), gettextCatalog.getString('Could not send feedback'));
return;
}
$state.go('feedback.complete', {
score: $stateParams.score,
skipped: true
});
});
};

7
src/js/controllers/feedback/rateCard.js
View File

@ -3,6 +3,7 @@
angular.module('copayApp.controllers').controller('rateCardController', function($scope, $state, $timeout, gettextCatalog, platformInfo, storageService) {
$scope.isCordova = platformInfo.isCordova;
$scope.score = 0;
$scope.goFeedbackFlow = function() {
if ($scope.isModal) {
@ -52,12 +53,14 @@ angular.module('copayApp.controllers').controller('rateCardController', function
storageService.getFeedbackInfo(function(error, info) {
var feedbackInfo = JSON.parse(info);
feedbackInfo.sent = true;
storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {});
storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {
$scope.showRateCard.value = false;
});
});
}
$timeout(function() {
$scope.$apply();
})
}, 100);
}
});

20
src/sass/views/feedback/complete.scss
View File

@ -19,10 +19,22 @@
}
.subtitle {
padding: 10px 30px 20px 40px;
.image {
text-align: center;
padding: 30px;
}
}
.icon-svg > img {
height: 16rem;
width: 16rem;
margin: 10px;
}
.socialsharing-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
}
.addressbook-icon-svg {
display: inline-block;
width: 50px;
height: 50px;
}
.share-buttons {
bottom: 0;

7
src/sass/views/feedback/rateApp.scss
View File

@ -4,11 +4,16 @@
margin: 10px;
color: #667;
}
.icon-svg > img {
width: 80px;
height: 80px;
margin-top: 15px;
}
.title {
font-size: 20px;
font-weight: bold;
color: $dark-gray;
margin: 40px 10px;
margin: 40px 50px 10px;
text-align: center;
}
.subtitle {

24
src/sass/views/feedback/rateCard.scss
View File

@ -1,20 +1,12 @@
#rate-card {
.stars {
display: flex;
border-bottom: none;
.button {
background-color: #fff;
outline: none;
border: none;
height:10px;
width:10px;
}
.gold {
color: #ffd700;
}
.subtle-gray {
color: $subtle-gray;
}
.row {
border: none;
}
.row.row-margin{
margin: 20px 0px 20px 0px;
}
.item-icon-right {
margin: 0;
}
.feedback-flow-button {
padding: 20px;

15
src/sass/views/feedback/send.scss
View File

@ -1,5 +1,8 @@
#send-feedback {
background-color: #ffffff;
.row {
border: none;
}
.skip {
margin: 20px 20px 10px;
color: #667;
@ -11,18 +14,6 @@
font-weight: bold;
color: $dark-gray;
}
.star {
a {
font-size: 25px;
padding: 20px;
.gold {
color: #ffd700;
}
.subtle-gray {
color: $subtle-gray;
}
}
}
.comment {
padding: 20px;
font-size: 1rem;

64
www/views/feedback/complete.html
View File

@ -4,14 +4,32 @@
<a ui-sref="tabs.home"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
</div>
<div ng-show="skipped && isCordova">
<div class="title" translate>Invite friends to BitPay Wallet!</div>
<div>
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
</i>
<div ng-show="score > 3">
<div class="title" translate>Invite friends to BitPay Wallet!</div>
<div class="text-center">
<i class="icon addressbook-icon-svg">
<img src="img/address-book-add.svg"/>
</i>
</div>
<div class="text-center">
<span translate>Share the love by inviting your friends.</span>
</div>
</div>
<div class="text-center">
<span translate>Share the love by inviting your friends.</span>
<div ng-show="score <= 3">
<div class="title" translate>Thank you!</div>
<div class="subtitle">
<span translate>A member of the team will review your feedback as soon as possible.</span>
</div>
<div class="subtitle" ng-if="score <= 3 || !isCordova">
<span translate>If you have additional feedback, please let us know by tapping the "Send feedback" option in the Settings tab.</span>
</div>
<div ng-if="score <= 3 || !isCordova">
<div class="text-center">
<i class="icon icon-svg">
<img src="img/illustration-send-feedback.png"/>
</i>
</div>
</div>
</div>
</div>
<div ng-show="!skipped || !isCordova">
@ -21,9 +39,11 @@
</div>
<div class="subtitle" ng-if="score <= 3 || !isCordova">
<span translate>If you have additional feedback, please let us know by tapping the "Send feedback" option in the Settings tab.</span>
<div class="image">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
</div>
<div ng-if="score <= 3 || !isCordova">
<div class="text-center">
<i class="icon icon-svg">
<img src="img/illustration-send-feedback.png"/>
</i>
</div>
</div>
@ -35,40 +55,40 @@
<div class="ng-hide" ng-show="socialsharing" ng-if="score >= 4">
<div class="row">
<div class="ng-hide" ng-show="facebook" ng-click="shareFacebook()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-facebook.svg"/>
</i>
<span>Facebook</span>
</div>
<div class="ng-hide" ng-show="twitter" ng-click="shareTwitter()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-twitter.svg"/>
</i>
<span>Twitter</span>
</div>
<div class="ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-googleplus.svg"/>
</i>
<span>Google+</span>
</div>
</div>
<div class="row">
<div class="ng-hide" ng-show="email" ng-click="shareEmail()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-email.svg"/>
</i>
<span>Email</span>
</div>
<div class="ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-whatsapp.svg"/>
</i>
<span>Whatsapp</span>
</div>
<div ng-click="shareMessage()">
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-message.svg"/>
</i>
<span>Message</span>
</div>

8
www/views/feedback/rateApp.html
View File

@ -4,15 +4,15 @@
<div class="title">
<span translate>Thank you!</span>
<div>
<i class="icon zero-state-icon">
<img src="img/address-book-add.svg"/>
<i class="icon icon-svg">
<img src="img/ico-positive-feedback.svg" class="bg"/>
</i>
</div>
</div>
<div class="subtitle">
<div class="subtitle text-center">
<span translate>5-star ratings help us get BitPay Wallet into more hands, and more users means more resoucers can be committed to the app!</span>
</div>
<div class="subtitle">
<div class="subtitle text-center">
<span class="text-bold" translate>Would you be willing to rate BitPay Wallet in the app store?</span>
</div>
<div class="buttons">

37
www/views/feedback/rateCard.html
View File

@ -3,12 +3,37 @@
<span translate>How do you like BitPay Wallet?</span>
<a ng-click="hideCard()" ><i class="icon ion-ios-close-empty close-home-tip"></i></a>
</div>
<div class="stars item item-sub">
<button class="button icon ion-android-star" ng-click="setScore(1)" ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}"></button>
<button class="button icon ion-android-star" ng-click="setScore(2)" ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}"></button>
<button class="button icon ion-android-star" ng-click="setScore(3)" ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}"></button>
<button class="button icon ion-android-star" ng-click="setScore(4)" ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}"></button>
<button class="button icon ion-android-star" ng-click="setScore(5)" ng-class="{'gold': 5 == score, 'subtle-gray': 5 > score}"></button>
<div class="row item item-sub" ng-class="{'row-margin': isModal}">
<div class="col col-20">
<i class="icon icon-svg" ng-click="setScore(1)">
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="1 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-20">
<i class="icon icon-svg" ng-click="setScore(2)">
<img ng-if="2 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="2 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-20">
<i class="icon icon-svg" ng-click="setScore(3)">
<img ng-if="3 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="3 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-20">
<i class="icon icon-svg" ng-click="setScore(4)">
<img ng-if="4 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="4 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-20">
<i class="icon icon-svg" ng-click="setScore(5)">
<img ng-if="5 == score" src="img/ico-star-filled.svg"/>
<img ng-if="5 > score" src="img/ico-star.svg"/>
</i>
</div>
</div>
<div class="feedback-flow-button" ng-if="button_title">
<button type="submit" class="button button-standard button-primary" ng-click="goFeedbackFlow()">

37
www/views/feedback/send.html
View File

@ -4,12 +4,37 @@
<div class="title">
<span>{{reaction}}</span>
</div>
<div class="star">
<a><i ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}" class="icon ion-android-star"></i></a>
<a><i ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}" class="icon ion-android-star"></i></a>
<a><i ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}" class="icon ion-android-star"></i></a>
<a><i ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}" class="icon ion-android-star"></i></a>
<a><i ng-class="{'gold': 5 == score, 'subtle-gray': 5 > score}" class="icon ion-android-star"></i></a>
<div class="row item item-sub">
<div class="col col-10">
<i class="icon icon-svg" ng-click="setScore(1)">
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="1 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-10">
<i class="icon icon-svg" ng-click="setScore(2)">
<img ng-if="2 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="2 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-10">
<i class="icon icon-svg" ng-click="setScore(3)">
<img ng-if="3 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="3 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-10">
<i class="icon icon-svg" ng-click="setScore(4)">
<img ng-if="4 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="4 > score" src="img/ico-star.svg"/>
</i>
</div>
<div class="col col-10">
<i class="icon icon-svg" ng-click="setScore(5)">
<img ng-if="5 == score" src="img/ico-star-filled.svg"/>
<img ng-if="5 > score" src="img/ico-star.svg"/>
</i>
</div>
</div>
<div class="comment">
<span translate>{{comment}}</span>