Session page

CrossPlatformModules.csproj

@@ -77,6 +77,7 @@
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\TelerikNEXT\app-view-model.ts" />
     <TypeScriptCompile Include="apps\TelerikNEXT\app.ts" />
+    <TypeScriptCompile Include="apps\TelerikNEXT\session-page.ts" />
     <TypeScriptCompile Include="apps\TelerikNEXT\main-page.ts" />
     <TypeScriptCompile Include="apps\template-blank\app.ts" />
     <TypeScriptCompile Include="apps\template-blank\main-page.ts">
@@ -541,6 +542,7 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\gallery-app\layouts\dock-layout.xml" />
+    <Content Include="apps\TelerikNEXT\session-page.xml" />
     <Content Include="apps\template-master-detail\details-view.xml" />
     <Content Include="apps\template-master-detail\main-page.minWH600.xml" />
     <Content Include="apps\TelerikNEXT\images\background.jpg" />
@@ -665,6 +667,13 @@
     <Content Include="apps\TelerikNEXT\images\addfav.png" />
     <Content Include="apps\TelerikNEXT\images\fav.png" />
     <Content Include="apps\TelerikNEXT\main-page.css" />
+    <Content Include="apps\TelerikNEXT\images\jen.png" />
+    <Content Include="apps\TelerikNEXT\images\michael.png" />
+    <Content Include="apps\TelerikNEXT\images\sam.png" />
+    <Content Include="apps\TelerikNEXT\images\svetla.png" />
+    <Content Include="apps\TelerikNEXT\images\tj.png" />
+    <Content Include="apps\TelerikNEXT\images\todd.png" />
+    <Content Include="apps\TelerikNEXT\app.css" />
     <Content Include="apps\TelerikNEXT\main-page.xml" />
     <Content Include="apps\template-blank\package.json" />
     <TypeScriptCompile Include="apps\tests\camera-tests.ts" />

apps/TelerikNEXT/app-view-model.ts

@@ -1,7 +1,31 @@
 import observable = require("data/observable");
 import button = require("ui/button");
 
-var dayHeaders = ["WORKSHOPS", "CONFERENCE DAY 1", "CONFERENCE DAY 2"];
+interface ConferenceDay {
+    date: Date;
+    title: string;
+}
+
+interface Session {
+    title: string;
+    start: Date;
+    end: Date;
+    room: string;
+}
+
+interface Speaker {
+    name: string;
+    title: string;
+    company: string;
+    picture: string;
+}
+
+var conferenceDays: Array<ConferenceDay> = [
+    { title: "WORKSHOPS", date: new Date(2015, 5, 3) },
+    { title: "CONFERENCE DAY 1", date: new Date(2015, 5, 4) },
+    { title: "CONFERENCE DAY 2", date: new Date(2015, 5, 5) }
+];
+
 
 export class AppViewModel extends observable.Observable {
     public selectedViewIndex: number;
@@ -18,7 +42,7 @@ export class AppViewModel extends observable.Observable {
         return this._sessions;
     }
 
-    get speakers(): Array<Speakers> {
+    get speakers(): Array<Speaker> {
         return speakers;
     }
 
@@ -44,7 +68,7 @@ export class AppViewModel extends observable.Observable {
             this._selectedIndex = value;
             this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "selectedIndex", value: value });
 
-            this.set("dayHeader", dayHeaders[value]);
+            this.set("dayHeader", conferenceDays[value].title);
 
             if (this.search !== "") {
                 this.search = "";
@@ -56,7 +80,7 @@ export class AppViewModel extends observable.Observable {
 
     private filter() {
         this._sessions = sessions.filter(s=> {
-            return s.start.getDay() === dates[this.selectedIndex].getDay()
+            return s.start.getDay() === conferenceDays[this.selectedIndex].date.getDay()
                 && s.title.toLocaleLowerCase().indexOf(this.search.toLocaleLowerCase()) >= 0;
         });
 
@@ -139,6 +163,10 @@ export class SessionModel extends observable.Observable implements Session {
             this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "favorite", value: this._favorite });
         }
     }
+
+    get speakers(): Array<Speaker> {
+        return speakers.slice(0, 3);
+    }
 }
 
 var sessions: Array<SessionModel> = [
@@ -473,23 +501,7 @@ var sessions: Array<SessionModel> = [
         room: "General Session"
     })];
 
-var dates: Array<Date> = [new Date(2015, 5, 3), new Date(2015, 5, 4), new Date(2015, 5, 5)];
+var speakers: Array<Speaker> = [
-
-interface Session {
-    title: string;
-    start: Date;
-    end: Date;
-    room: string;
-}
-
-interface Speakers {
-    name: string;
-    title: string;
-    company: string;
-    picture: string;
-}
-
-var speakers: Array<Speakers> = [
     {
         name: "Todd Anglin",
         title: "Vice President of Product Strategy",

apps/TelerikNEXT/app.css

@@ -0,0 +1,57 @@
+Label, Button {
+    margin: 0 5;
+}
+
+Image {
+    margin: 5;
+}
+
+.header-image {
+    margin: 0;
+}
+
+.page-title {
+    font-size: 18;
+    color: #fac950;
+}
+
+.favourite-image{
+     width: 32;
+     height: 32; 
+     vertical-align: center;
+     margin: 20;
+}
+
+.info {
+    color: #555555;
+}
+
+.info-bigger {
+    color: #555555;
+    font-size: 18;
+}
+
+.info-orange {
+    font-size: 16;
+    color: #A17201;
+}
+
+.break-row {
+    padding: 5;
+    background-color: #FFFBF0;
+}
+
+.list-view-row {
+    padding: 5;
+}
+
+.section-header {
+    color: #A17201;
+    margin: 5 5 0 10;
+}
+
+.horizontalLine {
+    height: 1;
+    background-color: #FAC950;
+    margin: 5 5 0 10;
+}

apps/TelerikNEXT/app.ts

@@ -3,5 +3,8 @@
 // Set the start module for the application
 application.mainModule = "app/main-page";
 
+// TODO: This is only neede because of the deply script.
+application.cssFile = "app/TelerikNEXT/app.css";
+
 // Start the application
 application.start();

apps/TelerikNEXT/main-page.css

@@ -1,31 +0,0 @@
-Label, Button, Image {
-    margin: 5;
-}
-
-.speakerPicture {
-    width: 100;
-    height: 100;
-}
-
-.speakerTitle, .speakerCompany {
-    font-size: 18;
-    color: #07ab9e;
-}
-
-.speakerName {
-    font-size: 22;
-    color: black;
-}
-
-.title {
-    font-size: 22;
-    color: black;
-}
-
-.sessionRow{
-
-}
-
-.breakRow{
-    background-color: #FFFBF0;
-}

apps/TelerikNEXT/main-page.ts

@@ -1,6 +1,8 @@
 import observable = require("data/observable");
 import pages = require("ui/page");
 import gestures = require("ui/gestures");
+import listView = require("ui/list-view");
+import frame = require("ui/frame");
 import appViewModel = require("./app-view-model");
 
 export function pageLoaded(args: observable.EventData) {
@@ -13,4 +15,12 @@ export function toggleFavorite(args: gestures.GestureEventData) {
     var item = <appViewModel.SessionModel>args.view.bindingContext;
 
     item.favorite = !item.favorite;
+}
+
+
+export function selectSession(args: listView.ItemEventData) { 
+    frame.topmost().navigate({
+        moduleName: "app/session-page",
+        context: args.view.bindingContext
+    });
 }

apps/TelerikNEXT/main-page.xml

@@ -38,9 +38,9 @@
             </SegmentedBar.items>
           </SegmentedBar>
 
-          <Label style="horizontal-align: center;margin: 15;">
+          <Label cssClass="page-title" horizontalAlignment="center" margin="15">
             <Label.formattedText>
-              <FormattedString fontSize="18" foregroundColor="#fac950">
+              <FormattedString>
                 <FormattedString.spans>
                   <Span text="{{ dayHeader }}" fontAttributes="Bold" />
                 </FormattedString.spans>
@@ -51,39 +51,29 @@
 
         <SearchBar text="{{ search }}" hint="Search" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="1" />
 
-        <ListView items="{{ sessions }}" row="2" separatorColor="#fac950">
+        <ListView items="{{ sessions }}" row="2" separatorColor="#fac950" itemTap="selectSession">
           <ListView.itemTemplate>
-            <GridLayout columns="auto, *" cssClass="{{ canBeFavorited ? 'sessionRow' : 'breakRow' }}">
+            <GridLayout columns="auto, *" cssClass="{{ canBeFavorited ? 'list-view-row' : 'break-row' }}">
 
               <Image src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" 
                      visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}" 
-           tap="toggleFavorite" width="32" height="32" vertical-align="center" margin="20" />
+                     tap="toggleFavorite" cssClass="favourite-image" />
 
               <StackLayout col="1">
 
-                <Label>
+                <Label cssClass="info-orange">
                   <Label.formattedText>
-                    <FormattedString fontSize="18" foregroundColor="#a17201">
+                    <FormattedString>
                       <FormattedString.spans>
-                        <Span text="Time:" />
                         <Span text="{{ range }}" fontAttributes="Bold" />
                       </FormattedString.spans>
                     </FormattedString>
                   </Label.formattedText>
                 </Label>
 
-                <Label text="{{ title }}" textWrap="true" cssClass="title" />
+                <Label text="{{ title }}" textWrap="true" cssClass="info-bigger"/>
 
-                <Label visibility="{{ room ? 'visible' : 'collapsed' }}">
+                <Label visibility="{{ room ? 'visible' : 'collapsed' }}" text="{{ room }}" cssClass="info-orange" />
-                  <Label.formattedText>
-                    <FormattedString  fontSize="12" foregroundColor="#a17201">
-                      <FormattedString.spans>
-                        <Span text="Room: " />
-                        <Span text="{{ room }}" fontAttributes="Bold" />
-                      </FormattedString.spans>
-                    </FormattedString>
-                  </Label.formattedText>
-                </Label>
 
               </StackLayout>
 

apps/TelerikNEXT/session-page.ts

@@ -0,0 +1,16 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import gestures = require("ui/gestures");
+import appViewModel = require("./app-view-model");
+
+export function pageNavigatedTo(args: observable.EventData) {
+    var page = <pages.Page>args.object;
+
+    page.bindingContext = page.navigationContext;
+}
+
+export function toggleFavorite(args: gestures.GestureEventData) {
+    var item = <appViewModel.SessionModel>args.view.bindingContext;
+
+    item.favorite = !item.favorite;
+}

apps/TelerikNEXT/session-page.xml

@@ -0,0 +1,79 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd"
+      xmlns:tsb="app/TelerikNEXT/TelerikUI/side-bar"
+      navigatedTo="pageNavigatedTo">
+
+  <GridLayout rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="70, *">
+
+    <!-- HEADER -->
+    <Image colSpan="2" src="~/app/images/background.jpg" stretch="aspectFill" cssClass="header-image"/>
+
+    <StackLayout col="1" >
+      <Label text="{{ title }}" textWrap="true" cssClass="page-title" margin="15 5 0 5"/>
+
+      <Label cssClass="info-orange">
+        <Label.formattedText>
+          <FormattedString>
+            <FormattedString.spans>
+              <Span text="{{ range + ',' + room }}" fontAttributes="Bold" />
+            </FormattedString.spans>
+          </FormattedString>
+        </Label.formattedText>
+      </Label>
+    </StackLayout>
+
+    <Image tap="toggleFavorite" cssClass="favourite-image"
+      src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}"
+      visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}" />
+
+
+    <!-- Description -->
+    <Label cssClass="info" textWrap="true" row="1" col="1" text="Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. " />
+
+    <!-- Line -->
+    <StackLayout cssClass="horizontalLine"  row="2" col="1"/>
+
+    <!-- Speakers -->
+    <Label text="Speakers" cssClass="section-header" row="3" col="1" />
+    <ListView items="{{ speakers }}" row="4" colSpan="2" height="{{ speakers.length * 70 }}" selectedBackgroundColor="#fac950" separatorColor="#FFFFFF">
+      <ListView.itemTemplate>
+        <GridLayout columns="70, *" cssClass="list-view-row">
+          <Image src="{{ picture }}" verticalAlignment="top"/>
+
+          <StackLayout col="1">
+            <Label cssClass="info">
+              <Label.formattedText>
+                <FormattedString>
+                  <FormattedString.spans>
+                    <Span text="{{ name }}" fontAttributes="Bold" />
+                  </FormattedString.spans>
+                </FormattedString>
+              </Label.formattedText>
+            </Label>
+            <Label cssClass="info">
+              <Label.formattedText>
+                <FormattedString>
+                  <FormattedString.spans>
+                    <Span text="{{ title }}" fontAttributes="Italic" />
+                  </FormattedString.spans>
+                </FormattedString>
+              </Label.formattedText>
+            </Label>
+            <Label text="{{ company }}" cssClass="info"/>
+          </StackLayout>
+
+        </GridLayout>
+      </ListView.itemTemplate>
+    </ListView>
+
+    <!-- Line -->
+    <StackLayout cssClass="horizontalLine" row="5" col="1"/>
+
+    <!-- More -->
+    <Label text="More" cssClass="section-header" row="6" col="1"/>
+
+    <Label text="LEAVE FEEDBACK" row="7" col="1"/>
+
+    <Label text="WATCH VIDEOS" row="8" col="1"/>
+
+  </GridLayout>
+</Page>