Commit 5f1c6404347e28e7cc8bc002aed0b2d3cc6fbffb
1 parent
e9fc20c7
Exists in
master
and in
8 other branches
Improve redirect. Improve feedback behaviour.
Showing
15 changed files
with
103 additions
and
52 deletions
Show diff stats
src/app/components/article-box/article-box.directive.js
src/app/components/proposal-box/proposal-box.directive.js
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
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> | ... | ... |