diff --git a/XTSTests/entry/src/main/ets/pages/components/CheckboxPage.ets b/XTSTests/entry/src/main/ets/pages/components/CheckboxPage.ets index b2b1a0cbb066e3a94dece224add12f4f0ae3b1cb..9fc81323388078e99d97ca303140eb36e2260668 100644 --- a/XTSTests/entry/src/main/ets/pages/components/CheckboxPage.ets +++ b/XTSTests/entry/src/main/ets/pages/components/CheckboxPage.ets @@ -20,7 +20,7 @@ ThemeControl.enableTheme(true) export const checkBoxThemeProperty = 'CheckBoxThemeProperty' export class CheckBoxKeys { -static readonly checkboxGroupSystem = `CheckboxGroup_System` + static readonly checkboxGroupSystem = `CheckboxGroup_System` static readonly checkboxSystem = `Checkbox_System` static readonly checkboxGroupWithTheme = `CheckboxGroup_WithTheme` static readonly checkboxWithTheme = `Checkbox_WithTheme` @@ -32,7 +32,7 @@ struct CheckboxPage { @LocalStorageLink(checkBoxThemeProperty) localTheme: CustomTheme | undefined = redCustomTheme count: number = 0 isSelected: boolean[] = [true] - groups : string[] = [`Group0`, `Group1`] + groups: string[] = [`Group0`, `Group1`] build() { Row() { @@ -41,11 +41,11 @@ struct CheckboxPage { Text('Checkbox and CheckboxGroup,\nSystem Theme') Column() { - CheckboxGroup({group: this.groups[0]}) + CheckboxGroup({ group: this.groups[0] }) .key(CheckBoxKeys.checkboxGroupSystem) Row() { - Checkbox({group: this.groups[0]}) + Checkbox({ group: this.groups[0] }) .select(true) .key(CheckBoxKeys.checkboxSystem) Text('Apple') @@ -60,11 +60,11 @@ struct CheckboxPage { Text('Checkbox and CheckboxGroup,\nCustom Theme') Column() { - CheckboxGroup({group: this.groups[1]}) + CheckboxGroup({ group: this.groups[1] }) .key(CheckBoxKeys.checkboxGroupWithTheme) Row() { - Checkbox({group: this.groups[1]}) + Checkbox({ group: this.groups[1] }) .select(this.isSelected[0]) .onChange((value: boolean) => { this.isSelected[0] = value diff --git a/XTSTests/entry/src/main/ets/pages/components/ProgressPage.ets b/XTSTests/entry/src/main/ets/pages/components/ProgressPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..5b1d8d423b59d6260202aba21d7b7dcc4098bdb0 --- /dev/null +++ b/XTSTests/entry/src/main/ets/pages/components/ProgressPage.ets @@ -0,0 +1,124 @@ +import { storage } from '../../entryability/EntryAbility' +import { redCustomTheme } from '../../themes/CustomTheme' + +ThemeControl.enableTheme(true) + +export const progressThemeProperty = 'CheckBoxThemeProperty' + +export class ProgressKeys { + static readonly progressLinearSystem = `Progress_Linear_System` + static readonly progressEclipseSystem = `Progress_Eclipse_System` + static readonly progressRingSystem = `Progress_Ring_System` + static readonly progressScaleRingSystem = `Progress_ScaleRing_System` + static readonly progressCapsuleSystem = `Progress_Capsule_System` + static readonly progressLinearWithTheme = `Progress_Linear_WithTheme` + static readonly progressEclipseWithTheme = `Progress_Eclipse_WithTheme` + static readonly progressRingWithTheme = `Progress_Ring_WithTheme` + static readonly progressScaleRingWithTheme = `Progress_ScaleRing_WithTheme` + static readonly progressCapsuleWithTheme = `Progress_Capsule_WithTheme` +} + +@Entry(storage) +@Component +struct ProgressPage { + @LocalStorageLink(progressThemeProperty) localTheme: CustomTheme | undefined = redCustomTheme + progressMax = 100 + progress = 30 + + build() { + Row() { + Scroll() { + Column() { + Text("Linear") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Linear + }).style({ + enableSmoothEffect: true + }) + .key(ProgressKeys.progressLinearSystem) + Text("Eclipse") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Eclipse + }).style({ + enableSmoothEffect: true + }) + .key(ProgressKeys.progressEclipseSystem) + Text("Ring") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Ring + }).style({ + enableSmoothEffect: true + }) + .key(ProgressKeys.progressRingSystem) + Text("ScaleRing") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.ScaleRing + }) + .key(ProgressKeys.progressScaleRingSystem) + Text("Capsule") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Capsule + }).style({ + enableSmoothEffect: true + }) + .key(ProgressKeys.progressCapsuleSystem) + Divider() + .height(10) + .color(Color.Black) + WithTheme(this.localTheme) { + Column() { + Text("Linear") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Linear + }) + .key(ProgressKeys.progressLinearWithTheme) + Text("Eclipse") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Eclipse + }) + .key(ProgressKeys.progressEclipseWithTheme) + Text("Ring") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Ring + }) + .key(ProgressKeys.progressRingWithTheme) + Text("ScaleRing") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.ScaleRing + }) + .key(ProgressKeys.progressScaleRingWithTheme) + Text("Capsule") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Capsule + }) + .key(ProgressKeys.progressCapsuleWithTheme) + } + .padding('10vp') + .width('100%') + } + } + }.height('100%') + } + .height('100%') + } +} \ No newline at end of file diff --git a/XTSTests/entry/src/main/ets/test/List.test.ets b/XTSTests/entry/src/main/ets/test/List.test.ets index ddcf4f4f5f785de65743a2da47c3642c07770b95..3c4fa3063e42f933a41db4465e5725568348734f 100644 --- a/XTSTests/entry/src/main/ets/test/List.test.ets +++ b/XTSTests/entry/src/main/ets/test/List.test.ets @@ -15,6 +15,7 @@ import buttonThemeTest from './components/Button.test' import checkboxThemeTest from './components/Checkbox.test' import checkboxGroupThemeTest from './components/CheckboxGroup.test' +import progressThemeTest from './components/Progress.test' import setDefaultThemeTest from './themeTokens/SetDefaultTheme.test' import setThemeBasisTest from './themeTokens/SetThemeBasis.test' import systemThemeTest from './themeTokens/SystemTheme.test' @@ -31,4 +32,5 @@ export default function testsuite() { //buttonThemeTest() TODO: Fix after changes to the Button component are finished. checkboxThemeTest() checkboxGroupThemeTest() + progressThemeTest() } \ No newline at end of file diff --git a/XTSTests/entry/src/main/ets/test/components/Progress.test.ets b/XTSTests/entry/src/main/ets/test/components/Progress.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..f0616e11b97e88cd2a4844a2197c627705f6d8a8 --- /dev/null +++ b/XTSTests/entry/src/main/ets/test/components/Progress.test.ets @@ -0,0 +1,311 @@ +/* + * Copyright (c) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License") + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { describe, it, beforeAll, afterAll, beforeEach } from '@ohos/hypium' +import router from '@ohos.router' +import { ColorData } from '../../themes/checkSystemTokens/colorValues/ColorData' +import { LightColors } from '../../themes/checkSystemTokens/colorValues/LightColor' +import { DarkColors } from '../../themes/checkSystemTokens/colorValues/DarkColors' +import { isDarkMode } from '../../pages/Index' +import { progressThemeProperty } from '../../pages/components/progressPage' +import { storage } from '../../entryability/EntryAbility' +import { greenCustomTheme, redCustomTheme } from '../../themes/CustomTheme' +import { checkValue, frameTime, sleep } from '../Utils' +import { ProgressKeys } from '../../pages/components/ProgressPage' + +const localFrameTime = frameTime * 2 // so much components and hidden animations on the screen for rendering + +export default function progressThemeTest() { + const SUITE: string = `progressThemeTest` + const colorValues: Map = isDarkMode + ? DarkColors.darkColors : LightColors.lightColors + let localTheme: CustomTheme | undefined + let changeTheme: boolean = false + + describe(SUITE, () => { + beforeAll(async () => { + try { + let options: router.RouterOptions = { + url: `pages/components/ProgressPage`, + } + let pages: router.RouterState = router.getState() + if (pages?.name !== `ProgressPage`) { + await router.pushUrl(options).then(() => { + localTheme = storage.get(progressThemeProperty) + console.info(`${SUITE} router.pushUrl success`) + }) + } + } catch (err) { + console.error(`${SUITE} beforeAll error:` + JSON.stringify(err)) + } + }) + + beforeEach(() => { + if (!changeTheme) return + if ((storage.get(progressThemeProperty) as Theme)?.colors?.brand + == redCustomTheme?.colors?.brand) { + storage.setOrCreate(progressThemeProperty, greenCustomTheme) + } else { + storage.setOrCreate(progressThemeProperty, redCustomTheme) + } + localTheme = storage.get(progressThemeProperty) + changeTheme = false + }) + + afterAll(() => { + try { + router.back() + } catch (err) { + console.error(`${SUITE} afterAll error:` + JSON.stringify(err)) + } + }) + /** + * check system colors values of the Linear Progress + */ + it(`ActsProgressThemeColors_0100`, 0, () => { + let CASE: string = `ActsProgressThemeColors_0100` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressLinearSystem) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundSecondary`)?.get()) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, colorValues?.get(`backgroundEmphasize`)?.get()) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Linear Progress + */ + it(`ActsProgressThemeColors_0200`, 0, () => { + let CASE: string = `ActsProgressThemeColors_0200` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressLinearWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundSecondary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Linear Progress + * after change theme + */ + it(`ActsProgressThemeColors_0300`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_0300` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressLinearWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundSecondary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Eclipse Progress + */ + it(`ActsProgressThemeColors_0400`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_0400` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressEclipseSystem) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundSecondary`)?.get()) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, colorValues?.get(`backgroundEmphasize`)?.get()) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Eclipse Progress + */ + it(`ActsProgressThemeColors_0500`, 0, () => { + let CASE: string = `ActsProgressThemeColors_0500` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressEclipseWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundSecondary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Eclipse Progress + * after change theme + */ + it(`ActsProgressThemeColors_0600`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_0600` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressEclipseWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundSecondary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Ring Progress + */ + it(`ActsProgressThemeColors_0700`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_0700` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressRingSystem) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundTertiary`)?.get()) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Ring Progress + */ + it(`ActsProgressThemeColors_0800`, 0, () => { + let CASE: string = `ActsProgressThemeColors_0800` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressRingWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Ring Progress + * after change theme + */ + it(`ActsProgressThemeColors_0900`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_0900` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressRingWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the ScaleRing Progress + */ + it(`ActsProgressThemeColors_1000`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_1000` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressScaleRingSystem) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundTertiary`)?.get()) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the ScaleRing Progress + */ + it(`ActsProgressThemeColors_1100`, 0, () => { + let CASE: string = `ActsProgressThemeColors_1100` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressScaleRingWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the ScaleRing Progress + * after change theme + */ + it(`ActsProgressThemeColors_1200`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_1200` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressScaleRingWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Capsule Progress + */ + it(`ActsProgressThemeColors_1300`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_1300` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressCapsuleSystem) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundTertiary`)?.get()) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(backgroundColor, colorValues?.get(`compBackgroundTertiary`)?.get()) + let edgeColors: EdgeColors = (attrsProgress?.borderColor as EdgeColors) + checkValue(edgeColors?.left, colorValues?.get(`backgroundEmphasize`)?.get()) + checkValue(edgeColors?.top, colorValues?.get(`backgroundEmphasize`)?.get()) + checkValue(edgeColors?.right, colorValues?.get(`backgroundEmphasize`)?.get()) + checkValue(edgeColors?.bottom, colorValues?.get(`backgroundEmphasize`)?.get()) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Capsule Progress + */ + it(`ActsProgressThemeColors_1400`, 0, () => { + let CASE: string = `ActsProgressThemeColors_1400` + console.info(`${SUITE} ${CASE} START`) + let progressJSON = getInspectorByKey(ProgressKeys.progressCapsuleWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + let edgeColors: EdgeColors = (attrsProgress?.borderColor as EdgeColors) + checkValue(edgeColors?.left, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.top, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.right, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.bottom, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check custom colors values of the Capsule Progress + * after change theme + */ + it(`ActsProgressThemeColors_1500`, 0, async () => { + let CASE: string = `ActsProgressThemeColors_1500` + console.info(`${SUITE} ${CASE} START`) + await sleep(localFrameTime) + let progressJSON = getInspectorByKey(ProgressKeys.progressCapsuleWithTheme) + let attrsProgress = (JSON.parse(progressJSON)?.$attrs as ProgressAttribute) + let backgroundColor = attrsProgress?.backgroundColor?.toString().toUpperCase() + checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) + let color = attrsProgress?.color?.toString().toUpperCase() + checkValue(color, localTheme?.colors?.backgroundEmphasize) + let edgeColors: EdgeColors = (attrsProgress?.borderColor as EdgeColors) + checkValue(edgeColors?.left, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.top, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.right, localTheme?.colors?.backgroundEmphasize) + checkValue(edgeColors?.bottom, localTheme?.colors?.backgroundEmphasize) + changeTheme = true + console.info(`${SUITE} ${CASE} END`) + }) + }) +} \ No newline at end of file diff --git a/XTSTests/entry/src/main/resources/base/profile/main_pages.json b/XTSTests/entry/src/main/resources/base/profile/main_pages.json index eedd0238b131b358640f76bc366c1cd34ac3e221..474cab21948b27b31fff2b88992a1a5dfc8e58f0 100644 --- a/XTSTests/entry/src/main/resources/base/profile/main_pages.json +++ b/XTSTests/entry/src/main/resources/base/profile/main_pages.json @@ -6,6 +6,7 @@ "pages/themeTokensPages/SystemThemeTestPage", "pages/themeTokensPages/WithThemeTestPage", "pages/components/ButtonPage", - "pages/components/CheckboxPage" + "pages/components/CheckboxPage", + "pages/components/ProgressPage" ] } diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets index 57df66c5ba1139e7945ec3eec25f852261abb379..48f1dfc83fb75dae36ef19e74f4df4dbd4ea4141 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets @@ -43,24 +43,24 @@ struct SliderThemePage { .width('100%') } - Button('Warning Default Button') - .buttonRole(ButtonRole.Warning) + Button('ERROR Default Button') + .buttonRole(ButtonRole.ERROR) .buttonStyleEx(ButtonStyleEx.Default) - Button('Warning Emphasize Button') - .buttonRole(ButtonRole.Warning) + Button('ERROR Emphasize Button') + .buttonRole(ButtonRole.ERROR) .buttonStyleEx(ButtonStyleEx.Emphasize) - Button('Warning Text Button') + Button('ERROR Text Button') .buttonStyleEx(ButtonStyleEx.Text) - .buttonRole(ButtonRole.Warning) - Button('Warning Small Default Button') + .buttonRole(ButtonRole.ERROR) + Button('ERROR Small Default Button') .buttonStyleEx(ButtonStyleEx.SmallDefault) - .buttonRole(ButtonRole.Warning) - Button('Warning Small Emphasize Button') - .buttonRole(ButtonRole.Warning) + .buttonRole(ButtonRole.ERROR) + Button('ERROR Small Emphasize Button') + .buttonRole(ButtonRole.ERROR) .buttonStyleEx(ButtonStyleEx.SmallEmphasize) - Button('Warning Small Text Button') + Button('ERROR Small Text Button') .buttonStyleEx(ButtonStyleEx.SmallText) - .buttonRole(ButtonRole.Warning) + .buttonRole(ButtonRole.ERROR) } } .width('100%') 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 b4f7b5b32c32241444e2b136bc05518034a5d08b..8688ddcb2ffd8422fcf8b4ea2796ef9eb23d5290 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets @@ -44,7 +44,7 @@ struct ComponentsNavigationPage { }, { title: 'Progress', - page: 'pages/components/ProgressThemePage' + page: 'pages/components/ProgressPage' }, { title: 'Radio', diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressThemePage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressPage.ets similarity index 74% rename from theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressThemePage.ets rename to theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressPage.ets index 24b17aa34eff60be4e7bf9589902114c62324814..eea826d72793dc5a609fe798d6f6301d1da4ee97 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressThemePage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ProgressPage.ets @@ -1,139 +1,185 @@ -import { BrownThemeColors, GreenThemeColors, RedThemeColors } from '../../theme/CustomColorsImlp' -import { CustomThemeImpl } from '../../theme/CustomThemeImpl' - -@Entry -@Component -struct CustomThemePage { - private redText: ResourceStr = "Red Theme" - private greenText: ResourceStr = "Green Theme" - private brownText: ResourceStr = "Brown Theme" - @State customTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) - @State progress: number = 0 - @State themeTextColor: ResourceColor = Color.Red - @State themeLabel: ResourceStr = this.redText - redCustomTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) - greenCustomTheme: CustomTheme = new CustomThemeImpl(GreenThemeColors) - brownCustomTheme: CustomTheme = new CustomThemeImpl(BrownThemeColors) - count = 0 - fdTimer = -1 - increaseValue = 100 - progressMax = 100 - duration = 2000 - - onPageShow() { - this.fdTimer = setInterval(() => { - this.progress += this.increaseValue; - if (this.progress >= 100 || this.progress <= 0) { - this.increaseValue = -this.increaseValue - } - }, this.duration, Number.MAX_VALUE) - } - - onPageHide() { - clearInterval(this.fdTimer) - } - - build() { - Row() { - Scroll() { - Column() { - Text("System") - .fontSize("26") - .fontColor(Color.Blue) - Text("Linear") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Linear - }).style({ - enableSmoothEffect: true - }) - Text("Eclipse") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Eclipse - }).style({ - enableSmoothEffect: true - }) - Text("Ring") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Ring - }).style({ - enableSmoothEffect: true - }) - Text("Capsule") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Capsule - }).style({ - enableSmoothEffect: true - }) - Divider() - .height(10) - .color(Color.Black) - Text(this.themeLabel) - .fontSize("26") - .fontColor(this.themeTextColor) - WithTheme(this.customTheme) { - Column() { - Text("Linear") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Linear - }) - Text("Eclipse") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Eclipse - }) - Text("Ring") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Ring - }) - Text("Capsule") - Progress({ - value: this.progress, - total: this.progressMax, - type: ProgressType.Capsule - }) - } - .padding('10vp') - .width('100%') - } - }.onClick(() => { - this.count++ - if (this.count > 2) { - this.count = 0 - } - switch (this.count) { - case 0: - this.themeLabel = this.redText - this.themeTextColor = Color.Red - this.customTheme = new CustomThemeImpl(RedThemeColors) - break - case 1: - this.themeLabel = this.greenText - this.themeTextColor = Color.Green - this.customTheme = new CustomThemeImpl(GreenThemeColors) - break - case 2: - default: - this.themeLabel = this.brownText - this.themeTextColor = Color.Brown - this.customTheme = new CustomThemeImpl(BrownThemeColors) - break - } - }) - }.height('100%') - } - .height('100%') - } +class CustomThemeImpl implements CustomTheme { + colors?: CustomColors + + constructor(colors: CustomColors) { + this.colors = colors + } +} + +export class RedColors implements CustomColors { + compBackgroundSecondary = '#44D53032' + compBackgroundTertiary = '#44FF2222' + backgroundEmphasize = '#FFDD1111' + interactivePressed = '#FFFF1111' + interactiveFocus = '#AAFF0000' +} + +export class GreenColors implements CustomColors { + backgroundEmphasize = '#4400541F' + compBackgroundSecondary = '#4400541F' + compBackgroundTertiary = '#DD22FF22' + interactivePressed = '#88119911' + interactiveFocus = '#DD22FF22' +} + +export class BrownColors implements CustomColors { + backgroundEmphasize = '#448B6B5C' + compBackgroundSecondary = '#448B6B5C' + compBackgroundTertiary = '#44556B55' + interactivePressed = '#DD556B55' + interactiveFocus = '#FF8B6B5C' +} + +const RedThemeColors = new RedColors() + +const GreenThemeColors = new GreenColors() + +const BrownThemeColors = new BrownColors() + +@Entry +@Component +struct ProgressPage { + private redText: ResourceStr = "Red Theme" + private greenText: ResourceStr = "Green Theme" + private brownText: ResourceStr = "Brown Theme" + @State customTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) + @State progress: number = 0 + @State themeTextColor: ResourceColor = Color.Red + @State themeLabel: ResourceStr = this.redText + redCustomTheme: CustomTheme = new CustomThemeImpl(RedThemeColors) + greenCustomTheme: CustomTheme = new CustomThemeImpl(GreenThemeColors) + brownCustomTheme: CustomTheme = new CustomThemeImpl(BrownThemeColors) + count = 0 + fdTimer = -1 + increaseValue = 100 + progressMax = 100 + duration = 2000 + + onPageShow() { + this.fdTimer = setInterval(() => { + this.progress += this.increaseValue; + if (this.progress >= 100 || this.progress <= 0) { + this.increaseValue = -this.increaseValue + } + }, this.duration, Number.MAX_VALUE) + } + + onPageHide() { + clearInterval(this.fdTimer) + } + + build() { + Row() { + Scroll() { + Column() { + Text("System") + .fontSize("26") + .fontColor(Color.Blue) + Text("Linear") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Linear + }).style({ + enableSmoothEffect: true + }) + Text("Eclipse") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Eclipse + }).style({ + enableSmoothEffect: true + }) + Text("Ring") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Ring + }).style({ + enableSmoothEffect: true + }) + Text("ScaleRing") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.ScaleRing + }) + Text("Capsule") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Capsule + }).style({ + enableSmoothEffect: true + }) + Divider() + .height(10) + .color(Color.Black) + Text(this.themeLabel) + .fontSize("26") + .fontColor(this.themeTextColor) + WithTheme(this.customTheme) { + Column() { + Text("Linear") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Linear + }) + Text("Eclipse") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Eclipse + }) + Text("Ring") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Ring + }) + Text("ScaleRing") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.ScaleRing + }) + Text("Capsule") + Progress({ + value: this.progress, + total: this.progressMax, + type: ProgressType.Capsule + }) + } + .width('100%') + } + }.onClick(() => { + this.count++ + if (this.count > 2) { + this.count = 0 + } + switch (this.count) { + case 0: + this.themeLabel = this.redText + this.themeTextColor = Color.Red + this.customTheme = new CustomThemeImpl(RedThemeColors) + break + case 1: + this.themeLabel = this.greenText + this.themeTextColor = Color.Green + this.customTheme = new CustomThemeImpl(GreenThemeColors) + break + case 2: + default: + this.themeLabel = this.brownText + this.themeTextColor = Color.Brown + this.customTheme = new CustomThemeImpl(BrownThemeColors) + break + } + }) + }.height('100%') + } + .height('100%') + } } \ No newline at end of file diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/dialog/DialogPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/dialog/DialogPage.ets index 68f515a608ce5cfc57893106a1337e6e44ab65f8..0fa957faf20e86b291b50221fea509514ba73ff3 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/dialog/DialogPage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/dialog/DialogPage.ets @@ -121,7 +121,7 @@ struct DialogPage { { text: 'Delete', style: ButtonStyleEx.Emphasize, - role: ButtonRole.Warning, + role: ButtonRole.ERROR, action: () => { prompt.showToast({ message: 'Delete Action' @@ -185,7 +185,7 @@ struct DialogPage { { text: 'No', style: ButtonStyleEx.Text, - role: ButtonRole.Warning, + role: ButtonRole.ERROR, action: () => { prompt.showToast({ message: 'No Action' @@ -234,7 +234,7 @@ struct DialogPage { }, { text: 'Action 4', - role: ButtonRole.Warning, + role: ButtonRole.ERROR, action: () => { prompt.showToast({ message: 'Action 4' @@ -279,7 +279,7 @@ struct DialogPage { { text: 'No', style: ButtonStyleEx.Text, - role: ButtonRole.Warning, + role: ButtonRole.ERROR, action: () => { prompt.showToast({ message: 'No Action' 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 7007932d472e9db5141e95508ef9c099c7e54aa1..9b95649b6c6f6a9e4cd027738f916830ec6f38b0 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 @@ -28,7 +28,7 @@ "pages/components/DividerPage", "pages/components/MenuPage", "pages/components/PanelPage", - "pages/components/ProgressThemePage", + "pages/components/ProgressPage", "pages/components/RadioPage", "pages/components/ScrollBarPage", "pages/components/SearchPage",