feat: sidebar animate

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",
+          "certpath": "C:\\Users\\clz\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer",
-          "storePassword": "0000001B9A5987C8C2ED4361B7927D584652F717FF7936EC3310D0B9BCEEA9B1E3485C8480FF92C40CA86E",
+          "storePassword": "0000001A03384DEB01F504B42FD70CBF974256D4CA32F4F9D4459DB3D7DCD1561D17D850D42B2FB741BC",
           "keyAlias": "debugKey",
-          "keyPassword": "0000001BC10C705923EBF5BFF9E770159DFBE2DD5E92BD7DCC5F78CCF2629A20BA2BD3177C275B83ADB93F",
+          "keyPassword": "0000001A59E9939B476BC030721C982C8E71A2DA937FB7318CFD06F3EC1677A0D48D45737FFD392F4C6B",
-          "profile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b",
+          "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"
         }
       }
     ],

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 {}
     }
 

entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj

@@ -19,9 +19,9 @@ public class ChatMessageMe {
     var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
         [
             ("topLeft", 12.vp),
-            ("topRight", 12.vp),
+            ("topRight", 0.vp),
             ("bottomLeft", 12.vp),
-            ("bottomRight", 0.vp)
+            ("bottomRight", 12.vp)
         ]
     )
 

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<String, Length> = HashMap<String, Length>(
         [
-            ("topLeft", 12.vp),
+            ("topLeft", 0.vp),
             ("topRight", 12.vp),
-            ("bottomLeft", 0.vp),
+            ("bottomLeft", 12.vp),
             ("bottomRight", 12.vp)
         ]
     )
 
+
+
     func build() {
-        Row() {
+        Column(8) {
-            Row() {
+            Row(8) {
-                Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16,
+                Blank() // avatar
-                    bottom: 8, left: 16).borderRadius(
+                .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(this.maxWidth)
-            }.width(60.percent).justifyContent(this.orient)
+            }.width(this.maxWidth).justifyContent(this.orient)
-        }.width(100.percent).justifyContent(this.orient)
+        }.width(100.percent).alignItems(this.orient2)
     }
 }

entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj

@@ -21,9 +21,9 @@ public class ChatMessageYou {
     @State
     var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
         [
-            ("topLeft", 12.vp),
+            ("topLeft", 0.vp),
             ("topRight", 12.vp),
-            ("bottomLeft", 0.vp),
+            ("bottomLeft", 12.vp),
             ("bottomRight", 12.vp)
         ]
     )

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() {
+
+        }
+    }
+}

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<ChatData> = ChatStore().use()
+    var chatDataSource: ArrayList<ChatData> = 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)
     }
 }

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)
     }

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))
     }

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'
     }
 }

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)
     }
 }

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()
+    }
+}