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 @@ ...@@ -22,7 +22,7 @@
"humanize-duration": "~3.0.0", "humanize-duration": "~3.0.0",
"momentjs": "~2.10.3", "momentjs": "~2.10.3",
"ngtoast": "~1.5.4", "ngtoast": "~1.5.4",
"angular-animate": "~1.4.1", "angular-animate": "~1.2.2",
"angular-sanitize": "~1.4.1", "angular-sanitize": "~1.4.1",
"angular-chart.js": "latest", "angular-chart.js": "latest",
"ng-lodash": "~0.3.0", "ng-lodash": "~0.3.0",
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
}, },
"resolutions": { "resolutions": {
"angular": ">=1 <1.3.0", "angular": ">=1 <1.3.0",
"humanize-duration": "~3.0.0", "humanize-duration": "~3.0.0"
"momentjs": "~2.10.3"
} }
} }
sails/src/assets/app/i18n/en-gb.json
...@@ -41,7 +41,9 @@ ...@@ -41,7 +41,9 @@
"August": "August", "August": "August",
"average_time_between_pictos": "Average time between pictograms", "average_time_between_pictos": "Average time between pictograms",
"average_time_per_try": "Average time per try", "average_time_per_try": "Average time per try",
"back": "Back",
"background": "Background", "background": "Background",
"back_to_login": "Back to login",
"beep": "Beep", "beep": "Beep",
"birthdate": "Birthdate", "birthdate": "Birthdate",
"black_and_white": "B&W", "black_and_white": "B&W",
...@@ -235,6 +237,7 @@ ...@@ -235,6 +237,7 @@
"new_scene_with_categories": "Create scene with categories", "new_scene_with_categories": "Create scene with categories",
"new_scene_without_categories": "Create scene without categories", "new_scene_without_categories": "Create scene without categories",
"new_session": "New session", "new_session": "New session",
"next": "Next",
"next_actions": "Next actions", "next_actions": "Next actions",
"next_sessions": "Next sessions", "next_sessions": "Next sessions",
"no": "No", "no": "No",
...@@ -273,6 +276,7 @@ ...@@ -273,6 +276,7 @@
"own_pictos": "Your pictograms", "own_pictos": "Your pictograms",
"tos": "Your pictograms", "tos": "Your pictograms",
"pages": "Pages", "pages": "Pages",
"parents_tutor": "Parent or tutor",
"password": "Password", "password": "Password",
"password_changed": "Password changed sucessfully", "password_changed": "Password changed sucessfully",
"password_confirm": "Repeat password", "password_confirm": "Repeat password",
...@@ -402,6 +406,7 @@ ...@@ -402,6 +406,7 @@
"tag_deleted": "Tag deleted", "tag_deleted": "Tag deleted",
"tape_background": "Tape background", "tape_background": "Tape background",
"template_deleted": "Template deleted", "template_deleted": "Template deleted",
"therapist": "Therapist",
"therapists": "Therapists", "therapists": "Therapists",
"time_hours": "Time: {{hours}} hours", "time_hours": "Time: {{hours}} hours",
"time_instruction_method": "Time instructions of method", "time_instruction_method": "Time instructions of method",
......
sails/src/assets/app/i18n/es-es.json
...@@ -41,7 +41,9 @@ ...@@ -41,7 +41,9 @@
"August": "Agosto", "August": "Agosto",
"average_time_between_pictos": "Tiempo medio entre pictogramas", "average_time_between_pictos": "Tiempo medio entre pictogramas",
"average_time_per_try": "Tiempo medio por intento", "average_time_per_try": "Tiempo medio por intento",
"back": "Volver",
"background": "Fondo", "background": "Fondo",
"back_to_login": "Volver a inicio de sesión",
"beep": "Pitido", "beep": "Pitido",
"birthdate": "Fecha de nacimiento", "birthdate": "Fecha de nacimiento",
"black_and_white": "ByN", "black_and_white": "ByN",
...@@ -235,6 +237,7 @@ ...@@ -235,6 +237,7 @@
"new_scene_with_categories": "Crear escena con categorías", "new_scene_with_categories": "Crear escena con categorías",
"new_scene_without_categories": "Crear escena sin categorías", "new_scene_without_categories": "Crear escena sin categorías",
"new_session": "Nueva sesión", "new_session": "Nueva sesión",
"next": "Siguiente",
"next_actions": "Acciones posteriores", "next_actions": "Acciones posteriores",
"next_sessions": "Sesiones posteriores", "next_sessions": "Sesiones posteriores",
"no": "No", "no": "No",
...@@ -272,6 +275,7 @@ ...@@ -272,6 +275,7 @@
"own_labels": "Etiquetas propias", "own_labels": "Etiquetas propias",
"own_pictos": "Pictogramas propios", "own_pictos": "Pictogramas propios",
"pages": "Páginas", "pages": "Páginas",
"parents_tutor": "Padre, madre o tutor",
"password": "Contraseña", "password": "Contraseña",
"password_changed": "La clave ha sido modificada exitosamente.", "password_changed": "La clave ha sido modificada exitosamente.",
"password_confirm": "Repita la contraseña", "password_confirm": "Repita la contraseña",
...@@ -397,12 +401,13 @@ ...@@ -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_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", "supervisor_updated": "Supervisor actualizado",
"support": "Atención al cliente", "support": "Atención al cliente",
"therapists": "Terapeutas",
"supervisors": "Supervisores", "supervisors": "Supervisores",
"surname": "Apellidos", "surname": "Apellidos",
"tag_deleted": "Etiqueta borrada", "tag_deleted": "Etiqueta borrada",
"tape_background": "Fondo de la cinta", "tape_background": "Fondo de la cinta",
"template_deleted": "Plantilla eliminada", "template_deleted": "Plantilla eliminada",
"therapists": "Terapeutas",
"therapist": "Terapeuta",
"time_hours": "Tiempo: {{hours}} horas", "time_hours": "Tiempo: {{hours}} horas",
"time_instruction_method": "Tiempo instrucciones del método", "time_instruction_method": "Tiempo instrucciones del método",
"time_sessions_total": "Tiempo total de sesiones", "time_sessions_total": "Tiempo total de sesiones",
......
sails/src/assets/scripts/modules/login/controllers/login.js
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
dashboardControllers.controller('LoginCtrl', dashboardControllers.controller('LoginCtrl',
function LoginCtrl( function LoginCtrl(
$scope, $scope,
$rootScope,
$http, $http,
$window, $window,
$translate, $translate,
...@@ -15,8 +16,28 @@ function LoginCtrl( ...@@ -15,8 +16,28 @@ function LoginCtrl(
$location, $location,
config, config,
$stateParams, $stateParams,
$timeout,
ngToast) { 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 = { $scope.credentials = {
email: '', email: '',
password: '', password: '',
......
sails/src/assets/scripts/modules/login/views/login.html
...@@ -10,69 +10,271 @@ ...@@ -10,69 +10,271 @@
<br> <br>
<div id="main-content" class="container"> <div id="main-content">
<div class="row">
<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"> SLIDE 1: login pane
<div id="login"> -->
<!-- Formulario --> <div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="login">
<!-- LoginCtrl controls here, see app.js --> <div class="row">
<form name="loginForm" ng-submit="login()" novalidate> <div class="col-md-2">
<!-- Email --> </div>
<div class="form-group"> <div class="col-md-4">
<label translate>email</label>: <!-- Formulario -->
<input type="email" class="form-control" id="login_email" placeholder="{{ 'your_email' | translate}}" required ng-model="credentials.email" /> <!-- 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> </div>
<!-- Password -->
<div class="form-group"> <!--
<label translate>password</label>: SLIDE 2: Account selection
<input type="password" class="form-control" id="login_password" placeholder="{{ 'your_password' | translate}}" required ng-model="credentials.password" /> -->
<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>
<div class="row">
<div class="col-xs-6"> <!--
<!-- Login --> SLIDE 3: Tutor account form
<div class="pull-left"> -->
<button type="submit" class="btn btn-primary" translate>login</button> <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> </div>
<!-- Spinner --> <fieldset>
<div class="pull-left"> <span class="color_red text_sm pull-right" ng-show="formdata.password != formdata.password_confirm" translate>password_match</span>
<i ng-class="{'fa fa-spinner fa-spin fa-2x fa-fw margin-bottom': true, 'spin_disabled': !submitted}"></i> <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> </div>
<div class="col-xs-6 margin-top7"> </div>
<!-- Remember -->
<div class="checkbox"> <!--
<label> SLIDE 4: Therapist account form
<input type="checkbox" id="login_savepassword" ng-model="credentials.savepassword" />{{ 'remember' | translate }} -->
</label> <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> </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="form-group">
<div class="row text-center"> <input type="text" class="form-control" placeholder="{{ 'name' | translate }}" ng-model="formdata.office.name"/>
<a href="/app/#/changepass" translate>password_forgotten</a> </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> </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> </div>
</form>
</div>
</div>
<div class="col-md-2">
</div> </div>
<!--/. login -->
</div> </div>
<!--/. form column --> <div class="text-center">
<a ng-click="slide.leftTo('login')" ng-if="slide.state != 'login'"><< {{ 'back_to_login' | translate}}</a>
<!-- Image column -->
<div class="col-xs-12 col-md-4 text-center">
<img src="img/login.png" alt="Pictogram" title="Pictogram" />
</div> </div>
<!--/. image column -->
</div> </div>
</div> </div>
<footer-translate></footer-translate> <footer-translate></footer-translate>
sails/src/assets/styles/main.css
...@@ -1098,3 +1098,47 @@ input.editable.scene-name { ...@@ -1098,3 +1098,47 @@ input.editable.scene-name {
font-size: 16px; font-size: 16px;
font-weight: 600; 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