From 5c215c67978823f893f6fb763b0e7b19bdc50d10 Mon Sep 17 00:00:00 2001 From: clz Date: Thu, 19 Sep 2024 23:13:15 +0800 Subject: [PATCH] feat: sidebar animate --- build-profile.json5 | 10 ++--- .../src/components/chat/ChatMessage.cj | 2 + .../chat/chatMessages/ChatMessageMe.cj | 4 +- .../chat/chatMessages/ChatMessageSys.cj | 36 ++++++++++++---- .../chat/chatMessages/ChatMessageYou.cj | 4 +- .../components/chat/components/ToBottom.cj | 19 +++++++++ .../cangjie/src/components/home/HomeMain.cj | 6 +-- .../cangjie/src/components/home/HomeTitle.cj | 10 ++++- entry/src/main/cangjie/src/index.cj | 22 +++++++++- entry/src/main/cangjie/src/mock/Data.cj | 2 +- entry/src/main/cangjie/src/pages/SidePage.cj | 9 +++- .../src/main/cangjie/src/store/AppUIStore.cj | 41 +++++++++++++++++++ 12 files changed, 139 insertions(+), 26 deletions(-) create mode 100644 entry/src/main/cangjie/src/components/chat/components/ToBottom.cj create mode 100644 entry/src/main/cangjie/src/store/AppUIStore.cj diff --git a/build-profile.json5 b/build-profile.json5 index dcc0b05..1a42db1 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -5,13 +5,13 @@ "name": "default", "type": "HarmonyOS", "material": { - "certpath": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer", - "storePassword": "0000001B9A5987C8C2ED4361B7927D584652F717FF7936EC3310D0B9BCEEA9B1E3485C8480FF92C40CA86E", + "certpath": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer", + "storePassword": "0000001A03384DEB01F504B42FD70CBF974256D4CA32F4F9D4459DB3D7DCD1561D17D850D42B2FB741BC", "keyAlias": "debugKey", - "keyPassword": "0000001BC10C705923EBF5BFF9E770159DFBE2DD5E92BD7DCC5F78CCF2629A20BA2BD3177C275B83ADB93F", - "profile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b", + "keyPassword": "0000001A59E9939B476BC030721C982C8E71A2DA937FB7318CFD06F3EC1677A0D48D45737FFD392F4C6B", + "profile": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b", "signAlg": "SHA256withECDSA", - "storeFile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p12" + "storeFile": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p12" } } ], diff --git a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj index a984b45..aea9858 100644 --- a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj +++ b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj @@ -27,6 +27,8 @@ public class ChatMessage { ChatMessageMe(message: this.message) } else if (let EChatSource.YOU <- this.source) { ChatMessageYou(message: this.message) + } else if (let EChatSource.SYS <- this.source) { + ChatMessageSys(message: this.message) } else {} } diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj index 702289f..2804824 100644 --- a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj @@ -19,9 +19,9 @@ public class ChatMessageMe { var radiusMap: HashMap = HashMap( [ ("topLeft", 12.vp), - ("topRight", 12.vp), + ("topRight", 0.vp), ("bottomLeft", 12.vp), - ("bottomRight", 0.vp) + ("bottomRight", 12.vp) ] ) diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj index c2aa271..0e8303c 100644 --- a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj @@ -11,9 +11,11 @@ import ohos.base.* @Component public class ChatMessageSys { + let maxWidth = 100.percent let fontColor: Color = Color.BLACK let bgColor: Color = Color.WHITE let orient: FlexAlign = FlexAlign.Start + let orient2: HorizontalAlign = HorizontalAlign.Start @Prop var message: String @@ -21,24 +23,40 @@ public class ChatMessageSys { @State var radiusMap: HashMap = HashMap( [ - ("topLeft", 12.vp), + ("topLeft", 0.vp), ("topRight", 12.vp), - ("bottomLeft", 0.vp), + ("bottomLeft", 12.vp), ("bottomRight", 12.vp) ] ) + + func build() { - Row() { - Row() { - Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16, - bottom: 8, left: 16).borderRadius( + Column(8) { + Row(8) { + Blank() // avatar + .width(24.vp) + .height(24.vp) + .borderRadius(12.vp) + .backgroundColor(Color.GRAY) + + // name + Text("Himi") + } + + Row { + Text(message) + .fontColor(this.fontColor) + .backgroundColor(this.bgColor) + .padding(top: 8, right: 16, bottom: 8, left: 16) + .borderRadius( topLeft: this.radiusMap['topLeft'], topRight: this.radiusMap['topRight'], bottomLeft: this.radiusMap['bottomLeft'], bottomRight: this.radiusMap['bottomRight'], - ) - }.width(60.percent).justifyContent(this.orient) - }.width(100.percent).justifyContent(this.orient) + ).width(this.maxWidth) + }.width(this.maxWidth).justifyContent(this.orient) + }.width(100.percent).alignItems(this.orient2) } } diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj index cc2ced4..46c2b73 100644 --- a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj @@ -21,9 +21,9 @@ public class ChatMessageYou { @State var radiusMap: HashMap = HashMap( [ - ("topLeft", 12.vp), + ("topLeft", 0.vp), ("topRight", 12.vp), - ("bottomLeft", 0.vp), + ("bottomLeft", 12.vp), ("bottomRight", 12.vp) ] ) diff --git a/entry/src/main/cangjie/src/components/chat/components/ToBottom.cj b/entry/src/main/cangjie/src/components/chat/components/ToBottom.cj new file mode 100644 index 0000000..08645b7 --- /dev/null +++ b/entry/src/main/cangjie/src/components/chat/components/ToBottom.cj @@ -0,0 +1,19 @@ +/** + * Created on 2024/9/19 + */ +package ohos_app_cangjie_entry.components.chat.components + +import std.collection.* +import ohos.component.* +import ohos.state_macro_manage.* +import ohos.state_manage.* +import ohos.base.* + +@Component +public class ToBottom { + func build() { + Row() { + + } + } +} diff --git a/entry/src/main/cangjie/src/components/home/HomeMain.cj b/entry/src/main/cangjie/src/components/home/HomeMain.cj index 9dff581..25d584d 100644 --- a/entry/src/main/cangjie/src/components/home/HomeMain.cj +++ b/entry/src/main/cangjie/src/components/home/HomeMain.cj @@ -19,19 +19,19 @@ import ohos_app_cangjie_entry.view_model.ChatListControl public class HomeMain { let TAG: String = "HomeMain" @State - var mockData: ArrayList = ChatStore().use() + var chatDataSource: ArrayList = ChatStore().use() let chatListController = ChatListControl() protected func aboutToAppear(): Unit { Logger(TAG).info("About to appear.") ChatStore().register(this.TAG) { - this.mockData = ChatStore().use() + this.chatDataSource = ChatStore().use() } } func build() { Column { - ChatList(datasource: this.mockData) + ChatList(datasource: this.chatDataSource) }.width(100.percent).height(100.percent).padding(right: 8.vp, left: 8.vp) } } diff --git a/entry/src/main/cangjie/src/components/home/HomeTitle.cj b/entry/src/main/cangjie/src/components/home/HomeTitle.cj index 63a6f7e..6ecc96b 100644 --- a/entry/src/main/cangjie/src/components/home/HomeTitle.cj +++ b/entry/src/main/cangjie/src/components/home/HomeTitle.cj @@ -7,11 +7,19 @@ internal import ohos.base.* internal import ohos.component.* internal import ohos.state_manage.* import ohos.state_macro_manage.* +import ohos_app_cangjie_entry.store.* @Component public class HomeTitle { + @State + var appUIState: _AppUIStore = AppUIStore() + func build() { - Row { + Row() { + Button('open sidebar') + .onClick { + => this.appUIState.openSidebar() + } Text("Home Title") }.width(100.percent) } diff --git a/entry/src/main/cangjie/src/index.cj b/entry/src/main/cangjie/src/index.cj index f79c0e5..6007cd6 100644 --- a/entry/src/main/cangjie/src/index.cj +++ b/entry/src/main/cangjie/src/index.cj @@ -5,6 +5,7 @@ internal import ohos.component.* internal import ohos.state_manage.* import ohos.state_macro_manage.* import ohos_app_cangjie_entry.pages.* +import ohos_app_cangjie_entry.store.* @Entry @Component @@ -13,11 +14,28 @@ class MyView { @State var message: String = "Hello Cangjie" - protected func aboutToAppear() { + @State + var appUIState: _AppUIStore = AppUIStore() + + protected override func aboutToAppear() { + } + + protected override func onBackPress() { + if (appUIState.sidebarState()) { + appUIState.closeSidebar() + return true + } + return false } func build() { - Row { + Stack { + if (this.appUIState.sidebarState()) { + Row { + SidePage() + }.height(100.percent).width(100.percent).backgroundColor(@r(app.color.bg_01)).zIndex(24).transition( + TransitionEffect.SLIDE.animation(AnimateParam(duration: 300, curve: Curve.Linear))) + } HomePage() }.height(100.percent).width(100.percent).backgroundColor(@r(app.color.bg_01)) } diff --git a/entry/src/main/cangjie/src/mock/Data.cj b/entry/src/main/cangjie/src/mock/Data.cj index f96fcec..3ea991d 100644 --- a/entry/src/main/cangjie/src/mock/Data.cj +++ b/entry/src/main/cangjie/src/mock/Data.cj @@ -23,6 +23,6 @@ func getSource(index: Int): String { if (index % 2 == 0) { 'ME' } else { - 'YOU' + 'SYS' } } diff --git a/entry/src/main/cangjie/src/pages/SidePage.cj b/entry/src/main/cangjie/src/pages/SidePage.cj index 984ca34..4cd8532 100644 --- a/entry/src/main/cangjie/src/pages/SidePage.cj +++ b/entry/src/main/cangjie/src/pages/SidePage.cj @@ -7,13 +7,20 @@ internal import ohos.base.* internal import ohos.component.* internal import ohos.state_manage.* import ohos.state_macro_manage.* +import ohos_app_cangjie_entry.store.* @Component public class SidePage { private let TAG: String = "SidePage" + @State + var appUIState: _AppUIStore = AppUIStore() protected func aboutToAppear() { } func build() { - Row() + Row() { + Text('Sidebar') + } + .width(100.percent) + .height(100.percent) } } diff --git a/entry/src/main/cangjie/src/store/AppUIStore.cj b/entry/src/main/cangjie/src/store/AppUIStore.cj new file mode 100644 index 0000000..6a5b1d4 --- /dev/null +++ b/entry/src/main/cangjie/src/store/AppUIStore.cj @@ -0,0 +1,41 @@ +/** + * Created on 2024/9/19 + */ +package ohos_app_cangjie_entry.store + +import std.collection.* +import ohos.component.* +import ohos.state_macro_manage.* +import ohos.state_manage.* +import ohos.base.* +import ohos_app_cangjie_entry.utils.Logger + +@Observed +public class _AppUIStore { + private let TAG = "AppUIStore" + @Publish + public var isSidebarOpen: Bool = false + + public func sidebarState() { + return this.isSidebarOpen + } + + public func openSidebar() { + Logger(TAG).info("open sidebar") + this.isSidebarOpen = true + } + public func closeSidebar() { + this.isSidebarOpen = false + } +} + +var AppUIStoreInstance = Option<_AppUIStore>.None + +public func AppUIStore(): _AppUIStore { + if (let Some(value) <- AppUIStoreInstance) { + value + } else { + AppUIStoreInstance = Option<_AppUIStore>.Some(_AppUIStore()) + AppUIStoreInstance.getOrThrow() + } +}