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 288 additions and 12 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,12 +10,22 @@ ...@@ -10,12 +10,22 @@
<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"> -->
<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 --> <!-- Formulario -->
<!-- LoginCtrl controls here, see app.js --> <!-- LoginCtrl controls here, see app.js -->
<form name="loginForm" ng-submit="login()" novalidate> <form name="loginForm" ng-submit="login()" novalidate>
...@@ -58,21 +68,213 @@ ...@@ -58,21 +68,213 @@
</div> </div>
<!-- Create account --> <!-- Create account -->
<div class="row text-center"> <div class="row text-center">
<a href="/app/#/signin" translate>create_an_account</a> <a ng-click="slide.rightTo('accounts')" translate>create_an_account</a>
</div> </div>
</form> </form>
</div> </div>
<!--/. login -->
</div>
<!--/. form column --> <!--/. form column -->
<!-- Image column --> <!-- Image column -->
<div class="col-xs-12 col-md-4 text-center"> <div class="col-md-4 text-center">
<img src="img/login.png" alt="Pictogram" title="Pictogram" /> <img src="img/login.png" alt="Pictogram" title="Pictogram" />
</div> </div>
<!--/. image column --> <!--/. image column -->
<div class="col-md-2">
</div>
</div>
</div>
<!--
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>
<!--
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>
<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>
<!--
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>
</div>
<!--
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>
<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>
<!--
SLIDE 8: Change password
-->
<div ng-class="slide.back ? 'switch-animation-back' : 'switch-animation'" ng-switch-when="confirmation">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="text-center">
<a ng-click="slide.leftTo('login')" ng-if="slide.state != 'login'"><< {{ 'back_to_login' | translate}}</a>
</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