• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-2023 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 */
15
16export enum ItemState {
17  ENABLE = 1,
18  DISABLE = 2,
19  ACTIVATE = 3
20}
21
22const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA" +
23  "+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA" +
24  "AAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I" +
25  "3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxam9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIY" +
26  "eQ+8lrJyU+re7HgJtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpYKT" +
27  "mVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2re1oP43rNDc6wh1qDS/6t0" +
28  "n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdusCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF" +
29  "8EUcdfbsAAAAASUVORK5CYII=";
30
31@Observed
32export class ToolBarOption {
33  content: string;
34  action?: () => void;
35  icon?: Resource;
36  state?: ItemState = 1;
37}
38
39@Observed
40export class ToolBarOptions extends Array<ToolBarOption> {
41}
42
43@Component
44export struct ToolBar {
45  @ObjectLink toolBarList: ToolBarOptions
46  controller: TabsController
47  @Prop activateIndex: number = -1
48  @State menuContent: { value: string, action: () => void }[] = []
49  toolBarItemBackground: Resource[] = []
50  @State itemBackground: Resource = $r('sys.color.ohos_id_color_toolbar_bg')
51  @Builder MoreTabBuilder(index: number) {
52    Column() {
53      Image(PUBLIC_MORE)
54        .width(24)
55        .height(24)
56        .fillColor($r('sys.color.ohos_id_color_toolbar_icon'))
57        .margin({ top: 8, bottom: 2 })
58        .objectFit(ImageFit.Contain)
59      Text($r('app.string.id_string_more'))
60        .fontColor($r('sys.color.ohos_id_color_toolbar_text'))
61        .fontSize($r('sys.float.ohos_id_text_size_caption'))
62        .fontWeight(FontWeight.Medium)
63    }.width('100%').height('100%').bindMenu(this.menuContent, { offset: { x: 5, y : -10}})
64    .padding({left: 4, right: 4})
65    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
66  }
67
68  @Builder TabBuilder(index: number) {
69    Column() {
70      Image(this.toolBarList[index].icon)
71        .width(24)
72        .height(24)
73        .fillColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
74          ? $r('sys.color.ohos_id_color_text_primary_activated') : $r('sys.color.ohos_id_color_primary'))
75        .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
76        .margin({ top: 8, bottom: 2 })
77        .objectFit(ImageFit.Contain)
78      Text(this.toolBarList[index].content)
79        .fontColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
80          ? $r('sys.color.ohos_id_color_toolbar_text_actived') : $r('sys.color.ohos_id_color_toolbar_text'))
81        .fontSize($r('sys.float.ohos_id_text_size_caption'))
82        .maxFontSize($r('sys.float.ohos_id_text_size_caption'))
83        .minFontSize(9)
84        .fontWeight(FontWeight.Medium)
85        .maxLines(2)
86        .textOverflow({ overflow: TextOverflow.Ellipsis })
87        .opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
88    }
89    .width('100%').height('100%')
90    .focusable(!(this.toolBarList[index].state === 2))
91    .focusOnTouch(!(this.toolBarList[index].state === 2))
92    .padding({left: 4, right: 4})
93    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
94    .backgroundColor(this.itemBackground)
95    .onClick(() => {
96      if (this.toolBarList[index].state === 3) {
97        if (this.activateIndex === index)
98          this.activateIndex = -1
99        else {
100          this.activateIndex = index
101        }
102      }
103      if (!(this.toolBarList[index].state === 2)) {
104        this.toolBarList[index].action && this.toolBarList[index].action()
105      }
106    })
107    .onHover((isHover: boolean) => {
108      if (isHover ) {
109        this.toolBarItemBackground[index] = (this.toolBarList[index].state === 2)
110          ? $r('sys.color.ohos_id_color_toolbar_bg'): $r('sys.color.ohos_id_color_hover')
111      } else {
112        this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_toolbar_bg')
113      }
114      this.itemBackground = this.toolBarItemBackground[index]
115    })
116    .stateStyles({
117      pressed: {
118        .backgroundColor((this.toolBarList[index].state === 2) ? this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect'))
119      },
120      normal: {
121        .backgroundColor(this.toolBarItemBackground[index])
122      }
123    })
124  }
125
126  refreshData() {
127    this.menuContent = []
128    for (let i = 0; i < this.toolBarList.length; i++) {
129      if (i >= 4 && this.toolBarList.length > 5) {
130        this.menuContent[i - 4] = {
131          value: this.toolBarList[i].content,
132          action: this.toolBarList[i].action
133        }
134      } else {
135        this.toolBarItemBackground[i] = $r('sys.color.ohos_id_color_toolbar_bg')
136        this.menuContent = []
137      }
138    }
139    return true
140  }
141
142  aboutToAppear() {
143    this.refreshData()
144  }
145  build() {
146    Column() {
147      Divider().width('100%').height(1)
148      Column() {
149        Tabs({ barPosition: BarPosition.End, controller: this.controller}) {
150          ForEach(this.toolBarList, (item: ToolBarOption, index: number) => {
151            if (this.toolBarList.length <= 5) {
152              TabContent() {
153              }.tabBar(this.TabBuilder(index))
154              .enabled(!(this.toolBarList[index].state === 2))
155              .focusOnTouch(!(this.toolBarList[index].state === 2))
156            } else if (index < 4){
157              TabContent() {
158              }.tabBar(this.TabBuilder(index))
159              .enabled(!(this.toolBarList[index].state === 2))
160              .focusOnTouch(!(this.toolBarList[index].state === 2))
161            }
162          })
163          if (this.refreshData() && this.toolBarList.length > 5) {
164            TabContent() {
165            }.tabBar(this.MoreTabBuilder(4))
166          }
167        }
168        .vertical(false)
169        .constraintSize({ minHeight: 56, maxHeight: 56})
170        .barMode(BarMode.Fixed)
171        .onChange((index: number) => {
172        })
173        .width('100%')
174        .backgroundColor($r('sys.color.ohos_id_color_toolbar_bg'))
175      }.width('100%')
176    }
177  }
178}