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

feat(feedback): improve design of feedback flow

This commit is contained in:
Jason Dreyzehner 2016-11-15 15:09:08 -05:00
parent e16520997f
commit 511730ecd3
9 changed files with 56 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@ angular.module('copayApp.controllers').controller('rateCardController', function
$scope.score = score; $scope.score = score;
switch ($scope.score) { switch ($scope.score) {
case 1: case 1:
$scope.button_title = gettextCatalog.getString("I think this app is terrible"); $scope.button_title = gettextCatalog.getString("I think this app is terrible.");
break; break;
case 2: case 2:
$scope.button_title = gettextCatalog.getString("I don't like it"); $scope.button_title = gettextCatalog.getString("I don't like it");
@ -37,7 +37,7 @@ angular.module('copayApp.controllers').controller('rateCardController', function
$scope.button_title = gettextCatalog.getString("I like the app"); $scope.button_title = gettextCatalog.getString("I like the app");
break; break;
case 5: case 5:
$scope.button_title = gettextCatalog.getString("This app is fantastic"); $scope.button_title = gettextCatalog.getString("This app is fantastic!");
break; break;
} }
$timeout(function() { $timeout(function() {

14
src/js/controllers/feedback/send.js
View File

@ -5,23 +5,23 @@ angular.module('copayApp.controllers').controller('sendController', function($sc
switch ($scope.score) { switch ($scope.score) {
case 1: case 1:
$scope.reaction = gettextCatalog.getString("Ouch!"); $scope.reaction = gettextCatalog.getString("Ouch!");
$scope.comment = gettextCatalog.getString("There's obviously something we're doing wrong."); $scope.comment = gettextCatalog.getString("There's obviously something we're doing wrong.") + ' ' + gettextCatalog.getString("How could we improve your experience?");
break; break;
case 2: case 2:
$scope.reaction = gettextCatalog.getString("Oh no!"); $scope.reaction = gettextCatalog.getString("Oh no!");
$scope.comment = gettextCatalog.getString("There's obviously something we're doing wrong."); $scope.comment = gettextCatalog.getString("There's obviously something we're doing wrong.") + ' ' + gettextCatalog.getString("How could we improve your experience?");
break; break;
case 3: case 3:
$scope.reaction = gettextCatalog.getString("Thanks!"); $scope.reaction = gettextCatalog.getString("Hmm...");
$scope.comment = gettextCatalog.getString("We're always looking for ways to improve BitPay wallet."); $scope.comment = gettextCatalog.getString("We'd love to do better.") + ' ' + gettextCatalog.getString("How could we improve your experience?");
break; break;
case 4: case 4:
$scope.reaction = gettextCatalog.getString("Thanks!"); $scope.reaction = gettextCatalog.getString("Thanks!");
$scope.comment = gettextCatalog.getString("That's exciting to hear. We'd love to earn that fifth star from you."); $scope.comment = gettextCatalog.getString("That's exciting to hear. We'd love to earn that fifth star from you – how could we improve your experience?");
break; break;
case 5: case 5:
$scope.reaction = gettextCatalog.getString("Feedback!"); $scope.reaction = gettextCatalog.getString("Thank you!");
$scope.comment = gettextCatalog.getString("We're always looking for ways to improve BitPay wallet."); $scope.comment = gettextCatalog.getString("We're always looking for ways to improve BitPay wallet.") + ' ' + gettextCatalog.getString("Is there anything we could do better?");
break; break;
} }

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

@ -19,6 +19,7 @@
} }
.subtitle { .subtitle {
padding: 10px 30px 20px 40px; padding: 10px 30px 20px 40px;
text-align: center;
} }
.icon-svg > img { .icon-svg > img {
height: 16rem; height: 16rem;

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

@ -9,6 +9,10 @@
margin: 0; margin: 0;
} }
.feedback-flow-button { .feedback-flow-button {
padding: 20px; margin-bottom: 20px;
}
.icon-svg > img {
height: 1.8rem;
margin-bottom: 5px;
} }
} }

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

@ -9,11 +9,15 @@
text-decoration: none; text-decoration: none;
} }
.title { .title {
padding: 20px; padding-left: 10px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: $dark-gray; color: $dark-gray;
} }
.rating {
text-align: right;
padding-right: 15px;
}
.comment { .comment {
padding: 20px; padding: 20px;
font-size: 1rem; font-size: 1rem;
@ -27,4 +31,8 @@
padding: 20px; padding: 20px;
width: 100%; width: 100%;
} }
.send-feedback-star {
height: 1rem;
margin-left: 5px;
}
} }

2
www/img/ico-star.svg
View File

@ -2,7 +2,7 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 17.8 17.8" style="enable-background:new 0 0 17.8 17.8;" xml:space="preserve"> viewBox="0 0 17.8 17.8" style="enable-background:new 0 0 17.8 17.8;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#F2F2F2;} .st0{fill:#DADADA;}
</style> </style>
<path class="st0" d="M17.7,6c-0.1-0.2-0.2-0.3-0.4-0.3h-5.5L9.3,0.3C9.2,0.1,9.1,0,8.9,0C8.7,0,8.6,0.1,8.5,0.3L5.9,5.8H0.4 <path class="st0" d="M17.7,6c-0.1-0.2-0.2-0.3-0.4-0.3h-5.5L9.3,0.3C9.2,0.1,9.1,0,8.9,0C8.7,0,8.6,0.1,8.5,0.3L5.9,5.8H0.4
C0.3,5.8,0.1,5.9,0,6C0,6.2,0,6.4,0.1,6.5l4,4.2l-1.6,6.5c0,0.2,0,0.4,0.2,0.5c0.1,0.1,0.3,0.1,0.5,0l5.7-3.3l5.7,3.3 C0.3,5.8,0.1,5.9,0,6C0,6.2,0,6.4,0.1,6.5l4,4.2l-1.6,6.5c0,0.2,0,0.4,0.2,0.5c0.1,0.1,0.3,0.1,0.5,0l5.7-3.3l5.7,3.3

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 654 B

After

Width:  |  Height:  |  Size: 654 B

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

@ -1,35 +1,35 @@
<div id="rate-card" ng-class="{'popup-modal': isModal}" ng-controller="rateCardController"> <div class="card" id="rate-card" ng-class="{'popup-modal': isModal}" ng-controller="rateCardController">
<div class="item item-icon-right item-heading"> <div class="item item-icon-right item-heading">
<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="row item item-sub" ng-class="{'row-margin': isModal}"> <div class="row item item-sub" ng-class="{'row-margin': isModal}">
<div class="col col-20"> <div class="col col-20" ng-click="setScore(1)">
<i class="icon icon-svg" ng-click="setScore(1)"> <i class="icon icon-svg">
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/> <img ng-if="1 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="1 > score" src="img/ico-star.svg"/> <img ng-if="1 > score" src="img/ico-star.svg"/>
</i> </i>
</div> </div>
<div class="col col-20"> <div class="col col-20" ng-click="setScore(2)">
<i class="icon icon-svg" ng-click="setScore(2)"> <i class="icon icon-svg">
<img ng-if="2 <= score" src="img/ico-star-filled.svg"/> <img ng-if="2 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="2 > score" src="img/ico-star.svg"/> <img ng-if="2 > score" src="img/ico-star.svg"/>
</i> </i>
</div> </div>
<div class="col col-20"> <div class="col col-20" ng-click="setScore(3)">
<i class="icon icon-svg" ng-click="setScore(3)"> <i class="icon icon-svg">
<img ng-if="3 <= score" src="img/ico-star-filled.svg"/> <img ng-if="3 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="3 > score" src="img/ico-star.svg"/> <img ng-if="3 > score" src="img/ico-star.svg"/>
</i> </i>
</div> </div>
<div class="col col-20"> <div class="col col-20" ng-click="setScore(4)">
<i class="icon icon-svg" ng-click="setScore(4)"> <i class="icon icon-svg">
<img ng-if="4 <= score" src="img/ico-star-filled.svg"/> <img ng-if="4 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="4 > score" src="img/ico-star.svg"/> <img ng-if="4 > score" src="img/ico-star.svg"/>
</i> </i>
</div> </div>
<div class="col col-20"> <div class="col col-20" ng-click="setScore(5)">
<i class="icon icon-svg" ng-click="setScore(5)"> <i class="icon icon-svg">
<img ng-if="5 == score" src="img/ico-star-filled.svg"/> <img ng-if="5 == score" src="img/ico-star-filled.svg"/>
<img ng-if="5 > score" src="img/ico-star.svg"/> <img ng-if="5 > score" src="img/ico-star.svg"/>
</i> </i>

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

@ -1,51 +1,33 @@
<ion-view id="send-feedback"> <ion-view id="send-feedback">
<a class="right skip" ng-click="sendFeedback(null,true)" href translate>Skip</a> <a class="right skip" ng-click="sendFeedback(null,true)" href translate>Skip</a>
<ion-content class="has-header" scroll="false"> <ion-content class="has-header" scroll="false">
<div class="title">
<span>{{reaction}}</span>
</div>
<div class="row item item-sub"> <div class="row item item-sub">
<div class="col col-10"> <div class="col col-50">
<i class="icon icon-svg" ng-click="setScore(1)"> <div class="title">
<img ng-if="1 <= score" src="img/ico-star-filled.svg"/> <span>{{reaction}}</span>
<img ng-if="1 > score" src="img/ico-star.svg"/> </div>
</i>
</div> </div>
<div class="col col-10"> <div class="col col-50 rating">
<i class="icon icon-svg" ng-click="setScore(2)"> <img class="send-feedback-star" ng-if="1 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="2 <= score" src="img/ico-star-filled.svg"/> <img class="send-feedback-star" ng-if="1 > score" src="img/ico-star.svg"/>
<img ng-if="2 > score" src="img/ico-star.svg"/> <img class="send-feedback-star" ng-if="2 <= score" src="img/ico-star-filled.svg"/>
</i> <img class="send-feedback-star" ng-if="2 > score" src="img/ico-star.svg"/>
</div> <img class="send-feedback-star" ng-if="3 <= score" src="img/ico-star-filled.svg"/>
<div class="col col-10"> <img class="send-feedback-star" ng-if="3 > score" src="img/ico-star.svg"/>
<i class="icon icon-svg" ng-click="setScore(3)"> <img class="send-feedback-star" ng-if="4 <= score" src="img/ico-star-filled.svg"/>
<img ng-if="3 <= score" src="img/ico-star-filled.svg"/> <img class="send-feedback-star" ng-if="4 > score" src="img/ico-star.svg"/>
<img ng-if="3 > score" src="img/ico-star.svg"/> <img class="send-feedback-star" ng-if="5 == score" src="img/ico-star-filled.svg"/>
</i> <img class="send-feedback-star" ng-if="5 > score" src="img/ico-star.svg"/>
</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>
<div class="comment"> <div class="comment">
<span translate>{{comment}}</span> <span translate>{{comment}}</span>
</div> </div>
<div> <div>
<textarea ng-model="feedback" placeholder="Is there anything we could do to improve your experience?" row="40"></textarea> <textarea ng-model="feedback" placeholder="Your ideas, feedback, or comments" row="40"></textarea>
</div>
<div class="padding">
<button ng-disabled="!feedback" type="submit" class="button button-full button-primary" ng-click="sendFeedback(feedback, false)" translate>
Send
</button>
</div> </div>
<button ng-disabled="!feedback" type="submit" class="button button-full button-primary" ng-click="sendFeedback(feedback, false)" translate>
Send
</button>
</ion-content> </ion-content>
</ion-view> </ion-view>

4
www/views/tab-home.html
View File

@ -13,9 +13,7 @@
<div class="release ng-hide" ng-show="newRelease" ng-click="openExternalLink('https://github.com/bitpay/copay/releases/latest', true, 'Update Available', 'An update to this app is available. For your security, please update to the latest version.', 'View Update', 'Go Back')"> <div class="release ng-hide" ng-show="newRelease" ng-click="openExternalLink('https://github.com/bitpay/copay/releases/latest', true, 'Update Available', 'An update to this app is available. For your security, please update to the latest version.', 'View Update', 'Go Back')">
<span translate>An update to this app is available</span><span><i class="icon bp-arrow-right"></i></span> <span translate>An update to this app is available</span><span><i class="icon bp-arrow-right"></i></span>
</div> </div>
<div class="list card ng-hide" ng-show="showRateCard.value"> <div class="ng-hide" ng-show="showRateCard.value" ng-include="'views/feedback/rateCard.html'"></div>
<span ng-include="'views/feedback/rateCard.html'"></span>
</div>
<div class="list card homeTip" ng-if="homeTip"> <div class="list card homeTip" ng-if="homeTip">
<div class="item item-icon-right item-heading"> <div class="item item-icon-right item-heading">
<a ng-click="hideHomeTip()"><i class="icon ion-ios-close-empty close-home-tip"></i></a> <a ng-click="hideHomeTip()"><i class="icon ion-ios-close-empty close-home-tip"></i></a>