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,7 +42,7 @@
42 ArticleBoxController.prototype.showContent = function () { 42 ArticleBoxController.prototype.showContent = function () {
43 var vm = this; 43 var vm = this;
44 44
45 - vm.$state.go('programa-conteudo', { 45 + vm.$state.go('programa', {
46 slug: vm.article.slug 46 slug: vm.article.slug
47 }, { 47 }, {
48 location: true 48 location: true
src/app/components/proposal-box/proposal-box.directive.js
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 ProposalBoxController.prototype.showContent = function (slug) { 31 ProposalBoxController.prototype.showContent = function (slug) {
32 var vm = this; 32 var vm = this;
33 33
34 - vm.$state.go('programa-conteudo', { 34 + vm.$state.go('programa', {
35 slug: slug, 35 slug: slug,
36 proposal_id: vm.proposal.id 36 proposal_id: vm.proposal.id
37 }, { 37 }, {
src/app/components/proposal-box/proposal-box.html
1 <div class="proposal-box" ng-class="[{'focus': vm.focus}, vm.category.slug]"> 1 <div class="proposal-box" ng-class="[{'focus': vm.focus}, vm.category.slug]">
2 <div class="proposal-box--top"> 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 <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div> 4 <div class="proposal-box--program color-theme-bg">{{::vm.topic.title}}</div>
5 </div> 5 </div>
6 <div class="proposal-box--middle"> 6 <div class="proposal-box--middle">
src/app/components/proposal-carousel/proposal-carousel.html
1 <div class="proposal-carousel"> 1 <div class="proposal-carousel">
2 <div ng-if="vm.proposals"> 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 <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals"> 4 <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals">
5 <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span> 5 <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span>
6 <span ng-show="vm.activeIndex === $index">Lugar</span> 6 <span ng-show="vm.activeIndex === $index">Lugar</span>
src/app/components/proposal-list/proposal-list.directive.js
@@ -105,7 +105,7 @@ @@ -105,7 +105,7 @@
105 ProposalListController.prototype.showContent = function (proposal) { 105 ProposalListController.prototype.showContent = function (proposal) {
106 var vm = this; 106 var vm = this;
107 107
108 - vm.$state.go('programa-conteudo', { 108 + vm.$state.go('programa', {
109 slug: proposal.parent.slug, 109 slug: proposal.parent.slug,
110 proposal_id: proposal.id 110 proposal_id: proposal.id
111 }, { 111 }, {
src/app/components/show-message/show-message.html
1 <div id="message" class="show-message"> 1 <div id="message" class="show-message">
2 <div class="row"> 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 </div> 8 </div>
15 </div> 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 </div> 14 </div>
17 </div> 15 </div>
src/app/components/show-message/show-message.scss
1 .show-message { 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,7 +75,7 @@
75 } 75 }
76 }) 76 })
77 .state('programas', { 77 .state('programas', {
78 - url: '/programas?tema&filtro', 78 + url: '/programas?tema&filtro&task',
79 reloadOnSearch: false, 79 reloadOnSearch: false,
80 ncyBreadcrumb: {label: 'Programas'}, 80 ncyBreadcrumb: {label: 'Programas'},
81 views: { 81 views: {
@@ -88,8 +88,8 @@ @@ -88,8 +88,8 @@
88 'footer': { templateUrl: 'app/pages/footer/footer.html' } 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 reloadOnSearch: false, 93 reloadOnSearch: false,
94 ncyBreadcrumb: { 94 ncyBreadcrumb: {
95 label: '{{$parent.$root.contentTitle}}', 95 label: '{{$parent.$root.contentTitle}}',
src/app/index.scss
@@ -246,7 +246,8 @@ body { @@ -246,7 +246,8 @@ body {
246 .#{$category} { 246 .#{$category} {
247 .color-theme-fg { color: $color; } 247 .color-theme-fg { color: $color; }
248 .color-theme-bg { background-color: $color;} 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 .contraste & .color-theme-fg { color: #fff; } 252 .contraste & .color-theme-fg { color: #fff; }
252 .contraste & .color-theme-bg { background-color: #000;} 253 .contraste & .color-theme-bg { background-color: #000;}
@@ -256,6 +257,8 @@ body { @@ -256,6 +257,8 @@ body {
256 $common-color: #5E739E; 257 $common-color: #5E739E;
257 .color-theme-common-fg {color: $common-color; } 258 .color-theme-common-fg {color: $common-color; }
258 .color-theme-common-bg {background-color: $common-color; } 259 .color-theme-common-bg {background-color: $common-color; }
  260 +.color-fg-white {color: #fff; }
  261 +.color-bg-gray {color: #ccc; }
259 262
260 // Contraste 263 // Contraste
261 .contraste { 264 .contraste {
src/app/layout.scss
@@ -123,6 +123,12 @@ @@ -123,6 +123,12 @@
123 margin-left: -2px; 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 .btn-submit { 132 .btn-submit {
127 background-color: $defaultblue; 133 background-color: $defaultblue;
128 color: #fff; 134 color: #fff;
src/app/pages/auth/auth.controller.js
@@ -6,13 +6,14 @@ @@ -6,13 +6,14 @@
6 .controller('AuthPageController', AuthPageController); 6 .controller('AuthPageController', AuthPageController);
7 7
8 /** @ngInject */ 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 var vm = this; 10 var vm = this;
11 11
12 vm.$scope = $scope; 12 vm.$scope = $scope;
13 vm.$rootScope = $rootScope; 13 vm.$rootScope = $rootScope;
14 vm.$location = $location; 14 vm.$location = $location;
15 vm.$state = $state; 15 vm.$state = $state;
  16 + vm.$timeout = $timeout;
16 vm.AUTH_EVENTS = AUTH_EVENTS; 17 vm.AUTH_EVENTS = AUTH_EVENTS;
17 vm.AuthService = AuthService; 18 vm.AuthService = AuthService;
18 vm.DialogaService = DialogaService; 19 vm.DialogaService = DialogaService;
@@ -33,11 +34,14 @@ @@ -33,11 +34,14 @@
33 vm.singup = {}; 34 vm.singup = {};
34 vm.terms = null; 35 vm.terms = null;
35 vm.loadingTerms = null; 36 vm.loadingTerms = null;
  37 + vm.delay = 3; // segundos
  38 + vm.startRedirect = null;
36 39
37 vm.search = vm.$location.search(); 40 vm.search = vm.$location.search();
38 var redirect = vm.search.redirect_uri || ''; 41 var redirect = vm.search.redirect_uri || '';
39 if(redirect && redirect.length > 0){ 42 if(redirect && redirect.length > 0){
40 vm.params = JSON.parse('{"' + decodeURI(redirect).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'); 43 vm.params = JSON.parse('{"' + decodeURI(redirect).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
  44 + vm.hasRedirect = true;
41 } 45 }
42 46
43 // attach events 47 // attach events
@@ -86,8 +90,11 @@ @@ -86,8 +90,11 @@
86 // 'Cadastro efetuado com sucesso.' 90 // 'Cadastro efetuado com sucesso.'
87 // 'Verifique seu email para confirmar o cadastro.' 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 }, function(response){ 98 }, function(response){
92 vm.$log.debug('register error.response', response); 99 vm.$log.debug('register error.response', response);
93 100
@@ -102,7 +109,12 @@ @@ -102,7 +109,12 @@
102 vm.AuthService.login(credentials).then(function(user) { 109 vm.AuthService.login(credentials).then(function(user) {
103 // handle view 110 // handle view
104 vm.$log.debug('user', user); 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 }, function() { 118 }, function() {
107 // handle view 119 // handle view
108 }); 120 });
@@ -111,10 +123,11 @@ @@ -111,10 +123,11 @@
111 AuthPageController.prototype.redirectBack = function(){ 123 AuthPageController.prototype.redirectBack = function(){
112 var vm = this; 124 var vm = this;
113 125
114 - if(!vm.params){ 126 + if(!vm.hasRedirect){
115 vm.$log.warn('No redirect params defined.'); 127 vm.$log.warn('No redirect params defined.');
116 return; 128 return;
117 } 129 }
  130 +
118 var state = vm.params.state; 131 var state = vm.params.state;
119 switch(state){ 132 switch(state){
120 case 'inicio': 133 case 'inicio':
@@ -123,6 +136,15 @@ @@ -123,6 +136,15 @@
123 task: vm.params.task 136 task: vm.params.task
124 }); 137 });
125 break; 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,8 +11,14 @@
11 <div ng-if="pageSignin.currentUser"> 11 <div ng-if="pageSignin.currentUser">
12 <div class="row"> 12 <div class="row">
13 <div class="col-sm-8 col-sm-offset-2"> 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 </div> 22 </div>
17 </div> 23 </div>
18 </div> 24 </div>
src/app/pages/mapa-do-site/mapa-do-site.html
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 <a ui-sref="programas({tema: slug})" ui-sref-opts="{location: true}" title="Acesse a lista de programas do {{theme.name}}">{{theme.name}}</a> 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 <ul> 25 <ul>
26 <li class="list-sitemap--item level-3" ng-repeat="program in theme.programs"> 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 </li> 28 </li>
29 </ul> 29 </ul>
30 </li> 30 </li>
src/app/pages/programas/programa.controller.js
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 31
32 vm.article = null; 32 vm.article = null;
33 vm.category = null; 33 vm.category = null;
  34 + vm.sendProposalRedirectURI = null;
34 vm.search = vm.$location.search(); 35 vm.search = vm.$location.search();
35 36
36 vm.error = false; 37 vm.error = false;
@@ -53,6 +54,7 @@ @@ -53,6 +54,7 @@
53 vm.DialogaService.getProgramBySlug(slug, function(article) { 54 vm.DialogaService.getProgramBySlug(slug, function(article) {
54 vm.article = article; 55 vm.article = article;
55 vm.category = vm.article.categories[0]; 56 vm.category = vm.article.categories[0];
  57 + vm.sendProposalRedirectURI = 'state=programa&task=send-proposal&slug=' + slug;
56 58
57 // update the breadcrumb 59 // update the breadcrumb
58 vm.$rootScope.contentTitle = vm.article.title; 60 vm.$rootScope.contentTitle = vm.article.title;
src/app/pages/programas/programa.html
@@ -97,13 +97,28 @@ @@ -97,13 +97,28 @@
97 97
98 <section id="section-proposal-form" class="proposal-extended-section" style="display:none;"> 98 <section id="section-proposal-form" class="proposal-extended-section" style="display:none;">
99 <div class="container"> 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 </div> 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 </div> 122 </div>
108 </div> 123 </div>
109 </section> 124 </section>