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';
|
'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);
|
$scope.score = parseInt($stateParams.score);
|
||||||
var isAndroid = platformInfo.isAndroid;
|
var isAndroid = platformInfo.isAndroid;
|
||||||
var isIOS = platformInfo.isIOS;
|
var isIOS = platformInfo.isIOS;
|
||||||
|
@ -8,10 +8,25 @@ angular.module('copayApp.controllers').controller('rateAppController', function(
|
||||||
var config = configService.getSync();
|
var config = configService.getSync();
|
||||||
|
|
||||||
$scope.skip = function() {
|
$scope.skip = function() {
|
||||||
|
|
||||||
|
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', {
|
$state.go('feedback.complete', {
|
||||||
score: $scope.score,
|
score: $stateParams.score,
|
||||||
skipped: true
|
skipped: true
|
||||||
});
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.sendFeedback = function() {
|
$scope.sendFeedback = function() {
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
angular.module('copayApp.controllers').controller('rateCardController', function($scope, $state, $timeout, gettextCatalog, platformInfo, storageService) {
|
angular.module('copayApp.controllers').controller('rateCardController', function($scope, $state, $timeout, gettextCatalog, platformInfo, storageService) {
|
||||||
|
|
||||||
$scope.isCordova = platformInfo.isCordova;
|
$scope.isCordova = platformInfo.isCordova;
|
||||||
|
$scope.score = 0;
|
||||||
|
|
||||||
$scope.goFeedbackFlow = function() {
|
$scope.goFeedbackFlow = function() {
|
||||||
if ($scope.isModal) {
|
if ($scope.isModal) {
|
||||||
|
@ -52,12 +53,14 @@ angular.module('copayApp.controllers').controller('rateCardController', function
|
||||||
storageService.getFeedbackInfo(function(error, info) {
|
storageService.getFeedbackInfo(function(error, info) {
|
||||||
var feedbackInfo = JSON.parse(info);
|
var feedbackInfo = JSON.parse(info);
|
||||||
feedbackInfo.sent = true;
|
feedbackInfo.sent = true;
|
||||||
storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {});
|
storageService.setFeedbackInfo(JSON.stringify(feedbackInfo), function() {
|
||||||
|
$scope.showRateCard.value = false;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
$timeout(function() {
|
$timeout(function() {
|
||||||
$scope.$apply();
|
$scope.$apply();
|
||||||
})
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -19,10 +19,22 @@
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
padding: 10px 30px 20px 40px;
|
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 {
|
.share-buttons {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
|
@ -4,11 +4,16 @@
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
color: #667;
|
color: #667;
|
||||||
}
|
}
|
||||||
|
.icon-svg > img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
.title {
|
.title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $dark-gray;
|
color: $dark-gray;
|
||||||
margin: 40px 10px;
|
margin: 40px 50px 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
|
|
@ -1,20 +1,12 @@
|
||||||
#rate-card {
|
#rate-card {
|
||||||
.stars {
|
.row {
|
||||||
display: flex;
|
|
||||||
border-bottom: none;
|
|
||||||
.button {
|
|
||||||
background-color: #fff;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
border: none;
|
||||||
height:10px;
|
|
||||||
width:10px;
|
|
||||||
}
|
}
|
||||||
.gold {
|
.row.row-margin{
|
||||||
color: #ffd700;
|
margin: 20px 0px 20px 0px;
|
||||||
}
|
|
||||||
.subtle-gray {
|
|
||||||
color: $subtle-gray;
|
|
||||||
}
|
}
|
||||||
|
.item-icon-right {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
.feedback-flow-button {
|
.feedback-flow-button {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
#send-feedback {
|
#send-feedback {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
.row {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
.skip {
|
.skip {
|
||||||
margin: 20px 20px 10px;
|
margin: 20px 20px 10px;
|
||||||
color: #667;
|
color: #667;
|
||||||
|
@ -11,18 +14,6 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $dark-gray;
|
color: $dark-gray;
|
||||||
}
|
}
|
||||||
.star {
|
|
||||||
a {
|
|
||||||
font-size: 25px;
|
|
||||||
padding: 20px;
|
|
||||||
.gold {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
.subtle-gray {
|
|
||||||
color: $subtle-gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.comment {
|
.comment {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
|
@ -4,9 +4,10 @@
|
||||||
<a ui-sref="tabs.home"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
|
<a ui-sref="tabs.home"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div ng-show="skipped && isCordova">
|
<div ng-show="skipped && isCordova">
|
||||||
|
<div ng-show="score > 3">
|
||||||
<div class="title" translate>Invite friends to BitPay Wallet!</div>
|
<div class="title" translate>Invite friends to BitPay Wallet!</div>
|
||||||
<div>
|
<div class="text-center">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon addressbook-icon-svg">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/address-book-add.svg"/>
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,6 +15,23 @@
|
||||||
<span translate>Share the love by inviting your friends.</span>
|
<span translate>Share the love by inviting your friends.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<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">
|
<div ng-show="!skipped || !isCordova">
|
||||||
<div class="title" translate>Thank you!</div>
|
<div class="title" translate>Thank you!</div>
|
||||||
<div class="subtitle">
|
<div class="subtitle">
|
||||||
|
@ -21,9 +39,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="subtitle" ng-if="score <= 3 || !isCordova">
|
<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>
|
<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">
|
</div>
|
||||||
<i class="icon zero-state-icon">
|
<div ng-if="score <= 3 || !isCordova">
|
||||||
<img src="img/address-book-add.svg"/>
|
<div class="text-center">
|
||||||
|
<i class="icon icon-svg">
|
||||||
|
<img src="img/illustration-send-feedback.png"/>
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,40 +55,40 @@
|
||||||
<div class="ng-hide" ng-show="socialsharing" ng-if="score >= 4">
|
<div class="ng-hide" ng-show="socialsharing" ng-if="score >= 4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="ng-hide" ng-show="facebook" ng-click="shareFacebook()">
|
<div class="ng-hide" ng-show="facebook" ng-click="shareFacebook()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-facebook.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Facebook</span>
|
<span>Facebook</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ng-hide" ng-show="twitter" ng-click="shareTwitter()">
|
<div class="ng-hide" ng-show="twitter" ng-click="shareTwitter()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-twitter.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Twitter</span>
|
<span>Twitter</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
|
<div class="ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-googleplus.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Google+</span>
|
<span>Google+</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="ng-hide" ng-show="email" ng-click="shareEmail()">
|
<div class="ng-hide" ng-show="email" ng-click="shareEmail()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-email.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Email</span>
|
<span>Email</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
|
<div class="ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-whatsapp.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Whatsapp</span>
|
<span>Whatsapp</span>
|
||||||
</div>
|
</div>
|
||||||
<div ng-click="shareMessage()">
|
<div ng-click="shareMessage()">
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon socialsharing-icon">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/social-icons/ico-social-message.svg"/>
|
||||||
</i>
|
</i>
|
||||||
<span>Message</span>
|
<span>Message</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,15 +4,15 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span translate>Thank you!</span>
|
<span translate>Thank you!</span>
|
||||||
<div>
|
<div>
|
||||||
<i class="icon zero-state-icon">
|
<i class="icon icon-svg">
|
||||||
<img src="img/address-book-add.svg"/>
|
<img src="img/ico-positive-feedback.svg" class="bg"/>
|
||||||
</i>
|
</i>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<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>
|
||||||
<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>
|
<span class="text-bold" translate>Would you be willing to rate BitPay Wallet in the app store?</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
|
|
|
@ -3,12 +3,37 @@
|
||||||
<span translate>How do you like BitPay Wallet?</span>
|
<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>
|
<a ng-click="hideCard()" ><i class="icon ion-ios-close-empty close-home-tip"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="stars item item-sub">
|
<div class="row item item-sub" ng-class="{'row-margin': isModal}">
|
||||||
<button class="button icon ion-android-star" ng-click="setScore(1)" ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}"></button>
|
<div class="col col-20">
|
||||||
<button class="button icon ion-android-star" ng-click="setScore(2)" ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}"></button>
|
<i class="icon icon-svg" ng-click="setScore(1)">
|
||||||
<button class="button icon ion-android-star" ng-click="setScore(3)" ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}"></button>
|
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
|
||||||
<button class="button icon ion-android-star" ng-click="setScore(4)" ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}"></button>
|
<img ng-if="1 > score" src="img/ico-star.svg"/>
|
||||||
<button class="button icon ion-android-star" ng-click="setScore(5)" ng-class="{'gold': 5 == score, 'subtle-gray': 5 > score}"></button>
|
</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>
|
||||||
<div class="feedback-flow-button" ng-if="button_title">
|
<div class="feedback-flow-button" ng-if="button_title">
|
||||||
<button type="submit" class="button button-standard button-primary" ng-click="goFeedbackFlow()">
|
<button type="submit" class="button button-standard button-primary" ng-click="goFeedbackFlow()">
|
||||||
|
|
|
@ -4,12 +4,37 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>{{reaction}}</span>
|
<span>{{reaction}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="star">
|
<div class="row item item-sub">
|
||||||
<a><i ng-class="{'gold': 1 <= score, 'subtle-gray': 1 > score}" class="icon ion-android-star"></i></a>
|
<div class="col col-10">
|
||||||
<a><i ng-class="{'gold': 2 <= score, 'subtle-gray': 2 > score}" class="icon ion-android-star"></i></a>
|
<i class="icon icon-svg" ng-click="setScore(1)">
|
||||||
<a><i ng-class="{'gold': 3 <= score, 'subtle-gray': 3 > score}" class="icon ion-android-star"></i></a>
|
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
|
||||||
<a><i ng-class="{'gold': 4 <= score, 'subtle-gray': 4 > score}" class="icon ion-android-star"></i></a>
|
<img ng-if="1 > score" src="img/ico-star.svg"/>
|
||||||
<a><i ng-class="{'gold': 5 == score, 'subtle-gray': 5 > score}" class="icon ion-android-star"></i></a>
|
</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>
|
||||||
<div class="comment">
|
<div class="comment">
|
||||||
<span translate>{{comment}}</span>
|
<span translate>{{comment}}</span>
|
||||||
|
|
Loading…
Reference in New Issue