javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 21:01:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Session page

Browse Source
This commit is contained in:
vakrilov
2015-03-21 15:30:54 +02:00
parent 43e1a59ca8
commit b946f0bd9b
10 changed files with 216 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
CrossPlatformModules.csproj
View File

@ -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" />

54
apps/TelerikNEXT/app-view-model.ts
View File

@ -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)];
interface Session {
title: string;
start: Date;
end: Date;
room: string;
}
interface Speakers {
name: string;
title: string;
company: string;
picture: string;
}
var speakers: Array<Speakers> = [
var speakers: Array<Speaker> = [
{
name: "Todd Anglin",
title: "Vice President of Product Strategy",

57
apps/TelerikNEXT/app.css Normal file
View File

@ -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;
}

3
apps/TelerikNEXT/app.ts
View File

@ -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();

BIN
apps/TelerikNEXT/images/background.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 55 KiB

31
apps/TelerikNEXT/main-page.css
View File

@ -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;
}

10
apps/TelerikNEXT/main-page.ts
View File

@ -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) {
@ -14,3 +16,11 @@ export function toggleFavorite(args: gestures.GestureEventData) {
item.favorite = !item.favorite;
}
export function selectSession(args: listView.ItemEventData) {
frame.topmost().navigate({
moduleName: "app/session-page",
context: args.view.bindingContext
});
}

28
apps/TelerikNEXT/main-page.xml
View File

@ -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.formattedText>
<FormattedString fontSize="12" foregroundColor="#a17201">
<FormattedString.spans>
<Span text="Room: " />
<Span text="{{ room }}" fontAttributes="Bold" />
</FormattedString.spans>
</FormattedString>
</Label.formattedText>
</Label>
<Label visibility="{{ room ? 'visible' : 'collapsed' }}" text="{{ room }}" cssClass="info-orange" />
</StackLayout>

16
apps/TelerikNEXT/session-page.ts Normal file
View File

@ -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;
}

79
apps/TelerikNEXT/session-page.xml Normal file
View File

@ -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>