Download as
Browse Code »

Commit fbf441895614088c7fd63f60689eb6c862cdbf8a

Authored by Leonardo Merlin
1 parent dda5d779
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

Add loading state to proposal-box vote

Showing 6 changed files with 142 additions and 57 deletions   Show diff stats
src/app/components/article-service/article.service.js
  Diff comments   View file @fbf4418
... ... @@ -178,7 +178,7 @@
178 178  
179 179 var url = service.apiCommunities + community_id + '/articles';
180 180 var paramsExtended = angular.extend({
181   - // 'fields[]': ['id', 'slug', 'title', 'abstract', 'body', 'categories', 'created_at', 'start_date', 'end_date', 'hits'],
  181 + // 'fields[]': ['id', 'title', 'abstract', 'body', 'categories', 'created_at', 'start_date', 'end_date', 'followers_count', 'image', 'url'],
182 182 'content_type':'Event'
183 183 }, params);
184 184  
... ...
src/app/components/proposal-box/proposal-box.directive.js
  Diff comments   View file @fbf4418
... ... @@ -9,23 +9,40 @@
9 9 function proposalBox() {
10 10  
11 11 /** @ngInject */
12   - function ProposalBoxController($state, $log) {
  12 + function ProposalBoxController($scope, $state, STATUS_VOTE, $log) {
13 13 $log.debug('ProposalBoxController');
14 14  
15 15 var vm = this;
  16 + vm.$scope = $scope;
16 17 vm.$state = $state;
17 18 vm.$log = $log;
  19 + vm.STATUS_VOTE = STATUS_VOTE;
18 20  
19   - vm.init($log);
  21 + vm.init();
  22 + vm.addListeners();
20 23 }
21 24  
22 25 ProposalBoxController.prototype.init = function () {
23 26  
24 27 var vm = this;
25 28  
26   - if (!vm.vote) { vm.vote = false; }
27   - if (!vm.focus) { vm.focus = false; }
  29 + vm.canVote = vm.canVote || false;
  30 + vm.focus = vm.focus || false;
  31 + vm.STATE = null;
  32 + };
  33 +
  34 + ProposalBoxController.prototype.addListeners = function () {
  35 + var vm = this;
  36 +
  37 + vm.$scope.$on('proposal-vote:success', function(e, data){
  38 + vm.STATE = vm.STATUS_VOTE.SUCCESS;
  39 + vm.message = data.message;
  40 + });
28 41  
  42 + vm.$scope.$on('proposal-vote:error', function(e, data){
  43 + vm.STATE = vm.STATUS_VOTE.ERROR;
  44 + vm.message = data.message;
  45 + });
29 46 };
30 47  
31 48 ProposalBoxController.prototype.showContent = function (slug) {
... ... @@ -39,6 +56,30 @@
39 56 });
40 57 };
41 58  
  59 + ProposalBoxController.prototype.voteUp = function () {
  60 + var vm = this;
  61 +
  62 + vm.STATE = vm.STATUS_VOTE.LOADING;
  63 + vm.$scope.$emit('proposal-vote:voteUp', vm.proposal.id);
  64 + vm.$log.debug('Sending vote');
  65 + };
  66 +
  67 + ProposalBoxController.prototype.voteDown = function () {
  68 + var vm = this;
  69 +
  70 + vm.STATE = vm.STATUS_VOTE.LOADING;
  71 + vm.$scope.$emit('proposal-vote:voteDown', vm.proposal.id);
  72 + vm.$log.debug('Sending vote');
  73 + };
  74 +
  75 + ProposalBoxController.prototype.next = function () {
  76 + var vm = this;
  77 +
  78 + vm.STATE = vm.STATUS_VOTE.LOADING;
  79 + vm.$scope.$emit('proposal-vote:next', vm.proposal.id);
  80 + vm.$log.debug('Sending vote');
  81 + };
  82 +
42 83 var directive = {
43 84 restrict: 'E',
44 85 templateUrl: 'app/components/proposal-box/proposal-box.html',
... ... @@ -46,7 +87,7 @@
46 87 proposal: '=',
47 88 topic: '=',
48 89 category: '=',
49   - vote: '=',
  90 + canVote: '=',
50 91 focus: '@'
51 92 // @ -> Text binding / one-way binding
52 93 // = -> Direct model binding / two-way binding
... ...
src/app/components/proposal-box/proposal-box.html
  Diff comments   View file @fbf4418
1   -<div class="proposal-box" ng-class="[{'focus': vm.focus}, vm.category.slug]">
2   - <div class="proposal-box--top">
3   - <div class="proposal-box--theme color-theme-bg-complementar-2">{{::vm.category.name}}</div>
4   - <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
  1 +<div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.STATUS_VOTE.LOADING) )}, vm.category.slug]">
  2 + <div ng-show="(vm.STATE === vm.STATUS_VOTE.SUCCESS) || (vm.STATE === vm.STATUS_VOTE.ERROR)">
  3 + FEEDBACK
5 4 </div>
6   - <div class="proposal-box--middle">
7   - <div class="proposal-box--content">
8   - <div class="proposal-box--content-inner">{{::vm.proposal.abstract}}</div>
9   - </div>
10   - <div ng-hide="vm.vote" class="proposal-box--join">
11   - <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
12   - Participe
13   - <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
14   - </button>
15   - </div>
16   - <div ng-show="vm.vote"class="proposal-box--actions text-center">
17   - <div class="row">
18   - <div class="col-xs-4">
19   - <div class="action vote_for">
20   - <div class="icon-circle">
21   - <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
22   - </div>
23   - <div class="action-label">Apoio</div>
  5 + <div ng-hide="(vm.STATE === vm.STATUS_VOTE.SUCCESS) || (vm.STATE === vm.STATUS_VOTE.ERROR)">
  6 + <div ng-show="vm.STATE === vm.STATUS_VOTE.LOADING">
  7 + <div class="proposal-loading">
  8 + <div class="shadow"></div>
  9 + <div class="text">
  10 + Carregando...
24 11 </div>
25 12 </div>
26   - <div class="col-xs-4">
27   - <div class="action next">
28   - <div class="icon-circle">
29   - <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
  13 + </div>
  14 + <div class="proposal-box--top">
  15 + <div class="proposal-box--theme color-theme-bg-complementar-2">{{::vm.category.name}}</div>
  16 + <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
  17 + </div>
  18 + <div class="proposal-box--middle">
  19 + <div class="proposal-box--content">
  20 + <div class="proposal-box--content-inner">{{::vm.proposal.abstract}}</div>
  21 + </div>
  22 + <div ng-hide="vm.canVote" class="proposal-box--join">
  23 + <button class="btn btn-link color-theme-common-fg" ng-click="vm.showContent(vm.topic.slug)">
  24 + Participe
  25 + <span class="glyphicon glyphicon-menu-right color-theme-common-fg" aria-hidde="true"></span>
  26 + </button>
  27 + </div>
  28 + <div ng-show="vm.canVote"class="proposal-box--actions text-center">
  29 + <div class="row">
  30 + <div class="col-xs-4">
  31 + <div class="action vote_for" ng-click="vm.voteUp()">
  32 + <div class="icon-circle">
  33 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  34 + </div>
  35 + <div class="action-label">Apoio</div>
30 36 </div>
31   - <div class="action-label">Pular</div>
32 37 </div>
33   - </div>
34   - <div class="col-xs-4">
35   - <div class="action vote_against">
36   - <div class="icon-circle">
37   - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  38 + <div class="col-xs-4">
  39 + <div class="action next" ng-click="vm.next()">
  40 + <div class="icon-circle">
  41 + <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
  42 + </div>
  43 + <div class="action-label">Pular</div>
  44 + </div>
  45 + </div>
  46 + <div class="col-xs-4">
  47 + <div class="action vote_against" ng-click="vm.voteDown()">
  48 + <div class="icon-circle">
  49 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  50 + </div>
  51 + <div class="action-label">Não Apoio</div>
38 52 </div>
39   - <div class="action-label">Não Apoio</div>
40 53 </div>
41 54 </div>
42 55 </div>
43   - </div>
44   -</div>
45   -<div class="proposal-box--bottom text-center">
46   - <div class="proposal-box--share">
47   - <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
48   - <div class="dropdown">
49   - <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>
50   - <social-share class="dropdown-menu dropdown-menu-right"></social-share>
  56 + </div>
  57 + <div class="proposal-box--bottom text-center">
  58 + <div class="proposal-box--share">
  59 + <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
  60 + <div class="dropdown">
  61 + <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>
  62 + <social-share class="dropdown-menu dropdown-menu-right"></social-share>
  63 + </div>
  64 + </div>
  65 + <div class="proposal-box--ranking">
  66 + <div class="proposal-box--ranking-inner">
  67 + <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
  68 + <span>Colocação nos resultados:</span>
  69 + <span>{{::vm.proposal.ranking_position}}º</span>
  70 + </div>
  71 + </div>
51 72 </div>
52 73 </div>
53   - <div class="proposal-box--ranking">
54   - <div class="proposal-box--ranking-inner">
55   - <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
56   - <span>Colocação nos resultados:</span>
57   - <span>{{::vm.proposal.ranking_position}}º</span>
58   - </div>
59   - </div>
60   -</div>
61 74 </div>
... ...
src/app/components/proposal-box/proposal-box.scss
  Diff comments   View file @fbf4418
... ... @@ -3,6 +3,7 @@
3 3 border-radius: 5px;
4 4 // overflow: hidden;
5 5 margin-bottom: 20px;
  6 + position: relative;
6 7  
7 8 &.focus {
8 9 border: 7px solid #000;
... ... @@ -71,6 +72,31 @@
71 72 }
72 73 }
73 74  
  75 + .proposal-loading {
  76 +
  77 + .text {
  78 + position: absolute;
  79 + color: #fff;
  80 + font-size: 24px;
  81 + z-index: 1000;
  82 + top: 50%;
  83 + left: 50%;
  84 + margin-top: -17px;
  85 + margin-left: -75px;
  86 + }
  87 +
  88 + .shadow {
  89 + content: "";
  90 + position: absolute;
  91 + z-index: 999;
  92 + width: 100%;
  93 + height: 100%;
  94 + top: 0;
  95 + left: 0;
  96 + background-color: rgba(0,0,0,.4);
  97 + }
  98 + }
  99 +
74 100 .action {
75 101 .glyphicon {
76 102 color: #fff;
... ...
src/app/index.constants.js
  Diff comments   View file @fbf4418
... ... @@ -32,6 +32,11 @@
32 32 notAuthenticated: 'auth-not-authenticated',
33 33 notAuthorized: 'auth-not-authorized'
34 34 })
  35 + .constant('STATUS_VOTE', {
  36 + SUCCESS: 0x1,
  37 + ERROR: 0x10,
  38 + LOADING: 0x100
  39 + })
35 40 .constant('USER_ROLES', {
36 41 all: '*',
37 42 admin: 'admin',
... ...
src/app/pages/programas/programa.html
  Diff comments   View file @fbf4418
... ... @@ -59,11 +59,11 @@
59 59 <div class="row">
60 60 <div class="col-xs-12" ng-if="pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
61 61 <h3 class="color-theme-fg">Propostas mais votadas</h3>
62   - <proposal-carousel proposals="pagePrograma.proposalsTopRated" canVote="true"></proposal-carousel>
  62 + <proposal-carousel proposals="pagePrograma.proposalsTopRated"></proposal-carousel>
63 63 </div>
64 64 <div class="col-xs-12" ng-if="pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
65 65 <h3 class="color-theme-fg">Propostas nesse programa</h3>
66   - <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
  66 + <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
67 67 </div>
68 68 <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
69 69 <h3>Programas sem propostas</h3>
... ...