Skip to content

Commit 9402cdd

Browse files
NathanWalkerNathanWalker
committed
feat: splitview working impl
1 parent 8c1467f commit 9402cdd

File tree

9 files changed

+314
-69
lines changed

9 files changed

+314
-69
lines changed

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
preferredPrimaryColumnWidthFraction="0.25"
55
preferredSupplementaryColumnWidthFraction="0.33"
66
preferredInspectorColumnWidthFraction="0.2"
7+
(inspectorChange)="splitViewState.onInspectorChange($event)"
78
>
8-
<page-router-outlet name="primary"></page-router-outlet>
9-
<page-router-outlet name="secondary"></page-router-outlet>
10-
<page-router-outlet name="supplementary"></page-router-outlet>
11-
<page-router-outlet name="inspector"></page-router-outlet>
9+
<page-router-outlet name="primary" splitRole="primary"></page-router-outlet>
10+
<page-router-outlet name="secondary" splitRole="secondary"></page-router-outlet>
11+
<page-router-outlet name="supplementary" splitRole="supplementary"></page-router-outlet>
12+
<page-router-outlet name="inspector" splitRole="inspector"></page-router-outlet>
1213
</SplitView>

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,52 @@
1-
import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
1+
import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
22
import {
33
NativeScriptCommonModule,
44
NativeScriptRouterModule,
55
PageRouterOutlet,
66
RouterExtensions,
77
} from '@nativescript/angular';
8+
import { SplitViewState } from './split-view.state';
89

910
@Component({
1011
selector: 'ns-split-view-demo',
1112
templateUrl: './split-view-demo.component.html',
1213
imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
1314
schemas: [NO_ERRORS_SCHEMA],
1415
})
15-
export class SplitViewDemoComponent implements OnInit {
16+
export class SplitViewDemoComponent implements OnInit, AfterViewInit {
1617
router = inject(RouterExtensions);
18+
splitViewState = inject(SplitViewState);
1719

1820
ngOnInit() {
19-
this.router.navigate(
20-
[
21-
'/',
22-
{
23-
outlets: {
24-
primary: ['primary'],
25-
secondary: ['secondary'],
26-
supplementary: ['supplementary'],
27-
inspector: ['inspector'],
28-
},
29-
},
30-
],
31-
{ animated: false },
32-
);
21+
console.log('[SplitViewDemo] ngOnInit');
22+
}
23+
24+
ngAfterViewInit() {
25+
console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
26+
// Use setTimeout to ensure the view is fully rendered and outlets are registered
27+
setTimeout(() => {
28+
console.log('[SplitViewDemo] Navigating to outlets...');
29+
this.router
30+
.navigate(
31+
[
32+
'/',
33+
{
34+
outlets: {
35+
primary: ['primary'],
36+
secondary: ['secondary'],
37+
supplementary: ['supplementary'],
38+
inspector: ['inspector'],
39+
},
40+
},
41+
],
42+
{ animated: false },
43+
)
44+
.then((success) => {
45+
console.log(`[SplitViewDemo] navigation result: ${success}`);
46+
})
47+
.catch((err) => {
48+
console.error(`[SplitViewDemo] navigation error: ${err}`);
49+
});
50+
}, 0);
3351
}
3452
}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,41 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
33

44
@Component({
55
selector: 'ns-split-view-inspector',
6-
template: `<GridLayout rows="auto,*" class="p-16">
7-
<Label row="0" text="Inspector" class="h2 mb-8"></Label>
8-
<Label row="1" text="This is the inspector column." class="text-center"></Label>
9-
</GridLayout>`,
6+
template: `
7+
<ActionBar title="Inspector" flat="true"></ActionBar>
8+
<GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
9+
<ScrollView>
10+
<StackLayout class="p-5">
11+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
12+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
13+
<Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
14+
<Switch col="1" checked="true"></Switch>
15+
</GridLayout>
16+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
17+
<Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
18+
<Switch col="1" checked="false"></Switch>
19+
</GridLayout>
20+
<GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
21+
<Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
22+
<Switch col="1" checked="true"></Switch>
23+
</GridLayout>
24+
</StackLayout>
25+
26+
<StackLayout
27+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
28+
>
29+
<Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
30+
<Label
31+
text="Use the inspector for controls and metadata."
32+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
33+
textWrap="true"
34+
></Label>
35+
<Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
36+
</StackLayout>
37+
</StackLayout>
38+
</ScrollView>
39+
</GridLayout>
40+
`,
1041
imports: [NativeScriptCommonModule],
1142
schemas: [NO_ERRORS_SCHEMA],
1243
})

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-primary.component.ts‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,54 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
33

44
@Component({
55
selector: 'ns-split-view-primary',
6-
template: `<GridLayout rows="auto,*" class="p-16">
7-
<Label row="0" text="Primary" class="h2 mb-8"></Label>
8-
<Label row="1" text="This is the primary column." class="text-center"></Label>
9-
</GridLayout>`,
6+
template: `
7+
<ActionBar title="Primary" flat="true"></ActionBar>
8+
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
9+
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
10+
<Label text="Split View" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
11+
<Label text="Primary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
12+
</StackLayout>
13+
14+
<ScrollView row="1">
15+
<StackLayout class="p-5">
16+
<GridLayout columns="*,auto" class="mb-4">
17+
<Label col="0" text="Navigation" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
18+
<Label col="1" text="4 items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
19+
</GridLayout>
20+
21+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
22+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
23+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
24+
<Label col="1" text="Overview" class="text-base text-slate-900 dark:text-slate-100"></Label>
25+
</GridLayout>
26+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
27+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
28+
<Label col="1" text="Accounts" class="text-base text-slate-900 dark:text-slate-100"></Label>
29+
</GridLayout>
30+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
31+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
32+
<Label col="1" text="Reports" class="text-base text-slate-900 dark:text-slate-100"></Label>
33+
</GridLayout>
34+
<GridLayout rows="auto" columns="auto,*" class="px-4 py-3">
35+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
36+
<Label col="1" text="Settings" class="text-base text-slate-900 dark:text-slate-100"></Label>
37+
</GridLayout>
38+
</StackLayout>
39+
40+
<StackLayout
41+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4"
42+
>
43+
<Label text="Tip" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
44+
<Label
45+
text="On iPad, keep Primary lightweight. Use Secondary for details and Inspector for properties."
46+
class="mt-1 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
47+
textWrap="true"
48+
></Label>
49+
</StackLayout>
50+
</StackLayout>
51+
</ScrollView>
52+
</GridLayout>
53+
`,
1054
imports: [NativeScriptCommonModule],
1155
schemas: [NO_ERRORS_SCHEMA],
1256
})

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-secondary.component.ts‎

Lines changed: 91 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,98 @@
1-
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
1+
import { Component, inject, NO_ERRORS_SCHEMA } from '@angular/core';
22
import { NativeScriptCommonModule } from '@nativescript/angular';
3+
import { SplitViewState } from './split-view.state';
34

45
@Component({
56
selector: 'ns-split-view-secondary',
6-
template: `<GridLayout rows="auto,*" class="p-16">
7-
<Label row="0" text="Secondary" class="h2 mb-8"></Label>
8-
<Label row="1" text="This is the secondary column." class="text-center"></Label>
9-
</GridLayout>`,
7+
template: `
8+
<GridLayout rows="*" class="h-full bg-white dark:bg-slate-950">
9+
<ScrollView>
10+
<StackLayout class="p-5">
11+
<GridLayout columns="*,*" class="mb-4" columnGap="12">
12+
<StackLayout
13+
col="0"
14+
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 mr-1"
15+
>
16+
<Label text="Active" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
17+
<Label text="12" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
18+
<Label text="items" class="text-xs text-slate-500 dark:text-slate-400"></Label>
19+
</StackLayout>
20+
<StackLayout
21+
col="1"
22+
class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4 ml-1"
23+
>
24+
<Label text="Updated" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
25+
<Label text="2m" class="mt-1 text-3xl font-semibold text-slate-900 dark:text-slate-100"></Label>
26+
<Label text="ago" class="text-xs text-slate-500 dark:text-slate-400"></Label>
27+
</StackLayout>
28+
</GridLayout>
29+
30+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
31+
<Label text="Summary" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
32+
<Label
33+
text="This column is ideal for the main content. Put your routed page content here."
34+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
35+
textWrap="true"
36+
></Label>
37+
38+
<GridLayout rows="auto,auto,auto" columns="*,auto" class="mt-4" rowGap="10">
39+
<Label row="0" col="0" text="Status" class="text-sm text-slate-500 dark:text-slate-400"></Label>
40+
<Label
41+
row="0"
42+
col="1"
43+
text="Ready"
44+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
45+
></Label>
46+
47+
<Label row="1" col="0" text="Owner" class="text-sm text-slate-500 dark:text-slate-400"></Label>
48+
<Label
49+
row="1"
50+
col="1"
51+
text="Demo"
52+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
53+
></Label>
54+
55+
<Label row="2" col="0" text="Mode" class="text-sm text-slate-500 dark:text-slate-400"></Label>
56+
<Label
57+
row="2"
58+
col="1"
59+
text="Two-beside"
60+
class="text-sm font-semibold text-slate-900 dark:text-slate-100"
61+
></Label>
62+
</GridLayout>
63+
</StackLayout>
64+
65+
<StackLayout
66+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
67+
>
68+
<Label text="Next" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
69+
<Label
70+
text="Add your real detail view here (lists, charts, forms)."
71+
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
72+
textWrap="true"
73+
></Label>
74+
</StackLayout>
75+
76+
@if (!splitViewState.inspectorVisible()) {
77+
<StackLayout
78+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
79+
(tap)="splitViewState.setInspectorVisible(true)"
80+
>
81+
<Label text="Open Inspector" class="text-xs font-semibold text-slate-500 dark:text-slate-400"></Label>
82+
<Label
83+
text="You can open the Inspector to adjust properties."
84+
class="mt-1 text-sm text-slate-700 dark:text-slate-200"
85+
textWrap="true"
86+
></Label>
87+
</StackLayout>
88+
}
89+
</StackLayout>
90+
</ScrollView>
91+
</GridLayout>
92+
`,
1093
imports: [NativeScriptCommonModule],
1194
schemas: [NO_ERRORS_SCHEMA],
1295
})
13-
export class SplitViewSecondaryComponent {}
96+
export class SplitViewSecondaryComponent {
97+
splitViewState = inject(SplitViewState);
98+
}

‎apps/nativescript-demo-ng/src/app/split-view-demo/split-view-supplementary.component.ts‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,61 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
33

44
@Component({
55
selector: 'ns-split-view-supplementary',
6-
template: `<GridLayout rows="auto,*" class="p-16">
7-
<Label row="0" text="Supplementary" class="h2 mb-8"></Label>
8-
<Label row="1" text="This is the supplementary column." class="text-center"></Label>
9-
</GridLayout>`,
6+
template: `
7+
<GridLayout rows="auto,*" class="h-full bg-slate-50 dark:bg-slate-950">
8+
<StackLayout row="0" class="px-5 pt-5 pb-4 border-b border-slate-200 dark:border-slate-800">
9+
<Label text="Activity" class="text-xl font-semibold text-slate-900 dark:text-slate-100"></Label>
10+
<Label text="Supplementary" class="text-sm text-slate-500 dark:text-slate-400"></Label>
11+
</StackLayout>
12+
13+
<ScrollView row="1">
14+
<StackLayout class="p-5">
15+
<StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
16+
<Label text="Today" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
17+
18+
<GridLayout columns="auto,*" class="mt-3" columnGap="10">
19+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
20+
<Label
21+
col="1"
22+
text="Opened the split view demo"
23+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
24+
textWrap="true"
25+
></Label>
26+
</GridLayout>
27+
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
28+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
29+
<Label
30+
col="1"
31+
text="Routed pages into named outlets"
32+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
33+
textWrap="true"
34+
></Label>
35+
</GridLayout>
36+
<GridLayout columns="auto,*" class="mt-2" columnGap="10">
37+
<Label col="0" text="•" class="text-lg text-slate-500 dark:text-slate-400"></Label>
38+
<Label
39+
col="1"
40+
text="Verified controller mapping on iOS"
41+
class="text-sm text-slate-700 leading-[3] dark:text-slate-200"
42+
textWrap="true"
43+
></Label>
44+
</GridLayout>
45+
</StackLayout>
46+
47+
<StackLayout
48+
class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
49+
>
50+
<Label text="Notes" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
51+
<Label
52+
text="Supplementary is great for context: recent items, related data, or quick shortcuts."
53+
class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
54+
textWrap="true"
55+
></Label>
56+
</StackLayout>
57+
</StackLayout>
58+
</ScrollView>
59+
</GridLayout>
60+
`,
1061
imports: [NativeScriptCommonModule],
1162
schemas: [NO_ERRORS_SCHEMA],
1263
})

0 commit comments

Comments
 (0)