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 177 var url = service.apiArticles + proposal_id + '/vote';
178 178 var paramsExtended = angular.extend({
179 179 private_token: $rootScope.currentUser.private_token
  180 + // private_token: 'e2198fdbcc20409f082829b4b5c0848e'
180 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 186 cbSuccess(response);
184 187 }).catch(function(error){
185 188 cbError(error);
... ...
src/app/components/proposal-box/proposal-box.directive.js
  Diff comments   View file @1e9de07
... ... @@ -41,7 +41,7 @@
41 41  
42 42 vm.$scope.$on('proposal-box:proposal-loaded', function(event, data){
43 43 if(data.success){
44   - vm.STATE = null;
  44 + vm.STATE = null;
45 45 }
46 46  
47 47 if(data.error){
... ... @@ -57,11 +57,11 @@
57 57 if(data.success) {
58 58 vm.STATE = vm.VOTE_STATUS.SUCCESS;
59 59 }
60   -
  60 +
61 61 if(data.error) {
62 62 vm.STATE = vm.VOTE_STATUS.ERROR;
63 63 }
64   -
  64 +
65 65 vm.message = data.message;
66 66 });
67 67  
... ... @@ -123,6 +123,15 @@
123 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 135 var directive = {
127 136 restrict: 'E',
128 137 templateUrl: 'app/components/proposal-box/proposal-box.html',
... ... @@ -141,7 +150,6 @@
141 150 bindToController: true
142 151 };
143 152  
144   -
145 153 return directive;
146 154 }
147 155  
... ...
src/app/components/proposal-box/proposal-box.html
  Diff comments   View file @1e9de07
1 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 14 </div>
18 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 58 </div>
23 59 </div>
24 60 </div>
... ... @@ -28,40 +64,40 @@
28 64 </div>
29 65 </div>
30 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 81 </div>
46 82 </div>
47 83 </div>
48 84 </div>
49 85 </div>
50 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 101 </div>
66 102 </div>
67 103 </div>
... ... @@ -69,63 +105,63 @@
69 105 </div>
70 106 </div>
71 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 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 129 </div>
  130 + <div class="action-label">Apoio</div>
95 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 137 </div>
  138 + <div class="action-label">Pular</div>
103 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 145 </div>
  146 + <div class="action-label">Não Apoio</div>
111 147 </div>
112 148 </div>
113 149 </div>
114 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 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 165 </div>
130 166 </div>
131 167 </div>
... ...
src/app/components/proposal-box/proposal-box.scss
  Diff comments   View file @1e9de07
... ... @@ -81,6 +81,8 @@
81 81 z-index: 1000;
82 82 background-color: #f5f5f5;
83 83 background-color: rgba(245, 245, 245, 0.9);
  84 + border: 7px solid #5E769C;
  85 + border-radius: 5px;
84 86  
85 87 .row { height: 100%; }
86 88 .inside { position: relative; }
... ... @@ -92,8 +94,42 @@
92 94 line-height: 24px;
93 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 133 .action {
98 134 .glyphicon {
99 135 color: #fff;
... ...
src/app/components/social-share/social-share.directive.js
  Diff comments   View file @1e9de07
... ... @@ -11,6 +11,9 @@
11 11 restrict: 'E',
12 12 templateUrl: 'app/components/social-share/social-share.html',
13 13 scope: {
  14 + url: '=',
  15 + image: '=',
  16 + text: '=',
14 17 },
15 18 controller: SocialShareController,
16 19 controllerAs: 'vm',
... ...
src/app/pages/programas/programa.controller.js
  Diff comments   View file @1e9de07
... ... @@ -66,7 +66,7 @@
66 66 vm.$rootScope.contentTitle = vm.article.title;
67 67  
68 68 // set the banner image with full image path
69   - if (!vm.banner) {
  69 + if (!vm.banner && vm.article.image) {
70 70 vm.banner = {
71 71 src: vm.PATH.image + vm.article.image.url,
72 72 alt: 'Imagem de destaque do conteúdo'
... ... @@ -208,12 +208,12 @@
208 208 value: value
209 209 }, function(response) {
210 210 vm.$log.debug('response', response);
211   -
  211 +
212 212 response.success = true;
213 213 vm.$scope.$broadcast('proposal-box:vote-response', response);
214 214 }, function(error) {
215 215 vm.$log.error('error', error);
216   -
  216 +
217 217 error.error = true;
218 218 vm.$scope.$broadcast('proposal-box:vote-response', error);
219 219 });
... ...