• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 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 */
15
16import { Log } from '@ohos/base/src/main/ets/utils/Log';
17import { Action } from '../browserOperation/Action'
18import { ActionBarColorMode } from '../browserOperation/ActionBarMode'
19import screenManager, { ColumnSize } from '@ohos/base/src/main/ets/manager/ScreenManager';
20import { Constants } from '../../model/common/Constants';
21
22@Component
23export struct ActionBarButton {
24    @StorageLink('isHorizontal') isHorizontal: boolean = screenManager.isHorizontal();
25    private res: Resource = undefined;
26    action: Action;
27    onMenuClicked: Function;
28    isFirst = false;
29    isAutoTint = true;
30    colorMode: ActionBarColorMode;
31    @State showPopup: boolean = false;
32    @Consume moreMenuList: Action[];
33
34    @Builder PopupBuilder() {
35        Column() {
36            ForEach(this.moreMenuList, (menu: Action) => {
37                Text(menu.textRes)
38                    .width('100%')
39                    .height($r('app.float.menu_height'))
40                    .fontColor(menu.fillColor)
41                    .fontSize($r('sys.float.ohos_id_text_size_body1'))
42                    .onClick(() => {
43                        this.showPopup = false;
44                        this.onMenuClicked && this.onMenuClicked(menu);
45                    })
46                if (this.moreMenuList.indexOf(menu) != this.moreMenuList.length - 1) {
47                    Divider()
48                        .width('100%')
49                        .strokeWidth(Constants.MENU_DIVIDER_STROKE_WIDTH)
50                        .color($r('sys.color.ohos_id_color_list_separator'))
51                }
52            }, menu => JSON.stringify(menu.actionID))
53        }.width(screenManager.getColumnsWidth(ColumnSize.COLUMN_TWO))
54        .borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
55        .padding({
56            top: $r('app.float.menu_padding_vertical'),
57            bottom: $r('app.float.menu_padding_vertical'),
58            left: $r('app.float.menu_padding_horizontal'),
59            right: $r('app.float.menu_padding_horizontal')
60        })
61        .backgroundColor(Color.White)
62    }
63
64    @Builder ActionBarButtonBuilder() {
65        Flex({
66            direction: FlexDirection.Column,
67            justifyContent: FlexAlign.Center,
68            alignItems: ItemAlign.Center
69        }) {
70            if (this.isAutoTint) {
71                Image(this.res)
72                    .height($r('app.float.icon_size'))
73                    .width($r('app.float.icon_size'))
74                    .fillColor(this.colorMode == ActionBarColorMode.TRANSPARENT ?
75                        Action.ICON_DEFAULT_COLOR_CONTRARY : this.action.fillColor)
76            } else {
77                Image(this.res)
78                    .height($r('app.float.icon_size'))
79                    .width($r('app.float.icon_size'))
80            }
81        }
82        .height($r('app.float.default_button_size'))
83        .width($r('app.float.default_button_size'))
84        .margin({ left: (this.action == Action.NAVIGATION) ? $r('app.float.max_padding_start') : 0 })
85    }
86
87    build() {
88        if (this.action == Action.MORE) {
89            Row() {
90                this.ActionBarButtonBuilder()
91            }
92            .onClick(() => {
93                this.showPopup = !this.showPopup
94            })
95            .bindPopup(this.showPopup, {
96                builder: this.PopupBuilder,
97                placement: Placement.Top,
98                maskColor: 0x33000000,
99                popupColor: '#00FFFFFF',
100                enableArrow: false,
101                onStateChange: (e) => {
102                    if (!e.isVisible) {
103                        this.showPopup = false
104                    }
105                }
106            })
107        } else {
108            Row() {
109                this.ActionBarButtonBuilder()
110            }
111            .onClick(() => {
112                this.onMenuClicked && this.onMenuClicked(this.action)
113            })
114        }
115    }
116}