From 05fdee22175ae8f7ee9f438ac861a08174407c62 Mon Sep 17 00:00:00 2001 From: panshunli Date: Mon, 23 May 2022 15:00:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83ux?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: panshunli --- .../noticeItem/view/item/confirmDialog.ets | 8 +- .../noticeItem/view/item/devicesDialog.ets | 2 +- .../ohos/noticeItem/view/item/generalItem.ets | 3 +- .../ohos/noticeItem/view/item/groupItem.ets | 7 +- .../view/item/iconListComponent.ets | 2 + .../noticeItem/view/item/settingDialog.ets | 9 +- .../ohos/noticeItem/view/item/titleItem.ets | 2 +- .../main/resources/base/element/color.json | 8 +- .../main/resources/base/element/float.json | 4 + .../main/resources/phone/element/color.json | 12 ++ .../main/resources/phone/element/float.json | 116 ++++++++++++++++++ .../src/main/ets/pages/notification.ets | 47 ++++--- .../main/resources/base/element/color.json | 4 + .../main/resources/base/element/float.json | 4 + .../resources/base/media/ic_public_delete.svg | 13 ++ .../base/media/ic_public_delete_filled.svg | 13 ++ .../base/media/ic_public_settings.svg | 13 ++ .../main/resources/phone/element/color.json | 4 + .../main/resources/phone/element/float.json | 8 ++ 19 files changed, 246 insertions(+), 33 deletions(-) create mode 100644 features/noticeitem/src/main/resources/phone/element/color.json create mode 100644 features/noticeitem/src/main/resources/phone/element/float.json create mode 100644 product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete.svg create mode 100644 product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete_filled.svg create mode 100644 product/phone/dropdownpanel/src/main/resources/base/media/ic_public_settings.svg create mode 100644 product/phone/dropdownpanel/src/main/resources/phone/element/float.json diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets index 2e0f1e12..6803822f 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets @@ -44,11 +44,11 @@ export default struct ConfirmDialog { }.width($r('app.float.confirm_dialog_row_width')) .margin({ top: $r('app.float.message_font_margin_t') }) - Row() { + Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}) { Column() { Text($r('app.string.cancel')) .fontSize($r('app.float.confirm_cont_fontsize')) - .fontColor(Color.Blue) + .fontColor($r("app.color.button_text_color")) }.onClick(() => { this.controller.close(); }) @@ -63,7 +63,7 @@ export default struct ConfirmDialog { Column() { Text($r('app.string.close')) .fontSize($r('app.float.confirm_cont_fontsize')) - .fontColor(Color.Red) + .fontColor($r("app.color.button_text_color")) }.onClick(() => { Log.showInfo(TAG, `confirm button of TimeDialog on click`) this.controller.close(); @@ -76,7 +76,7 @@ export default struct ConfirmDialog { .margin({ top: $r('app.float.confirm_button_margin_t') }) }.height($r('app.float.confirm_dialog_height')) .width($r('app.float.confirm_dialog_width')) - .backgroundColor('#FFFFFFFF') + .backgroundColor('#FFFFFF') .border({ width: $r('app.float.setting_border_width'), color: Color.White, radius: $r('app.float.notification_border_radius') }) } diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/devicesDialog.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/devicesDialog.ets index 6b8fce71..cc296cea 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/devicesDialog.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/devicesDialog.ets @@ -85,7 +85,7 @@ export default struct DevicesDialog { Column() { Text($r('app.string.cancel')) .fontSize($r('app.float.device_button_font')) - .fontColor(Color.Blue) + .fontColor($r("app.color.button_text_color")) }.onClick(() => { this.controller.close(); 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 2374770f..293b8175 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 @@ -13,7 +13,7 @@ * limitations under the License. */ -import Constants, {NotificationLayout as Layout} from '../../common/constants'; +import Constants, { NotificationLayout as Layout } from '../../common/constants'; import basicItem from './basicItem'; import longItem from './longItem'; import multiItem from './multiItem'; @@ -138,6 +138,7 @@ struct ContentComponent { .objectFit(ImageFit.Contain) .width(Layout.NOTIFICATION_PIC_SIZE) .height(Layout.NOTIFICATION_PIC_SIZE) + .borderRadius($r("app.float.notice_image_boderRadius")) } }.margin({ left: Layout.ITEM_MARGIN, right: Layout.ITEM_MARGIN }) } 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 cc0dab78..bbca5309 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 @@ -14,10 +14,10 @@ */ import Log from '../../../../../../../../../../common/src/main/ets/default/Log'; -import Constants, {NotificationLayout as Layout} from '../../common/constants'; +import Constants, { NotificationLayout as Layout } from '../../common/constants'; import NotificationItem from './notificationItem' import titleItem from './titleItem'; -import IconListComponent, {getIconListSize} from './iconListComponent'; +import IconListComponent, { getIconListSize } from './iconListComponent'; import ScrollbarManager from '../../common/ScrollbarManager'; const TAG = 'NoticeItem-GroupItem'; @@ -62,6 +62,9 @@ export default struct GroupItem { }.backgroundColor($r('app.color.notificationitem_background')) .width(Constants.FULL_CONTAINER_WIDTH) + if (this.toExpand) { + Row().height(1).width('100%') + } Row() { ContentList({ groupData: this.groupData, toExpand: this.toExpand }) }.width(Constants.FULL_CONTAINER_WIDTH) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets index f4bf5289..af0dcdb0 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets @@ -47,6 +47,7 @@ export default struct IconListComponent { action: () => this.confirmDialogController.open() }), autoCancel: false, + alignment:DialogAlignment.Bottom, offset: { dx: 0, dy: $r('app.float.setting_dialog_dy') }, customStyle:true }); @@ -57,6 +58,7 @@ export default struct IconListComponent { action: () => ViewModel.enableNotification(this.itemData, false) }), autoCancel: false, + alignment:DialogAlignment.Bottom, offset: { dx: 0, dy: $r('app.float.confirm_dialog_dy') }, customStyle:true }); diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets index 351febca..cad5ba6b 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets @@ -69,7 +69,7 @@ export default struct SettingDialog { Column() { Text($r('app.string.moreSettings')) .fontSize($r('app.float.setting_cont_fontsize')) - .fontColor($r('app.color.dialog_font_back_color')) + .fontColor($r('app.color.button_text_color')) .height($r('app.float.setting_dialog_row_height')) }.alignItems(HorizontalAlign.Center) .width(Constants.SETTING_CONTENT_WITH) @@ -88,7 +88,7 @@ export default struct SettingDialog { .maxLines(Constants.DEFAULT_MAX_LINES) .textOverflow({ overflow: TextOverflow.Ellipsis }) .fontSize($r('app.float.setting_cont_fontsize')) - .fontColor($r('app.color.dialog_font_back_color')) + .fontColor($r('app.color.button_text_color')) }.alignItems(HorizontalAlign.Center) .width(Constants.SETTING_CONTENT_WITH) } @@ -100,9 +100,10 @@ export default struct SettingDialog { radius: $r('app.float.setting_border_radius') }) .backgroundColor($r('app.color.dialog_font_color')) .onClick(this.closeAbility.bind(this)) - }.height($r('app.float.setting_dialog_height')) + } + .height($r('app.float.setting_dialog_height')) .width($r('app.float.setting_dialog_width')) - .backgroundColor('#FFFFFFFF') + .backgroundColor('#FFFFFF') .border({ width: $r('app.float.setting_border_width'), color: Color.White, radius: $r('app.float.notification_border_radius') }) } 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 5d894315..8474ac1c 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 @@ -13,7 +13,7 @@ * limitations under the License. */ -import Constants, {NotificationLayout as Layout} from '../../common/constants'; +import Constants, { NotificationLayout as Layout } from '../../common/constants'; import Log from '../../../../../../../../../../common/src/main/ets/default/Log'; import CheckEmptyUtils from '../../../../../../../../../../common/src/main/ets/default/CheckEmptyUtils'; diff --git a/features/noticeitem/src/main/resources/base/element/color.json b/features/noticeitem/src/main/resources/base/element/color.json index da334c07..974d5c02 100644 --- a/features/noticeitem/src/main/resources/base/element/color.json +++ b/features/noticeitem/src/main/resources/base/element/color.json @@ -2,7 +2,7 @@ "color": [ { "name":"notificationitem_background", - "value":"#ffffffff" + "value":"#8CFAFAFA" }, { "name":"title_text_color", @@ -50,7 +50,11 @@ }, { "name": "device_divider_color", - "value": "#E3E3E3" + "value": "transparent" + }, + { + "name": "button_text_color", + "value": "#007DFF" } ] } \ No newline at end of file diff --git a/features/noticeitem/src/main/resources/base/element/float.json b/features/noticeitem/src/main/resources/base/element/float.json index 243d6b67..a2eeb1cf 100644 --- a/features/noticeitem/src/main/resources/base/element/float.json +++ b/features/noticeitem/src/main/resources/base/element/float.json @@ -215,6 +215,10 @@ { "name": "device_margin_16", "value": "16fp" + }, + { + "name": "notice_image_boderRadius", + "value": "0" } ] } \ No newline at end of file diff --git a/features/noticeitem/src/main/resources/phone/element/color.json b/features/noticeitem/src/main/resources/phone/element/color.json new file mode 100644 index 00000000..23f6370e --- /dev/null +++ b/features/noticeitem/src/main/resources/phone/element/color.json @@ -0,0 +1,12 @@ +{ + "color": [ + { + "name": "button_text_color", + "value": "#007DFF" + }, + { + "name":"dialog_font_back_color", + "value":"#007DFF" + } + ] +} \ No newline at end of file diff --git a/features/noticeitem/src/main/resources/phone/element/float.json b/features/noticeitem/src/main/resources/phone/element/float.json new file mode 100644 index 00000000..17f0aa9d --- /dev/null +++ b/features/noticeitem/src/main/resources/phone/element/float.json @@ -0,0 +1,116 @@ +{ + "float": [ + { + "name": "title_image_width", + "value": "24vp" + }, + { + "name": "title_image_height", + "value": "24vp" + }, + { + "name": "title_font_height", + "value": "28vp" + }, + { + "name": "title_font_margin_t", + "value": "11vp" + }, + { + "name": "message_font_margin_t", + "value": "17.65vp" + }, + { + "name": "setting_title_fontsize", + "value": "20vp" + }, + { + "name": "setting_cont_fontsize", + "value": "16vp" + }, + { + "name": "setting_border_width", + "value": "0.5vp" + }, + { + "name": "setting_border_radius", + "value": "24vp" + }, + { + "name": "setting_dialog_height", + "value": "192vp" + }, + { + "name": "setting_dialog_width", + "value": "336vp" + }, + { + "name": "setting_dialog_row_width", + "value": "304vp" + }, + { + "name": "setting_dialog_row_height", + "value": "40vp" + }, + { + "name": "confirm_dialog_height", + "value": "142vp" + }, + { + "name": "confirm_dialog_width", + "value": "336vp" + }, + { + "name": "confirm_dialog_row_width", + "value": "288vp" + }, + { + "name": "confirm_dialog_button_width", + "value": "127.59vp" + }, + { + "name": "confirm_title_fontsize", + "value": "20vp" + }, + { + "name": "confirm_cont_fontsize", + "value": "16vp" + }, + { + "name": "confirm_divider_height", + "value": "22vp" + }, + { + "name": "confirm_button_height", + "value": "30vp" + }, + { + "name": "confirm_button_margin_t", + "value": "25vp" + }, + { + "name": "setting_dialog_dy", + "value": "-12vp" + }, + { + "name": "confirm_dialog_dy", + "value": "-12vp" + }, + { + "name": "notification_appname_margin_top", + "value": "11vp" + }, + { + "name": "close_notification_margin_top", + "value": "17vp" + }, + { + "name": "notification_cancle_margin_top", + "value": "13.28vp" + }, + { + "name": "notice_image_boderRadius", + "value": "12" + } + ] +} \ No newline at end of file diff --git a/product/phone/dropdownpanel/src/main/ets/pages/notification.ets b/product/phone/dropdownpanel/src/main/ets/pages/notification.ets index 3447619b..671f574d 100644 --- a/product/phone/dropdownpanel/src/main/ets/pages/notification.ets +++ b/product/phone/dropdownpanel/src/main/ets/pages/notification.ets @@ -14,8 +14,8 @@ */ import Log from '../../../../../../../common/src/main/ets/default/log' -import EventManager, {unsubscribe} from "../../../../../../../common/src/main/ets/default/event/eventmanager" -import {obtainStartAbility} from "../../../../../../../common/src/main/ets/default/event/eventutil" +import EventManager, { unsubscribe } from "../../../../../../../common/src/main/ets/default/event/eventmanager" +import { obtainStartAbility } from "../../../../../../../common/src/main/ets/default/event/eventutil" import Constants from './common/constants' import BatteryIcon from '../../../../../../../features/batterycomponent/src/main/ets/default/pages/batteryicon' import ClockIcon from '../../../../../../../features/clockcomponent/src/main/ets/default/pages/clockicon' @@ -27,16 +27,19 @@ import RingModeIcon from '../../../../../../../features/ringmodecomponent/src/ma import NotificationListComponent from '../../../../../../../features/noticeitem/src/main/ets/com/ohos/noticeitem/view/notificationlistcomponent' import ViewModel from '../../../../../../../features/noticeitem/src/main/ets/com/ohos/noticeitem/viewmodel/viewmodel' import ResourceUtil from '../../../../../../../common/src/main/ets/default/resourceutil' -import TimeManager, { TimeEventArgs, TIME_CHANGE_EVENT } from '../../../../../../../common/src/main/ets/default/timemanager' +import TimeManager, { TimeEventArgs, TIME_CHANGE_EVENT +} from '../../../../../../../common/src/main/ets/default/timemanager' const TAG = 'DropdownPanel-notification' const GRID_SIZE = 6; -const IMAGE_SIZE_L = 40; -const IMAGE_SIZE_S = 48; +const IMAGE_SIZE_L = 24; +const IMAGE_SIZE_S = 20; +const BGC_SIZE_L = 40; const NO_NOTIFICATION_TOP_MARGIN = 40; -const TIME_TEXT_MARGIN = 8; +const TIME_TEXT_MARGIN = 4; +const CENTER_TITLE_MARGIN_TOP = 12; const TIME_BOTTOM_OFFSET = 7; -const SETTING_ICON_MARGIN = 12; +const CENTER_MARGIN = 12; @Component export default struct Notification { @@ -84,13 +87,20 @@ export default struct Notification { } if (this.notificationList.length > 0) { - Image($r('app.media.delete_all')) - .width(IMAGE_SIZE_L) - .height(IMAGE_SIZE_L) - .margin({ bottom: 32 }) - .onClick(() => { - ViewModel.removeAllNotifications(); - }) + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Image($r('app.media.ic_public_delete_filled')) + .fillColor("#FFFFFF") + .width(IMAGE_SIZE_L) + .height(IMAGE_SIZE_L) + } + .width(BGC_SIZE_L) + .height(BGC_SIZE_L) + .margin({ bottom: $r('app.float.notification_delete_all') }) + .borderRadius(BGC_SIZE_L) + .backgroundColor($r('app.color.notification_delete_all_background')) + .onClick(() => { + ViewModel.removeAllNotifications(); + }) } }.onTouch(this.touchEvent.bind(this)) } @@ -177,21 +187,22 @@ struct CenterTitle { .fontColor($r("sys.color.ohos_id_color_text_primary_contrary")) .fontSize('36fp') .fontWeight(FontWeight.Medium) - .margin({ left: TIME_TEXT_MARGIN }) + .margin({ left: CENTER_MARGIN }) Text(this.mTimeString) .fontColor($r("sys.color.ohos_id_color_text_primary_contrary")) .fontSize($r("sys.float.ohos_id_text_size_sub_title3")) .fontWeight(FontWeight.Medium) .margin({ left: TIME_TEXT_MARGIN, bottom: TIME_BOTTOM_OFFSET }) .flexGrow(1) - Image($r('app.media.ic_settings')) + Image($r("app.media.ic_public_settings")) .objectFit(ImageFit.Contain) .width(IMAGE_SIZE_S) .height(IMAGE_SIZE_S) - .margin({ right: SETTING_ICON_MARGIN, bottom: TIME_BOTTOM_OFFSET }) + .fillColor("#FFFFFF") + .margin({ right: CENTER_MARGIN, bottom: TIME_BOTTOM_OFFSET }) .onClick(this.settingClick.bind(this)) } - .margin({ top: TIME_TEXT_MARGIN, bottom: TIME_TEXT_MARGIN }) + .margin({ top: CENTER_TITLE_MARGIN_TOP, bottom: TIME_TEXT_MARGIN }) .onTouch(this.touchEvent.bind(this)) } diff --git a/product/phone/dropdownpanel/src/main/resources/base/element/color.json b/product/phone/dropdownpanel/src/main/resources/base/element/color.json index 6751f30d..ad111924 100644 --- a/product/phone/dropdownpanel/src/main/resources/base/element/color.json +++ b/product/phone/dropdownpanel/src/main/resources/base/element/color.json @@ -4,6 +4,10 @@ "name": "default_background", "value": "#4D999999" }, + { + "name": "notification_delete_all_background", + "value": "#4C000000" + }, { "name": "default_font_color", "value": "#ffffffff" diff --git a/product/phone/dropdownpanel/src/main/resources/base/element/float.json b/product/phone/dropdownpanel/src/main/resources/base/element/float.json index 8f400c91..fd8bb0cc 100644 --- a/product/phone/dropdownpanel/src/main/resources/base/element/float.json +++ b/product/phone/dropdownpanel/src/main/resources/base/element/float.json @@ -4,6 +4,10 @@ "name": "status_bar_height", "value": "48vp" }, + { + "name": "notification_delete_all", + "value": "32" + }, { "name": "quickly_setting_time_font_size", "value": "30fp" diff --git a/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete.svg b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete.svg new file mode 100644 index 00000000..422ec497 --- /dev/null +++ b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_delete + + + + + + + + + + \ No newline at end of file diff --git a/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete_filled.svg b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete_filled.svg new file mode 100644 index 00000000..9807c565 --- /dev/null +++ b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_delete_filled.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_delete_filled + + + + + + + + + + \ No newline at end of file diff --git a/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_settings.svg b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_settings.svg new file mode 100644 index 00000000..98a78dac --- /dev/null +++ b/product/phone/dropdownpanel/src/main/resources/base/media/ic_public_settings.svg @@ -0,0 +1,13 @@ + + + Public/ic_public_settings + + + + + + + + + + \ No newline at end of file diff --git a/product/phone/dropdownpanel/src/main/resources/phone/element/color.json b/product/phone/dropdownpanel/src/main/resources/phone/element/color.json index 38963e6c..5de4e7cf 100644 --- a/product/phone/dropdownpanel/src/main/resources/phone/element/color.json +++ b/product/phone/dropdownpanel/src/main/resources/phone/element/color.json @@ -3,6 +3,10 @@ { "name": "default_background", "value": "#999999" + }, + { + "name": "notification_delete_all_background", + "value": "#4C000000" } ] } \ No newline at end of file diff --git a/product/phone/dropdownpanel/src/main/resources/phone/element/float.json b/product/phone/dropdownpanel/src/main/resources/phone/element/float.json new file mode 100644 index 00000000..1f5716f6 --- /dev/null +++ b/product/phone/dropdownpanel/src/main/resources/phone/element/float.json @@ -0,0 +1,8 @@ + { + "float": [ + { + "name": "notification_delete_all", + "value": "64vp" + } + ] +} \ No newline at end of file -- Gitee From 748106939dc3ad585bc62c3af6e19bb9b566eeb1 Mon Sep 17 00:00:00 2001 From: panshunli Date: Mon, 23 May 2022 17:06:48 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83UX?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: panshunli --- .../ets/com/ohos/noticeItem/view/item/groupItem.ets | 2 +- .../ohos/noticeItem/view/item/iconListComponent.ets | 12 +++++++----- .../src/main/resources/base/element/float.json | 4 ++++ .../src/main/resources/phone/element/float.json | 4 ++++ 4 files changed, 16 insertions(+), 6 deletions(-) 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 bbca5309..32612686 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 @@ -63,7 +63,7 @@ export default struct GroupItem { .width(Constants.FULL_CONTAINER_WIDTH) if (this.toExpand) { - Row().height(1).width('100%') + Row().height($r("app.float.notice_divider")).width('100%') } Row() { ContentList({ groupData: this.groupData, toExpand: this.toExpand }) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets index af0dcdb0..c25cb729 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/iconListComponent.ets @@ -13,12 +13,14 @@ * limitations under the License. */ -import Constants, {NotificationLayout as Layout} from '../../common/constants'; +import Constants, { NotificationLayout as Layout } from '../../common/constants'; import Log from '../../../../../../../../../../common/src/main/ets/default/Log'; import SettingDialog from './settingDialog'; import ConfirmDialog from './confirmDialog' import ViewModel from '../../viewmodel/ViewModel'; +import deviceInfo from '@ohos.deviceInfo'; +const deviceTypeInfo = deviceInfo.deviceType; const TAG = 'NoticeItem-IconListComponent'; let iconSize: number = 0; @@ -47,9 +49,9 @@ export default struct IconListComponent { action: () => this.confirmDialogController.open() }), autoCancel: false, - alignment:DialogAlignment.Bottom, + alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Default, offset: { dx: 0, dy: $r('app.float.setting_dialog_dy') }, - customStyle:true + customStyle: true }); private confirmDialogController: CustomDialogController = new CustomDialogController({ builder: ConfirmDialog({ @@ -58,9 +60,9 @@ export default struct IconListComponent { action: () => ViewModel.enableNotification(this.itemData, false) }), autoCancel: false, - alignment:DialogAlignment.Bottom, + alignment: deviceTypeInfo === 'phone' ? DialogAlignment.Bottom : DialogAlignment.Default, offset: { dx: 0, dy: $r('app.float.confirm_dialog_dy') }, - customStyle:true + customStyle: true }); private iconConfigs: IconData[] = [ { diff --git a/features/noticeitem/src/main/resources/base/element/float.json b/features/noticeitem/src/main/resources/base/element/float.json index a2eeb1cf..21d57da6 100644 --- a/features/noticeitem/src/main/resources/base/element/float.json +++ b/features/noticeitem/src/main/resources/base/element/float.json @@ -219,6 +219,10 @@ { "name": "notice_image_boderRadius", "value": "0" + }, + { + "name": "notice_divider", + "value": "1vp" } ] } \ No newline at end of file diff --git a/features/noticeitem/src/main/resources/phone/element/float.json b/features/noticeitem/src/main/resources/phone/element/float.json index 17f0aa9d..1c1b1d6a 100644 --- a/features/noticeitem/src/main/resources/phone/element/float.json +++ b/features/noticeitem/src/main/resources/phone/element/float.json @@ -111,6 +111,10 @@ { "name": "notice_image_boderRadius", "value": "12" + }, + { + "name": "notice_divider", + "value": "1vp" } ] } \ No newline at end of file -- Gitee From 3fb91ab2948cb8b039374358a944350755e059ae Mon Sep 17 00:00:00 2001 From: panshunli Date: Tue, 24 May 2022 16:09:20 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83UX?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: panshunli --- .../noticeItem/view/item/confirmDialog.ets | 100 ++++++------ .../noticeItem/view/item/settingDialog.ets | 148 ++++++++++-------- .../main/resources/base/element/float.json | 4 + .../main/resources/phone/element/float.json | 6 +- 4 files changed, 143 insertions(+), 115 deletions(-) diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets index 6803822f..e68de8df 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/confirmDialog.ets @@ -15,6 +15,9 @@ import Constants from '../../common/constants'; import Log from '../../../../../../../../../../common/src/main/ets/default/Log'; +import deviceInfo from '@ohos.deviceInfo'; + +const deviceTypeInfo = deviceInfo.deviceType; const TAG = 'NoticeItem-Confirm'; @@ -29,55 +32,62 @@ export default struct ConfirmDialog { public action: () => void build() { - Column() { - Row() { - Text(this.title) - .fontSize($r('app.float.confirm_title_fontsize')) - .fontWeight(FontWeight.Bold) - }.width($r('app.float.confirm_dialog_row_width')) - .margin({ top: $r('app.float.title_font_margin_t') }) - - Row() { - Text($r('app.string.confirm_message', this.bundleName)) - .fontSize($r('app.float.confirm_cont_fontsize')) - }.width($r('app.float.confirm_dialog_row_width')) - .margin({ top: $r('app.float.message_font_margin_t') }) + Column() { + Row() { + Text(this.title) + .fontSize($r('app.float.confirm_title_fontsize')) + .fontWeight(FontWeight.Bold) + }.width($r('app.float.confirm_dialog_row_width')) + .margin({ top: $r('app.float.title_font_margin_t') }) - Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}) { - Column() { - Text($r('app.string.cancel')) + Row() { + Text($r('app.string.confirm_message', this.bundleName)) .fontSize($r('app.float.confirm_cont_fontsize')) - .fontColor($r("app.color.button_text_color")) - }.onClick(() => { - this.controller.close(); - }) - .alignItems(HorizontalAlign.Center) - .width($r('app.float.confirm_dialog_button_width')) + }.width($r('app.float.confirm_dialog_row_width')) + .margin({ top: $r('app.float.message_font_margin_t') }) - Divider() - .vertical(true) - .color($r('app.color.confirm_divider_color')) - .strokeWidth(1) - .height($r('app.float.confirm_divider_height')) - Column() { - Text($r('app.string.close')) - .fontSize($r('app.float.confirm_cont_fontsize')) - .fontColor($r("app.color.button_text_color")) - }.onClick(() => { - Log.showInfo(TAG, `confirm button of TimeDialog on click`) - this.controller.close(); - this.action(); - }) - .alignItems(HorizontalAlign.Center) - .width($r('app.float.confirm_dialog_button_width')) + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Column() { + Text($r('app.string.cancel')) + .fontSize($r('app.float.confirm_cont_fontsize')) + .fontColor($r("app.color.button_text_color")) + }.onClick(() => { + this.controller.close(); + }) + .alignItems(HorizontalAlign.Center) + .width($r('app.float.confirm_dialog_button_width')) + + Divider() + .vertical(true) + .color($r('app.color.confirm_divider_color')) + .strokeWidth(1) + .height($r('app.float.confirm_divider_height')) + Column() { + Text($r('app.string.close')) + .fontSize($r('app.float.confirm_cont_fontsize')) + .fontColor($r("app.color.button_text_color")) + }.onClick(() => { + Log.showInfo(TAG, `confirm button of TimeDialog on click`) + this.controller.close(); + this.action(); + }) + .alignItems(HorizontalAlign.Center) + .width($r('app.float.confirm_dialog_button_width')) + } + .width($r('app.float.confirm_dialog_width')) + .margin({ top: $r('app.float.confirm_button_margin_t') }) } - .width($r('app.float.confirm_dialog_width')) - .margin({ top: $r('app.float.confirm_button_margin_t') }) - }.height($r('app.float.confirm_dialog_height')) - .width($r('app.float.confirm_dialog_width')) - .backgroundColor('#FFFFFF') - .border({ width: $r('app.float.setting_border_width'), color: Color.White, - radius: $r('app.float.notification_border_radius') }) + .height($r('app.float.confirm_dialog_height')) + .width(deviceTypeInfo === 'phone' ? '100%' : $r('app.float.confirm_dialog_width')) + .backgroundColor('#FFFFFF') + .border({ width: $r('app.float.setting_border_width'), color: Color.White, + radius: $r('app.float.notification_border_radius') }) + } + .margin({ + left: $r("app.float.confirm_dialog_margin"), + right: $r("app.float.confirm_dialog_margin") + }) + } } diff --git a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets index cad5ba6b..a5f0eb8b 100644 --- a/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets +++ b/features/noticeitem/src/main/ets/com/ohos/noticeItem/view/item/settingDialog.ets @@ -13,12 +13,15 @@ * limitations under the License. */ -import Constants, {NotificationItemData} from '../../common/constants'; +import Constants, { NotificationItemData } from '../../common/constants'; import Log from '../../../../../../../../../../common/src/main/ets/default/Log'; import CheckEmptyUtils from '../../../../../../../../../../common/src/main/ets/default/CheckEmptyUtils'; import EventManager from "../../../../../../../../../../common/src/main/ets/default/event/EventManager" -import {obtainStartAbility} from "../../../../../../../../../../common/src/main/ets/default/event/EventUtil" +import { obtainStartAbility } from "../../../../../../../../../../common/src/main/ets/default/event/EventUtil" import Notification from '@ohos.notification'; +import deviceInfo from '@ohos.deviceInfo'; + +const deviceTypeInfo = deviceInfo.deviceType; const TAG = 'NoticeItem-Setting'; @@ -32,80 +35,87 @@ export default struct SettingDialog { public action: () => void build() { - Column({ space: 4 }) { - Row({ space: 4 }) { - if (!CheckEmptyUtils.isEmpty(this.itemData.smallIcon)) { - Image(this.itemData.smallIcon) - .objectFit(ImageFit.Contain) - .width($r('app.float.title_image_width')) - .height($r('app.float.title_image_height')) + Column() { + Column({ space: 4 }) { + Row({ space: 4 }) { + if (!CheckEmptyUtils.isEmpty(this.itemData.smallIcon)) { + Image(this.itemData.smallIcon) + .objectFit(ImageFit.Contain) + .width($r('app.float.title_image_width')) + .height($r('app.float.title_image_height')) + } + Text(this.itemData.appName) + .fontSize($r('app.float.setting_title_fontsize')) + .fontWeight(500) + }.width($r('app.float.setting_dialog_row_width')) + .margin({ top: $r('app.float.notification_appname_margin_top') }) + .height($r('app.float.title_font_height')) + + Row() { + Column() { + Text($r('app.string.closeNotification')) + .fontSize($r('app.float.setting_cont_fontsize')) + .fontColor($r('app.color.dialog_font_color')) + .height($r('app.float.setting_dialog_row_height')) + }.alignItems(HorizontalAlign.Center) + .width(Constants.SETTING_CONTENT_WITH) } - Text(this.itemData.appName) - .fontSize($r('app.float.setting_title_fontsize')) - .fontWeight(500) - }.width($r('app.float.setting_dialog_row_width')) - .margin({ top: $r('app.float.notification_appname_margin_top') }) - .height($r('app.float.title_font_height')) + .width($r('app.float.setting_dialog_row_width')) + .alignItems(VerticalAlign.Center) + .align(Alignment.Center) + .margin({ top: $r('app.float.close_notification_margin_top') }) + .border({ width: $r('app.float.setting_border_width'), color: Color.White, + radius: $r('app.float.setting_border_radius') }) + .backgroundColor($r('app.color.dialog_font_back_color')) + .onClick(this.closeNotification.bind(this)) - Row() { - Column() { - Text($r('app.string.closeNotification')) - .fontSize($r('app.float.setting_cont_fontsize')) - .fontColor($r('app.color.dialog_font_color')) - .height($r('app.float.setting_dialog_row_height')) - }.alignItems(HorizontalAlign.Center) - .width(Constants.SETTING_CONTENT_WITH) - } - .width($r('app.float.setting_dialog_row_width')) - .alignItems(VerticalAlign.Center) - .align(Alignment.Center) - .margin({ top: $r('app.float.close_notification_margin_top') }) - .border({ width: $r('app.float.setting_border_width'), color: Color.White, - radius: $r('app.float.setting_border_radius') }) - .backgroundColor($r('app.color.dialog_font_back_color')) - .onClick(this.closeNotification.bind(this)) + Row() { + Column() { + Text($r('app.string.moreSettings')) + .fontSize($r('app.float.setting_cont_fontsize')) + .fontColor($r('app.color.button_text_color')) + .height($r('app.float.setting_dialog_row_height')) + }.alignItems(HorizontalAlign.Center) + .width(Constants.SETTING_CONTENT_WITH) + .align(Alignment.Center) + } + .width($r('app.float.setting_dialog_row_width')) + .alignItems(VerticalAlign.Center) + .border({ width: $r('app.float.setting_border_width'), color: Color.White, + radius: $r('app.float.setting_border_radius') }) + .backgroundColor($r('app.color.action_button_click_color')) + .onClick(this.openAbility.bind(this)) - Row() { - Column() { - Text($r('app.string.moreSettings')) - .fontSize($r('app.float.setting_cont_fontsize')) - .fontColor($r('app.color.button_text_color')) - .height($r('app.float.setting_dialog_row_height')) - }.alignItems(HorizontalAlign.Center) - .width(Constants.SETTING_CONTENT_WITH) + Row() { + Column() { + Text($r('app.string.cancel')) + .maxLines(Constants.DEFAULT_MAX_LINES) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontSize($r('app.float.setting_cont_fontsize')) + .fontColor($r('app.color.button_text_color')) + }.alignItems(HorizontalAlign.Center) + .width(Constants.SETTING_CONTENT_WITH) + } + .width($r('app.float.setting_dialog_row_width')) + .margin({ top: $r('app.float.notification_cancle_margin_top') }) + .alignItems(VerticalAlign.Center) .align(Alignment.Center) + .border({ width: $r('app.float.setting_border_width'), color: Color.White, + radius: $r('app.float.setting_border_radius') }) + .backgroundColor($r('app.color.dialog_font_color')) + .onClick(this.closeAbility.bind(this)) } - .width($r('app.float.setting_dialog_row_width')) - .alignItems(VerticalAlign.Center) - .border({ width: $r('app.float.setting_border_width'), color: Color.White, - radius: $r('app.float.setting_border_radius') }) - .backgroundColor($r('app.color.action_button_click_color')) - .onClick(this.openAbility.bind(this)) - - Row() { - Column() { - Text($r('app.string.cancel')) - .maxLines(Constants.DEFAULT_MAX_LINES) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .fontSize($r('app.float.setting_cont_fontsize')) - .fontColor($r('app.color.button_text_color')) - }.alignItems(HorizontalAlign.Center) - .width(Constants.SETTING_CONTENT_WITH) - } - .width($r('app.float.setting_dialog_row_width')) - .margin({ top: $r('app.float.notification_cancle_margin_top') }) - .alignItems(VerticalAlign.Center) - .align(Alignment.Center) + .height($r('app.float.setting_dialog_height')) + .width(deviceTypeInfo === 'phone' ? '100%' : $r('app.float.setting_dialog_width')) + .backgroundColor('#FFFFFF') + .margin({ left: 20, right: 20 }) .border({ width: $r('app.float.setting_border_width'), color: Color.White, - radius: $r('app.float.setting_border_radius') }) - .backgroundColor($r('app.color.dialog_font_color')) - .onClick(this.closeAbility.bind(this)) + radius: $r('app.float.notification_border_radius') }) } - .height($r('app.float.setting_dialog_height')) - .width($r('app.float.setting_dialog_width')) - .backgroundColor('#FFFFFF') - .border({ width: $r('app.float.setting_border_width'), color: Color.White, - radius: $r('app.float.notification_border_radius') }) + .margin({ + left: $r("app.float.confirm_dialog_margin"), + right: $r("app.float.confirm_dialog_margin") + }) } closeNotification() { diff --git a/features/noticeitem/src/main/resources/base/element/float.json b/features/noticeitem/src/main/resources/base/element/float.json index 21d57da6..06db5cb7 100644 --- a/features/noticeitem/src/main/resources/base/element/float.json +++ b/features/noticeitem/src/main/resources/base/element/float.json @@ -164,6 +164,10 @@ "name": "confirm_button_height", "value": "60" }, + { + "name": "confirm_dialog_margin", + "value": "0" + }, { "name": "confirm_button_margin_t", "value": "50vp" diff --git a/features/noticeitem/src/main/resources/phone/element/float.json b/features/noticeitem/src/main/resources/phone/element/float.json index 1c1b1d6a..ebf3f0f5 100644 --- a/features/noticeitem/src/main/resources/phone/element/float.json +++ b/features/noticeitem/src/main/resources/phone/element/float.json @@ -60,6 +60,10 @@ "name": "confirm_dialog_width", "value": "336vp" }, + { + "name": "confirm_dialog_margin", + "value": "12vp" + }, { "name": "confirm_dialog_row_width", "value": "288vp" @@ -110,7 +114,7 @@ }, { "name": "notice_image_boderRadius", - "value": "12" + "value": "12vp" }, { "name": "notice_divider", -- Gitee