From 1ccc6fdef79ecb46f2ea43ded41d07012bc403cb Mon Sep 17 00:00:00 2001 From: lizhi Date: Tue, 5 Jul 2022 17:32:40 +0800 Subject: [PATCH] =?UTF-8?q?[systemui]=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: lizhi --- .../main/ets/default/pages/CapsuleIcon.ets | 55 ++++++++++--------- .../ohos/view/component/appItemComponent.ets | 28 +++++----- .../com/ohos/view/component/headComponent.ets | 43 ++++++++------- .../view/NotificationListComponent.ets | 5 -- .../view/item/bannerNotificationItem.ets | 18 +++--- .../ohos/noticeItem/view/item/customItem.ets | 1 - .../ohos/noticeItem/view/item/generalItem.ets | 19 ++----- .../ohos/noticeItem/view/item/groupItem.ets | 9 +-- .../noticeItem/view/item/notificationItem.ets | 4 +- .../ohos/noticeItem/view/item/titleItem.ets | 15 ++--- 10 files changed, 86 insertions(+), 111 deletions(-) diff --git a/features/capsulecomponent/src/main/ets/default/pages/CapsuleIcon.ets b/features/capsulecomponent/src/main/ets/default/pages/CapsuleIcon.ets index 137265c5..14f39569 100644 --- a/features/capsulecomponent/src/main/ets/default/pages/CapsuleIcon.ets +++ b/features/capsulecomponent/src/main/ets/default/pages/CapsuleIcon.ets @@ -42,35 +42,36 @@ export default struct CapsuleIcon { } build() { - Row() { - Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%') + if (this.mCapsuleViewModel.mIsBackground) { Row() { - Row().width(this.style.greenCapsuleTextMarginLeftRight).height('100%') - Image($r("app.media.ic_statusbar_phone")) - .width(this.style.greenCapsulePhoneWidth) - .height(this.style.greenCapsulePhoneHeight) - .objectFit(ImageFit.Contain) - Row().width($r("app.float.green_capsule_phone_text_left")).height('100%') - Text(this.mCapsuleViewModel.mText) - .fontSize(this.styleCommon.statusBarFontSize) - .fontWeight(FontWeight.Regular) - .fontColor(this.style.greenCapsuleTextColor) - .maxLines(this.style.maxLines) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - Row().width(this.style.greenCapsuleTextMarginLeftRight).height('100%') - } - .alignItems(VerticalAlign.Center) - .height(this.style.greenCapsuleHeight) - .backgroundColor(this.style.greenCapsuleBackgroundColor) - .borderRadius(this.style.greenCapsuleRadius) - .onTouch(this.touchEvent.bind(this)) + Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%') + Row() { + Row().width(this.style.greenCapsuleTextMarginLeftRight).height('100%') + Image($r("app.media.ic_statusbar_phone")) + .width(this.style.greenCapsulePhoneWidth) + .height(this.style.greenCapsulePhoneHeight) + .objectFit(ImageFit.Contain) + Row().width($r("app.float.green_capsule_phone_text_left")).height('100%') + Text(this.mCapsuleViewModel.mText) + .fontSize(this.styleCommon.statusBarFontSize) + .fontWeight(FontWeight.Regular) + .fontColor(this.style.greenCapsuleTextColor) + .maxLines(this.style.maxLines) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Row().width(this.style.greenCapsuleTextMarginLeftRight).height('100%') + } + .alignItems(VerticalAlign.Center) + .height(this.style.greenCapsuleHeight) + .backgroundColor(this.style.greenCapsuleBackgroundColor) + .borderRadius(this.style.greenCapsuleRadius) + .onTouch(this.touchEvent.bind(this)) - Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%') - }.margin({ - left: $r("app.float.green_capsule_phone_margin_left"), - right: $r("app.float.green_capsule_phone_margin_left") - }) - .visibility(this.mCapsuleViewModel.mIsBackground ? Visibility.Visible : Visibility.None) + Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%') + }.margin({ + left: $r("app.float.green_capsule_phone_margin_left"), + right: $r("app.float.green_capsule_phone_margin_left") + }) + } } touchEvent(event: TouchEvent) { diff --git a/features/managementcomponent/src/main/ets/com/ohos/view/component/appItemComponent.ets b/features/managementcomponent/src/main/ets/com/ohos/view/component/appItemComponent.ets index ba8c6a21..657c991b 100644 --- a/features/managementcomponent/src/main/ets/com/ohos/view/component/appItemComponent.ets +++ b/features/managementcomponent/src/main/ets/com/ohos/view/component/appItemComponent.ets @@ -36,20 +36,20 @@ export default struct AppItemComponent { build() { Flex({ justifyContent: FlexAlign.SpaceBetween }) { Row() { - if (this.appSwitch === 2 || this.appSwitch === 3) { - Image(this.appIcon) - .width($r('app.float.appitem_notice_info_icon_width_l')) - .height($r('app.float.appitem_notice_info_icon_height_l')) - .margin({ right: $r('app.float.appitem_icon_info_margin_r') }) - .visibility('' === this.appIcon ? Visibility.None : Visibility.Visible) - .objectFit(ImageFit.Contain); - } else { - Image(this.appIcon) - .width($r('app.float.appitem_notice_info_icon_width')) - .height($r('app.float.appitem_notice_info_icon_height')) - .margin({ right: $r('app.float.appitem_icon_info_list_margin_r') }) - .visibility('' === this.appIcon ? Visibility.None : Visibility.Visible) - .objectFit(ImageFit.Contain); + if ('' !== this.appIcon) { + if (this.appSwitch === 2 || this.appSwitch === 3) { + Image(this.appIcon) + .width($r('app.float.appitem_notice_info_icon_width_l')) + .height($r('app.float.appitem_notice_info_icon_height_l')) + .margin({ right: $r('app.float.appitem_icon_info_margin_r') }) + .objectFit(ImageFit.Contain); + } else { + Image(this.appIcon) + .width($r('app.float.appitem_notice_info_icon_width')) + .height($r('app.float.appitem_notice_info_icon_height')) + .margin({ right: $r('app.float.appitem_icon_info_list_margin_r') }) + .objectFit(ImageFit.Contain); + } } Column() { Text(this.appTitle) diff --git a/features/managementcomponent/src/main/ets/com/ohos/view/component/headComponent.ets b/features/managementcomponent/src/main/ets/com/ohos/view/component/headComponent.ets index 16465871..a55ccac7 100644 --- a/features/managementcomponent/src/main/ets/com/ohos/view/component/headComponent.ets +++ b/features/managementcomponent/src/main/ets/com/ohos/view/component/headComponent.ets @@ -25,27 +25,28 @@ struct HeadComponent { build() { Row() { - Image($r('app.media.ic_back')) - .width($r('app.float.appitem_header_icon_width')) - .height($r('app.float.appitem_header_icon_height')) - .borderRadius($r('app.float.image_border_radius')) - .margin({ - left: $r('app.float.page_header_icon_margin_l'), - top: $r('app.float.page_margin_t'), - bottom: $r('app.float.page_margin_b') - }) - .backgroundColor(this.isTouch ? $r('app.color.background_color') : $r('app.color.background_transparent')) - .visibility(this.icBackIsVisibility ? Visibility.Visible : Visibility.None) - .onClick(() => { - Router.back(); - }) - .onTouch((touchEvent: TouchEvent) => { - if (touchEvent.type === TouchType.Down){ - this.isTouch = true; - } else if (touchEvent.type === TouchType.Up){ - this.isTouch = false; - } - }) + if (this.icBackIsVisibility) { + Image($r('app.media.ic_back')) + .width($r('app.float.appitem_header_icon_width')) + .height($r('app.float.appitem_header_icon_height')) + .borderRadius($r('app.float.image_border_radius')) + .margin({ + left: $r('app.float.page_header_icon_margin_l'), + top: $r('app.float.page_margin_t'), + bottom: $r('app.float.page_margin_b') + }) + .backgroundColor(this.isTouch ? $r('app.color.background_color') : $r('app.color.background_transparent')) + .onClick(() => { + Router.back(); + }) + .onTouch((touchEvent: TouchEvent) => { + if (touchEvent.type === TouchType.Down){ + this.isTouch = true; + } else if (touchEvent.type === TouchType.Up){ + this.isTouch = false; + } + }) + } Text(this.headName) .fontColor($r('sys.color.ohos_id_color_text_primary')) .fontSize($r('app.float.page_phrases_tittle_font')) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/NotificationListComponent.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/NotificationListComponent.ets index 45b2f48a..1cdd7f21 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/NotificationListComponent.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/NotificationListComponent.ets @@ -27,7 +27,6 @@ type NotificationLayoutConfig = { @Component export default struct NotificationListComponent { - @Provide('notificationUpdate') update: number = 0; @StorageLink('notificationList') notificationList: any[] = [] private config: NotificationLayoutConfig = { itemMargin: Layout.ITEM_MARGIN @@ -43,10 +42,6 @@ export default struct NotificationListComponent { build() { List({ space: this.config.itemMargin }) { - if (this.update && false) { - ListItem() { - } - } ForEach(this.notificationList, (item: any) => { ListItem() { if (item.length > 1) { diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/bannerNotificationItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/bannerNotificationItem.ets index d5c29b8c..20b28125 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/bannerNotificationItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/bannerNotificationItem.ets @@ -90,14 +90,16 @@ export default struct BannerNotificationItem { clickTitleAction: () => this.refreshLastActionTime() }) } - Row() { - Image($r('app.media.ic_close')) - .objectFit(ImageFit.Contain) - .width(Layout.TITLE_IMAGE_SIZE) - .height(Layout.TITLE_IMAGE_SIZE) - .margin({ left: Layout.ICON_MARGIN }) - .visibility(this.mCloseEnableFlg ? Visibility.Visible : Visibility.None) - .onClick(this.clickCloseIcon.bind(this)) + + if (this.mCloseEnableFlg) { + Row() { + Image($r('app.media.ic_close')) + .objectFit(ImageFit.Contain) + .width(Layout.TITLE_IMAGE_SIZE) + .height(Layout.TITLE_IMAGE_SIZE) + .margin({ left: Layout.ICON_MARGIN }) + .onClick(this.clickCloseIcon.bind(this)) + } } } .margin({ left: 12, right: 12 }) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/customItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/customItem.ets index 2b8dcb5e..54a575c1 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/customItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/customItem.ets @@ -65,7 +65,6 @@ export default struct CustomItem { .opacity(0.5) }.margin(10) } - } .borderRadius(!this.isSubItem ? $r('app.float.item_borderradius') : 0) .clip(true) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/generalItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/generalItem.ets index 78d97610..a0138575 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/generalItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/generalItem.ets @@ -28,19 +28,14 @@ const TAG = 'NoticeItem-GeneralItem'; @Component export default struct GeneralItem { - @Consume('notificationUpdate') updateFlag: number; @State hasPicture: boolean = false - @State @Watch('expandChange') isExpand: boolean = false + @State isExpand: boolean = false @State needExpand: boolean = true @State distributedDeviceName: string = '' private itemData: any = {} private clickAction: () => void private isSubItem: boolean= false; - expandChange() { - this.updateFlag++; - } - aboutToAppear() { Log.showInfo(TAG, `aboutToAppear Start`); if (CheckEmptyUtils.isEmpty(this.itemData.largeIcon)) { @@ -87,8 +82,7 @@ export default struct GeneralItem { if (this.isExpand && this.itemData.actionButtons.length) { ActionComponent({ itemData: this.itemData }) } else { - Blank() - .height(Layout.ITEM_MARGIN) + Blank().height(Layout.ITEM_MARGIN) } }.onClick(() => { this.clickAction(); @@ -112,20 +106,17 @@ struct ContentComponent { basicItem({ itemData: this.itemData }); - } - if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_LONG) { + } else if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_LONG) { longItem({ itemData: this.itemData, isExpand: this.isExpand }); - } - if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_MULTILINE) { + } else if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_MULTILINE) { multiItem({ itemData: this.itemData, isExpand: this.isExpand }); - } - if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_PICTURE) { + } else if (this.itemData.contentType === Constants.NOTIFICATION_TYPE_PICTURE) { pictureItem({ itemData: this.itemData, isExpand: this.isExpand diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/groupItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/groupItem.ets index 225fbb02..658ef09d 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/groupItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/groupItem.ets @@ -24,9 +24,8 @@ const TAG = 'NoticeItem-GroupItem'; @Component export default struct GroupItem { - @Consume('notificationUpdate') updateFlag: number; @State distributedDeviceName: string = '' - @State @Watch('expandChange') toExpand: boolean = false; + @State toExpand: boolean = false; private groupData: any[] = [] private mScroller: Scroller = new Scroller(); @State mIconAlpha: number = 0; @@ -40,10 +39,6 @@ export default struct GroupItem { Log.showInfo(TAG, `aboutToDisAppear`); } - expandChange() { - this.updateFlag++; - } - build() { Stack({ alignContent: Alignment.TopEnd }) { Scroll(this.mScroller) { @@ -65,7 +60,7 @@ export default struct GroupItem { .width(Constants.FULL_CONTAINER_WIDTH) if (this.toExpand) { - Row().height($r("app.float.notice_divider")).width('100%').flexShrink(0) + Divider().strokeWidth($r("app.float.notice_divider")).width('100%').flexShrink(0) } Column() { ContentList({ groupData: this.groupData, toExpand: this.toExpand }) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/notificationItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/notificationItem.ets index 78ab283c..5d9e60e1 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/notificationItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/notificationItem.ets @@ -36,12 +36,10 @@ export default struct NotificationItem { build() { Stack() { - IconListComponent({ iconAlpha: this.mIconAlpha, itemData: this.itemData }) - Scroll(this.mScroller) { Row() { FrontItem({ itemData: this.itemData, isSubItem: this.isSubItem }) - IconListComponent({ iconAlpha: 0, itemData: this.itemData }) + IconListComponent({ iconAlpha: this.mIconAlpha, itemData: this.itemData }) } } .scrollable(ScrollDirection.Horizontal) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/titleItem.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/titleItem.ets index a1dc9f35..c5104d82 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/titleItem.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/titleItem.ets @@ -74,17 +74,10 @@ export default struct TitleItem { Blank() if (this.needExpand) { - if (this.isExpand) { - Image($r('app.media.ic_notification_up')) - .objectFit(ImageFit.Contain) - .width(Layout.TITLE_IMAGE_SIZE) - .height(Layout.TITLE_IMAGE_SIZE) - } else { - Image($r('app.media.ic_notification_down')) - .objectFit(ImageFit.Contain) - .width(Layout.TITLE_IMAGE_SIZE) - .height(Layout.TITLE_IMAGE_SIZE) - } + Image(this.isExpand ? $r('app.media.ic_notification_up') : $r('app.media.ic_notification_down')) + .objectFit(ImageFit.Contain) + .width(Layout.TITLE_IMAGE_SIZE) + .height(Layout.TITLE_IMAGE_SIZE) } } .margin({ left: 12, right: 12 })