!130 Multiple system account adapt new ux style

Merge pull request !130 from zhanghaima/master
2024-11-23 14:30:06 +00:00 · 2022-02-17 03:22:09 +00:00 · 2022-02-17 03:22:09 +00:00 · be0eca6913
commit be0eca6913
parent 2846465a91 5ee692ae3b
4 changed files with 125 additions and 80 deletions
--- a/common/component/src/main/ets/default/subEntryComponent.ets
+++ b/common/component/src/main/ets/default/subEntryComponent.ets
@ -61,8 +61,8 @@ export struct SubEntryComponent {
@Component
 export  struct SubEntryComponentWithEndText {
  private targetPage: string;
-  private title:string;
-  @Prop endText:string;
+  private title: string | Resource;
+  @Prop endText: string;
  @State isTouched:boolean = false;

  build() {
@ -81,8 +81,7 @@ export  struct SubEntryComponentWithEndText {
            .fontSize($r('app.float.font_18'))
            .fontColor($r('app.color.font_color_182431'))
            .margin({ right: $r('app.float.distance_4') })
-            .textAlign(TextAlign.End)
-            .visibility(Visibility.None);
+            .textAlign(TextAlign.End);
          Image('/res/image/ic_settings_arrow.svg')
            .width($r('app.float.wh_value_12'))
            .height($r('app.float.wh_value_24'))
--- a/common/component/src/main/ets/default/textComponent.ets
+++ b/common/component/src/main/ets/default/textComponent.ets
@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ComponentConfig from './ComponentConfig.ets';
+
+/**
+ * Single title text with round corner.
+ */
+@Component
+export struct TitleText {
+  private title: string | Resource;
+  private color: Color = Color.Black;
+  private visibility: Visibility = Visibility.Visible;
+  private clickEvent: (event?: ClickEvent) => void;
+  @State isTouched: boolean = false;
+
+  build() {
+    Row() {
+      Row() {
+        Text(this.title)
+          .fontSize($r("app.float.font_28"))
+          .fontColor(this.color)
+          .height($r("app.float.wh_value_60"))
+          .textAlign(TextAlign.Start)
+      }
+      .width(ComponentConfig.WH_100_100)
+      .padding({left: $r("app.float.distance_24"), right: $r("app.float.distance_24")})
+      .borderRadius($r("app.float.radius_24"))
+      .backgroundColor(this.isTouched? $r("app.color.color_D8D8D8_grey"):$r("app.color.white_bg_color"))
+      .onClick(event => this.clickEvent(event))
+      .onTouch((event: TouchEvent) => {
+        if (event.type === TouchType.Down) {
+          this.isTouched = true;
+        }
+        if (event.type === TouchType.Up) {
+          this.isTouched = false;
+        }
+      })
+    }
+    .width(ComponentConfig.WH_100_100)
+    .margin({top: $r("app.float.distance_8"), bottom: $r("app.float.distance_8")})
+    .borderRadius($r("app.float.radius_24"))
+    .backgroundColor($r("app.color.white_bg_color"))
+    .visibility(this.visibility)
+    .padding($r('app.float.distance_4'))
+  }
+}
--- a/product/phone/src/main/ets/default/pages/multipleUsers.ets
+++ b/product/phone/src/main/ets/default/pages/multipleUsers.ets
@ -15,6 +15,7 @@
 */
 import HeadComponent from '../../../../../../../common/component/src/main/ets/default/headComponent.ets';
 import ResourceUtil from '../../../../../../../common/search/src/main/ets/default/common/ResourceUtil.ets';
+import {TitleText} from '../../../../../../../common/component/src/main/ets/default/textComponent.ets';
 import LogUtil from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil.ets';
 import ConfigData from '../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData.ets';
 import SystemAccountController from '../model/usersAndAccounts/systemAccountController.ets';
@ -48,39 +49,33 @@ struct MultipleUsers {
        }
        .divider({ strokeWidth: $r('app.float.wh_value_1'), color: $r('app.color.color_E3E3E3_grey'),
          startMargin: $r('app.float.wh_value_20'), endMargin: $r('app.float.wh_value_20') })
+        .borderRadius($r("app.float.radius_24"))
+        .backgroundColor($r("app.color.white_bg_color"))
+        .padding($r('app.float.distance_4'))
+        .margin({top: $r("app.float.distance_16"), bottom: $r("app.float.distance_8")})
+        .visibility(this.userList.length > 0 ? Visibility.Visible : Visibility.None)

        // Add user, shown when is administrator
-        Text($r("app.string.addUser"))
-          .fontSize($r("app.float.font_28"))
-          .fontColor(Color.Blue)
-          .margin({ left: $r("app.float.wh_value_20"),
-            right: $r("app.float.wh_value_20"),
-            top: $r("app.float.wh_value_20")
-          })
-          .height($r("app.float.wh_value_50"))
-          .textAlign(TextAlign.Start)
-          .visibility(this.isShowAddUser ? Visibility.Visible : Visibility.None)
-          .onClick(() => {
+        TitleText({
+          title: $r("app.string.addUser"),
+          color: Color.Blue,
+          visibility: this.isShowAddUser ? Visibility.Visible : Visibility.None,
+          clickEvent: (event => {
            LogUtil.info("Add user.");
            this.addUserDialogController.open();
-          })
+          }).bind(this)
+        })

        /**
         * Add guest, shown with conditions:
         * 1. Current user is administrator
         * 2. Guest is not created.
         */
-        Text($r("app.string.addGuest"))
-          .fontSize($r("app.float.font_28"))
-          .fontColor(Color.Blue)
-          .margin({ left: $r("app.float.wh_value_20"),
-            right: $r("app.float.wh_value_20"),
-            top: $r("app.float.wh_value_20")
-          })
-          .height($r("app.float.wh_value_50"))
-          .textAlign(TextAlign.Start)
-          .visibility(this.isShowAddGuest ? Visibility.Visible : Visibility.None)
-          .onClick((event) => {
+        TitleText({
+          title: $r("app.string.addGuest"),
+          color: Color.Blue,
+          visibility: this.isShowAddGuest ? Visibility.Visible : Visibility.None,
+          clickEvent: ((event) => {
            AlertDialog.show({
              message: $r("app.string.askAddGuest"),
              primaryButton: {
@ -100,7 +95,8 @@ struct MultipleUsers {
                LogUtil.info("Cancel dialog.")
              }
            })
-          })
+          }).bind(this)
+        })
      }
      .height(ConfigData.WH_90_100)
      .alignItems(HorizontalAlign.Start)
@ -139,6 +135,11 @@ struct MultipleUsers {
      }
    }
    .height(ConfigData.WH_100_100)
+    .padding({left:$r('app.float.distance_24'), right:$r('app.float.distance_24')})
+    .align(Alignment.Center)
+    .height(ConfigData.WH_100_100)
+    .width(ConfigData.WH_100_100)
+    .backgroundColor($r("app.color.color_E3E3E3_grey"));
  }

  aboutToAppear() {
@ -155,7 +156,7 @@ struct MultipleUsers {
  onBackPress() {
    LogUtil.info('multiple user on back press.');
    AppStorage.SetOrCreate("systemAccoutList", []);
-    Router.back();
+    router.back();
  }

 }
@ -163,6 +164,7 @@ struct MultipleUsers {
@Component
 struct UserItem {
  private user: any;
+  @State isTouched:boolean = false;
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: UserItemDialog({ dialogController: this.dialogController, user: this.user }),
    autoCancel: false
@ -174,7 +176,7 @@ struct UserItem {
        Image("/res/image/ic_user_portrait.svg")
          .width($r("app.float.wh_value_50"))
          .height($r("app.float.wh_value_50"))
-          .margin({ right: $r("app.float.wh_value_12") })
+          .margin({ left: $r("app.float.wh_value_12"), right: $r("app.float.wh_value_12") })
        Column() {
            Text(this.user.localName)
              .fontSize($r("app.float.font_24"))
@ -190,9 +192,8 @@ struct UserItem {
      Image($r("app.media.ic_settings_arrow"))
        .width($r("app.float.wh_value_40"))
        .height($r("app.float.wh_value_40"))
-        .margin({ right: $r("app.float.wh_value_20") })
+        .margin({ right: $r("app.float.distance_16") })
    }
-    .margin({ left: $r("app.float.wh_value_10"), right: $r("app.float.wh_value_10") })
    .height($r("app.float.wh_value_100"))
    .onClick(event => {
      LogUtil.info("Click the multiple user item.");
@ -219,6 +220,16 @@ struct UserItem {
        });
      }
    })
+    .borderRadius($r('app.float.radius_24'))
+    .backgroundColor(this.isTouched ? $r("app.color.color_D8D8D8_grey") : $r("app.color.white_bg_color"))
+    .onTouch((event: TouchEvent) => {
+      if (event.type === TouchType.Down) {
+        this.isTouched = true;
+      }
+      if (event.type === TouchType.Up) {
+        this.isTouched = false;
+      }
+    });
  }
 }

--- a/product/phone/src/main/ets/default/pages/usersAccounts.ets
+++ b/product/phone/src/main/ets/default/pages/usersAccounts.ets
@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
@ -13,13 +12,16 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-
 import HeadComponent from '../../../../../../../common/component/src/main/ets/default/headComponent.ets';
+import {SubEntryComponentWithEndText} from '../../../../../../../common/component/src/main/ets/default/subEntryComponent.ets';
 import ConfigData from '../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData.ets';
 import SystemAccount from '../model/usersAndAccounts/systemAccountModel.ets'
 import LogUtil from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil.ets';
 import router from '@system.router';

+/**
+* System account home page.
+ */
@Entry
@Component
 struct UsersAccounts {
@ -28,10 +30,28 @@ struct UsersAccounts {
  build() {
    Column() {
      // head
-      HeadComponent({ headName: $r("app.string.usersAccountsTab"), isActive: true });
-      // current user
-      UserComponent({ accountName: this.accountName });
+      HeadComponent({ headName: $r("app.string.usersAccountsTab"), isActive: true })
+
+      Text($r('app.string.user'))
+        .padding({ left: $r('app.float.distance_24'), right: $r("app.float.distance_24") })
+        .margin({ bottom: $r('app.float.distance_8') })
+        .fontSize($r('app.float.font_18'))
+        .fontColor(Color.Black)
+        .width(ConfigData.WH_100_100)
+        .textAlign(TextAlign.Start)
+
+      // current user subEntry
+      SubEntryComponentWithEndText({
+        targetPage: "pages/multipleUsers",
+        title: $r("app.string.currentLogin"),
+        endText: this.accountName
+      });
    }
+    .padding({left:$r('app.float.distance_24'), right:$r('app.float.distance_24')})
+    .align(Alignment.Center)
+    .height(ConfigData.WH_100_100)
+    .width(ConfigData.WH_100_100)
+    .backgroundColor($r("app.color.color_E3E3E3_grey"));
  }

  onPageShow() {
@ -40,47 +60,4 @@ struct UsersAccounts {
      this.accountName = name;
    });
  }
-}
-
-@Component
-struct UserComponent {
-  @Prop accountName: string;
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
-      Text($r('app.string.user'))
-        .margin({ left: $r('app.float.wh_value_20'), bottom: $r('app.float.wh_value_12') })
-        .fontSize($r('app.float.font_24'))
-        .fontColor(Color.Black)
-
-      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
-        Text($r("app.string.currentLogin"))
-          .fontSize($r("app.float.font_24"))
-          .fontWeight(FontWeight.Bold)
-          .textAlign(TextAlign.Start)
-          .align(ItemAlign.Start)
-          .width(ConfigData.WH_40_100)
-        Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
-          Text(this.accountName)
-            .fontSize($r("app.float.font_24"))
-            .fontColor(Color.Black)
-            .align(Alignment.Start)
-            .margin({ right: $r("app.float.wh_value_5") })
-          Image($r("app.media.ic_settings_arrow"))
-            .width($r("app.float.wh_value_20"))
-            .height($r("app.float.wh_value_20"))
-        }
-      }
-      .margin({ left: $r("app.float.wh_value_20"), right: $r("app.float.wh_value_20") })
-      .height($r("app.float.wh_value_70"))
-      .onClick(() => {
-        router.push({ uri: "pages/multipleUsers" })
-      })
-    }
-    .width(ConfigData.WH_100_100)
-  }
-
-  aboutToAppear() {
-    LogUtil.info("User account about to appear.")
-  }
 }