Commit 1ee9cee7bf0f395a68bef48006605349bbcbac51

Authored by Rafael Diego
1 parent 8d1ca228

default

src/app/components/cadastro-proposta/cadastro-proposta.html
... ... @@ -20,21 +20,21 @@
20 20 <div class="row linha-proposta">
21 21 <div class="col-sm-8">
22 22 <span>Descrição da proposta*</span>
23   - <a tabindex="0" class="btn btn-link link-popover" role="button" data-toggle="popover" data-trigger="focus">?</a>
  23 + <div class="teste"><a tabindex="0" class="btn btn-link link-popover" role="button" data-toggle="popover" data-trigger="focus">?</a></div>
24 24 <textarea id="proposta" name="proposta" class="texto-proposta form-control"
25   - ng-class="{ 'has-error' : testeForm.proposta.$invalid && testeForm.proposta.$touched }"
26   - ng-model="proposta"
27   - required ng-maxlength="200" ></textarea>
28   - <form-messages field="testeForm.proposta" maxlength="'Ops, esse campo não pode ser maior que 200 caracteres.'"/>
  25 + ng-class="{ 'has-error' : testeForm.proposta.$invalid && testeForm.proposta.$touched }"
  26 + ng-model="proposta"
  27 + required ng-maxlength="200" ></textarea>
  28 + <validation-messages field="testeForm.proposta" maxlength="'Ops, esse campo não pode ser maior que 200 caracteres.'"/>
29 29 <span class="pull-left">*Dados obrigatórios</span>
30 30 <span class="pull-right">Máx. 200 caracteres</span>
31 31 </div>
32 32 </div>
33 33 </div>
34 34 <div class="form-group">
35   - <div class="col-sm-4">
36   - <button class="btn btn-lg btn-block btn-submit" type="submit">Enviar Proposta</button>
37   - </div>
  35 + <div class="col-sm-4">
  36 + <button class="btn btn-lg btn-block btn-submit" type="submit">Enviar Proposta</button>
38 37 </div>
39   - </form>
  38 + </div>
  39 +</form>
40 40 </div>
... ...
src/app/components/cadastro-proposta/cadastro-proposta.scss
1 1 .envio-proposta {
  2 +
2 3 .titulo-envio-proposta{
3 4 color: #2D7B66;
4 5 }
... ... @@ -37,15 +38,18 @@
37 38 display: none;
38 39 }
39 40  
40   - .btn-question {
41   - color: #484848;
42   - background-color: #fff;
43   - display: inline-block;
44   - text-align: center;
45   - width: 22px;
46   - height: 22px;
47   - margin-left: 10px;
48   - padding: 0;
49   - border-radius: 10px;
50   - }
  41 + .teste {
  42 + border-radius: 10px;
  43 + width: 20px;
  44 + height: 20px;
  45 + display: inline-block;
  46 + background-color: lightyellow;
  47 + }
  48 +
  49 + .link-popover {
  50 + font-size: 15px;
  51 + color: gray;
  52 + padding: 0px 7px;
  53 + border-style: none;
  54 + }
51 55 }
... ...
src/app/components/form-messages/form-messages.directive.js
... ... @@ -1,52 +0,0 @@
1   -(function() {
2   - 'use strict';
3   -
4   - angular
5   - .module('dialoga')
6   - .directive('formMessages', formMessages);
7   -
8   - /** @ngInject */
9   - function formMessages() {
10   -
11   - /** @ngInject */
12   - function FormMessagesController($log) {
13   - $log.debug('FormMessagesController');
14   -
15   - var vm = this;
16   - vm.$log = $log;
17   -
18   - vm.init();
19   -
20   - }
21   -
22   - FormMessagesController.prototype.init = function () {
23   - // async values
24   - var vm = this;
25   -
26   - if (!vm.required) {vm.required = "Ops, o campo é obrigatório."};
27   - if (!vm.minlength) {vm.minlength = "O campo deve ser maior."};
28   - if (!vm.maxlength) {vm.maxlength = "O campo deve ser menor"};
29   - if (!vm.email) {vm.email = "O endereço de e-mail deve ser válido"};
30   -
31   - };
32   -
33   - var directive = {
34   - restrict: 'E',
35   - templateUrl: 'app/components/form-messages/form-messages.html',
36   - scope: {
37   - field: '=',
38   - required: '=',
39   - minlength: '=',
40   - maxlength: '=',
41   - email: '='
42   - },
43   - controller: FormMessagesController,
44   - controllerAs: 'vm',
45   - bindToController: true
46   - };
47   -
48   - return directive;
49   - }
50   -
51   -})();
52   -
src/app/components/form-messages/form-messages.html
... ... @@ -1,10 +0,0 @@
1   -<div ng-show="vm.field.$touched">
2   - <div ng-messages="vm.field.$error">
3   - <div class="error-message">
4   - <div ng-message="required">{{vm.required}}</div>
5   - <div ng-message="minlength">{{vm.minlength}}</div>
6   - <div ng-message="maxlength">{{vm.maxlength}}</div>
7   - <div ng-message="email">{{vm.email}}</div>
8   - </div>
9   - </div>
10   -</div>
src/app/components/form-messages/form-messages.scss
src/app/components/show-message/message.html
... ... @@ -1,17 +0,0 @@
1   -<div id="message" class="show-message">
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>
14   - </div>
15   - </div>
16   - </div>
17   -</div>
src/app/components/show-message/show-message.directive.js
... ... @@ -18,7 +18,7 @@
18 18  
19 19 var directive = {
20 20 restrict: 'E',
21   - templateUrl: 'app/components/show-message/message.html',
  21 + templateUrl: 'app/components/show-message/show-message.html',
22 22 scope: {
23 23 type: '=',
24 24 title: '=',
... ...
src/app/components/show-message/show-message.html 0 → 100644
... ... @@ -0,0 +1,17 @@
  1 +<div id="message" class="show-message">
  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>
  14 + </div>
  15 + </div>
  16 + </div>
  17 +</div>
... ...
src/app/components/validation-messages/validation-messages.directive.js 0 → 100644
... ... @@ -0,0 +1,52 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('validationMessages', validationMessages);
  7 +
  8 + /** @ngInject */
  9 + function validationMessages() {
  10 +
  11 + /** @ngInject */
  12 + function validationMessagesController($log) {
  13 + $log.debug('validationMessagesController');
  14 +
  15 + var vm = this;
  16 + vm.$log = $log;
  17 +
  18 + vm.init();
  19 +
  20 + }
  21 +
  22 + validationMessagesController.prototype.init = function () {
  23 + // async values
  24 + var vm = this;
  25 +
  26 + if (!vm.required) {vm.required = "Ops, o campo é obrigatório."};
  27 + if (!vm.minlength) {vm.minlength = "O campo deve ser maior."};
  28 + if (!vm.maxlength) {vm.maxlength = "O campo deve ser menor"};
  29 + if (!vm.email) {vm.email = "O endereço de e-mail deve ser válido"};
  30 +
  31 + };
  32 +
  33 + var directive = {
  34 + restrict: 'E',
  35 + templateUrl: 'app/components/validation-messages/validation-messages.html',
  36 + scope: {
  37 + field: '=',
  38 + required: '=',
  39 + minlength: '=',
  40 + maxlength: '=',
  41 + email: '='
  42 + },
  43 + controller: validationMessagesController,
  44 + controllerAs: 'vm',
  45 + bindToController: true
  46 + };
  47 +
  48 + return directive;
  49 + }
  50 +
  51 +})();
  52 +
... ...
src/app/components/validation-messages/validation-messages.html 0 → 100644
... ... @@ -0,0 +1,10 @@
  1 +<div ng-show="vm.field.$touched">
  2 + <div ng-messages="vm.field.$error">
  3 + <div class="error-message">
  4 + <div ng-message="required">{{vm.required}}</div>
  5 + <div ng-message="minlength">{{vm.minlength}}</div>
  6 + <div ng-message="maxlength">{{vm.maxlength}}</div>
  7 + <div ng-message="email">{{vm.email}}</div>
  8 + </div>
  9 + </div>
  10 +</div>
... ...
src/app/components/validation-messages/validation-messages.scss 0 → 100644
... ... @@ -0,0 +1,3 @@
  1 +.error-message {
  2 + color: #ff4431
  3 +}
... ...
src/app/layout.scss
... ... @@ -120,10 +120,7 @@
120 120 border-width: 1px;
121 121 }
122 122  
123   -.error-message {
124   - color: #ff4431
125   -}
126   -
  123 +// Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
127 124 .modal-termos-uso{
128 125 &-header{
129 126 border-bottom: none;
... ... @@ -180,4 +177,4 @@
180 177 // border-radius: 10px;
181 178 // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
182 179 // background-color: black;
183   -// }
184 180 \ No newline at end of file
  181 +// }
... ...
src/app/pages/auth/auth.scss
... ... @@ -7,31 +7,33 @@
7 7 }
8 8  
9 9 .btn-social {
10   - color: #fff;
11   - font-weight: bold;
12   - padding: 15px 16px;
13   - font-size: 16px;
14   - white-space: normal;
  10 + color: #fff;
  11 + font-weight: bold;
  12 + padding: 15px 16px;
  13 + font-size: 16px;
  14 + white-space: normal;
15 15  
16   - &:hover,
17   - &:focus {color: #fff;}
  16 + &:hover,
  17 + &:focus {color: #fff;}
18 18  
19   - &.btn-facebook {
20   - background-color: #496AA0;
  19 + &.btn-facebook {
  20 + background-color: #496AA0;
21 21  
22   - &:hover,
23   - &:focus {background-color: #304373; }
24   - &:active {background-color: #33477a; }
25   - }
26   - &.btn-google-plus {
27   - background-color: #b92d25;
28   - &:hover,
29   - &:focus {background-color: #b12b23; }
30   - &:active {background-color: #b92d25; }
31   - }
32   - @media (max-width: 991px) {
33   - margin-bottom: 20px;
34   - }
  22 + &:hover,
  23 + &:focus {background-color: #304373; }
  24 + &:active {background-color: #33477a; }
  25 + }
  26 +
  27 + &.btn-google-plus {
  28 + background-color: #b92d25;
  29 + &:hover,
  30 + &:focus {background-color: #b12b23; }
  31 + &:active {background-color: #b92d25; }
  32 + }
  33 +
  34 + @media (max-width: 991px) {
  35 + margin-bottom: 20px;
  36 + }
35 37 }
36 38  
37 39 .btn {
... ... @@ -39,6 +41,7 @@
39 41 color: #fff;
40 42 }
41 43 }
  44 +
42 45 .btn-primary {
43 46 .contraste & {
44 47 background-color: #262626;
... ... @@ -47,66 +50,66 @@
47 50 }
48 51  
49 52 .glyphicon {
50   - &.icon-white {
51   - fill: white;
52   - }
  53 + &.icon-white {
  54 + fill: white;
  55 + }
53 56 }
54 57  
55 58 .border-social-icon {
56   - border-radius: 25px;
57   - padding: 7px 9px;
58   - width: 40px;
59   - height: 40px;
60   - display: inline-block;
61   -
62   - &.border-social-facebook {
63   - background: #547BBC;
64   - }
65   -
66   - &.border-social-googlePlus {
67   - background: #D44105;
68   - }
  59 + border-radius: 25px;
  60 + padding: 7px 9px;
  61 + width: 40px;
  62 + height: 40px;
  63 + display: inline-block;
  64 +
  65 + &.border-social-facebook {
  66 + background: #547BBC;
  67 + }
  68 +
  69 + &.border-social-googlePlus {
  70 + background: #D44105;
  71 + }
69 72 }
70 73  
71 74 .separator {
72   - border-top: 2px solid #d8d8d8;
73   - text-align: center;
74   - font-weight: bold;
75   - margin-top: 20px;
76   - margin-bottom: 35px;
77   -
78   - &:after {
79   - position: absolute;
80   - top: 4px;
81   - margin-left: -26px;
82   - font-size: 20px;
83   - line-height: 30px;
84   - padding: 0 0.25em;
85   - background: $gray;
  75 + border-top: 2px solid #d8d8d8;
  76 + text-align: center;
  77 + font-weight: bold;
  78 + margin-top: 20px;
  79 + margin-bottom: 35px;
  80 +
  81 + &:after {
  82 + position: absolute;
  83 + top: -15px;
  84 + margin-left: -26px;
  85 + font-size: 20px;
  86 + line-height: 30px;
  87 + padding: 0 0.25em;
  88 + background: $gray;
86 89  
87 90 .contraste & {
88   - background: #000;
  91 + background: #000;
89 92 }
90   - }
  93 + }
91 94  
92   - &.separator-or:after {
93   - content: "ou";
94   - left: 51%;
95   - }
  95 + &.separator-or:after {
  96 + content: "ou";
  97 + left: 50%;
  98 + margin-left: -17px;
96 99  
97   - &.separator-cadastro:after {
98   - content: "ou preencha o formulario";
99   - left: 31%;
100   - }
  100 + @media (min-width: 992px) {
  101 + top: 4px;
  102 + }
  103 + }
101 104  
102   - }
  105 + &.separator-cadastro:after {
  106 + content: "ou preencha o formulario";
  107 + left: 50%;
  108 + margin-left: -133px;
103 109  
104   - input[type="checkbox"] {
105   - display:inline-block;
106   - width:18px;
107   - height:18px;
108   - margin:-1px 4px 0 0;
109   - vertical-align:middle;
110   - cursor:pointer;
  110 + @media (min-width: 768px) {
  111 + top: 4px;
  112 + }
  113 + }
111 114 }
112 115 }
... ...
src/app/pages/auth/message.html
  1 +<!-- APENAS PARA TESTE DO SHOW MESSAGE E DO MODAL DE TERMOS DE USO -->
1 2 <section
2 3 role="main"
3 4 class="section-gray auth-content">
... ...
src/app/pages/auth/signin.html
... ... @@ -28,12 +28,13 @@
28 28 <div class="form-group">
29 29 <label for="inputLoginUsername">E-mail*</label>
30 30 <input type="email" id="inputLoginUsername" name="inputLoginUsername" class="form-control input-lg" ng-class="{ 'has-error' : loginForm.inputLoginUsername.$invalid && loginForm.inputLoginUsername.$touched }" ng-model="pageSignin.credentials.username" required/>
31   - <form-messages field="loginForm.inputLoginUsername"></show-message>
  31 + <!-- Diretiva validation-messages -->
  32 + <validation-messages field="loginForm.inputLoginUsername"/>
32 33 </div>
33 34 <div class="form-group">
34 35 <label for="inputLoginPassword">Senha*</label>
35 36 <input type="password" id="inputLoginPassword" name="inputLoginPassword" class="form-control input-lg" ng-class="{ 'has-error' : loginForm.inputLoginPassword.$invalid && loginForm.inputLoginPassword.$touched }" ng-model="pageSignin.credentials.password" required>
36   - <form-messages field="loginForm.inputLoginPassword" ></show-message>
  37 + <validation-messages field="loginForm.inputLoginPassword"/>
37 38 </div>
38 39 <div class="form-group">
39 40 <button class="btn btn-lg btn-block btn-submit" type="submit">Entrar</button>
... ... @@ -123,37 +124,26 @@
123 124 <label for="inputNome">Nome:</label>
124 125 <span class="pull-right">*Dados obrigatórios</span>
125 126 <input type="text" id="inputNome" name="inputNome" class="form-control input-lg" ng-class="{ 'has-error' : cadastroForm.inputNome.$invalid && cadastroForm.inputNome.$touched }" ng-model="nome" ng-minlength="" ng-maxlength="" required>
126   - <form-messages field="cadastroForm.inputNome" ></show-message>
127   - </div>
128   - <div class="form-group">
129   - <p>Descrição da proposta*</p>
130   - <textarea id="proposta" name="proposta" class="texto-proposta form-control" ng-class="{ 'has-error' : cadastroForm.proposta.$invalid && cadastroForm.proposta.$touched }" ng-model="vm.proposta" required ng-maxlength="200" ></textarea>
131   - <div ng-show="cadastroForm.proposta.$touched">
132   - <div ng-messages="cadastroForm.proposta.$error">
133   - <form-messages field="cadastroForm.proposta" ></show-message>
134   - </div>
135   - </div>
136   - <span class="pull-left">*Dados obrigatórios</span>
137   - <span class="pull-right">Máx. 200 caracteres</span>
  127 + <validation-messages field="cadastroForm.inputNome"/>
138 128 </div>
139 129 <div class="form-group">
140 130 <label for="inputEmail">E-mail*</label>
141 131 <input type="email" id="inputEmail" name="inputEmail" class="form-control input-lg" ng-class="{ 'has-error' : cadastroForm.inputEmail.$invalid && cadastroForm.inputEmail.$touched }" ng-model="email" ng-minlength="" ng-maxlength="" required>
142   - <form-messages field="cadastroForm.inputEmail" ></show-message>
  132 + <validation-messages field="cadastroForm.inputEmail"/>
143 133 </div>
144 134 <div class="row">
145 135 <div class="col-sm-6">
146 136 <div class="form-group">
147 137 <label for="inputPassword">Senha:</label>
148 138 <input type="password" id="inputPassword" name="inputPassword" class="form-control input-lg" ng-class="{ 'has-error' : cadastroForm.inputPassword.$invalid && cadastroForm.inputPassword.$touched }" ng-model="senha" ng-minlength="" ng-maxlength="" required>
149   - <form-messages field="cadastroForm.inputPassword" ></show-message>
  139 + <validation-messages field="cadastroForm.inputPassword"/>
150 140 </div>
151 141 </div>
152 142 <div class="col-sm-6">
153 143 <div class="form-group">
154 144 <label for="inputRepeatPassword">Confirmar Senha:</label>
155 145 <input type="password" id="inputRepeatPassword" name="inputRepeatPassword" class="form-control input-lg" ng-class="{ 'has-error' : cadastroForm.inputRepeatPassword.$invalid && cadastroForm.inputRepeatPassword.$touched }" ng-model="senhaRepetida" ng-minlength="" ng-maxlength="" required>
156   - <form-messages field="cadastroForm.inputRepeatPassword" ></show-message>
  146 + <validation-messages field="cadastroForm.inputRepeatPassword"/>
157 147 </div>
158 148 </div>
159 149 </div>
... ... @@ -170,7 +160,7 @@
170 160 <a href="">Termos de Uso</a>
171 161 e concordo com os mesmos*
172 162 </input>
173   - <form-messages field="cadastroForm.termosDeUso" ></show-message>
  163 + <validation-messages field="cadastroForm.termosDeUso"/>
174 164 </div>
175 165 <div class="form-group">
176 166 <span>Digite o texto da imagem</span>
... ...
src/app/pages/propostas/cadastro-proposta.html
  1 +<!-- APENAS PARA TESTE DO ENVIAR PROPOSTA -->
1 2 <div class="container">
2 3 <div class="row">
3 4 <div class="col-sm-12">
4   - <!-- <div ncy-breadcrumb></div> -->
5 5 </div>
6 6 </div>
7 7 </div>
8 8  
9   -<!-- <div class="container page--propostas">
10   - <h1>TODO: Home > Proposta</h1>
11   -</div> -->
12 9 <section class="section-gray auth-content ng-scope">
13 10 <div class="container">
14 11 <cadastro-proposta></cadastro-proposta>
15 12 </div>
16   -</section>
17 13 \ No newline at end of file
  14 +</section>
... ...