Extend Settings page to feature each setting item details on a separate page.

diff --git a/app/settings/settings-item-detail/settings-item-detail-page.ts b/app/settings/settings-item-detail/settings-item-detail-page.ts
new file mode 100644 (file)
index 0000000..6964552
--- /dev/null
+++ b/app/settings/settings-item-detail/settings-item-detail-page.ts
@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import { EventData, View, NavigatedData, Page } from '@nativescript/core'
+import { Item } from '../shared/item'
+
+export function onNavigatingTo (args: NavigatedData) {
+       const page = args.object as Page
+       const item = args.context as Item
+       page.bindingContext = item
+}
+
+export function onBackButtonTap (args: EventData) {
+       const view = args.object as View
+       const page = view.page as Page
+
+       page.frame.goBack()
+}

diff --git a/app/settings/settings-page.xml b/app/settings/settings-item-detail/settings-item-detail-page.xml
similarity index 57%
rename from app/settings/settings-page.xml
rename to app/settings/settings-item-detail/settings-item-detail-page.xml
index 45e30bf83d9673f459dbd60b752c3d4c9f7f6a05..b22e936591688a638c1d86e7e7b8bd0e2a73529e 100644 (file)
--- a/app/settings/settings-page.xml
+++ b/app/settings/settings-item-detail/settings-item-detail-page.xml
@@ -8,16 +8,17 @@ SPDX-License-Identifier: GPL-3.0-or-later
                xmlns="http://schemas.nativescript.org/tns.xsd"
                >
        <ActionBar>
-               <Label text="Settings" />
-       </ActionBar>
-       <GridLayout class="page__content">
-               <Label
-                               class="page__content-icon fas"
-                               text="&#x2699;"
+               <NavigationButton
+                               tap="onBackButtonTap"
+                               android.systemIcon="ic_menu_back"
                                />
+               <Label text="{{ name }}" />
+       </ActionBar>
+       <GridLayout>
                <Label
-                               class="page__content-placeholder"
-                               text="-- Settings go here --"
+                               class="m-10 h3"
+                               text="{{ description }}"
+                               verticalAlignment="top"
                                />
        </GridLayout>
 </Page>

diff --git a/app/settings/settings-items-page.ts b/app/settings/settings-items-page.ts
new file mode 100644 (file)
index 0000000..8d3330e
--- /dev/null
+++ b/app/settings/settings-items-page.ts
@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import { View, ItemEventData, NavigatedData, Page } from '@nativescript/core'
+
+import { SettingsViewModel } from './settings-view-model'
+import { Item } from './shared/item'
+
+export function onNavigatingTo (args: NavigatedData) {
+       const page = <Page>args.object
+       page.bindingContext = new SettingsViewModel()
+}
+
+export function onItemTap (args: ItemEventData) {
+       const view = <View>args.view
+       const page = <Page>view.page
+       const tappedItem = <Item>view.bindingContext
+
+       page.frame.navigate({
+               moduleName: 'settings/settings-item-detail/settings-item-detail-page',
+               context: tappedItem,
+               animated: true,
+               transition: {
+                       name: 'slide',
+                       duration: 200,
+                       curve: 'ease',
+               },
+       })
+}

diff --git a/app/settings/settings-items-page.xml b/app/settings/settings-items-page.xml
new file mode 100644 (file)
index 0000000..c2af64a
--- /dev/null
+++ b/app/settings/settings-items-page.xml
@@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<Page
+               navigatingTo="onNavigatingTo"
+               xmlns="http://schemas.nativescript.org/tns.xsd"
+               >
+       <ActionBar>
+               <Label text="Settings" />
+       </ActionBar>
+       <ListView
+                       items="{{ items }}"
+                       itemTap="onItemTap"
+                       >
+               <ListView.itemTemplate>
+                       <StackLayout orientation="horizontal">
+                               <Label
+                                               text="{{ name }}"
+                                               textWrap="true"
+                                               />
+                       </StackLayout>
+               </ListView.itemTemplate>
+       </ListView>
+</Page>

diff --git a/app/settings/settings-page.ts b/app/settings/settings-page.ts
deleted file mode 100644 (file)
index 8cedeb4..0000000
--- a/app/settings/settings-page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
-// SPDX-License-Identifier: GPL-3.0-or-later
-
-import { NavigatedData, Page } from '@nativescript/core'
-import { SettingsViewModel } from './settings-view-model'
-
-export function onNavigatingTo (args: NavigatedData) {
-       const page = <Page>args.object
-       page.bindingContext = new SettingsViewModel()
-}

diff --git a/app/settings/settings-view-model.ts b/app/settings/settings-view-model.ts
index 117d32532b54442d01d19a94c9ef5f96989bfab3..96a4ba17ed9d02b1fe53e729444f5dcff58374ff 100644 (file)
--- a/app/settings/settings-view-model.ts
+++ b/app/settings/settings-view-model.ts
@@ -2,9 +2,79 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import { Observable } from '@nativescript/core'
+import { Item } from './shared/item'
 
 export class SettingsViewModel extends Observable {
+       items: Array<Item>
+
        constructor () {
                super()
+
+               this.items = new Array<Item>(
+                       {
+                               name: 'Item 1',
+                               description: 'Description for Item 1',
+                       },
+                       {
+                               name: 'Item 2',
+                               description: 'Description for Item 2',
+                       },
+                       {
+                               name: 'Item 3',
+                               description: 'Description for Item 3',
+                       },
+                       {
+                               name: 'Item 4',
+                               description: 'Description for Item 4',
+                       },
+                       {
+                               name: 'Item 5',
+                               description: 'Description for Item 5',
+                       },
+                       {
+                               name: 'Item 6',
+                               description: 'Description for Item 6',
+                       },
+                       {
+                               name: 'Item 7',
+                               description: 'Description for Item 7',
+                       },
+                       {
+                               name: 'Item 8',
+                               description: 'Description for Item 8',
+                       },
+                       {
+                               name: 'Item 9',
+                               description: 'Description for Item 9',
+                       },
+                       {
+                               name: 'Item 10',
+                               description: 'Description for Item 10',
+                       },
+                       {
+                               name: 'Item 11',
+                               description: 'Description for Item 11',
+                       },
+                       {
+                               name: 'Item 12',
+                               description: 'Description for Item 12',
+                       },
+                       {
+                               name: 'Item 13',
+                               description: 'Description for Item 13',
+                       },
+                       {
+                               name: 'Item 14',
+                               description: 'Description for Item 14',
+                       },
+                       {
+                               name: 'Item 15',
+                               description: 'Description for Item 15',
+                       },
+                       {
+                               name: 'Item 16',
+                               description: 'Description for Item 16',
+                       }
+               )
        }
 }

diff --git a/app/settings/shared/item.ts b/app/settings/shared/item.ts
new file mode 100644 (file)
index 0000000..dd14792
--- /dev/null
+++ b/app/settings/shared/item.ts
@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+export interface Item {
+       name: string
+       description: string
+}