diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 3ded062ae256d0018028bbd7a3633f9583700503..36e88e4337e964fd1ee2016de86779708252985b 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -405,7 +405,8 @@ export class AtomicServiceNavigation extends ViewPU { Canvas.create(this.context); Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : gradientBackground.alpha]); - Canvas.blur(BLUR_CONSTANT); + Canvas.backdropBlur(BLUR_CONSTANT); + Canvas.height(this.navigationHeight); Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); Canvas.onReady(() => { @@ -623,7 +624,8 @@ export class AtomicServiceNavigation extends ViewPU { Text.minFontSize(14); Text.maxFontSize(26); Text.height(36); - Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.fontWeight(FontWeight.Bold); Text.width(0); @@ -646,7 +648,8 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Column.create(); Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); Column.width('100%'); Column.height('100%'); @@ -668,7 +671,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -688,10 +692,13 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); - SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); @@ -700,7 +707,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -722,6 +730,14 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { SymbolGlyph.create(); SymbolGlyph.attributeModifier.bind(this)(this.sideBarOptions?.sideBarIcon); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.size({ + width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, + height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } + }); }, SymbolGlyph); Button.pop(); }); @@ -730,7 +746,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.sideBarOptions?.sideBarIcon); - Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -763,7 +780,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -783,10 +801,13 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 'bundleName': + '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); - SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); @@ -795,7 +816,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -817,6 +839,14 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { SymbolGlyph.create(); SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.size({ + width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, + height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } + }); }, SymbolGlyph); Button.pop(); }); @@ -825,7 +855,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon); - Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -862,7 +893,8 @@ export class AtomicServiceNavigation extends ViewPU { top: 0, bottom: 0 }, - color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, + color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, style: { right: BorderStyle.Solid } }); @@ -872,7 +904,9 @@ export class AtomicServiceNavigation extends ViewPU { Row.padding({ top: 56 }); Row.focusable(true); Row.defaultFocus(true); - Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, + params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', + 'moduleName': '__harDefaultModuleName__' }); Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -897,7 +931,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Button.stateEffect(false); + Button.backgroundColor('rgba(0, 0, 0, 0)'); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -917,6 +952,14 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { SymbolGlyph.create(); SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.size({ + width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, + height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } + }); }, SymbolGlyph); Button.pop(); }); @@ -925,7 +968,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); - Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + Image.backgroundColor('rgba(0, 0, 0, 0)'); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -954,9 +997,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild(); - Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); - Button.width(36); Button.height(36); + Button.width(36); Button.margin({ start: LengthMetrics.vp(this.marginWindowLeft), end: LengthMetrics.vp(-12), @@ -968,10 +1010,21 @@ export class AtomicServiceNavigation extends ViewPU { start: LengthMetrics.vp(0), top: LengthMetrics.vp(0) }); + Button.backgroundColor('rgba(0, 0, 0, 0)'); + Button.stateEffect(false); + Button.type(ButtonType.Normal); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { SymbolGlyph.create(); SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.size({ + width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, + height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], + 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } + }); }, SymbolGlyph); Button.pop(); }); @@ -981,6 +1034,7 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); Image.height(36); + Image.width(36); Image.margin({ start: LengthMetrics.vp(this.marginWindowLeft), end: LengthMetrics.vp(-12), @@ -992,6 +1046,7 @@ export class AtomicServiceNavigation extends ViewPU { start: LengthMetrics.vp(0), top: LengthMetrics.vp(0) }); + Image.backgroundColor('rgba(0, 0, 0, 0)'); Image.objectFit(ImageFit.Auto); }, Image); }); @@ -1030,6 +1085,7 @@ export class AtomicServiceNavigation extends ViewPU { initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create(); + Stack.align(Alignment.TopStart); Stack.width('100%'); Stack.height('100%'); Stack.onSizeChange((oldValue, newValue) => { diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index 1d2a8bfbdda1b6f96708b22e5cee8b95797addd6..9cef4455b24ca89597a0f5cbb7e6503871f4d1c5 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -167,7 +167,8 @@ export struct AtomicServiceNavigation { Canvas(this.context) .opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : gradientBackground.alpha]) - .blur(BLUR_CONSTANT) + .backdropBlur(BLUR_CONSTANT) + .height(this.navigationHeight) .backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]) .onReady(() => { @@ -453,6 +454,11 @@ export struct AtomicServiceNavigation { Button({ type: ButtonType.Circle }) { SymbolGlyph() .attributeModifier(this.sideBarOptions?.sideBarIcon) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .size({ + width: $r('sys.float.ohos_id_text_size_headline7'), + height: $r('sys.float.ohos_id_text_size_headline7') + }) } .controlButtonStyle() } else { @@ -472,6 +478,11 @@ export struct AtomicServiceNavigation { Button({ type: ButtonType.Circle }) { SymbolGlyph() .attributeModifier(this.titleOptions?.titleIcon) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .size({ + width: $r('sys.float.ohos_id_text_size_headline7'), + height: $r('sys.float.ohos_id_text_size_headline7') + }) } .controlButtonStyle() } else { @@ -511,7 +522,7 @@ export struct AtomicServiceNavigation { @Styles roundIconStyle() { - .backgroundColor($r('sys.color.ohos_id_color_button_normal')) + .backgroundColor('rgba(0, 0, 0, 0)') .width(36) .height(36) .borderRadius(18) @@ -535,7 +546,13 @@ export struct AtomicServiceNavigation { Button({ type: ButtonType.Circle }) { SymbolGlyph() .attributeModifier(this.titleOptions?.titleIcon) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .size({ + width: $r('sys.float.ohos_id_text_size_headline7'), + height: $r('sys.float.ohos_id_text_size_headline7') + }) } + .stateEffect(false) .roundIconStyle() } else { Image(this.titleOptions?.titleIcon ?? this.atomicServiceIcon) @@ -546,6 +563,7 @@ export struct AtomicServiceNavigation { @Styles longIconStyles() { .height(36) + .width(36) .margin({ start: LengthMetrics.vp(this.marginWindowLeft), end: LengthMetrics.vp(-12), @@ -557,6 +575,7 @@ export struct AtomicServiceNavigation { start: LengthMetrics.vp(0), top: LengthMetrics.vp(0) }) + .backgroundColor('rgba(0, 0, 0, 0)') } @Builder @@ -565,10 +584,15 @@ export struct AtomicServiceNavigation { Button() { SymbolGlyph() .attributeModifier(this.titleOptions?.titleIcon) + .fontSize($r('sys.float.ohos_id_text_size_headline7')) + .size({ + width: $r('sys.float.ohos_id_text_size_headline7'), + height: $r('sys.float.ohos_id_text_size_headline7') + }) } - .backgroundColor($r('sys.color.ohos_id_color_button_normal')) - .width(36) .longIconStyles() + .stateEffect(false) + .type(ButtonType.Normal) } else { Image(this.titleOptions?.titleIcon ?? this.atomicServiceIcon) .longIconStyles() @@ -689,6 +713,7 @@ export struct AtomicServiceNavigation { .onNavigationModeChange(this.modeChangeCallback) } } + .align(Alignment.TopStart) .width('100%') .height('100%') .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {