default

Rafael Diego
1 parent 8d1ca228
Showing 16 changed files with 193 additions and 198 deletions Show diff stats
src/app/components/cadastro-proposta/cadastro-proposta.html
src/app/components/cadastro-proposta/cadastro-proposta.scss
src/app/components/form-messages/form-messages.directive.js
src/app/components/form-messages/form-messages.html
src/app/components/form-messages/form-messages.scss
src/app/components/show-message/message.html
src/app/components/show-message/show-message.directive.js
src/app/components/show-message/show-message.html
src/app/components/validation-messages/validation-messages.directive.js
src/app/components/validation-messages/validation-messages.html
src/app/components/validation-messages/validation-messages.scss
src/app/layout.scss
src/app/pages/auth/auth.scss
src/app/pages/auth/message.html
src/app/pages/auth/signin.html
src/app/pages/propostas/cadastro-proposta.html
@@ -20,21 +20,21 @@
       <div class="row linha-proposta">
         <div class="col-sm-8">
           <span>Descrição da proposta*</span>
-              <a tabindex="0" class="btn btn-link link-popover" role="button" data-toggle="popover" data-trigger="focus">?</a>
+          <div class="teste"><a tabindex="0" class="btn btn-link link-popover" role="button" data-toggle="popover" data-trigger="focus">?</a></div>
           <textarea id="proposta" name="proposta" class="texto-proposta form-control"
-           ng-class="{ 'has-error' : testeForm.proposta.$invalid && testeForm.proposta.$touched }"
-           ng-model="proposta"
-           required ng-maxlength="200" ></textarea>
-           <form-messages field="testeForm.proposta" maxlength="'Ops, esse campo não pode ser maior que 200 caracteres.'"/>
+          ng-class="{ 'has-error' : testeForm.proposta.$invalid && testeForm.proposta.$touched }"
+          ng-model="proposta"
+          required ng-maxlength="200" ></textarea>
+          <validation-messages field="testeForm.proposta" maxlength="'Ops, esse campo não pode ser maior que 200 caracteres.'"/>
           <span class="pull-left">*Dados obrigatórios</span>
           <span class="pull-right">Máx. 200 caracteres</span>
         </div>
       </div>
     </div>
     <div class="form-group">
-       <div class="col-sm-4">
-        <button class="btn btn-lg btn-block btn-submit" type="submit">Enviar Proposta</button>
-      </div>
+     <div class="col-sm-4">
+      <button class="btn btn-lg btn-block btn-submit" type="submit">Enviar Proposta</button>
     </div>
-  </form>
+  </div>
+</form>
 </div>
 .envio-proposta {
+
     .titulo-envio-proposta{
         color: #2D7B66;
     }
@@ -37,15 +38,18 @@
         display: none;
     }
-    .btn-question {
-        color: #484848;
-        background-color: #fff;
-        display: inline-block;
-        text-align: center;
-        width: 22px;
-        height: 22px;
-        margin-left: 10px;
-        padding: 0;
-        border-radius: 10px;
-    }
+    .teste {
+      border-radius: 10px;
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      background-color: lightyellow;
+  }
+
+  .link-popover {
+      font-size: 15px;
+      color: gray;
+      padding: 0px 7px;
+      border-style: none;
+  }
 }
@@ -1,52 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-  .module('dialoga')
-  .directive('formMessages', formMessages);
-
-  /** @ngInject */
-  function formMessages() {
-
-    /** @ngInject */
-    function FormMessagesController($log) {
-      $log.debug('FormMessagesController');
-
-      var vm = this;
-      vm.$log = $log;
-
-      vm.init();
-
-    }
-
-    FormMessagesController.prototype.init = function () {
-      // async values
-      var vm = this;
-
-      if (!vm.required) {vm.required = "Ops, o campo é obrigatório."};
-      if (!vm.minlength) {vm.minlength = "O campo deve ser maior."};
-      if (!vm.maxlength) {vm.maxlength = "O campo deve ser menor"};
-      if (!vm.email) {vm.email = "O endereço de e-mail deve ser válido"};
-
-    };
-
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/form-messages/form-messages.html',
-      scope: {
-        field: '=',
-        required: '=',
-        minlength: '=',
-        maxlength: '=',
-        email: '='
-      },
-      controller: FormMessagesController,
-      controllerAs: 'vm',
-      bindToController: true
-    };
-
-    return directive;
-  }
-
-})();
-
@@ -1,10 +0,0 @@
-<div ng-show="vm.field.$touched">
-  <div ng-messages="vm.field.$error">
-    <div class="error-message">
-      <div ng-message="required">{{vm.required}}</div>
-      <div ng-message="minlength">{{vm.minlength}}</div>
-      <div ng-message="maxlength">{{vm.maxlength}}</div>
-      <div ng-message="email">{{vm.email}}</div>
-    </div>
-  </div>
-</div>
@@ -1,17 +0,0 @@
-<div id="message" class="show-message">
-  <div class="row">
-  <div class="div-center">
-    <div class="col-sm-2 col-sm-offset-2 message-border {{ ::vm.type }}">
-      <span class="glyphicon glyphicon-ok icon-white" aria-hidden="true"></span>
-    </div>
-  </div>
-    <div class="col-sm-7  div-mensagem">
-      <div class="row">
-        <h3>{{ ::vm.title }}</h3>
-      </div>
-      <div class="row">
-        <h5>{{ ::vm.message }}</h5>
-      </div>
-    </div>
-  </div>
-</div>
@@ -18,7 +18,7 @@
     var directive = {
       restrict: 'E',
-      templateUrl: 'app/components/show-message/message.html',
+      templateUrl: 'app/components/show-message/show-message.html',
       scope: {
         type: '=',
         title: '=',
@@ -0,0 +1,17 @@
+<div id="message" class="show-message">
+  <div class="row">
+  <div class="div-center">
+    <div class="col-sm-2 col-sm-offset-2 message-border {{ ::vm.type }}">
+      <span class="glyphicon glyphicon-ok icon-white" aria-hidden="true"></span>
+    </div>
+  </div>
+    <div class="col-sm-7  div-mensagem">
+      <div class="row">
+        <h3>{{ ::vm.title }}</h3>
+      </div>
+      <div class="row">
+        <h5>{{ ::vm.message }}</h5>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,52 @@
+(function() {
+  'use strict';
+
+  angular
+  .module('dialoga')
+  .directive('validationMessages', validationMessages);
+
+  /** @ngInject */
+  function validationMessages() {
+
+    /** @ngInject */
+    function validationMessagesController($log) {
+      $log.debug('validationMessagesController');
+
+      var vm = this;
+      vm.$log = $log;
+
+      vm.init();
+
+    }
+
+    validationMessagesController.prototype.init = function () {
+      // async values
+      var vm = this;
+
+      if (!vm.required) {vm.required = "Ops, o campo é obrigatório."};
+      if (!vm.minlength) {vm.minlength = "O campo deve ser maior."};
+      if (!vm.maxlength) {vm.maxlength = "O campo deve ser menor"};
+      if (!vm.email) {vm.email = "O endereço de e-mail deve ser válido"};
+
+    };
+
+    var directive = {
+      restrict: 'E',
+      templateUrl: 'app/components/validation-messages/validation-messages.html',
+      scope: {
+        field: '=',
+        required: '=',
+        minlength: '=',
+        maxlength: '=',
+        email: '='
+      },
+      controller: validationMessagesController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+  }
+
+})();
+
@@ -0,0 +1,10 @@
+<div ng-show="vm.field.$touched">
+  <div ng-messages="vm.field.$error">
+    <div class="error-message">
+      <div ng-message="required">{{vm.required}}</div>
+      <div ng-message="minlength">{{vm.minlength}}</div>
+      <div ng-message="maxlength">{{vm.maxlength}}</div>
+      <div ng-message="email">{{vm.email}}</div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,3 @@
+.error-message {
+    color: #ff4431
+}
@@ -120,10 +120,7 @@
     border-width: 1px;
 }
-.error-message {
-    color: #ff4431
-}
-
+// Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
 .modal-termos-uso{
   &-header{
     border-bottom: none;
@@ -180,4 +177,4 @@
 //     border-radius: 10px;
 //     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 //     background-color: black;
-// }
 \ No newline at end of file
+// }
@@ -7,31 +7,33 @@
     }
     .btn-social {
-      color: #fff;
-      font-weight: bold;
-      padding: 15px 16px;
-      font-size: 16px;
-      white-space: normal;
+        color: #fff;
+        font-weight: bold;
+        padding: 15px 16px;
+        font-size: 16px;
+        white-space: normal;
-      &:hover,
-      &:focus {color: #fff;}
+        &:hover,
+        &:focus {color: #fff;}
-      &.btn-facebook {
-        background-color: #496AA0;
+        &.btn-facebook {
+            background-color: #496AA0;
-        &:hover,
-        &:focus {background-color: #304373; }
-        &:active {background-color: #33477a; }
-      }
-      &.btn-google-plus {
-        background-color: #b92d25;
-        &:hover,
-        &:focus {background-color: #b12b23; }
-        &:active {background-color: #b92d25; }
-      }
-      @media (max-width: 991px) {
-        margin-bottom: 20px;
-      }
+            &:hover,
+            &:focus {background-color: #304373; }
+            &:active {background-color: #33477a; }
+        }
+
+        &.btn-google-plus {
+            background-color: #b92d25;
+            &:hover,
+            &:focus {background-color: #b12b23; }
+            &:active {background-color: #b92d25; }
+        }
+
+        @media (max-width: 991px) {
+            margin-bottom: 20px;
+        }
     }
     .btn {
@@ -39,6 +41,7 @@
             color: #fff;
         }
     }
+
     .btn-primary {
         .contraste & {
             background-color: #262626;
@@ -47,66 +50,66 @@
     }
     .glyphicon {
-      &.icon-white {
-        fill: white;
-      }
+        &.icon-white {
+            fill: white;
+        }
     }
     .border-social-icon {
-      border-radius: 25px;
-      padding: 7px 9px;
-      width: 40px;
-      height: 40px;
-      display: inline-block;
-
-      &.border-social-facebook {
-        background: #547BBC;
-      }
-
-      &.border-social-googlePlus {
-        background: #D44105;
-      }
+        border-radius: 25px;
+        padding: 7px 9px;
+        width: 40px;
+        height: 40px;
+        display: inline-block;
+
+        &.border-social-facebook {
+            background: #547BBC;
+        }
+
+        &.border-social-googlePlus {
+            background: #D44105;
+        }
     }
     .separator {
-      border-top: 2px solid #d8d8d8;
-      text-align: center;
-      font-weight: bold;
-      margin-top: 20px;
-      margin-bottom: 35px;
-
-      &:after {
-          position: absolute;
-          top: 4px;
-          margin-left: -26px;
-          font-size: 20px;
-          line-height: 30px;
-          padding: 0 0.25em;
-          background: $gray;
+        border-top: 2px solid #d8d8d8;
+        text-align: center;
+        font-weight: bold;
+        margin-top: 20px;
+        margin-bottom: 35px;
+
+        &:after {
+            position: absolute;
+            top: -15px;
+            margin-left: -26px;
+            font-size: 20px;
+            line-height: 30px;
+            padding: 0 0.25em;
+            background: $gray;
             .contraste & {
-              background: #000;
+                background: #000;
             }
-      }
+        }
-      &.separator-or:after {
-        content: "ou";
-        left: 51%;
-      }
+        &.separator-or:after {
+            content: "ou";
+            left: 50%;
+            margin-left: -17px;
-      &.separator-cadastro:after {
-        content: "ou preencha o formulario";
-        left: 31%;
-      }
+            @media (min-width: 992px) {
+                top: 4px;
+            }
+        }
-    }
+        &.separator-cadastro:after {
+            content: "ou preencha o formulario";
+            left: 50%;
+            margin-left: -133px;
-    input[type="checkbox"] {
-      display:inline-block;
-      width:18px;
-      height:18px;
-      margin:-1px 4px 0 0;
-      vertical-align:middle;
-      cursor:pointer;
+            @media (min-width: 768px) {
+                top: 4px;
+            }
+        }
     }
 }
+<!--  APENAS PARA TESTE DO SHOW MESSAGE E DO MODAL DE TERMOS DE USO -->
 <section
 	role="main"
 	class="section-gray auth-content">
@@ -28,12 +28,13 @@
                 <div class="form-group">
                   <label for="inputLoginUsername">E-mail*</label>
                   <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/>
-                  <form-messages field="loginForm.inputLoginUsername"></show-message>
+                  <!-- Diretiva validation-messages -->
+                  <validation-messages field="loginForm.inputLoginUsername"/>
                 </div>
                 <div class="form-group">
                   <label for="inputLoginPassword">Senha*</label>
                   <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>
-                  <form-messages field="loginForm.inputLoginPassword" ></show-message>
+                  <validation-messages field="loginForm.inputLoginPassword"/>
                 </div>
                 <div class="form-group">
                   <button class="btn btn-lg btn-block btn-submit" type="submit">Entrar</button>
@@ -123,37 +124,26 @@
                     <label for="inputNome">Nome:</label>
                     <span class="pull-right">*Dados obrigatórios</span>
                     <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>
-                    <form-messages field="cadastroForm.inputNome" ></show-message>
-                  </div>
-                  <div class="form-group">
-                    <p>Descrição da proposta*</p>
-                    <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>
-                    <div ng-show="cadastroForm.proposta.$touched">
-                      <div ng-messages="cadastroForm.proposta.$error">
-                        <form-messages field="cadastroForm.proposta" ></show-message>
-                      </div>
-                    </div>
-                    <span class="pull-left">*Dados obrigatórios</span>
-                    <span class="pull-right">Máx. 200 caracteres</span>
+                    <validation-messages field="cadastroForm.inputNome"/>
                   </div>
                   <div class="form-group">
                     <label for="inputEmail">E-mail*</label>
                     <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>
-                    <form-messages field="cadastroForm.inputEmail" ></show-message>
+                    <validation-messages field="cadastroForm.inputEmail"/>
                   </div>
                   <div class="row">
                     <div class="col-sm-6">
                       <div class="form-group">
                         <label for="inputPassword">Senha:</label>
                         <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>
-                        <form-messages field="cadastroForm.inputPassword" ></show-message>
+                        <validation-messages field="cadastroForm.inputPassword"/>
                       </div>
                     </div>
                     <div class="col-sm-6">
                       <div class="form-group">
                         <label for="inputRepeatPassword">Confirmar Senha:</label>
                         <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>
-                        <form-messages field="cadastroForm.inputRepeatPassword" ></show-message>
+                        <validation-messages field="cadastroForm.inputRepeatPassword"/>
                       </div>
                     </div>
                   </div>
@@ -170,7 +160,7 @@
                     <a href="">Termos de Uso</a>
                     e concordo com os mesmos*
                   </input>
-                  <form-messages field="cadastroForm.termosDeUso" ></show-message>
+                  <validation-messages field="cadastroForm.termosDeUso"/>
                 </div>
                 <div class="form-group">
                   <span>Digite o texto da imagem</span>
+<!--  APENAS PARA TESTE DO ENVIAR PROPOSTA -->
 <div class="container">
   <div class="row">
     <div class="col-sm-12">
-      <!-- <div ncy-breadcrumb></div> -->
     </div>
   </div>
 </div>
-<!-- <div class="container page--propostas">
-  <h1>TODO: Home > Proposta</h1>
-</div> -->
 <section class="section-gray auth-content ng-scope">
     <div class="container">
         <cadastro-proposta></cadastro-proposta>
     </div>
-</section>
 \ No newline at end of file
+</section>
	@@ -1,52 +0,0 @@	@@ -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	-
	@@ -1,10 +0,0 @@	@@ -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>
	@@ -1,17 +0,0 @@	@@ -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>
	@@ -18,7 +18,7 @@		@@ -18,7 +18,7 @@
18		18
19	var directive = {	19	var directive = {
20	restrict: 'E',	20	restrict: 'E',
21	- templateUrl: 'app/components/show-message/message.html',	21	+ templateUrl: 'app/components/show-message/show-message.html',
22	scope: {	22	scope: {
23	type: '=',	23	type: '=',
24	title: '=',	24	title: '=',
@@ -0,0 +1,17 @@		@@ -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>
@@ -0,0 +1,52 @@		@@ -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	+
@@ -0,0 +1,10 @@		@@ -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>
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+.error-message {
	2	+ color: #ff4431
	3	+}
		1	+<!-- APENAS PARA TESTE DO SHOW MESSAGE E DO MODAL DE TERMOS DE USO -->
1	<section	2	<section
2	role="main"	3	role="main"
3	class="section-gray auth-content">	4	class="section-gray auth-content">