Skip to content

yotta / pictogram

Go to a project
Commit 9885ef02 by Arturo Montejo Ráez
Options

transitions working

parent 8aaa2996
Inline Side-by-side
Showing with 326 additions and 50 deletions
sails/src/assets/app/bower.json
......@@ -22,7 +22,7 @@
"humanize-duration": "~3.0.0",
"momentjs": "~2.10.3",
"ngtoast": "~1.5.4",
"angular-animate": "~1.4.1",
"angular-animate": "~1.2.2",
"angular-sanitize": "~1.4.1",
"angular-chart.js": "latest",
"ng-lodash": "~0.3.0",
......@@ -34,7 +34,6 @@
},
"resolutions": {
"angular": ">=1 <1.3.0",
"humanize-duration": "~3.0.0",
"momentjs": "~2.10.3"
"humanize-duration": "~3.0.0"
}
}
sails/src/assets/app/i18n/en-gb.json
......@@ -41,7 +41,9 @@
"August": "August",
"average_time_between_pictos": "Average time between pictograms",
"average_time_per_try": "Average time per try",
"back": "Back",
"background": "Background",
"back_to_login": "Back to login",
"beep": "Beep",
"birthdate": "Birthdate",
"black_and_white": "B&W",
......@@ -235,6 +237,7 @@
"new_scene_with_categories": "Create scene with categories",
"new_scene_without_categories": "Create scene without categories",
"new_session": "New session",
"next": "Next",
"next_actions": "Next actions",
"next_sessions": "Next sessions",
"no": "No",
......@@ -273,6 +276,7 @@
"own_pictos": "Your pictograms",
"tos": "Your pictograms",
"pages": "Pages",
"parents_tutor": "Parent or tutor",
"password": "Password",
"password_changed": "Password changed sucessfully",
"password_confirm": "Repeat password",
......@@ -402,6 +406,7 @@
"tag_deleted": "Tag deleted",
"tape_background": "Tape background",
"template_deleted": "Template deleted",
"therapist": "Therapist",
"therapists": "Therapists",
"time_hours": "Time: {{hours}} hours",
"time_instruction_method": "Time instructions of method",
......
sails/src/assets/app/i18n/es-es.json
......@@ -41,7 +41,9 @@
"August": "Agosto",
"average_time_between_pictos": "Tiempo medio entre pictogramas",
"average_time_per_try": "Tiempo medio por intento",
"back": "Volver",
"background": "Fondo",
"back_to_login": "Volver a inicio de sesión",
"beep": "Pitido",
"birthdate": "Fecha de nacimiento",
"black_and_white": "ByN",
......@@ -235,6 +237,7 @@
"new_scene_with_categories": "Crear escena con categorías",
"new_scene_without_categories": "Crear escena sin categorías",
"new_session": "Nueva sesión",
"next": "Siguiente",
"next_actions": "Acciones posteriores",
"next_sessions": "Sesiones posteriores",
"no": "No",
......@@ -272,6 +275,7 @@
"own_labels": "Etiquetas propias",
"own_pictos": "Pictogramas propios",
"pages": "Páginas",
"parents_tutor": "Padre, madre o tutor",
"password": "Contraseña",
"password_changed": "La clave ha sido modificada exitosamente.",
"password_confirm": "Repita la contraseña",
......@@ -397,12 +401,13 @@
"supervisor_note": "Si los padres no se van a dar de alta en la plataforma nunca, el administrador puede anotar la información de contacto en el campo notas.",
"supervisor_updated": "Supervisor actualizado",
"support": "Atención al cliente",
"therapists": "Terapeutas",
"supervisors": "Supervisores",
"surname": "Apellidos",
"tag_deleted": "Etiqueta borrada",
"tape_background": "Fondo de la cinta",
"template_deleted": "Plantilla eliminada",
"therapists": "Terapeutas",
"therapist": "Terapeuta",
"time_hours": "Tiempo: {{hours}} horas",
"time_instruction_method": "Tiempo instrucciones del método",
"time_sessions_total": "Tiempo total de sesiones",
......
sails/src/assets/scripts/modules/login/controllers/login.js
......@@ -8,6 +8,7 @@
dashboardControllers.controller('LoginCtrl',
function LoginCtrl(
$scope,
$rootScope,
$http,
$window,
$translate,
......@@ -15,8 +16,28 @@ function LoginCtrl(
$location,
config,
$stateParams,
$timeout,
ngToast) {
$scope.slide = {
state: 'login',
prev: 'login',
back: false,
rightTo: function (state) {
$scope.slide.back = false;
$timeout(function () {
$scope.slide.state = state;
}, 0);
},
leftTo: function (state) {
$scope.slide.back = true;
$timeout(function () {
$scope.slide.state = state;
}, 0);
}
};
$scope.credentials = {
email: '',
password: '',
......
sails/src/assets/scripts/modules/login/views/login.html
......@@ -10,69 +10,271 @@
<br>
<div id="main-content" class="container">
<div class="row">
<div id="main-content">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="switch-panel-body" ng-switch="slide.state">
<!-- Form column and offset -->
<div class="col-md-4 col-md-offset-2">
<div id="login">
<!-- Formulario -->
<!-- LoginCtrl controls here, see app.js -->
<form name="loginForm" ng-submit="login()" novalidate>
<!-- Email -->
<div class="form-group">
<label translate>email</label>:
<input type="email" class="form-control" id="login_email" placeholder="{{ 'your_email' | translate}}" required ng-model="credentials.email" />
<!--
SLIDE 1: login pane
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="login">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<!-- Formulario -->
<!-- LoginCtrl controls here, see app.js -->
<form name="loginForm" ng-submit="login()" novalidate>
<!-- Email -->
<div class="form-group">
<label translate>email</label>:
<input type="email" class="form-control" id="login_email" placeholder="{{ 'your_email' | translate}}" required ng-model="credentials.email" />
</div>
<!-- Password -->
<div class="form-group">
<label translate>password</label>:
<input type="password" class="form-control" id="login_password" placeholder="{{ 'your_password' | translate}}" required ng-model="credentials.password" />
</div>
<div class="row">
<div class="col-xs-6">
<!-- Login -->
<div class="pull-left">
<button type="submit" class="btn btn-primary" translate>login</button>
</div>
<!-- Spinner -->
<div class="pull-left">
<i ng-class="{'fa fa-spinner fa-spin fa-2x fa-fw margin-bottom': true, 'spin_disabled': !submitted}"></i>
</div>
</div>
<div class="col-xs-6 margin-top7">
<!-- Remember -->
<div class="checkbox">
<label>
<input type="checkbox" id="login_savepassword" ng-model="credentials.savepassword" />{{ 'remember' | translate }}
</label>
</div>
</div>
</div>
<br>
<!-- Remember password -->
<div class="row text-center">
<a href="/app/#/changepass" translate>password_forgotten</a>
</div>
<!-- Create account -->
<div class="row text-center">
<a ng-click="slide.rightTo('accounts')" translate>create_an_account</a>
</div>
</form>
</div>
<!--/. form column -->
<!-- Image column -->
<div class="col-md-4 text-center">
<img src="img/login.png" alt="Pictogram" title="Pictogram" />
</div>
<!--/. image column -->
<div class="col-md-2">
</div>
</div>
</div>
<!-- Password -->
<div class="form-group">
<label translate>password</label>:
<input type="password" class="form-control" id="login_password" placeholder="{{ 'your_password' | translate}}" required ng-model="credentials.password" />
<!--
SLIDE 2: Account selection
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="accounts">
<h2>Elija el tipo de cuenta</h2>
<div class="row">
<div class="col-md-4">
<legend translate>parents_tutor</legend>
<div class="text-center">
<a ng-click="slide.rightTo('tutor')"><img src="img/parents.png" alt="Tutor" title="Tutor" /></a>
</div>
<div>
<p>Gestione los pictogramas de su hijo o hija y configure su dispositivo de comunicación.</p>
</div>
</div>
<div class="col-md-4">
<legend translate>therapist</legend>
<div class="text-center">
<a ng-click="slide.rightTo('therapist')"><img src="img/therapist.png" alt="Therapist" title="Therapist" /></a>
</div>
<div>
<p>Gestione pictogramas, dispositivos, grabe sesiones de terapia y obtenga estadísticas de evolución.</p>
</div>
</div>
<div class="col-md-4">
<legend translate>office_center</legend>
<div class="text-center">
<a ng-click="slide.rightTo('office')"><img src="img/office.jpg" alt="Office" title="Office" /></a>
</div>
<div>
<p>Gestione alumnos y equipos de intervención, además de todas las funcionalidades propias de un terapeuta.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<!-- Login -->
<div class="pull-left">
<button type="submit" class="btn btn-primary" translate>login</button>
<!--
SLIDE 3: Tutor account form
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="tutor">
<legend translate>parents_tutor</legend>
<div class="col-md-4 col-md-offset-1 text-center">
<img src="img/parents.png" alt="Tutor" title="Tutor" />
</div>
<div class="form-group col-md-4" id="tutor_form">
<input type="hidden" ng-model="formdata.role" value="tutor"></input>
<div class="form-group">
<input type="email" class="form-control" placeholder="{{ 'email' | translate }}" ng-model="formdata.email"/>
</div>
<!-- Spinner -->
<div class="pull-left">
<i ng-class="{'fa fa-spinner fa-spin fa-2x fa-fw margin-bottom': true, 'spin_disabled': !submitted}"></i>
<fieldset>
<span class="color_red text_sm pull-right" ng-show="formdata.password != formdata.password_confirm" translate>password_match</span>
<div class="form-group">
<input type="password" class="form-control" id="signin_password1" placeholder="{{ 'password_type' | translate }}"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin_password2" placeholder="{{ 'password_confirm' | translate }}"/>
</div>
</fieldset>
<div class="row form-group">
<div class="col-xs-6">
<button class="btn btn-default" ng-click="slide.leftTo('accounts')">&lt;&lt; {{ 'back' | translate }} </button>
</div>
<div class="col-xs-6">
<button class="btn btn-primary float-right" ng-click="slide.rightTo('accept')">{{ 'next' | translate }} &gt;&gt; </button>
</div>
</div>
</div>
<div class="col-xs-6 margin-top7">
<!-- Remember -->
<div class="checkbox">
<label>
<input type="checkbox" id="login_savepassword" ng-model="credentials.savepassword" />{{ 'remember' | translate }}
</label>
</div>
<!--
SLIDE 4: Therapist account form
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="therapist">
<legend translate>therapist</legend>
<div class="col-md-4 col-md-offset-1 text-center">
<img src="img/therapist.png" alt="Tutor" title="Tutor" />
</div>
<div class="form-group col-md-4" id="tutor_form">
<input type="hidden" ng-model="formdata.role" value="therapist"></input>
<div class="form-group">
<input type="email" class="form-control" placeholder="{{ 'email' | translate }}" ng-model="formdata.office.email"/>
</div>
<fieldset>
<span class="color_red text_sm pull-right" ng-show="formdata.password != formdata.password_confirm" translate>password_match</span>
<div class="form-group">
<input type="password" class="form-control" id="signin_password1" placeholder="{{ 'password_type' | translate }}"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin_password2" placeholder="{{ 'password_confirm' | translate }}"/>
</div>
</fieldset>
<div class="row form-group">
<div class="col-xs-6">
<button class="btn btn-default" ng-click="slide.back = true; slide.state = 'accounts'">&lt;&lt; {{ 'back' | translate }} </button>
</div>
<div class="col-xs-6">
<button class="btn btn-primary float-right" ng-click="slide.back = false; slide.state = 'accept'">{{ 'next' | translate }} &gt;&gt; </button>
</div>
</div>
</div>
</div>
<br>
<!--
SLIDE 5: Office account form
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="office">
<legend translate>office_center</legend>
<div class="col-md-4 col-md-offset-1 text-center">
<img src="img/office.jpg" alt="Office" title="Office" />
</div>
<div class="form-group col-md-4" id="office_form">
<input type="hidden" ng-model="formdata.role" value="office"></input>
<!-- Remember password -->
<div class="row text-center">
<a href="/app/#/changepass" translate>password_forgotten</a>
<div class="form-group">
<input type="text" class="form-control" placeholder="{{ 'name' | translate }}" ng-model="formdata.office.name"/>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="{{ 'email' | translate }}" ng-model="formdata.office.email"/>
</div>
<fieldset>
<span class="color_red text_sm pull-right" ng-show="formdata.password != formdata.password_confirm" translate>password_match</span>
<div class="form-group">
<input type="password" class="form-control" id="signin_password1" placeholder="{{ 'password_type' | translate }}"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin_password2" placeholder="{{ 'password_confirm' | translate }}"/>
</div>
</fieldset>
<div class="row form-group">
<div class="col-xs-6">
<button class="btn btn-default" ng-click="slide.back = true; slide.state = 'accounts'">&lt;&lt; {{ 'back' | translate }} </button>
</div>
<div class="col-xs-6">
<button class="btn btn-primary float-right" ng-click="slide.back = false; slide.state = 'accept'">{{ 'next' | translate }} &gt;&gt; </button>
</div>
</div>
</div>
</div>
<!--
SLIDE 6: Terms of services and captcha
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="accept">
<div class="form-group">
<legend></legend>
<input type="checkbox" ng-model="formdata.disclaimer_accepted">
<span translate>disclaimer_accept</span>
</div>
<div class="form-group">
<legend>Captcha</legend>
<div vc-recaptcha></div>
</div>
<div class="row form-group">
<div class="col-xs-6">
<button class="btn btn-default" ng-click="slide.back = true; slide.state = 'accounts'">&lt;&lt; {{ 'back' | translate }} </button>
</div>
<div class="col-xs-6">
<button class="btn btn-primary float-right" ng-click="slide.back = false; slide.state = 'accept'">{{ 'next' | translate }} &gt;&gt; </button>
</div>
</div>
</div>
<!--
SLIDE 7: Confirmation message
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="confirmation">
</div>
<!-- Create account -->
<div class="row text-center">
<a href="/app/#/signin" translate>create_an_account</a>
<!--
SLIDE 8: Change password
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="confirmation">
</div>
</form>
</div>
</div>
<div class="col-md-2">
</div>
<!--/. login -->
</div>
<!--/. form column -->
<!-- Image column -->
<div class="col-xs-12 col-md-4 text-center">
<img src="img/login.png" alt="Pictogram" title="Pictogram" />
<div class="text-center">
<a ng-click="slide.leftTo('login')" ng-if="slide.state != 'login'"><< {{ 'back_to_login' | translate}}</a>
</div>
<!--/. image column -->
</div>
</div>
<footer-translate></footer-translate>
sails/src/assets/styles/main.css
......@@ -1098,3 +1098,47 @@ input.editable.scene-name {
font-size: 16px;
font-weight: 600;
}
.float-right {
float: right;
}
/* Estilos para ngSwitch */
.switch-panel-body {
position:relative;
width: 900px;
margin: auto;
}
.switch-animation.ng-enter,
.switch-animation.ng-leave,
.switch-animation-back.ng-enter,
.switch-animation-back.ng-leave {
-webkit-transition:0.2s linear all;
-moz-transition:0.2s linear all;
-o-transition:0.2s linear all;
transition:0.2s linear all;
position:absolute;
}
.switch-animation.ng-enter,
.switch-animation-back.ng-leave.ng-leave-active {
left:100%;
}
.switch-animation.ng-leave,
.switch-animation.ng-enter.ng-enter-active,
.switch-animation-back.ng-leave,
.switch-animation-back.ng-enter.ng-enter-active {
left:0;
}
.switch-animation.ng-leave.ng-leave-active,
.switch-animation-back.ng-enter {
left:-100%;
}
.switch-panel {
overflow:hidden;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment