Commit d6d1119a694c3647ef3bf26e2a78f125f576e3cf

Authored by Rafael Diego
1 parent 1601c505

Refatoração do proposta

src/app/components/proposal-box/proposal-box.directive.js 0 → 100644
... ... @@ -0,0 +1,58 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('proposalBox', proposalBox);
  7 +
  8 + /** @ngInject */
  9 + function proposalBox() {
  10 +
  11 + /** @ngInject */
  12 + function ProposalBoxController($state, $log) {
  13 + $log.debug('ProposalBoxController');
  14 +
  15 + var vm = this;
  16 + vm.$state = $state;
  17 + vm.$log = $log;
  18 +
  19 + vm.init($log);
  20 + }
  21 +
  22 + ProposalBoxController.prototype.init = function () {
  23 +
  24 + var vm = this;
  25 +
  26 + if (!vm.vote) { vm.vote = false};
  27 +
  28 + };
  29 +
  30 + ProposalBoxController.prototype.showContent = function (program) {
  31 + var vm = this;
  32 +
  33 + vm.$state.go('programa-conteudo', {
  34 + slug: program.slug
  35 + }, {
  36 + location: true
  37 + });
  38 + };
  39 +
  40 + var directive = {
  41 + restrict: 'E',
  42 + templateUrl: 'app/components/proposal-box/proposal-box.html',
  43 + scope: {
  44 + proposal: '=',
  45 + topic: '=',
  46 + category: '=',
  47 + vote: '='
  48 + },
  49 + controller: ProposalBoxController,
  50 + controllerAs: 'vm',
  51 + bindToController: true
  52 + };
  53 +
  54 +
  55 + return directive;
  56 + }
  57 +
  58 +})();
... ...
src/app/components/proposal-box/proposal-box.html 0 → 100644
... ... @@ -0,0 +1,58 @@
  1 +<div class="proposal-box" ng-class="{'focus':vm.isFocused}">
  2 + <div class="proposal-box--top">
  3 + <div class="proposal-box--theme color-theme-bg-darker">{{::vm.category.name}}</div>
  4 + <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
  5 + </div>
  6 + <div class="proposal-box--middle">
  7 + <div class="proposal-box--content">
  8 + <div class="proposal-box--content-inner" ng-bind-html="vm.proposal.abstract"></div>
  9 + </div>
  10 + <div ng-if="vm.vote==false" class="proposal-box--join">
  11 + <button class="btn btn-link" ng-click="vm.showContent(vm.topic)">Participe</button>
  12 + </div>
  13 + <div ng-if="vm.vote==true"class="proposal-box--actions text-center">
  14 + <div class="row">
  15 + <div class="col-xs-4">
  16 + <div class="action vote_for">
  17 + <div class="icon-circle">
  18 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  19 + </div>
  20 + <div class="action-label">Apoio</div>
  21 + </div>
  22 + </div>
  23 + <div class="col-xs-4">
  24 + <div class="action next">
  25 + <div class="icon-circle">
  26 + <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
  27 + </div>
  28 + <div class="action-label">Pular</div>
  29 + </div>
  30 + </div>
  31 + <div class="col-xs-4">
  32 + <div class="action vote_against">
  33 + <div class="icon-circle">
  34 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  35 + </div>
  36 + <div class="action-label">Não Apoio</div>
  37 + </div>
  38 + </div>
  39 + </div>
  40 + </div>
  41 +</div>
  42 +<div class="proposal-box--bottom text-center">
  43 + <div class="proposal-box--share">
  44 + <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
  45 + <div class="dropdown">
  46 + <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
  47 + <social-share class="dropdown-menu dropdown-menu-right"></social-share>
  48 + </div>
  49 + </div>
  50 + <div class="proposal-box--ranking">
  51 + <div class="proposal-box--ranking-inner">
  52 + <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
  53 + <span>Colocação nos resultados:</span>
  54 + <span>{{::vm.proposal.ranking_position}}º</span>
  55 + </div>
  56 + </div>
  57 +</div>
  58 +</div>
... ...
src/app/components/proposal-box/proposal-box.scss 0 → 100644
... ... @@ -0,0 +1,77 @@
  1 +.proposal-box {
  2 + background-color: #f1f1f1;
  3 + border-radius: 5px;
  4 + // overflow: hidden;
  5 +
  6 + &.focus {
  7 + border: 7px solid #000;
  8 + border-radius: 12px;
  9 + border-color: #5E769C;
  10 + }
  11 +
  12 + &--top {
  13 + color: #fff;
  14 + font-weight: bold;
  15 +
  16 + border-top-left-radius: 5px;
  17 + border-top-right-radius: 5px;
  18 + overflow: hidden;
  19 + }
  20 +
  21 + &--middle {
  22 + padding: 30px;
  23 + }
  24 +
  25 + &--bottom {
  26 + border-bottom-left-radius: 5px;
  27 + border-bottom-right-radius: 5px;
  28 + // overflow: hidden;
  29 + border-bottom: 5px solid #dadada;
  30 + }
  31 +
  32 + &--theme {
  33 + padding: 10px 15px 5px 15px;
  34 + }
  35 +
  36 + &--program {
  37 + padding: 20px 15px;
  38 + }
  39 +
  40 + &--content {
  41 + padding-bottom: 20px;
  42 + }
  43 +
  44 + &--share {
  45 + padding: 15px 0;
  46 + background-color: #e8e8e8;
  47 + }
  48 +
  49 + &--ranking {
  50 + font-weight: bold;
  51 + padding: 10px 0;
  52 + background-color: #dadada;
  53 + }
  54 +
  55 + .action-label {
  56 + margin-top: 10px;
  57 + }
  58 +
  59 + .dropdown {
  60 + display: inline-block;
  61 + }
  62 + .dropdown-menu {
  63 + padding: 0;
  64 + margin: 0;
  65 + }
  66 +
  67 + .glyphicon {
  68 + color: #fff;
  69 + }
  70 + .icon-circle {
  71 + cursor: pointer;
  72 +
  73 + -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
  74 + -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
  75 + box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
  76 + }
  77 +}
... ...
src/app/components/proposal-related/proposal-related.directive.js
... ... @@ -1,54 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .directive('proposalRelated', proposalRelated);
7   -
8   - /** @ngInject */
9   - function proposalRelated() {
10   -
11   - /** @ngInject */
12   - function ProposalRelatedController($state, $log) {
13   - $log.debug('ProposalRelatedController');
14   -
15   - var vm = this;
16   - vm.$state = $state;
17   - vm.$log = $log;
18   -
19   - vm.init();
20   - }
21   -
22   - ProposalRelatedController.prototype.init = function () {
23   - // initial values
24   - // var vm = this;
25   - };
26   -
27   - ProposalRelatedController.prototype.showContent = function (program) {
28   - var vm = this;
29   -
30   - vm.$state.go('programa-conteudo', {
31   - slug: program.slug
32   - }, {
33   - location: true
34   - });
35   - };
36   -
37   - var directive = {
38   - restrict: 'E',
39   - templateUrl: 'app/components/proposal-related/proposal-related.html',
40   - scope: {
41   - proposal: '=',
42   - topic: '=',
43   - category: '='
44   - },
45   - controller: ProposalRelatedController,
46   - controllerAs: 'vm',
47   - bindToController: true
48   - };
49   -
50   -
51   - return directive;
52   - }
53   -
54   -})();
src/app/components/proposal-related/proposal-related.html
... ... @@ -1,58 +0,0 @@
1   -<div class="proposal-related" ng-class="{'focus':vm.isFocused}">
2   - <div class="proposal-related--top">
3   - <div class="proposal-related--theme color-theme-bg-darker">{{::vm.category.name}}</div>
4   - <div class="proposal-related--program color-theme-bg">{{::vm.topic.title}}</div>
5   - </div>
6   - <div class="proposal-related--middle">
7   - <div class="proposal-related--content">
8   - <div class="proposal-related--content-inner" ng-bind-html="vm.proposal.abstract"></div>
9   - </div>
10   - <div class="proposal-related--join">
11   - <button class="btn btn-link" ng-click="vm.showContent(vm.topic)">Participe</button>
12   - </div>
13   - <div class="proposal-related--actions text-center">
14   - <div class="row">
15   - <div class="col-xs-4">
16   - <div class="action vote_for">
17   - <div class="icon-circle">
18   - <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
19   - </div>
20   - <div class="action-label">Apoio</div>
21   - </div>
22   - </div>
23   - <div class="col-xs-4">
24   - <div class="action next">
25   - <div class="icon-circle">
26   - <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
27   - </div>
28   - <div class="action-label">Pular</div>
29   - </div>
30   - </div>
31   - <div class="col-xs-4">
32   - <div class="action vote_against">
33   - <div class="icon-circle">
34   - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
35   - </div>
36   - <div class="action-label">Não Apoio</div>
37   - </div>
38   - </div>
39   - </div>
40   - </div>
41   - </div>
42   - <div class="proposal-related--bottom text-center">
43   - <div class="proposal-related--share">
44   - <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
45   - <div class="dropdown">
46   - <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
47   - <social-share class="dropdown-menu dropdown-menu-right"></social-share>
48   - </div>
49   - </div>
50   - <div class="proposal-related--ranking">
51   - <div class="proposal-related--ranking-inner">
52   - <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
53   - <span>Colocação nos resultados:</span>
54   - <span>{{::vm.proposal.ranking_position}}º</span>
55   - </div>
56   - </div>
57   - </div>
58   -</div>
src/app/components/proposal-related/proposal-related.scss
... ... @@ -1,77 +0,0 @@
1   -.proposal-related {
2   - background-color: #f1f1f1;
3   - border-radius: 5px;
4   - // overflow: hidden;
5   -
6   - &.focus {
7   - border: 7px solid #000;
8   - border-radius: 12px;
9   - border-color: #5E769C;
10   - }
11   -
12   - &--top {
13   - color: #fff;
14   - font-weight: bold;
15   -
16   - border-top-left-radius: 5px;
17   - border-top-right-radius: 5px;
18   - overflow: hidden;
19   - }
20   -
21   - &--middle {
22   - padding: 30px;
23   - }
24   -
25   - &--bottom {
26   - border-bottom-left-radius: 5px;
27   - border-bottom-right-radius: 5px;
28   - // overflow: hidden;
29   - border-bottom: 5px solid #dadada;
30   - }
31   -
32   - &--theme {
33   - padding: 10px 15px 5px 15px;
34   - }
35   -
36   - &--program {
37   - padding: 20px 15px;
38   - }
39   -
40   - &--content {
41   - padding-bottom: 20px;
42   - }
43   -
44   - &--share {
45   - padding: 15px 0;
46   - background-color: #e8e8e8;
47   - }
48   -
49   - &--ranking {
50   - font-weight: bold;
51   - padding: 10px 0;
52   - background-color: #dadada;
53   - }
54   -
55   - .action-label {
56   - margin-top: 10px;
57   - }
58   -
59   - .dropdown {
60   - display: inline-block;
61   - }
62   - .dropdown-menu {
63   - padding: 0;
64   - margin: 0;
65   - }
66   -
67   - .glyphicon {
68   - color: #fff;
69   - }
70   - .icon-circle {
71   - cursor: pointer;
72   -
73   - -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
74   - -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
75   - box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
76   - }
77   -}
src/app/pages/auth/error-messages.html
... ... @@ -1,6 +0,0 @@
1   -<div class="error-message">
2   - <div ng-message="required" >Ops, o campo é obrigatório.</div>
3   - <div ng-message="minlength">O campo deve ser maior.</div>
4   - <div ng-message="maxlength">O campo deve ser menor</div>
5   - <div ng-message="email">O endereço de e-mail deve ser válido</div>
6   -</div>
7 0 \ No newline at end of file
src/app/pages/geral/error-messages.html
... ... @@ -1,6 +0,0 @@
1   -<div class="error-message">
2   - <div ng-message="required" >Ops, o campo é obrigatório.</div>
3   - <div ng-message="minlength">O campo deve ser maior.</div>
4   - <div ng-message="maxlength">O campo deve ser menor</div>
5   - <div ng-message="email">O endereço de e-mail deve ser válido</div>
6   -</div>
7 0 \ No newline at end of file
src/app/pages/programas/programa.html
... ... @@ -60,11 +60,11 @@
60 60 <div class="row">
61 61 <div class="col-xs-12" ng-if="pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.length > 0">
62 62 <h3 class="color-theme-fg">Propostas mais votadas</h3>
63   - <proposal-carousel proposals="pageProgramaContent.proposalsTopRated"></proposal-carousel>
  63 + <proposal-carousel proposals="pageProgramaContent.proposalsTopRated" canVote="true"></proposal-carousel>
64 64 </div>
65 65 <div class="col-xs-12" ng-if="pageProgramaContent.randomProposal">
66 66 <h3 class="color-theme-fg">Propostas nesse programa</h3>
67   - <proposal-related proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category"></proposal-related>
  67 + <proposal-box proposal="pageProgramaContent.randomProposal" topic="pageProgramaContent.article" category="pageProgramaContent.category" vote="false" ></proposal-box>
68 68 </div>
69 69 <div class="col-xs-12" ng-if="!pageProgramaContent.randomProposal && !(pageProgramaContent.proposalsTopRated && pageProgramaContent.proposalsTopRated.length > 0)">
70 70 <h3>Programas sem propostas</h3>
... ...
src/assets/images/icons/sprite.png 0 → 100644

107 KB