From 9f650e0e3a5c3d80f0b238557b5daeb67d556acd Mon Sep 17 00:00:00 2001 From: samarinsergey Date: Mon, 12 Feb 2024 13:18:41 +0300 Subject: [PATCH] [HOS-1931] Apply theme to Checkbox component --- .../ets/pages/components/CheckboxPage.ets | 102 ++++++++++++++++++ .../components/ComponentsNavigationPage.ets | 4 + .../main/ets/pages/components/RadioPage.ets | 20 +++- .../src/main/ets/theme/CustomColorsImlp.ets | 6 +- .../resources/base/profile/main_pages.json | 1 + 5 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 theme/ThemeDemo/entry/src/main/ets/pages/components/CheckboxPage.ets diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/CheckboxPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/CheckboxPage.ets new file mode 100644 index 0000000..d520660 --- /dev/null +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/CheckboxPage.ets @@ -0,0 +1,102 @@ +import { BrownThemeColors, GreenThemeColors, RedThemeColors } from '../../theme/CustomColorsImlp' +import { CustomThemeImpl } from '../../theme/CustomThemeImpl' + +@Entry +@Component +struct CheckboxPage { + @State customTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) + count: number = 0 + isSelected: boolean[] = [true, true, true] + + build() { + Row() { + Column({ space: '40vp' }) { + Column({ space: '8vp' }) { + Text('Checkbox and CheckboxGroup,\nSystem Theme') + + Column() { + CheckboxGroup({group: 'Group1'}) + + Row() { + Checkbox({group: 'Group1'}) + .select(true) + Text('Apple') + } + + Row() { + Checkbox({group: 'Group1'}) + .select(true) + Text('Orange') + } + + Row() { + Checkbox({group: 'Group1'}) + .select(true) + Text('Peach') + } + } + .alignItems(HorizontalAlign.Start) + } + .width('100%') + + WithTheme(this.customTheme) { + Column({ space: '8vp' }) { + Text('Checkbox and CheckboxGroup,\nCustom Theme') + + Column() { + CheckboxGroup({group: 'Group2'}) + + Row() { + Checkbox({group: 'Group2'}) + .select(this.isSelected[0]) + .onChange((value: boolean) => { + this.isSelected[0] = value + }) + Text('Apple') + } + + Row() { + Checkbox({group: 'Group2'}) + .select(this.isSelected[1]) + .onChange((value: boolean) => { + this.isSelected[1] = value + }) + Text('Orange') + } + + Row() { + Checkbox({group: 'Group2'}) + .select(this.isSelected[2]) + .onChange((value: boolean) => { + this.isSelected[2] = value + }) + Text('Peach') + } + } + .alignItems(HorizontalAlign.Start) + } + .width('100%') + } + } + } + .height('100%') + .onClick(() => { + this.count++ + if (this.count > 2) { + this.count = 0 + } + switch (this.count) { + case 0: + this.customTheme = new CustomThemeImpl(RedThemeColors) + break + case 1: + this.customTheme = new CustomThemeImpl(GreenThemeColors) + break + case 2: + default: + this.customTheme = new CustomThemeImpl(BrownThemeColors) + break + } + }) + } +} \ No newline at end of file diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets index 17b852f..9d9a11b 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets @@ -13,6 +13,10 @@ struct ComponentsNavigationPage { title: 'Button', page: 'pages/components/ButtonThemePage' }, + { + title: 'Checkbox', + page: 'pages/components/CheckboxPage' + }, { title: 'DatePicker', page: 'pages/components/DatePickerPage' diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/RadioPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/RadioPage.ets index 18f4728..e4dbb16 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/RadioPage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/RadioPage.ets @@ -6,6 +6,7 @@ import { CustomThemeImpl } from '../../theme/CustomThemeImpl' struct RadioPage { @State customTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) count: number = 0 + checkedIndex: number = 0 build() { Row() { @@ -40,17 +41,34 @@ struct RadioPage { Column() { Row() { Radio({ value: 'Radio1', group: 'radioGroup2' }) - .checked(true) + .checked(this.checkedIndex === 0) + .onChange((isChecked: boolean) => { + if (isChecked) { + this.checkedIndex = 0 + } + }) Text('Apple') } Row() { Radio({ value: 'Radio2', group: 'radioGroup2' }) + .checked(this.checkedIndex === 1) + .onChange((isChecked: boolean) => { + if (isChecked) { + this.checkedIndex = 1 + } + }) Text('Orange') } Row() { Radio({ value: 'Radio3', group: 'radioGroup2' }) + .checked(this.checkedIndex === 2) + .onChange((isChecked: boolean) => { + if (isChecked) { + this.checkedIndex = 2 + } + }) Text('Peach') } } diff --git a/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets b/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets index d5ec8e4..26075a8 100644 --- a/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets +++ b/theme/ThemeDemo/entry/src/main/ets/theme/CustomColorsImlp.ets @@ -1,6 +1,6 @@ export class RedColors implements CustomColors { fontEmphasize = 0xFFD53032 - iconOnPrimary = 0x33FF1111 + iconOnPrimary = 0xFFFFFFFF iconFourth = 0xFFD00000 iconEmphasize = 0xFFD53032 backgroundPrimary = 0xFFD53032 @@ -13,7 +13,7 @@ export class RedColors implements CustomColors { export class GreenColors implements CustomColors { fontEmphasize = 0xFF00541F - iconOnPrimary = 0x3322FF22 + iconOnPrimary = 0xFFFFFFFF iconFourth = 0xFF00541F iconEmphasize = 0xFF00541F backgroundPrimary = 0xFF00541F @@ -26,7 +26,7 @@ export class GreenColors implements CustomColors { export class BrownColors implements CustomColors { fontEmphasize = 0xFF8B6B5C - iconOnPrimary = 0x33556B55 + iconOnPrimary = 0xFFFFFFFF iconFourth = 0xFF8B6B5C iconEmphasize = 0xFF8B6B5C backgroundPrimary = 0xFF8B6B5C diff --git a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json index 71efd04..f73fbef 100644 --- a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json +++ b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json @@ -21,6 +21,7 @@ "pages/tests/demo1/Demo1NavigationPage", "pages/tests/demo2/Demo2NavigationPage", "pages/components/ButtonThemePage", + "pages/components/CheckboxPage", "pages/components/ComponentsNavigationPage", "pages/components/DatePickerPage", "pages/components/ProgressThemePage", -- Gitee