mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(monorepo): initial setup
This commit is contained in:
Nathan Walker
14
apps/ui/app/dialogs/main-page-common.css
Normal file
14
apps/ui/app/dialogs/main-page-common.css
Normal file
@@ -0,0 +1,14 @@
|
||||
Button.even,
|
||||
Button.odd {
|
||||
border-radius: 5;
|
||||
color: white;
|
||||
margin: 0 5 5 0;
|
||||
}
|
||||
|
||||
Button.even {
|
||||
background-color: #0000cc;
|
||||
}
|
||||
|
||||
Button.odd {
|
||||
background-color: #33cc33;
|
||||
}
|
||||
8
apps/ui/app/dialogs/main-page.android.css
Normal file
8
apps/ui/app/dialogs/main-page.android.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@import './main-page-common.css';
|
||||
|
||||
Button.even,
|
||||
Button.odd {
|
||||
height: 25;
|
||||
font-size: 10;
|
||||
padding: 0;
|
||||
}
|
||||
6
apps/ui/app/dialogs/main-page.ios.css
Normal file
6
apps/ui/app/dialogs/main-page.ios.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import './main-page-common.css';
|
||||
|
||||
Button.even,
|
||||
Button.odd {
|
||||
padding: 5;
|
||||
}
|
||||
10
apps/ui/app/dialogs/main-page.ts
Normal file
10
apps/ui/app/dialogs/main-page.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import * as pages from '@nativescript/core/ui/page';
|
||||
import * as observable from '@nativescript/core/data/observable';
|
||||
import * as vmModule from './view-model';
|
||||
|
||||
var viewModel = vmModule.settingsViewModel;
|
||||
|
||||
export function pageLoaded(args: observable.EventData) {
|
||||
var page = <pages.Page>args.object;
|
||||
page.bindingContext = viewModel;
|
||||
}
|
||||
21
apps/ui/app/dialogs/main-page.xml
Normal file
21
apps/ui/app/dialogs/main-page.xml
Normal file
@@ -0,0 +1,21 @@
|
||||
<Page loaded="pageLoaded">
|
||||
<GridLayout rows="auto, *">
|
||||
<Label text="{{ name }}" id="label" style="text-align:center;" />
|
||||
<WrapLayout row="1">
|
||||
<Button class="even" text="action" tap="{{ actionName }}" />
|
||||
<Button class="odd" text="alert" tap="{{ alertName }}" />
|
||||
<Button class="even" text="confirm" tap="{{ confirmName }}" />
|
||||
<Button class="odd" text="login" tap="{{ loginName }}" />
|
||||
<Button class="even" text="promptText" tap="{{ promptText }}" />
|
||||
<Button class="odd" text="promptPass" tap="{{ promptPass }}" />
|
||||
<Button class="even" text="promptEmail" tap="{{ promptEmail }}" />
|
||||
<Button class="odd" text="promptNumber" tap="{{ promptNumber }}" />
|
||||
<Button class="even" text="promptDecimal" tap="{{ promptDecimal }}" />
|
||||
<Button class="odd" text="promptPhone" tap="{{ promptPhone }}" />
|
||||
<Button class="even" text="promptCapitalizationNone" tap="{{ promptCapitalizationNone }}" />
|
||||
<Button class="odd" text="promptCapitalizationAll" tap="{{ promptCapitalizationAll }}" />
|
||||
<Button class="even" text="promptCapitalizationSentences" tap="{{ promptCapitalizationSentences }}" />
|
||||
<Button class="odd" text="promptCapitalizationWords" tap="{{ promptCapitalizationWords }}" />
|
||||
</WrapLayout>
|
||||
</GridLayout>
|
||||
</Page>
|
||||
291
apps/ui/app/dialogs/view-model.ts
Normal file
291
apps/ui/app/dialogs/view-model.ts
Normal file
@@ -0,0 +1,291 @@
|
||||
import * as dialogs from '@nativescript/core/ui/dialogs';
|
||||
import * as observable from '@nativescript/core/data/observable';
|
||||
|
||||
var name = 'Harold Finch';
|
||||
|
||||
export class SettingsViewModel extends observable.Observable {
|
||||
get name(): string {
|
||||
return name;
|
||||
}
|
||||
|
||||
set name(value: string) {
|
||||
name = value;
|
||||
}
|
||||
|
||||
public actionName(args: observable.EventData) {
|
||||
dialogs
|
||||
.action({
|
||||
message: 'Change the name?',
|
||||
cancelButtonText: 'Close',
|
||||
actions: ['Yes', 'No'],
|
||||
})
|
||||
.then((actionResult) => {
|
||||
console.log('### Result: ' + actionResult);
|
||||
if (actionResult === 'Yes') {
|
||||
this.set('name', 'John Reese');
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public alertName(args: observable.EventData) {
|
||||
dialogs
|
||||
.alert({
|
||||
title: 'Name',
|
||||
message: 'The name will change.',
|
||||
okButtonText: 'OK',
|
||||
})
|
||||
.then((alertResult) => {
|
||||
console.log('### Result: ' + alertResult);
|
||||
this.set('name', 'John Reese');
|
||||
});
|
||||
}
|
||||
|
||||
public confirmName(args: observable.EventData) {
|
||||
dialogs
|
||||
.confirm({
|
||||
title: 'Name',
|
||||
message: 'Do you want to change the name?',
|
||||
cancelButtonText: 'No',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'Yes',
|
||||
})
|
||||
.then((confirmResult) => {
|
||||
console.log('### Result: ' + confirmResult);
|
||||
if (confirmResult) {
|
||||
this.set('name', 'John Reese');
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public loginName(args: observable.EventData) {
|
||||
dialogs
|
||||
.login({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
userName: 'John',
|
||||
password: 'Reese',
|
||||
})
|
||||
.then((loginResult) => {
|
||||
console.log('### Result: ' + loginResult.result + ', UserName: ' + loginResult.userName + ', Password: ' + loginResult.password);
|
||||
if (loginResult.result) {
|
||||
this.set('name', loginResult.userName + ' ' + loginResult.password);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptText(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: 'John Reese',
|
||||
inputType: dialogs.inputType.text,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptPass(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: 'John Reese',
|
||||
inputType: dialogs.inputType.password,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptEmail(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter email:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: 'john.reese@nativescript.org',
|
||||
inputType: dialogs.inputType.email,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptNumber(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter a number:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: '1234',
|
||||
inputType: dialogs.inputType.number,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', '1234');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptDecimal(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter a decimal number:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: '13.50',
|
||||
inputType: dialogs.inputType.decimal,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', '13.50');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptPhone(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter a phone:',
|
||||
cancelButtonText: 'Cancel',
|
||||
neutralButtonText: 'Ignore',
|
||||
okButtonText: 'OK',
|
||||
defaultText: '1234',
|
||||
inputType: dialogs.inputType.phone,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', '1234');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptCapitalizationNone(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
okButtonText: 'OK',
|
||||
inputType: dialogs.inputType.text,
|
||||
capitalizationType: dialogs.capitalizationType.none,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptCapitalizationAll(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
okButtonText: 'OK',
|
||||
inputType: dialogs.inputType.text,
|
||||
capitalizationType: dialogs.capitalizationType.all,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptCapitalizationSentences(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
okButtonText: 'OK',
|
||||
inputType: dialogs.inputType.text,
|
||||
capitalizationType: dialogs.capitalizationType.sentences,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public promptCapitalizationWords(args: observable.EventData) {
|
||||
dialogs
|
||||
.prompt({
|
||||
title: 'Name',
|
||||
message: 'Enter name:',
|
||||
cancelButtonText: 'Cancel',
|
||||
okButtonText: 'OK',
|
||||
inputType: dialogs.inputType.text,
|
||||
capitalizationType: dialogs.capitalizationType.words,
|
||||
})
|
||||
.then((promptResult) => {
|
||||
console.log('### Result: ' + promptResult.result + ', Text: ' + promptResult.text);
|
||||
if (promptResult.result) {
|
||||
this.set('name', promptResult.text);
|
||||
} else {
|
||||
this.set('name', 'Harold Finch');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
export var settingsViewModel = new SettingsViewModel();
|
||||
Reference in New Issue
Block a user