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 screenManager, { ColumnSize } from '@ohos/base/src/main/ets/manager/ScreenManager'; 17import { ToolBarButton } from './ToolBarButton'; 18import { Constants } from '../../model/common/Constants'; 19import { ActionBarProp } from '../browserOperation/ActionBarProp'; 20import { Action } from '../browserOperation/Action'; 21import { ActionBarMode } from '../browserOperation/ActionBarMode'; 22 23export class MenuItem { 24 value: string; 25 action: () => void; 26} 27 28@Component 29export struct ToolBar { 30 @StorageLink('isSplitMode') isSplitMode: boolean = screenManager.isSplitMode(); 31 @StorageLink('leftBlank') leftBlank: [number, number, number, number] = [0, 0, 0, 0]; 32 @Link toolMenuList: Action[]; 33 @Consume moreMenuList: Action[]; 34 @StorageLink('isHorizontal') isHorizontal: boolean = screenManager.isHorizontal(); 35 @State showPopup: boolean = false; 36 private isFromPhotoBrowser = false; 37 onMenuClicked: Function; 38 @State actionBarProp: ActionBarProp = new ActionBarProp(); 39 40 private createActionBar(): ActionBarProp { 41 let actionBarProp: ActionBarProp = new ActionBarProp(); 42 actionBarProp 43 .setAlpha(ActionBarProp.PHOTO_BROWSER_ACTIONBAR_ALPHA) 44 .setMode(ActionBarMode.DETAIL_MODE); 45 return actionBarProp; 46 } 47 48 aboutToAppear(): void { 49 this.actionBarProp = this.createActionBar(); 50 } 51 52 @Builder PopupBuilder() { 53 Column() { 54 ForEach(this.moreMenuList, (menu: Action) => { 55 Text(menu.textRes) 56 .width('100%') 57 .height($r('app.float.menu_height')) 58 .fontColor(menu.fillColor) 59 .fontSize($r('sys.float.ohos_id_text_size_body1')) 60 .onClick(() => { 61 this.showPopup = false; 62 this.onMenuClicked && this.onMenuClicked(menu); 63 }) 64 if (this.moreMenuList.indexOf(menu) != this.moreMenuList.length - 1) { 65 Divider() 66 .width('100%') 67 .strokeWidth(Constants.MENU_DIVIDER_STROKE_WIDTH) 68 .color($r('sys.color.ohos_id_color_list_separator')) 69 } 70 71 }, menu => (menu.actionType != null ? menu.actionType.id : menu.actionID)) 72 }.width(screenManager.getColumnsWidth(ColumnSize.COLUMN_TWO)) 73 .borderRadius($r('sys.float.ohos_id_corner_radius_default_l')) 74 .padding({ 75 top: $r('app.float.menu_padding_vertical'), 76 bottom: $r('app.float.menu_padding_vertical'), 77 left: $r('app.float.menu_padding_horizontal'), 78 right: $r('app.float.menu_padding_horizontal') 79 }) 80 .backgroundColor(Color.White) 81 } 82 83 build() { 84 if (!this.isHorizontal) { 85 Row() { 86 Row() { 87 ForEach(this.toolMenuList, (menu: Action) => { 88 if (menu == Action.MORE) { 89 Column() { 90 Row() { 91 ToolBarButton({ 92 res: menu.iconRes, 93 action: menu, 94 isLeft: true, 95 isAutoTint: menu.isAutoTint, 96 colorMode: this.actionBarProp.getColorMode() 97 }) 98 }.margin({ top: $r('app.float.id_icon_margin_vertical') }) 99 100 Row() { 101 Text(menu.textRes) 102 .fontSize($r('sys.float.ohos_id_text_size_caption')) 103 .fontFamily($r('app.string.id_text_font_family_regular')) 104 .fontColor(menu.fillColor) 105 }.margin({ top: $r('sys.float.ohos_id_text_margin_vertical') }) 106 } 107 .width(`${Constants.PERCENT_HUNDRED / this.toolMenuList.length}%`) 108 .height('100%') 109 .onClick(() => { 110 this.showPopup = !this.showPopup 111 }) 112 .bindPopup(this.showPopup, { 113 builder: this.PopupBuilder, 114 placement: Placement.Top, 115 maskColor: 0x33000000, 116 popupColor: '#00FFFFFF', 117 enableArrow: false, 118 onStateChange: (e) => { 119 if (!e.isVisible) { 120 this.showPopup = false 121 } 122 } 123 }) 124 125 } else { 126 Column() { 127 Row() { 128 ToolBarButton({ 129 res: menu.iconRes, 130 action: menu, 131 isLeft: true, 132 isAutoTint: menu.isAutoTint, 133 colorMode: this.actionBarProp.getColorMode() 134 }) 135 }.margin({ top: $r('app.float.id_icon_margin_vertical') }) 136 137 Row() { 138 Text(menu.textRes) 139 .fontSize($r('sys.float.ohos_id_text_size_caption')) 140 .fontFamily($r('app.string.id_text_font_family_regular')) 141 .fontColor(menu.fillColor) 142 } 143 .margin({ top: $r('sys.float.ohos_id_text_margin_vertical') }) 144 } 145 .onClick(() => { 146 this.onMenuClicked && this.onMenuClicked(menu) 147 }) 148 .width(`${Constants.PERCENT_HUNDRED / this.toolMenuList.length}%`) 149 .height('100%') 150 } 151 }, menu => (menu.actionType != null ? menu.actionType.id : menu.actionID)) 152 } 153 .width('100%') 154 .height(Constants.ActionBarHeight) 155 .padding(this.toolMenuList.length > 4 ? {} : { left: $r('app.float.actionbar_margin_horizontal'), 156 right: $r('app.float.actionbar_margin_horizontal') }) 157 } 158 .padding({ 159 bottom: this.isFromPhotoBrowser ? px2vp(this.leftBlank[3]) : 0 160 }) 161 .width('100%') 162 .backgroundColor(this.actionBarProp.getBackgroundColor()) 163 .opacity(this.actionBarProp.getAlpha()) 164 .markAnchor({ x: '0%', y: '100%' }) 165 .position({ x: '0%', y: '100%' }) 166 } 167 } 168}