Commit 5f1c6404347e28e7cc8bc002aed0b2d3cc6fbffb

Authored by Leonardo Merlin
1 parent e9fc20c7

Improve redirect. Improve feedback behaviour.

src/app/components/article-box/article-box.directive.js
... ... @@ -42,7 +42,7 @@
42 42 ArticleBoxController.prototype.showContent = function () {
43 43 var vm = this;
44 44  
45   - vm.$state.go('programa-conteudo', {
  45 + vm.$state.go('programa', {
46 46 slug: vm.article.slug
47 47 }, {
48 48 location: true
... ...
src/app/components/proposal-box/proposal-box.directive.js
... ... @@ -31,7 +31,7 @@
31 31 ProposalBoxController.prototype.showContent = function (slug) {
32 32 var vm = this;
33 33  
34   - vm.$state.go('programa-conteudo', {
  34 + vm.$state.go('programa', {
35 35 slug: slug,
36 36 proposal_id: vm.proposal.id
37 37 }, {
... ...
src/app/components/proposal-box/proposal-box.html
1 1 <div class="proposal-box" ng-class="[{'focus': vm.focus}, vm.category.slug]">
2 2 <div class="proposal-box--top">
3   - <div class="proposal-box--theme color-theme-bg-darker">{{::vm.category.name}}</div>
  3 + <div class="proposal-box--theme color-theme-bg-complementar-2">{{::vm.category.name}}</div>
4 4 <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
5 5 </div>
6 6 <div class="proposal-box--middle">
... ...
src/app/components/proposal-carousel/proposal-carousel.html
1 1 <div class="proposal-carousel">
2 2 <div ng-if="vm.proposals">
3   - <div class="proposal-carousel-top color-theme-bg-darker">
  3 + <div class="proposal-carousel-top color-theme-bg-complementar-2">
4 4 <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals">
5 5 <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
6 6 <span ng-show="vm.activeIndex === $index">Lugar</span>
... ...
src/app/components/proposal-list/proposal-list.directive.js
... ... @@ -105,7 +105,7 @@
105 105 ProposalListController.prototype.showContent = function (proposal) {
106 106 var vm = this;
107 107  
108   - vm.$state.go('programa-conteudo', {
  108 + vm.$state.go('programa', {
109 109 slug: proposal.parent.slug,
110 110 proposal_id: proposal.id
111 111 }, {
... ...
src/app/components/show-message/show-message.html
1 1 <div id="message" class="show-message">
2 2 <div class="row">
3   - <div class="div-center">
4   - <div class="col-sm-2 col-sm-offset-2 message-border {{ ::vm.type }}">
5   - <span class="glyphicon glyphicon-ok icon-white" aria-hidden="true"></span>
6   - </div>
7   - </div>
8   - <div class="col-sm-7 div-mensagem">
9   - <div class="row">
10   - <h3>{{ ::vm.title }}</h3>
11   - </div>
12   - <div class="row">
13   - <h5>{{ ::vm.message }}</h5>
  3 + <div class="col-sm-2 col-sm-offset-2 message-icon-wrapper text-right text-center-sm">
  4 + <div class="message-icon text-center color-fg-white" ng-class="[vm.type]">
  5 + <span ng-if="vm.type === 'success'" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  6 + <span ng-if="vm.type === 'alert'" class="glyphicon glyphicon-alert" aria-hidden="true"></span>
  7 + <span ng-if="vm.type === 'error'" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
14 8 </div>
15 9 </div>
  10 + <div class="col-sm-8 message-content text-center-sm">
  11 + <h3>{{ ::vm.title }}</h3>
  12 + <p>{{ ::vm.message }}</p>
  13 + </div>
16 14 </div>
17 15 </div>
... ...
src/app/components/show-message/show-message.scss
1 1 .show-message {
2 2  
3   - .message-border {
4   - border-radius: 40px;
5   - padding: 30px 7px;
6   - width: 80px;
7   - height: 80px;
8   - display: inline-block;
9   - }
  3 + .message-icon {
  4 + background-color: #ccc;
  5 + border-radius: 100%;
  6 + padding: 20px 7px;
  7 + width: 80px;
  8 + height: 80px;
  9 + display: inline-block;
10 10  
11   - .success {
12   - background-color: #8AB34D;
13   - }
  11 + font-size: 26px;
14 12  
15   - .error {
16   - background-color: #C93E55;
17   - }
  13 + &.alert {
  14 + background-color: #EEB453;
  15 + }
18 16  
19   - .div-center {
20   - text-align: center;
21   - }
  17 + &.success {
  18 + background-color: #8AB34D;
  19 + }
22 20  
23   - .div-mensagem {
24   - margin-left: 30px;
  21 + &.error {
  22 + background-color: #C93E55;
  23 + }
25 24 }
26 25 }
... ...
src/app/index.route.js
... ... @@ -75,7 +75,7 @@
75 75 }
76 76 })
77 77 .state('programas', {
78   - url: '/programas?tema&filtro',
  78 + url: '/programas?tema&filtro&task',
79 79 reloadOnSearch: false,
80 80 ncyBreadcrumb: {label: 'Programas'},
81 81 views: {
... ... @@ -88,8 +88,8 @@
88 88 'footer': { templateUrl: 'app/pages/footer/footer.html' }
89 89 }
90 90 })
91   - .state('programa-conteudo', {
92   - url: '/programa/:slug?proposal_id',
  91 + .state('programa', {
  92 + url: '/programa/:slug?proposal_id&task',
93 93 reloadOnSearch: false,
94 94 ncyBreadcrumb: {
95 95 label: '{{$parent.$root.contentTitle}}',
... ...
src/app/index.scss
... ... @@ -246,7 +246,8 @@ body {
246 246 .#{$category} {
247 247 .color-theme-fg { color: $color; }
248 248 .color-theme-bg { background-color: $color;}
249   - .color-theme-bg-darker { background-color: darken($color, 10%);}
  249 + .color-theme-bg-complementar-1 { background-color: lighten($color, 10%);}
  250 + .color-theme-bg-complementar-2 { background-color: darken($color, 10%);}
250 251  
251 252 .contraste & .color-theme-fg { color: #fff; }
252 253 .contraste & .color-theme-bg { background-color: #000;}
... ... @@ -256,6 +257,8 @@ body {
256 257 $common-color: #5E739E;
257 258 .color-theme-common-fg {color: $common-color; }
258 259 .color-theme-common-bg {background-color: $common-color; }
  260 +.color-fg-white {color: #fff; }
  261 +.color-bg-gray {color: #ccc; }
259 262  
260 263 // Contraste
261 264 .contraste {
... ...
src/app/layout.scss
... ... @@ -123,6 +123,12 @@
123 123 margin-left: -2px;
124 124 }
125 125  
  126 +.text-center-sm {
  127 + @media screen and (max-width: $screen-sm) {
  128 + text-align: center;
  129 + }
  130 +}
  131 +
126 132 .btn-submit {
127 133 background-color: $defaultblue;
128 134 color: #fff;
... ...
src/app/pages/auth/auth.controller.js
... ... @@ -6,13 +6,14 @@
6 6 .controller('AuthPageController', AuthPageController);
7 7  
8 8 /** @ngInject */
9   - function AuthPageController($scope, $rootScope, $location, $state, AUTH_EVENTS, AuthService, DialogaService, Session, $log) {
  9 + function AuthPageController($scope, $rootScope, $location, $state, $timeout, AUTH_EVENTS, AuthService, DialogaService, Session, $log) {
10 10 var vm = this;
11 11  
12 12 vm.$scope = $scope;
13 13 vm.$rootScope = $rootScope;
14 14 vm.$location = $location;
15 15 vm.$state = $state;
  16 + vm.$timeout = $timeout;
16 17 vm.AUTH_EVENTS = AUTH_EVENTS;
17 18 vm.AuthService = AuthService;
18 19 vm.DialogaService = DialogaService;
... ... @@ -33,11 +34,14 @@
33 34 vm.singup = {};
34 35 vm.terms = null;
35 36 vm.loadingTerms = null;
  37 + vm.delay = 3; // segundos
  38 + vm.startRedirect = null;
36 39  
37 40 vm.search = vm.$location.search();
38 41 var redirect = vm.search.redirect_uri || '';
39 42 if(redirect && redirect.length > 0){
40 43 vm.params = JSON.parse('{"' + decodeURI(redirect).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
  44 + vm.hasRedirect = true;
41 45 }
42 46  
43 47 // attach events
... ... @@ -86,8 +90,11 @@
86 90 // 'Cadastro efetuado com sucesso.'
87 91 // 'Verifique seu email para confirmar o cadastro.'
88 92  
89   - // TODO: show messagens and redirect timeout
90   - vm.redirectBack();
  93 + vm.startRedirect = true;
  94 + vm.$timeout(function(){
  95 + vm.redirectBack();
  96 + vm.startRedirect = false;
  97 + }, vm.delay * 1000);
91 98 }, function(response){
92 99 vm.$log.debug('register error.response', response);
93 100  
... ... @@ -102,7 +109,12 @@
102 109 vm.AuthService.login(credentials).then(function(user) {
103 110 // handle view
104 111 vm.$log.debug('user', user);
105   - vm.redirectBack();
  112 +
  113 + vm.startRedirect = true;
  114 + vm.$timeout(function(){
  115 + vm.redirectBack();
  116 + vm.startRedirect = false;
  117 + }, vm.delay * 1000);
106 118 }, function() {
107 119 // handle view
108 120 });
... ... @@ -111,10 +123,11 @@
111 123 AuthPageController.prototype.redirectBack = function(){
112 124 var vm = this;
113 125  
114   - if(!vm.params){
  126 + if(!vm.hasRedirect){
115 127 vm.$log.warn('No redirect params defined.');
116 128 return;
117 129 }
  130 +
118 131 var state = vm.params.state;
119 132 switch(state){
120 133 case 'inicio':
... ... @@ -123,6 +136,15 @@
123 136 task: vm.params.task
124 137 });
125 138 break;
  139 + case 'programa':
  140 + vm.$state.go(state, {
  141 + slug: vm.params.slug,
  142 + task: vm.params.task
  143 + });
  144 + break;
  145 + default:
  146 + vm.$log.debug('State not handled yet:', state);
  147 + break;
126 148 }
127 149 }
128 150  
... ...
src/app/pages/auth/signin.html
... ... @@ -11,8 +11,14 @@
11 11 <div ng-if="pageSignin.currentUser">
12 12 <div class="row">
13 13 <div class="col-sm-8 col-sm-offset-2">
14   - <h3>Você está logado!</h3>
15   - <button type="button" ng-click="pageSignin.onClickLogout()" class="btn btn-primary">Sair</button>
  14 +
  15 + <div>
  16 + <h3>Você está logado!</h3>
  17 + <div ng-if="vm.hasRedirect && vm.startRedirect">
  18 + Você será redirecionado em menos de <b>3 segundos</b>....
  19 + </div>
  20 + <button type="button" ng-click="pageSignin.onClickLogout()" class="btn btn-primary">Sair</button>
  21 + </div>
16 22 </div>
17 23 </div>
18 24 </div>
... ...
src/app/pages/mapa-do-site/mapa-do-site.html
... ... @@ -24,7 +24,7 @@
24 24 <a ui-sref="programas({tema: slug})" ui-sref-opts="{location: true}" title="Acesse a lista de programas do {{theme.name}}">{{theme.name}}</a>
25 25 <ul>
26 26 <li class="list-sitemap--item level-3" ng-repeat="program in theme.programs">
27   - <a ui-sref="programa-conteudo({slug: program.slug})" ui-sref-opts="{location: true}" title="Acesse o programa {{::program.title}}">{{::program.title}}</a>
  27 + <a ui-sref="programa({slug: program.slug})" ui-sref-opts="{location: true}" title="Acesse o programa {{::program.title}}">{{::program.title}}</a>
28 28 </li>
29 29 </ul>
30 30 </li>
... ...
src/app/pages/programas/programa.controller.js
... ... @@ -31,6 +31,7 @@
31 31  
32 32 vm.article = null;
33 33 vm.category = null;
  34 + vm.sendProposalRedirectURI = null;
34 35 vm.search = vm.$location.search();
35 36  
36 37 vm.error = false;
... ... @@ -53,6 +54,7 @@
53 54 vm.DialogaService.getProgramBySlug(slug, function(article) {
54 55 vm.article = article;
55 56 vm.category = vm.article.categories[0];
  57 + vm.sendProposalRedirectURI = 'state=programa&task=send-proposal&slug=' + slug;
56 58  
57 59 // update the breadcrumb
58 60 vm.$rootScope.contentTitle = vm.article.title;
... ...
src/app/pages/programas/programa.html
... ... @@ -97,13 +97,28 @@
97 97  
98 98 <section id="section-proposal-form" class="proposal-extended-section" style="display:none;">
99 99 <div class="container">
100   - <div class="proposal-extended-section-header">
101   - <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalForm()">
102   - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
103   - </button>
  100 + <div ng-if="!pagePrograma.$rootScope.currentUser">
  101 + <show-message
  102 + type="'alert'"
  103 + title="'Você não está logado!'"
  104 + message="'Você precisa estar logado para enviar uma proposta.'"
  105 + ></show-message>
  106 + <div class="row">
  107 + <div class="col-sm-4"></div>
  108 + <div class="col-sm-8 text-center-sm">
  109 + <a ui-sref="entrar({redirect_uri: pagePrograma.sendProposalRedirectURI})">Clique aqui para ir para a página de login.</a>
  110 + </div>
  111 + </div>
104 112 </div>
105   - <div class="proposal-extended-section-content">
106   - <cadastro-proposta program="pagePrograma.article"></cadastro-proposta>
  113 + <div ng-if="pagePrograma.$rootScope.currentUser">
  114 + <div class="proposal-extended-section-header">
  115 + <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalForm()">
  116 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  117 + </button>
  118 + </div>
  119 + <div class="proposal-extended-section-content">
  120 + <cadastro-proposta program="pagePrograma.article"></cadastro-proposta>
  121 + </div>
107 122 </div>
108 123 </div>
109 124 </section>
... ...