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
@@ -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> |