openharmony/applications_systemui
1
0
Fork 0
mirror of https://github.com/openharmony/applications_systemui.git synced 2026-07-15 15:35:43 -04:00
Code Issues Packages Projects Releases Wiki Activity

[systemui]优化布局

Browse Source 
Signed-off-by: lizhi <lizhi140@huawei.com>
This commit is contained in:
lizhi
2022-07-05 17:32:40 +08:00
parent 61219bf985
commit 1ccc6fdef7
10 changed files with 86 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/capsulecomponent/src/main/ets/default/pages/CapsuleIcon.ets
+28 -27
View File
@@ -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) {
features/managementcomponent/src/main/ets/com/ohos/view/component/appItemComponent.ets
+14 -14
View File
@@ -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)
features/managementcomponent/src/main/ets/com/ohos/view/component/headComponent.ets
+22 -21
View File
@@ -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'))
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/NotificationListComponent.ets
-5
View File
@@ -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) {
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/bannerNotificationItem.ets
+10 -8
View File
@@ -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 })
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/customItem.ets
-1
View File
@@ -65,7 +65,6 @@ export default struct CustomItem {
.opacity(0.5)
}.margin(10)
}
}
.borderRadius(!this.isSubItem ? $r('app.float.item_borderradius') : 0)
.clip(true)
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/generalItem.ets
+5 -14
View File
@@ -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
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/groupItem.ets
+2 -7
View File
@@ -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 })
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/notificationItem.ets
+1 -3
View File
@@ -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)
features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/titleItem.ets
+4 -11
View File
@@ -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 })