diff --git a/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js index 0c07cbd8dce..53fb4f5d259 100644 --- a/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -45,7 +45,7 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationContent = v.navigationContent; } if (v.titleOptions === undefined) { - this.__titleOptions.set({ isEnableBlur: true }); + this.__titleOptions.set({ isBlurEnable: true }); } if (v.navDestinationBuilder !== undefined) { this.navDestinationBuilder = v.navDestinationBuilder; @@ -143,7 +143,7 @@ export class AtomicServiceNavigation extends ViewPU { Navigation.create(this.navPathStack); Navigation.title(ObservedObject.GetRawObject(this.title), { backgroundColor: this.titleOptions?.backgroundColor, - backgroundBlurStyle: this.titleOptions?.isEnableBlur ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, + backgroundBlurStyle: this.titleOptions?.isBlurEnable ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }); Navigation.titleMode(NavigationTitleMode.Mini); diff --git a/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets b/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets index b435540912b..b6386fd478a 100644 --- a/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets @@ -20,7 +20,7 @@ export struct AtomicServiceNavigation { @State navPathStack?: NavPathStack = new NavPathStack(); @BuilderParam navigationContent?: Callback; @Prop title?: ResourceStr; - @Prop titleOptions?: TitleOptions = { isEnableBlur: true }; + @Prop titleOptions?: TitleOptions = { isBlurEnable: true }; @Prop hideTitleBar?: boolean; @Prop navBarWidth?: Length; @Prop mode?: NavigationMode; @@ -42,7 +42,7 @@ export struct AtomicServiceNavigation { } .title(this.title, { backgroundColor: this.titleOptions?.backgroundColor, - backgroundBlurStyle: this.titleOptions?.isEnableBlur ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, + backgroundBlurStyle: this.titleOptions?.isBlurEnable ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }) .titleMode(NavigationTitleMode.Mini) @@ -61,6 +61,6 @@ export struct AtomicServiceNavigation { export interface TitleOptions { backgroundColor?: ResourceColor, - isEnableBlur?: boolean, + isBlurEnable?: boolean, barStyle?: BarStyle } \ No newline at end of file diff --git a/advanced_ui_component/atomicservicetabs/source/atomicservicetabs.ets b/advanced_ui_component/atomicservicetabs/source/atomicservicetabs.ets index 4360e5a1130..4108aea7ef4 100644 --- a/advanced_ui_component/atomicservicetabs/source/atomicservicetabs.ets +++ b/advanced_ui_component/atomicservicetabs/source/atomicservicetabs.ets @@ -30,8 +30,8 @@ export struct AtomicServiceTabs { @Prop barOverlap?: boolean = true; controller?: TabsController = new TabsController(); onChange?: (index: number) => void; - onTabBarClick?: (index: number) => void; - onContentWillChange?: (currentIndex: number, comingIndex: number) => boolean; + onTabBarClick?: Callback; + onContentWillChange?: OnContentWillChangeCallback; build() { Tabs({ @@ -88,4 +88,5 @@ export enum TabBarPosition { BOTTOM = 1 } -export type TabContentBuilder = () => void; \ No newline at end of file +export type TabContentBuilder = () => void; +export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean; \ No newline at end of file diff --git a/advanced_ui_component/interstitialdialogaction/interfaces/interstitialdialogaction.js b/advanced_ui_component/interstitialdialogaction/interfaces/interstitialdialogaction.js index d27ae8e0d4e..61bcff3534f 100644 --- a/advanced_ui_component/interstitialdialogaction/interfaces/interstitialdialogaction.js +++ b/advanced_ui_component/interstitialdialogaction/interfaces/interstitialdialogaction.js @@ -22,6 +22,9 @@ const DIALOG_OFFSET_Y_FOR_BAR = -88; const DIALOG_OFFSET_Y_FOR_NONE = -44; const STANDARD_MIN_COMPONENT_HEIGHT = 82; const STANDARD_MAX_COMPONENT_HEIGHT = 94; +const DIALOG_SHADOW_RADIUS = 16; +const DIALOG_SHADOW_OFFSET_Y = 10; +const DIALOG_SHADOW_COLOR = '#19000000'; const TITLE_LINE_DISTANCE = 2; const TITLE_MAX_LINE = 2; const SUBTITLE_MAX_LINE = 1; @@ -83,6 +86,12 @@ function dialogBuilder(k, l = null) { (l ? l : this).observeComponentCreation2((t1, u1, v1 = m) => { Flex.create(); Flex.backgroundColor(v1.options.backgroundImage === undefined ? '#EBEEF5' : 'rgba(0,0,0,0)'); + Flex.shadow({ + radius: DIALOG_SHADOW_RADIUS, + offsetX: 0, + offsetY: DIALOG_SHADOW_OFFSET_Y, + color: DIALOG_SHADOW_COLOR + }); Flex.height(STANDARD_MIN_COMPONENT_HEIGHT); Flex.width('100%'); Flex.alignSelf(ItemAlign.End); @@ -115,7 +124,8 @@ function dialogBuilder(k, l = null) { }, Row); (l ? l : this).observeComponentCreation2((m1, n1, o1 = m) => { SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.xmark_circle_fill'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); - SymbolGlyph.fontColor([o1.options.iconStyle === IconStyle.DARK ? CLOSE_ICON_DARK_RESOURCE : CLOSE_ICON_LIGHT_RESOURCE]); + SymbolGlyph.fontColor([o1.options.iconStyle === IconStyle.DARK ? + CLOSE_ICON_DARK_RESOURCE : CLOSE_ICON_LIGHT_RESOURCE]); SymbolGlyph.borderRadius(CLOSE_BUTTON_BORDER_RADIUS); SymbolGlyph.width(CLOSE_BUTTON_ICON_SIZE); SymbolGlyph.height(CLOSE_BUTTON_ICON_SIZE); @@ -155,7 +165,8 @@ function dialogBuilder(k, l = null) { Row.pop(); (l ? l : this).observeComponentCreation2((g1, h1, i1 = m) => { Flex.create({ - direction: i1.options.titlePosition === TitlePosition.BOTTOM ? FlexDirection.ColumnReverse : FlexDirection.Column, + direction: i1.options.titlePosition === TitlePosition.BOTTOM ? + FlexDirection.ColumnReverse : FlexDirection.Column, justifyContent: FlexAlign.Center }); Flex.constraintSize({ @@ -224,8 +235,8 @@ export class InterstitialDialogAction { autoCancel: false, offset: { dx: DIALOG_OFFSET_X, - dy: this.bottomOffsetType === BottomOffset.OFFSET_FOR_BAR ? DIALOG_OFFSET_Y_FOR_BAR : - DIALOG_OFFSET_Y_FOR_NONE + dy: this.bottomOffsetType === BottomOffset.OFFSET_FOR_BAR ? + DIALOG_OFFSET_Y_FOR_BAR : DIALOG_OFFSET_Y_FOR_NONE }, alignment: DialogAlignment.Bottom, transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY.animation({ duration: 150, curve: Curve.Sharp }) diff --git a/advanced_ui_component/interstitialdialogaction/source/interstitialdialogaction.ets b/advanced_ui_component/interstitialdialogaction/source/interstitialdialogaction.ets index 3d46f0f07b3..427e504b5fc 100644 --- a/advanced_ui_component/interstitialdialogaction/source/interstitialdialogaction.ets +++ b/advanced_ui_component/interstitialdialogaction/source/interstitialdialogaction.ets @@ -27,6 +27,10 @@ const DIALOG_OFFSET_Y_FOR_NONE: number = -44; const STANDARD_MIN_COMPONENT_HEIGHT: number = 82; const STANDARD_MAX_COMPONENT_HEIGHT: number = 94; +const DIALOG_SHADOW_RADIUS: number = 16; +const DIALOG_SHADOW_OFFSET_Y: number = 10; +const DIALOG_SHADOW_COLOR: ResourceStr = '#19000000'; + const TITLE_LINE_DISTANCE: number = 2; const TITLE_MAX_LINE: number = 2; const SUBTITLE_MAX_LINE: number = 1; @@ -165,6 +169,12 @@ function dialogBuilder(params: DialogParams) { .margin({ left: TEXT_LEFT_MARGIN_SIZE }) } .backgroundColor(params.options.backgroundImage === undefined ? '#EBEEF5' : 'rgba(0,0,0,0)') + .shadow({ + radius: DIALOG_SHADOW_RADIUS, + offsetX: 0, + offsetY: DIALOG_SHADOW_OFFSET_Y, + color: DIALOG_SHADOW_COLOR + }) .height(STANDARD_MIN_COMPONENT_HEIGHT) .width('100%') .alignSelf(ItemAlign.End) @@ -232,11 +242,11 @@ export class InterstitialDialogAction { private dialogParam: DialogParams; private bottomOffsetType?: BottomOffset; - constructor(value: DialogOptions) { - this.uiContext = value.uiContext; - this.bottomOffsetType = value.bottomOffsetType; + constructor(dialogOptions: DialogOptions) { + this.uiContext = dialogOptions.uiContext; + this.bottomOffsetType = dialogOptions.bottomOffsetType; this.dialogParam = new DialogParams( - value, + dialogOptions, () => { this.closeDialog() }