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