Commit 1e9de07fe2bd07800bf9af2f64b3dacf1eef2238
1 parent
d1c26fc2
Exists in
master
and in
8 other branches
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
... | ... | @@ -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
... | ... | @@ -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
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
... | ... | @@ -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
src/app/pages/programas/programa.controller.js
... | ... | @@ -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 | }); | ... | ... |