Implement Onboarding flow

client/clase/OnBoarding/OnBoarding1.html

@@ -0,0 +1,11 @@
+<template name="OnBoarding1">
+	<section class="full-page">
+		<div class="wrapper-onboarding">
+			<div class="clase-desc-onboarding" >
+				<p>¿La información en tu grupo de padres del colegio no siempre es relevante?</p>
+				<p>¿Lo importante se pierde por un exceso de información?</p>
+			</div>
+				<button class="button-onboarding-b" id="clase_next">Siguiente</button>
+		</div>
+	</section>
+</template>

client/clase/OnBoarding/OnBoarding1.js

@@ -0,0 +1,9 @@
+Template.OnBoarding1.onRendered(function() {
+	$('#initial-page-loading').remove();
+});
+
+Template.OnBoarding1.events({
+	'click #clase_next': function() {
+		FlowRouter.go('OnBoarding2');
+	}
+});

client/clase/OnBoarding/OnBoarding2.html

@@ -0,0 +1,14 @@
+<template name="OnBoarding2">
+	<section class="full-page">
+		<div class="wrapper-onboarding">
+			<img class="img-onboarding" src="/images/onboarding2.png">
+			<div class="clase-tittle-onboarding" >
+			 <p>Solo lo relevante</p>
+		 </div>
+			<div class="clase-desc-onboarding" >
+				<p>Cuando no tengas tiempo para debates que no conciernen directamente a tus hijos cambia de modo.<br>Tú elijes si ver todo o solo lo importante, ¡y solo tú sabes el modo de visionado!</p>
+			</div>
+				<button class="button-onboarding" id="clase_next">Siguiente</button>
+		</div>
+	</section>
+</template>

client/clase/OnBoarding/OnBoarding2.js

@@ -0,0 +1,9 @@
+Template.OnBoarding2.onRendered(function() {
+	$('#initial-page-loading').remove();
+});
+
+Template.OnBoarding2.events({
+	'click #clase_next': function() {
+		FlowRouter.go("OnBoarding3")
+	}
+})

client/clase/OnBoarding/OnBoarding3.html

@@ -0,0 +1,14 @@
+<template name="OnBoarding3">
+	<section class="full-page">
+		<div class="wrapper-onboarding">
+			<img class="img-onboarding" src="/images/onboarding3.png">
+			<div class="clase-tittle-onboarding" >
+			 <p>El profesor cuenta</p>
+		 </div>
+			<div class="clase-desc-onboarding" >
+				<p>Pero no puede leer los comentarios. Este es un chat que solo pueden visionar los padres aunque el profesor puede enviar mensajes.<br> Podrás verlos destacados y en diferente color. </p>
+			</div>
+				<button class="button-onboarding" id="clase_next">Siguiente</button>
+		</div>
+	</section>
+</template>

client/clase/OnBoarding/OnBoarding3.js

@@ -0,0 +1,9 @@
+Template.OnBoarding3.onRendered(function() {
+	$('#initial-page-loading').remove();
+});
+
+Template.OnBoarding3.events({
+	'click #clase_next': function() {
+		FlowRouter.go("OnBoarding4")
+	}
+})

client/clase/OnBoarding/OnBoarding4.html

@@ -0,0 +1,14 @@
+<template name="OnBoarding4">
+	<section class="full-page">
+		<div class="wrapper">
+			<div class="clase-logo-b" >
+			 <p>clase</p>
+		 </div>
+		 <div class="clase-desc-b" >
+			 <p>Comunicación entre padres<br>simple y efectiva</p>
+		 </div>
+				<button class="button-onboarding" id="clase_register">Crear Cuenta</button>
+				<button class="input-submit-light" id="clase_login">Ya tengo cuenta</button>
+		</div>
+	</section>
+</template>

client/clase/OnBoarding/OnBoarding4.js

@@ -0,0 +1,15 @@
+Template.OnBoarding4.onRendered(function() {
+	$('#initial-page-loading').remove();
+});
+
+Template.OnBoarding4.events({
+	'click #clase_register': function() {
+		Session.set("loginDefaultState","register");
+		FlowRouter.go("home");
+
+	},
+	'click #clase_login': function() {
+		Session.set("loginDefaultState","login");
+		FlowRouter.go("home");
+	}
+})

client/clase/OnBoarding/home.html

@@ -0,0 +1,15 @@
+<template name="claseHome">
+	<section class="page-container page-home page-static">
+		<header class="fixed-title">
+			{{> burger}}
+			<h2>
+				<span class="room-title">{{title}}</span>
+			</h2>
+		</header>
+			<div class="content" >
+				<p>¡Bienvenido a Clase!</p>
+				<p>Únete a una clase para mantenerte informado</p>
+				<button class="button-inverse" id="clase_add">Añadir hijo</button>
+			</div>
+	</section>
+</template>

client/clase/OnBoarding/home.js

@@ -0,0 +1,17 @@
+Template.home.helpers({
+	title: function() {
+		return RocketChat.settings.get('Layout_Home_Title');
+	}
+});
+
+Template.claseHome.onRendered(function() {
+	$('#initial-page-loading').remove();
+});
+
+Template.claseHome.events({
+	'click #clase_add': function() {
+		SideNav.setFlex('joinSchoolClassRoom');
+		SideNav.openFlex();
+		menu.toggle();
+	}
+});

client/clase/OnBoarding/onLogin.coffee

@@ -0,0 +1,8 @@
+Tracker.autorun (c) ->
+	if Meteor.userId()
+		Meteor.defer ->
+			if Meteor.user().clase?.defaultRoom?
+				room = Meteor.user().clase.defaultRoom
+				FlowRouter.goToRoomById room
+			else
+				FlowRouter.go 'claseHome'

client/clase/style.less

@@ -10,3 +10,117 @@
 	.clase-list {
 		color: #ffffff;
 	}
+  .button-inverse {
+    color: #ffffff;
+    background-color: #229bd6;
+  	width: 100%;
+  	display: inline-block;
+  	padding: 9px 12px;
+  	font-weight: 700;
+  	font-size: 13px;
+  	text-align: center;
+  	margin: 20px 0px;
+  	text-transform: uppercase;
+  	word-spacing: 0;
+  	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
+  	line-height: 16px;
+  	position: relative;
+  	span {
+  		position: relative;
+  		z-index: 2;
+  	}
+  }
+  .button-onboarding {
+    color: #229bd6;
+    background-color: #ffffff ;
+    width: 100%;
+    display: inline-block;
+    padding: 9px 12px;
+    font-weight: 700;
+    font-size: 13px;
+    text-align: center;
+    // margin: 20px 0px;
+    text-transform: uppercase;
+    word-spacing: 0;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
+    line-height: 16px;
+    position: relative;
+  //  bottom: 0px;
+  //  margin-left: -150px;
+    span {
+      position: relative;
+      z-index: 2;
+    }
+  }
+  .button-onboarding-b {
+    color: #229bd6;
+    background-color: #ffffff ;
+    width: 100%;
+    display: inline-block;
+    padding: 9px 12px;
+    font-weight: 700;
+    font-size: 13px;
+    text-align: center;
+    margin-top: 50px;
+    text-transform: uppercase;
+    word-spacing: 0;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
+    line-height: 16px;
+    position: relative;
+  //  bottom: 0px;
+  //  margin-left: -150px;
+    span {
+      position: relative;
+      z-index: 2;
+    }
+  }
+  .wrapper-onboarding {
+    background-color: #229bd6;
+    text-align: center;
+    z-index: 10;
+    position: relative;
+    width: 100%;
+    //height: 500px;
+    padding: 20px;
+  }
+  .clase-desc-onboarding {
+  font-size: 16px;
+  color:#ffffff;
+  margin: 20px;
+  font-weight: 200;
+  position: relative;
+  //margin-top: 50%;
+  p{
+    margin-bottom: 20px;
+  }
+  }
+  .img-onboarding {
+  margin-bottom: 20px;
+  width: 100%;
+  position: relative;
+  }
+  .clase-tittle-onboarding {
+  font-size: 20px;
+  color:#ffed00;
+  margin-bottom: 15px;
+  margin-top: 1px;
+  font-weight: 400;
+  }
+  .input-submit-light{
+    color: #ffffff;
+    margin: 30px auto;
+  }
+  .clase-logo-b {
+font-size: 45px;
+color:#ffed00;
+margin-bottom: 25px;
+margin-top: -50px;
+font-weight: 300;
+}
+
+.clase-desc-b {
+font-size: 16px;
+color:#ffffff;
+margin-bottom: 80px;
+font-weight: 200;
+}

client/routes/OnBoarding.coffee

@@ -0,0 +1,26 @@
+FlowRouter.route '/OnBoarding1',
+	name: 'OnBoarding1'
+	action: ->
+		BlazeLayout.render 'OnBoarding1'
+
+FlowRouter.route '/OnBoarding2',
+	name: 'OnBoarding2'
+	action: ->
+		BlazeLayout.render 'OnBoarding2'
+
+FlowRouter.route '/OnBoarding3',
+	name: 'OnBoarding3'
+	action: ->
+		BlazeLayout.render 'OnBoarding3'
+
+FlowRouter.route '/OnBoarding4',
+	name: 'OnBoarding4'
+	action: ->
+		BlazeLayout.render 'OnBoarding4'
+
+FlowRouter.route '/claseHome',
+	name: 'claseHome'
+	action: ->
+		RocketChat.TabBar.showGroup 'home'
+		BlazeLayout.render 'main', {center: 'claseHome'}
+		KonchatNotification.getDesktopPermission()

client/routes/router.coffee

@@ -17,24 +17,24 @@ FlowRouter.route '/',
 	action: ->
 		BlazeLayout.render 'main', {center: 'loading'}
 		if not Meteor.userId()
-			return FlowRouter.go 'home'
+			return FlowRouter.go 'OnBoarding1'
 
 		Tracker.autorun (c) ->
 			if FlowRouter.subsReady() is true
 				Meteor.defer ->
-					if Meteor.user().defaultRoom?
-						room = Meteor.user().defaultRoom.split('/')
-						FlowRouter.go room[0], {name: room[1]}
+					if Meteor.user().clase?.defaultRoom?
+						room = Meteor.user().clase.defaultRoom
+						FlowRouter.goToRoomById room
 					else
-						FlowRouter.go 'home'
+						FlowRouter.go 'claseHome'
 				c.stop()
 
 
 FlowRouter.route '/login',
 	name: 'login'
 
 	action: ->
-		FlowRouter.go 'home'
+		FlowRouter.go 'claseHome'
 
 
 FlowRouter.route '/home',

coffeelint.json

@@ -0,0 +1,13 @@
+{
+  "indentation" : {
+    "level" : "error",
+    "value" : 1
+  },
+  "no_tabs": { "level": "ignore"},
+  "max_line_length": { "level": "ignore"},
+  "no_spaces": {"level" : "error"},
+  "line_endings" : {
+    "value" : "unix",
+    "level" : "error"
+  }
+}

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -652,12 +652,13 @@ label.required:after {
 // new layout buttons
 .button {
 	&:extend(.unselectable);
+	width: 100%;
 	display: inline-block;
 	padding: 9px 12px;
 	font-weight: 700;
 	font-size: 13px;
 	text-align: center;
-	margin: 20px;
+	margin: 20px 0px;
 	text-transform: uppercase;
 	word-spacing: 0;
 	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
@@ -3793,6 +3794,7 @@ body:not(.is-cordova) {
 		font-size: 10px;
 	}
 	.submit {
+
 		margin: 12px 0;
 	}
 	.remember {
@@ -3887,14 +3889,14 @@ body:not(.is-cordova) {
 font-size: 45px;
 color:#ffed00;
 margin-bottom: 25px;
-margin-top: 1px;
+margin-top: 50px;
 font-weight: 300;
 }
 
 .clase-desc {
 font-size: 16px;
 color:#ffffff;
-margin-bottom: 80px;
+margin-bottom: 10px;
 font-weight: 200;
 }
 	.wrapper {

packages/rocketchat-ui-login/login/header.html

@@ -5,7 +5,7 @@
 		 <p>clase</p>
 	 </div>
 	 <div class="clase-desc" >
-		 <p>Comunicación entre padres simple y efectiva</p>
+		 <p>Comunicación entre padres<br>simple y efectiva</p>
 	 </div>
 	</header>
 </template>

packages/rocketchat-ui/views/app/home.html

@@ -6,8 +6,8 @@ <h2>
 				<span class="room-title">{{title}}</span>
 			</h2>
 		</header>
-		<div class="content">
+  	<div class="content">
 			{{{body}}}
-		</div>
+		</div> 
 	</section>
 </template>