Improve icons

Leonardo Merlin
1 parent fbf44189
Showing 7 changed files with 105 additions and 52 deletions Show diff stats
src/app/components/proposal-box/proposal-box.directive.js
src/app/components/proposal-box/proposal-box.html
src/app/components/proposal-box/proposal-box.scss
src/app/index.constants.js
src/app/index.scss
src/app/pages/auth/auth.controller.js
src/app/pages/programas/programa.controller.js
@@ -9,14 +9,15 @@
   function proposalBox() {
     /** @ngInject */
-    function ProposalBoxController($scope, $state, STATUS_VOTE, $log) {
+    function ProposalBoxController($scope, $state, VOTE_STATUS, VOTE_OPTIONS, $log) {
       $log.debug('ProposalBoxController');
       var vm = this;
       vm.$scope = $scope;
       vm.$state = $state;
+      vm.VOTE_STATUS = VOTE_STATUS;
+      vm.VOTE_OPTIONS = VOTE_OPTIONS;
       vm.$log = $log;
-      vm.STATUS_VOTE = STATUS_VOTE;
       vm.init();
       vm.addListeners();
@@ -34,13 +35,15 @@
     ProposalBoxController.prototype.addListeners = function () {
       var vm = this;
-      vm.$scope.$on('proposal-vote:success', function(e, data){
-        vm.STATE = vm.STATUS_VOTE.SUCCESS;
-        vm.message = data.message;
-      });
-
-      vm.$scope.$on('proposal-vote:error', function(e, data){
-        vm.STATE = vm.STATUS_VOTE.ERROR;
+      vm.$scope.$on('proposal-box:vote-response', function(e, data){
+        if(data.success) {
+          vm.STATE = vm.VOTE_STATUS.SUCCESS;
+        }
+        
+        if(data.error) {
+          vm.STATE = vm.VOTE_STATUS.ERROR;
+          
+        }
         vm.message = data.message;
       });
     };
@@ -59,24 +62,33 @@
     ProposalBoxController.prototype.voteUp = function () {
       var vm = this;
-      vm.STATE = vm.STATUS_VOTE.LOADING;
-      vm.$scope.$emit('proposal-vote:voteUp', vm.proposal.id);
+      vm.STATE = vm.VOTE_STATUS.LOADING;
+      vm.$scope.$emit('proposal-box:vote', {
+        OPTION: vm.VOTE_OPTIONS.UP,
+        proposal_id: vm.proposal.id
+      });
       vm.$log.debug('Sending vote');
     };
     ProposalBoxController.prototype.voteDown = function () {
       var vm = this;
-      vm.STATE = vm.STATUS_VOTE.LOADING;
-      vm.$scope.$emit('proposal-vote:voteDown', vm.proposal.id);
+      vm.STATE = vm.VOTE_STATUS.LOADING;
+      vm.$scope.$emit('proposal-box:vote', {
+        OPTION: vm.VOTE_OPTIONS.DOWN,
+        proposal_id: vm.proposal.id
+      });
       vm.$log.debug('Sending vote');
     };
-    ProposalBoxController.prototype.next = function () {
+    ProposalBoxController.prototype.skip = function () {
       var vm = this;
-      vm.STATE = vm.STATUS_VOTE.LOADING;
-      vm.$scope.$emit('proposal-vote:next', vm.proposal.id);
+      vm.STATE = vm.VOTE_STATUS.LOADING;
+      vm.$scope.$emit('proposal-box:vote', {
+        OPTION: vm.VOTE_OPTIONS.SKIP,
+        proposal_id: vm.proposal.id
+      });
       vm.$log.debug('Sending vote');
     };
-<div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.STATUS_VOTE.LOADING) )}, vm.category.slug]">
-  <div ng-show="(vm.STATE === vm.STATUS_VOTE.SUCCESS) || (vm.STATE === vm.STATUS_VOTE.ERROR)">
+<div class="proposal-box" ng-class="[{'focus': (vm.focus || (vm.STATE === vm.VOTE_STATUS.LOADING) )}, vm.category.slug]">
+  <div ng-show="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)">
     FEEDBACK
   </div>
-  <div ng-hide="(vm.STATE === vm.STATUS_VOTE.SUCCESS) || (vm.STATE === vm.STATUS_VOTE.ERROR)">
-    <div ng-show="vm.STATE === vm.STATUS_VOTE.LOADING">
+  <div ng-hide="(vm.STATE === vm.VOTE_STATUS.SUCCESS) || (vm.STATE === vm.VOTE_STATUS.ERROR)">
+    <div ng-show="vm.STATE === vm.VOTE_STATUS.LOADING">
       <div class="proposal-loading">
         <div class="shadow"></div>
         <div class="text">
@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="col-xs-4">
-          <div class="action next" ng-click="vm.next()">
+          <div class="action skip" ng-click="vm.skip()">
             <div class="icon-circle">
               <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
             </div>
@@ -115,8 +115,25 @@
 	.icon-circle {
 		cursor: pointer;
-		-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
-		-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
-		box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
+		-webkit-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
+		-moz-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
+		box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
+
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+
+        &:hover {
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            box-shadow: none;
+        }
+
+        &:active,
+        &:focus {
+            -webkit-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
+            -moz-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
+            box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
+        }
 	}
 }
@@ -5,8 +5,8 @@
   angular
     .module('dialoga')
     .constant('PATH', {
-      host: 'http://hom.dialoga.gov.br',
-      image: 'http://hom.login.dialoga.gov.br'
+      host: 'http://dialoga.gov.br',
+      image: 'http://login.dialoga.gov.br'
     })
     .constant('API', {
       token: null,
@@ -32,11 +32,16 @@
       notAuthenticated: 'auth-not-authenticated',
       notAuthorized: 'auth-not-authorized'
     })
-    .constant('STATUS_VOTE', {
+    .constant('VOTE_STATUS', {
       SUCCESS: 0x1,
       ERROR: 0x10,
       LOADING: 0x100
     })
+    .constant('VOTE_OPTIONS', {
+      UP: 0x1,
+      DOWN: 0x10,
+      SKIP: 0x100
+    })
     .constant('USER_ROLES', {
       all: '*',
       admin: 'admin',
@@ -217,19 +217,34 @@ body {
     }
     .vote_for &,
-    .next &,
+    .skip &,
     .vote_against & {
         padding-top: 12px;
     }
     .vote_for & {
         background-color: #4AC97A;
+
+        &:hover { background-color: lighten(#4AC97A, 10%); }
+        
+        &:active,
+        &:focus { background-color: darken(#4AC97A, 10%)}
     }
-    .next & {
+    .skip & {
         background-color: #EEB453;
+
+        &:hover { background-color: lighten(#EEB453, 10%); }
+        
+        &:active,
+        &:focus { background-color: darken(#EEB453, 10%)}
     }
     .vote_against & {
         background-color: #EC4C68;
+
+        &:hover { background-color: lighten(#EC4C68, 10%); }
+        
+        &:active,
+        &:focus { background-color: darken(#EC4C68, 10%)}
     }
 }
-(function () {
+(function() {
   'use strict';
   angular
@@ -41,7 +41,7 @@
     vm.search = vm.$location.search();
     var redirect = vm.search.redirect_uri || '';
-    if(redirect && redirect.length > 0){
+    if (redirect && redirect.length > 0) {
       vm.params = JSON.parse('{"' + decodeURI(redirect).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
       vm.hasRedirect = true;
     }
@@ -49,13 +49,13 @@
     // attach events
     vm.currentUser = vm.Session.getCurrentUser();
-      // handle login
-    vm.$scope.$on(vm.AUTH_EVENTS.loginSuccess, function () {
+    // handle login
+    vm.$scope.$on(vm.AUTH_EVENTS.loginSuccess, function() {
       vm.currentUser = vm.Session.getCurrentUser();
     });
     // handle logout
-    vm.$scope.$on(vm.AUTH_EVENTS.logoutSuccess, function () {
+    vm.$scope.$on(vm.AUTH_EVENTS.logoutSuccess, function() {
       vm.currentUser = vm.Session.getCurrentUser();
     });
   };
@@ -65,30 +65,30 @@
     // load terms
     vm.loadingTerms = true;
-    vm.DialogaService.getTerms(function(data){
+    vm.DialogaService.getTerms(function(data) {
       vm.loadingTerms = false;
       vm.terms = data.article;
-    }, function(error){
+    }, function(error) {
       // vm.$log.debug('handleSuccess.error', error);
       vm.loadingTerms = false;
       vm.error = error;
     });
   };
-  AuthPageController.prototype.attachListeners = function () {
+  AuthPageController.prototype.attachListeners = function() {
     var vm = this;
-    vm.$scope.$on('oauthClientPluginResult', function(event, response){
+    vm.$scope.$on('oauthClientPluginResult', function(event, response) {
       vm.$log.debug('response', response);
       // var logged_id = response.data.logged_id;
       // var private_token = response.data.private_token;
       // var user = response.data.user;
-      
+
     });
   };
-  AuthPageController.prototype.onClickLogout = function (){
+  AuthPageController.prototype.onClickLogout = function() {
     var vm = this;
     vm.AuthService.logout();
@@ -97,7 +97,7 @@
   AuthPageController.prototype.submitSigup = function(credentials) {
     var vm = this;
-    vm.AuthService.register(credentials).then(function(response){
+    vm.AuthService.register(credentials).then(function(response) {
       vm.$log.debug('register success.response', response);
       // TODO: mensagens de sucesso
@@ -105,7 +105,7 @@
       // 'Verifique seu email para confirmar o cadastro.'
       vm.successMessage = '<h3>Cadastro efetuado com sucesso.</h3>' + '<p>Verifique seu <b>email</b> para confirmar o cadastro.</p>';
       vm.redirectBack();
-    }, function(response){
+    }, function(response) {
       vm.$log.debug('register error.response', response);
       // TODO: mensagens de erro
@@ -127,29 +127,29 @@
     });
   };
-  AuthPageController.prototype.redirectBack = function(){
+  AuthPageController.prototype.redirectBack = function() {
     var vm = this;
-    if(!vm.hasRedirect){
+    if (!vm.hasRedirect) {
       vm.$log.warn('No redirect params defined.');
       return;
     }
     // start countdown
     vm.countdown = vm.delay;
-    (function countdown(){
-      vm.$timeout(function(){
+    (function countdown() {
+      vm.$timeout(function() {
         vm.countdown--;
         vm.$log.debug('vm.countdown', vm.countdown);
-        if(vm.countdown > 0){
+        if (vm.countdown > 0) {
           countdown();
         }
       }, 1000);
     })();
-    vm.$timeout(function(){
+    vm.$timeout(function() {
       var state = vm.params.state;
-      switch(state){
+      switch (state){
         case 'inicio':
           vm.$state.go(state, {
             event_id: vm.params.event_id,
@@ -169,15 +169,15 @@
     }, vm.delay * 1000);
   };
-  AuthPageController.prototype.authWithFacebook = function(){
+  AuthPageController.prototype.authWithFacebook = function() {
     var vm = this;
     var url = 'http://login.dialoga.gov.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1';
     vm.$window.oauthClientAction(url);
   };
-  AuthPageController.prototype.authWithGooglePlus = function(){
+  AuthPageController.prototype.authWithGooglePlus = function() {
     var vm = this;
-    
+
     var url = 'http://login.dialoga.gov.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=4';
     vm.$window.oauthClientAction(url);
   };
@@ -135,6 +135,10 @@
         vm.creatingProposal = false;
       });
     });
+
+    vm.$scope.$on('proposal-box:vote', function(event, params) {
+      
+    });
   };
   ProgramaPageController.prototype.showProposalsList = function() {
	@@ -115,8 +115,25 @@		@@ -115,8 +115,25 @@
115	.icon-circle {	115	.icon-circle {
116	cursor: pointer;	116	cursor: pointer;
117		117
118	- -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
119	- -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
120	- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);	118	+ -webkit-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
		119	+ -moz-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
		120	+ box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3);
		121	+
		122	+ -webkit-transition: all 0.3s ease;
		123	+ -moz-transition: all 0.3s ease;
		124	+ transition: all 0.3s ease;
		125	+
		126	+ &:hover {
		127	+ -webkit-box-shadow: none;
		128	+ -moz-box-shadow: none;
		129	+ box-shadow: none;
		130	+ }
		131	+
		132	+ &:active,
		133	+ &:focus {
		134	+ -webkit-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
		135	+ -moz-box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
		136	+ box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,0.3);
		137	+ }
121	}	138	}
122	}	139	}