Download as
Browse Code »

Commit 1e9de07fe2bd07800bf9af2f64b3dacf1eef2238

Authored by Leonardo Merlin
1 parent d1c26fc2
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Improve feedback at vote-proposal

Showing 6 changed files with 186 additions and 100 deletions   Show diff stats
src/app/components/article-service/article.service.js
  Diff comments   View file @1e9de07
@@ -177,9 +177,12 @@ @@ -177,9 +177,12 @@
177 var url = service.apiArticles + proposal_id + '/vote'; 177 var url = service.apiArticles + proposal_id + '/vote';
178 var paramsExtended = angular.extend({ 178 var paramsExtended = angular.extend({
179 private_token: $rootScope.currentUser.private_token 179 private_token: $rootScope.currentUser.private_token
  180 + // private_token: 'e2198fdbcc20409f082829b4b5c0848e'
180 }, params); 181 }, params);
181 182
182 - UtilService.post(url, paramsExtended).then(function(response){ 183 + var encodedParams = angular.element.param(paramsExtended);
  184 +
  185 + UtilService.post(url, encodedParams).then(function(response){
183 cbSuccess(response); 186 cbSuccess(response);
184 }).catch(function(error){ 187 }).catch(function(error){
185 cbError(error); 188 cbError(error);
src/app/components/proposal-box/proposal-box.directive.js
  Diff comments   View file @1e9de07
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 41
42 vm.$scope.$on('proposal-box:proposal-loaded', function(event, data){ 42 vm.$scope.$on('proposal-box:proposal-loaded', function(event, data){
43 if(data.success){ 43 if(data.success){
44 - vm.STATE = null; 44 + vm.STATE = null;
45 } 45 }
46 46
47 if(data.error){ 47 if(data.error){
@@ -57,11 +57,11 @@ @@ -57,11 +57,11 @@
57 if(data.success) { 57 if(data.success) {
58 vm.STATE = vm.VOTE_STATUS.SUCCESS; 58 vm.STATE = vm.VOTE_STATUS.SUCCESS;
59 } 59 }
60 - 60 +
61 if(data.error) { 61 if(data.error) {
62 vm.STATE = vm.VOTE_STATUS.ERROR; 62 vm.STATE = vm.VOTE_STATUS.ERROR;
63 } 63 }
64 - 64 +
65 vm.message = data.message; 65 vm.message = data.message;
66 }); 66 });
67 67
@@ -123,6 +123,15 @@ @@ -123,6 +123,15 @@
123 vm.$log.debug('Sending vote'); 123 vm.$log.debug('Sending vote');
124 }; 124 };
125 125
  126 + ProposalBoxController.prototype.getSocialUrl = function () {
  127 + var vm = this;
  128 +
  129 + return vm.$state.href('programa', {
  130 + slug: vm.topic.slug,
  131 + proposal_id: vm.proposal.id,
  132 + });
  133 + };
  134 +
126 var directive = { 135 var directive = {
127 restrict: 'E', 136 restrict: 'E',
128 templateUrl: 'app/components/proposal-box/proposal-box.html', 137 templateUrl: 'app/components/proposal-box/proposal-box.html',
@@ -141,7 +150,6 @@ @@ -141,7 +150,6 @@
141 bindToController: true 150 bindToController: true
142 }; 151 };
143 152
144 -  
145 return directive; 153 return directive;
146 } 154 }
147 155
src/app/components/proposal-box/proposal-box.html
  Diff comments   View file @1e9de07
1 <div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.VOTE_STATUS.LOADING) )}, vm.category.slug]"> 1 <div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.VOTE_STATUS.LOADING) )}, vm.category.slug]">
2 - <!-- <div ng-hide="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)"> -->  
3 - <div>  
4 - <div ng-show="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)">  
5 - <div class="proposal-message-panel">  
6 - <div class="row">  
7 - <div class="row-height">  
8 - <div class="col-sm-12 col-sm-height col-middle">  
9 - <div class="inside inside-full-height">  
10 - <div class="content text-center show-message">  
11 - <div class="row">  
12 - <div class="col-xs-12">  
13 - <div class="message-icon color-fg-white" ng-class="{'success': (vm.STATE === vm.VOTE_STATUS.SUCCESS), 'error': vm.STATE === vm.VOTE_STATUS.ERROR}">  
14 - <span ng-if="vm.STATE === vm.VOTE_STATUS.SUCCESS" class="glyphicon glyphicon-ok" aria-hidden="true"></span>  
15 - <span ng-if="vm.STATE === vm.VOTE_STATUS.ERROR" class="glyphicon glyphicon-remove" aria-hidden="true"></span>  
16 - </div> 2 + <div ng-show="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)">
  3 + <div class="proposal-message-panel">
  4 + <div class="row">
  5 + <div class="row-height">
  6 + <div class="col-sm-12 col-height col-middle">
  7 + <div class="inside inside-full-height">
  8 + <div class="content text-center show-message">
  9 + <div class="row">
  10 + <div class="col-xs-12">
  11 + <div class="message-icon color-fg-white" ng-class="{'success': (vm.STATE === vm.VOTE_STATUS.SUCCESS), 'error': vm.STATE === vm.VOTE_STATUS.ERROR}">
  12 + <span ng-if="vm.STATE === vm.VOTE_STATUS.SUCCESS" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  13 + <span ng-if="vm.STATE === vm.VOTE_STATUS.ERROR" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
17 </div> 14 </div>
18 </div> 15 </div>
19 - <div class="row">  
20 - <div class="col-xs-12">  
21 - <p style="padding-top:20px;">{{vm.message}}</p> 16 + </div>
  17 + <div class="row">
  18 + <div class="col-xs-12">
  19 + <div class="feedback" ng-if="vm.STATE === vm.VOTE_STATUS.SUCCESS">
  20 + <p class="feedback--title">Obrigado por apoiar<br/>esta proposta!</p>
  21 +
  22 + <!-- actions -->
  23 + <div class="row feedback--message">
  24 + <div class="col-xs-6 feedback--share">
  25 + <div class="row">
  26 + <span>Compartilhe<br/>esta proposta</span>
  27 + </div>
  28 + <div class="row">
  29 + <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento">
  30 + <span class="icon icon-social-share" aria-hidden="true"></span>
  31 + </button>
  32 + <social-share
  33 + url="vm.getSocialUrl()"
  34 + text="vm.getSocialText()"
  35 + image="vm.getSocialImage()"
  36 + class="dropdown-menu dropdown-menu-right ng-isolate-scope"></social-share>
  37 + </div>
  38 + </div>
  39 + <div class="col-xs-6 feedback--next">
  40 + <div class="row">
  41 + <span>Próxima<br/>proposta</span>
  42 + </div>
  43 + <div class="row">
  44 + <button class="btn btn-link" aria-label="Ir para próxima proposta" ng-click="vm.skip()">
  45 + <div class="icon-circle play">
  46 + <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
  47 + </div>
  48 + </button>
  49 + </div>
  50 + </div>
  51 + </div>
  52 + </div>
  53 + <div class="feedback" ng-if="vm.STATE === vm.VOTE_STATUS.ERROR">
  54 + <p class="feedback--title">Erro!</p>
  55 + <p class="feedback--message" ng-if="vm.message">
  56 + Motivo: {{vm.message}}
  57 + </p>
22 </div> 58 </div>
23 </div> 59 </div>
24 </div> 60 </div>
@@ -28,40 +64,40 @@ @@ -28,40 +64,40 @@
28 </div> 64 </div>
29 </div> 65 </div>
30 </div> 66 </div>
31 - <div ng-show="vm.showAuthMessage">  
32 - <div class="proposal-message-panel">  
33 - <div class="row">  
34 - <div class="row-height">  
35 - <div class="col-sm-12 col-sm-height col-middle">  
36 - <div class="inside inside-full-height">  
37 - <div class="content text-center">  
38 - <p>Você precisa estar logado para votar na proposta</p>  
39 - <br>  
40 - <p>  
41 - <!-- <a ui-sref="entrar({redirect_uri: vm.voteProposalRedirectURI})">Clique aqui</a> para ir para a página de login. -->  
42 - <a ui-sref="entrar({redirect_uri: vm.voteProposalRedirectURI})">Clique aqui para ir para a página de login</a>  
43 - </p>  
44 - </div> 67 + </div>
  68 + <div ng-show="vm.showAuthMessage">
  69 + <div class="proposal-message-panel">
  70 + <div class="row">
  71 + <div class="row-height">
  72 + <div class="col-sm-12 col-height col-middle">
  73 + <div class="inside inside-full-height">
  74 + <div class="content text-center">
  75 + <p>Você precisa estar logado para votar na proposta</p>
  76 + <br>
  77 + <p>
  78 + <!-- <a ui-sref="entrar({redirect_uri: vm.voteProposalRedirectURI})">Clique aqui</a> para ir para a página de login. -->
  79 + <a ui-sref="entrar({redirect_uri: vm.voteProposalRedirectURI})">Clique aqui para ir para a página de login</a>
  80 + </p>
45 </div> 81 </div>
46 </div> 82 </div>
47 </div> 83 </div>
48 </div> 84 </div>
49 </div> 85 </div>
50 </div> 86 </div>
51 - <div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">  
52 - <div class="proposal-message-panel">  
53 - <div class="row">  
54 - <div class="row-height">  
55 - <div class="col-sm-12 col-sm-height col-middle">  
56 - <div class="inside inside-full-height">  
57 - <div class="content text-center">  
58 - <div ng-show="!vm.errorOnSkip">  
59 - <p>Carregando...</p>  
60 - </div>  
61 - <div ng-show="!vm.errorOnSkip">  
62 - <p>Erro ao carregar nova proposta proposta.</p>  
63 - <p>{{vm.errorOnSkip}}</p>  
64 - </div> 87 + </div>
  88 + <div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">
  89 + <div class="proposal-message-panel">
  90 + <div class="row">
  91 + <div class="row-height">
  92 + <div class="col-sm-12 col-height col-middle">
  93 + <div class="inside inside-full-height">
  94 + <div class="content text-center">
  95 + <div ng-show="!vm.errorOnSkip">
  96 + <p>Carregando...</p>
  97 + </div>
  98 + <div ng-show="!vm.errorOnSkip">
  99 + <p>Erro ao carregar nova proposta proposta.</p>
  100 + <p>{{vm.errorOnSkip}}</p>
65 </div> 101 </div>
66 </div> 102 </div>
67 </div> 103 </div>
@@ -69,63 +105,63 @@ @@ -69,63 +105,63 @@
69 </div> 105 </div>
70 </div> 106 </div>
71 </div> 107 </div>
72 - <div class="proposal-box--top">  
73 - <div class="proposal-box--theme color-theme-bg-complementar-2">{{vm.category.name}}</div>  
74 - <div class="proposal-box--program color-theme-bg">{{vm.topic.title}}</div> 108 + </div>
  109 + <div class="proposal-box--top">
  110 + <div class="proposal-box--theme color-theme-bg-complementar-2">{{vm.category.name}}</div>
  111 + <div class="proposal-box--program color-theme-bg">{{vm.topic.title}}</div>
  112 + </div>
  113 + <div class="proposal-box--middle">
  114 + <div class="proposal-box--content">
  115 + <div class="proposal-box--content-inner">{{vm.proposal.abstract}}</div>
  116 + </div>
  117 + <div ng-hide="vm.canVote" class="proposal-box--join">
  118 + <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
  119 + Participe
  120 + <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
  121 + </button>
75 </div> 122 </div>
76 - <div class="proposal-box--middle">  
77 - <div class="proposal-box--content">  
78 - <div class="proposal-box--content-inner">{{vm.proposal.abstract}}</div>  
79 - </div>  
80 - <div ng-hide="vm.canVote" class="proposal-box--join">  
81 - <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">  
82 - Participe  
83 - <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>  
84 - </button>  
85 - </div>  
86 - <div ng-show="vm.canVote" class="proposal-box--actions text-center">  
87 - <div class="row">  
88 - <div class="col-xs-4">  
89 - <div class="action vote_for" ng-click="vm.vote(vm.VOTE_OPTIONS.UP)">  
90 - <div class="icon-circle">  
91 - <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>  
92 - </div>  
93 - <div class="action-label">Apoio</div> 123 + <div ng-show="vm.canVote" class="proposal-box--actions text-center">
  124 + <div class="row">
  125 + <div class="col-xs-4">
  126 + <div class="action vote_for" ng-click="vm.vote(vm.VOTE_OPTIONS.UP)">
  127 + <div class="icon-circle">
  128 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
94 </div> 129 </div>
  130 + <div class="action-label">Apoio</div>
95 </div> 131 </div>
96 - <div class="col-xs-4">  
97 - <div class="action skip" ng-click="vm.skip()">  
98 - <div class="icon-circle">  
99 - <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>  
100 - </div>  
101 - <div class="action-label">Pular</div> 132 + </div>
  133 + <div class="col-xs-4">
  134 + <div class="action skip" ng-click="vm.skip()">
  135 + <div class="icon-circle">
  136 + <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
102 </div> 137 </div>
  138 + <div class="action-label">Pular</div>
103 </div> 139 </div>
104 - <div class="col-xs-4">  
105 - <div class="action vote_against" ng-click="vm.vote(vm.VOTE_OPTIONS.DOWN)">  
106 - <div class="icon-circle">  
107 - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>  
108 - </div>  
109 - <div class="action-label">Não Apoio</div> 140 + </div>
  141 + <div class="col-xs-4">
  142 + <div class="action vote_against" ng-click="vm.vote(vm.VOTE_OPTIONS.DOWN)">
  143 + <div class="icon-circle">
  144 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
110 </div> 145 </div>
  146 + <div class="action-label">Não Apoio</div>
111 </div> 147 </div>
112 </div> 148 </div>
113 </div> 149 </div>
114 </div> 150 </div>
115 - <div class="proposal-box--bottom text-center">  
116 - <div class="proposal-box--share">  
117 - <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>  
118 - <div class="dropdown">  
119 - <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>  
120 - <social-share class="dropdown-menu dropdown-menu-right"></social-share>  
121 - </div> 151 + </div>
  152 + <div class="proposal-box--bottom text-center">
  153 + <div class="proposal-box--share">
  154 + <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
  155 + <div class="dropdown">
  156 + <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
  157 + <social-share class="dropdown-menu dropdown-menu-right"></social-share>
122 </div> 158 </div>
123 - <div class="proposal-box--ranking">  
124 - <div class="proposal-box--ranking-inner">  
125 - <span class="icon icon-small icon-ranking" aria-hidden="true"></span>  
126 - <span>Colocação nos resultados:</span>  
127 - <span>{{vm.proposal.ranking_position}}º</span>  
128 - </div> 159 + </div>
  160 + <div class="proposal-box--ranking">
  161 + <div class="proposal-box--ranking-inner">
  162 + <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
  163 + <span>Colocação nos resultados:</span>
  164 + <span>{{vm.proposal.ranking_position}}º</span>
129 </div> 165 </div>
130 </div> 166 </div>
131 </div> 167 </div>
src/app/components/proposal-box/proposal-box.scss
  Diff comments   View file @1e9de07
@@ -81,6 +81,8 @@ @@ -81,6 +81,8 @@
81 z-index: 1000; 81 z-index: 1000;
82 background-color: #f5f5f5; 82 background-color: #f5f5f5;
83 background-color: rgba(245, 245, 245, 0.9); 83 background-color: rgba(245, 245, 245, 0.9);
  84 + border: 7px solid #5E769C;
  85 + border-radius: 5px;
84 86
85 .row { height: 100%; } 87 .row { height: 100%; }
86 .inside { position: relative; } 88 .inside { position: relative; }
@@ -92,8 +94,42 @@ @@ -92,8 +94,42 @@
92 line-height: 24px; 94 line-height: 24px;
93 padding: 10px 30px; 95 padding: 10px 30px;
94 } 96 }
  97 +
  98 + .message-icon {
  99 + .glyphicon {
  100 + top: 8px;
  101 + }
  102 + }
95 } 103 }
96 104
  105 + .feedback {
  106 + padding: 20px;
  107 +
  108 + &--title {
  109 + font-size: 22px;
  110 + font-weight: bold;
  111 + }
  112 +
  113 + &--message {
  114 + font-size: 14px;
  115 + font-weight: normal;
  116 + line-height: 20px;
  117 + margin-top: 48px;
  118 + }
  119 +
  120 + .icon-circle {
  121 + &.play {
  122 + background-color: #5e769c;
  123 + }
  124 +
  125 + .glyphicon {
  126 + top: 12px;
  127 + color: #fff;
  128 + }
  129 + }
  130 + }
  131 +
  132 +
97 .action { 133 .action {
98 .glyphicon { 134 .glyphicon {
99 color: #fff; 135 color: #fff;
src/app/components/social-share/social-share.directive.js
  Diff comments   View file @1e9de07
@@ -11,6 +11,9 @@ @@ -11,6 +11,9 @@
11 restrict: 'E', 11 restrict: 'E',
12 templateUrl: 'app/components/social-share/social-share.html', 12 templateUrl: 'app/components/social-share/social-share.html',
13 scope: { 13 scope: {
  14 + url: '=',
  15 + image: '=',
  16 + text: '=',
14 }, 17 },
15 controller: SocialShareController, 18 controller: SocialShareController,
16 controllerAs: 'vm', 19 controllerAs: 'vm',
src/app/pages/programas/programa.controller.js
  Diff comments   View file @1e9de07
@@ -66,7 +66,7 @@ @@ -66,7 +66,7 @@
66 vm.$rootScope.contentTitle = vm.article.title; 66 vm.$rootScope.contentTitle = vm.article.title;
67 67
68 // set the banner image with full image path 68 // set the banner image with full image path
69 - if (!vm.banner) { 69 + if (!vm.banner && vm.article.image) {
70 vm.banner = { 70 vm.banner = {
71 src: vm.PATH.image + vm.article.image.url, 71 src: vm.PATH.image + vm.article.image.url,
72 alt: 'Imagem de destaque do conteúdo' 72 alt: 'Imagem de destaque do conteúdo'
@@ -208,12 +208,12 @@ @@ -208,12 +208,12 @@
208 value: value 208 value: value
209 }, function(response) { 209 }, function(response) {
210 vm.$log.debug('response', response); 210 vm.$log.debug('response', response);
211 - 211 +
212 response.success = true; 212 response.success = true;
213 vm.$scope.$broadcast('proposal-box:vote-response', response); 213 vm.$scope.$broadcast('proposal-box:vote-response', response);
214 }, function(error) { 214 }, function(error) {
215 vm.$log.error('error', error); 215 vm.$log.error('error', error);
216 - 216 +
217 error.error = true; 217 error.error = true;
218 vm.$scope.$broadcast('proposal-box:vote-response', error); 218 vm.$scope.$broadcast('proposal-box:vote-response', error);
219 }); 219 });