1/**
2 * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import ComponentConfig from './ComponentConfig';
16
17/**
18 * Subheader layout.
19 * It's suggested to use it when subheader is needed.
20 */
21@Component
22export struct SubHeader {
23  private titleContent: ResourceStr = $r('app.string.endTextEmpty');
24
25  build() {
26    Row() {
27      Text(this.titleContent)
28        .fontSize($r('app.float.font_14'))
29        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
30        .fontFamily('HarmonyHeiTi')
31        .fontWeight(FontWeight.Medium)
32        .width(ComponentConfig.WH_100_100)
33    }
34    .height($r("app.float.wh_value_48"))
35    .alignItems(VerticalAlign.Bottom)
36    .padding({
37      bottom: $r('app.float.distance_9_5'),
38      top: $r('app.float.distance_11_5'),
39      left: $r('sys.float.ohos_id_card_margin_start'),
40      right: $r("sys.float.ohos_id_card_margin_end")
41    })
42  }
43}
44
45/**
46 * Single title text with round corner.
47 */
48@Component
49export struct TitleText {
50  @State isTouched: boolean = false;
51  private title: string | Resource = '';
52  private color: ResourceColor = $r('app.color.font_color_182431');
53  private visible: Visibility = Visibility.Visible;
54
55  build() {
56    Row() {
57      Row() {
58        Text(this.title)
59          .fontSize($r("app.float.font_16"))
60          .fontColor(this.color)
61          .fontWeight(500)
62          .textAlign(TextAlign.Start)
63          .padding($r('app.float.wh_value_4'))
64      }
65      .height($r("app.float.wh_value_56"))
66      .width(ComponentConfig.WH_100_100)
67      .padding({
68        left: $r('sys.float.ohos_id_card_margin_start'),
69        right: $r('sys.float.ohos_id_card_margin_end') })
70      .borderRadius($r("app.float.radius_24"))
71      .linearGradient(this.isTouched ? {
72        angle: 90,
73        direction: GradientDirection.Right,
74        colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
75      } : {
76        angle: 90,
77        direction: GradientDirection.Right,
78        colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
79      })
80      .onClick(event => this.clickEvent(event))
81      .onTouch((event?: TouchEvent | undefined) => {
82        if (event?.type === TouchType.Down) {
83          this.isTouched = true;
84        }
85        if (event?.type === TouchType.Up) {
86          this.isTouched = false;
87        }
88      })
89    }
90    .width(ComponentConfig.WH_100_100)
91    .margin({ top: $r("app.float.distance_12") })
92    .padding($r("app.float.distance_4"))
93    .borderRadius($r("app.float.radius_24"))
94    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
95
96  }
97
98  private clickEvent: (event?: ClickEvent) => void = () => {
99  };
100}
101
102/**
103 * Text title with end text layout with harmony round style used in list item.
104 * Note that this does not contains the white padding when is touched.
105 * If you want to use it in single touch layout, wrap it with extra container component.
106 */
107@Component
108export struct TextComponentWithEndText {
109  @State endText: string = "";
110  @State isTouched: boolean = false;
111  private title: string | Resource = '';
112
113  build() {
114    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
115      Row() {
116        Text(this.title)
117          .fontSize($r('app.float.font_16'))
118          .fontColor($r('app.color.font_color_182431'))
119          .fontWeight(FontWeight.Medium)
120          .textAlign(TextAlign.Start);
121      }
122
123      Row() {
124        Text(this.endText)
125          .fontSize($r('app.float.font_14'))
126          .fontColor($r('app.color.font_color_182431'))
127          .margin({ right: $r('app.float.distance_4') })
128          .textAlign(TextAlign.End);
129        Image('/res/image/ic_settings_arrow.svg')
130          .width($r('app.float.wh_value_12'))
131          .height($r('app.float.wh_value_24'))
132          .fillColor($r("sys.color.ohos_id_color_primary"))
133          .opacity($r("app.float.opacity_0_2"))
134      }
135    }
136    .padding({
137      left: $r('sys.float.ohos_id_card_margin_start'),
138      right: $r('sys.float.ohos_id_card_margin_end')
139    })
140    .height($r('app.float.wh_value_48'))
141    .width(ComponentConfig.WH_100_100)
142    .borderRadius($r('app.float.radius_24'))
143    .onClick(event => this.clickEvent(event))
144    .linearGradient(this.isTouched ? {
145      angle: 90,
146      direction: GradientDirection.Right,
147      colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
148    } : {
149      angle: 90,
150      direction: GradientDirection.Right,
151      colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
152    })
153    .onTouch((event?: TouchEvent | undefined) => {
154      if (event?.type === TouchType.Down) {
155        this.isTouched = true;
156      }
157      if (event?.type === TouchType.Up) {
158        this.isTouched = false;
159      }
160    });
161  }
162
163  private clickEvent: (event?: ClickEvent) => void = () => {
164  };
165}