mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #5037 from gabrielbazan7/feat/icons-feedback
adding icon to feedback flow
This commit is contained in:
commit
e16520997f
|
@ -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
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue