openharmony/arkui_advanced_ui_component
1
0
Fork 0
mirror of https://gitee.com/openharmony/arkui_advanced_ui_component synced 2024-11-27 01:10:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add arkdialog/progressbutton/toolbar

Browse Source 
Signed-off-by: Starwberryue <tanyue9@huawei.com>
This commit is contained in:
Tanyue(Strawberryue 2023-08-01 21:27:50 +08:00
parent c67fc82e9e
commit 4ef25c9acb
12 changed files with 3304 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
interface/arkdialog/BUILD.gn Normal file
View File

@ -0,0 +1,46 @@
# Copyright (c) 2023-2023 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("//build/ohos.gni")
import("//foundation/arkui/ace_engine/ace_config.gni")
import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
es2abc_gen_abc("gen_arkdialog_abc") {
src_js = rebase_path("arkdialog.js")
dst_file = rebase_path(target_out_dir + "/arkdialog.abc")
in_puts = [ "arkdialog.js" ]
out_puts = [ target_out_dir + "/arkdialog.abc" ]
extra_args = [ "--module" ]
}
gen_js_obj("arkdialog_abc") {
input = get_label_info(":gen_arkdialog_abc", "target_out_dir") + "/arkdialog.abc"
output = target_out_dir + "/arkdialog_abc.o"
dep = ":gen_arkdialog_abc"
}
ohos_shared_library("arkdialog") {
sources = [ "arkdialog.cpp" ]
deps = [ ":arkdialog_abc" ]
external_deps = [
"hilog:libhilog",
"napi:ace_napi",
]
subsystem_name = "arkui"
part_name = "advanced_ui_component"
relative_install_dir = "module/arkui/advanced"
}

53
interface/arkdialog/arkdialog.cpp Normal file
View File

@ -0,0 +1,53 @@
/*
* Copyright (c) 2023-2023 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.
*/
#include "native_engine/native_engine.h"
#include "napi/native_api.h"
#include "napi/native_node_api.h"
extern const char _binary_arkdialog_abc_start[];
extern const char _binary_arkdialog_abc_end[];
// Napi get abc code function
extern "C" __attribute__((visibility("default")))
void NAPI_arkui_advanced_ArkDialog_GetABCCode(const char **buf, int *buflen)
{
if (buf != nullptr) {
*buf = _binary_arkdialog_abc_start;
}
if (buflen != nullptr) {
*buflen = _binary_arkdialog_abc_end - _binary_arkdialog_abc_start;
}
}
/*
* Module define
*/
static napi_module arkdialogModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_modname = "arkui.advanced.ArkDialog",
.nm_priv = ((void*)0),
.reserved = { 0 },
};
/*
* Module register function
*/
extern "C" __attribute__((constructor)) void arkdialogRegisterModule(void)
{
napi_module_register(&arkdialogModule);
}

1604
interface/arkdialog/arkdialog.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
interface/progressbutton/BUILD.gn Normal file
View File

@ -0,0 +1,46 @@
# Copyright (c) 2023-2023 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("//build/ohos.gni")
import("//foundation/arkui/ace_engine/ace_config.gni")
import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
es2abc_gen_abc("gen_progressbutton_abc") {
src_js = rebase_path("progressbutton.js")
dst_file = rebase_path(target_out_dir + "/progressbutton.abc")
in_puts = [ "progressbutton.js" ]
out_puts = [ target_out_dir + "/progressbutton.abc" ]
extra_args = [ "--module" ]
}
gen_js_obj("progressbutton_abc") {
input = get_label_info(":gen_progressbutton_abc", "target_out_dir") + "/progressbutton.abc"
output = target_out_dir + "/progressbutton_abc.o"
dep = ":gen_progressbutton_abc"
}
ohos_shared_library("progressbutton") {
sources = [ "progressbutton.cpp" ]
deps = [ ":progressbutton_abc" ]
external_deps = [
"hilog:libhilog",
"napi:ace_napi",
]
subsystem_name = "arkui"
part_name = "advanced_ui_component"
relative_install_dir = "module/arkui/advanced"
}

53
interface/progressbutton/progressbutton.cpp Normal file
View File

@ -0,0 +1,53 @@
/*
* Copyright (c) 2023-2023 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.
*/
#include "native_engine/native_engine.h"
#include "napi/native_api.h"
#include "napi/native_node_api.h"
extern const char _binary_progressbutton_abc_start[];
extern const char _binary_progressbutton_abc_end[];
// Napi get abc code function
extern "C" __attribute__((visibility("default")))
void NAPI_arkui_advanced_ProgressButton_GetABCCode(const char **buf, int *buflen)
{
if (buf != nullptr) {
*buf = _binary_progressbutton_abc_start;
}
if (buflen != nullptr) {
*buflen = _binary_progressbutton_abc_end - _binary_progressbutton_abc_start;
}
}
/*
* Module define
*/
static napi_module progressbuttonModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_modname = "arkui.advanced.ProgressButton",
.nm_priv = ((void*)0),
.reserved = { 0 },
};
/*
* Module register function
*/
extern "C" __attribute__((constructor)) void progressbuttonRegisterModule(void)
{
napi_module_register(&progressbuttonModule);
}

236
interface/progressbutton/progressbutton.js Normal file
View File

@ -0,0 +1,236 @@
/*
* Copyright (c) 2023-2023 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.
*/
const EMPTY_STRING = '';
const MAX_PROGRESS = 100;
const MAX_PERCENTAGE = '100%';
const MIN_PERCENTAGE = '0%';
const TEXT_OPACITY = 0.4;
const BUTTON_NORMARL_WIDTH = 44;
const BUTTON_NORMARL_HEIGHT = 28;
const BUTTON_BORDER_RADIUS = 14;
const BUTTON_BORDER_WIDTH = 0.5;
export class ProgressButton extends ViewPU {
constructor(e, t, s, r = -1) {
super(e, s, r);
this.__progress = new SynchedPropertySimpleOneWayPU(t.progress, this, 'progress');
this.__textProgress = new ObservedPropertySimplePU('', this, 'textProgress');
this.__content = new SynchedPropertySimpleOneWayPU(t.content, this, 'content');
this.__isLoading = new ObservedPropertySimplePU(!1, this, 'isLoading');
this.__enable = new SynchedPropertySimpleOneWayPU(t.enable, this, 'enable');
this.progressButtonWidth = 44;
this.clickCallback = null;
this.setInitiallyProvidedValue(t);
this.declareWatch('progress', this.getProgressContext);
}
setInitiallyProvidedValue(e) {
void 0 !== e.textProgress && (this.textProgress = e.textProgress);
void 0 !== e.content ? this.__content.set(e.content) : this.__content.set('');
void 0 !== e.isLoading && (this.isLoading = e.isLoading);
void 0 !== e.enable ? this.__enable.set(e.enable) : this.__enable.set(!0);
void 0 !== e.progressButtonWidth && (this.progressButtonWidth = e.progressButtonWidth);
void 0 !== e.clickCallback && (this.clickCallback = e.clickCallback);
}
updateStateVars(e) {
this.__progress.reset(e.progress);
this.__content.reset(e.content);
this.__enable.reset(e.enable);
}
purgeVariableDependenciesOnElmtId(e) {
this.__progress.purgeDependencyOnElmtId(e);
this.__textProgress.purgeDependencyOnElmtId(e);
this.__content.purgeDependencyOnElmtId(e);
this.__isLoading.purgeDependencyOnElmtId(e);
this.__enable.purgeDependencyOnElmtId(e);
}
aboutToBeDeleted() {
this.__progress.aboutToBeDeleted();
this.__textProgress.aboutToBeDeleted();
this.__content.aboutToBeDeleted();
this.__isLoading.aboutToBeDeleted();
this.__enable.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get progress() {
return this.__progress.get();
}
set progress(e) {
this.__progress.set(e);
}
get textProgress() {
return this.__textProgress.get();
}
set textProgress(e) {
this.__textProgress.set(e);
}
get content() {
return this.__content.get();
}
set content(e) {
this.__content.set(e);
}
get isLoading() {
return this.__isLoading.get();
}
set isLoading(e) {
this.__isLoading.set(e);
}
get enable() {
return this.__enable.get();
}
set enable(e) {
this.__enable.set(e);
}
getButtonProgress() {
return this.progress < 0 ? 0 : this.progress > MAX_PROGRESS ? MAX_PROGRESS : this.progress;
}
getProgressContext() {
if (this.progress < 0) {
this.isLoading = !1;
this.textProgress = '0%';
} else if (this.progress >= MAX_PROGRESS) {
this.isLoading = !1;
this.textProgress = '100%';
} else {
this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + '%';
}
}
initialRender() {
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Button.createWithChild();
Button.borderRadius(BUTTON_BORDER_RADIUS);
Button.clip(!1);
Button.hoverEffect(HoverEffect.None);
Button.backgroundColor({
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_foreground_contrary'],
bundleName: '',
moduleName: ''
});
Button.border({
width: BUTTON_BORDER_WIDTH,
color: this.enable ? {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_text_actived'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_foreground_contrary_disable'],
bundleName: '',
moduleName: ''
}
});
Button.constraintSize({ minWidth: 44 });
Button.width(this.progressButtonWidth < BUTTON_NORMARL_WIDTH ? BUTTON_NORMARL_WIDTH : this.progressButtonWidth);
Button.stateEffect(this.enable);
Button.onClick((() => {
if (this.enable) {
this.progress < MAX_PROGRESS && (this.isLoading = !this.isLoading);
this.clickCallback && this.clickCallback();
}
}));
t || Button.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Stack.create();
t || Stack.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Progress.create({ value: this.getButtonProgress(), total: MAX_PROGRESS, style: ProgressStyle.Capsule });
Progress.height(BUTTON_NORMARL_HEIGHT);
Progress.borderRadius(BUTTON_BORDER_RADIUS);
Progress.width('100%');
Progress.hoverEffect(HoverEffect.None);
Progress.clip(!1);
Progress.enabled(this.enable);
t || Progress.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Row.create();
t || Row.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Text.create(this.isLoading ? this.textProgress : this.content);
Text.fontSize({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_text_size_button3'],
bundleName: '',
moduleName: ''
});
Text.fontWeight(FontWeight.Medium);
Text.fontColor(this.isLoading ? {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_text_primary'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_emphasize'],
bundleName: '',
moduleName: ''
});
Text.maxLines(1);
Text.textOverflow({ overflow: TextOverflow.Ellipsis });
Text.padding({ left: 8, right: 8 });
Text.opacity(this.enable ? 1 : TEXT_OPACITY);
t || Text.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
Text.pop();
Row.pop();
Stack.pop();
Button.pop();
}
rerender() {
this.updateDirtyElements();
}
}
export default { ProgressButton };

46
interface/toolbar/BUILD.gn Normal file
View File

@ -0,0 +1,46 @@
# Copyright (c) 2023-2023 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("//build/ohos.gni")
import("//foundation/arkui/ace_engine/ace_config.gni")
import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
es2abc_gen_abc("gen_toolbar_abc") {
src_js = rebase_path("toolbar.js")
dst_file = rebase_path(target_out_dir + "/toolbar.abc")
in_puts = [ "toolbar.js" ]
out_puts = [ target_out_dir + "/toolbar.abc" ]
extra_args = [ "--module" ]
}
gen_js_obj("toolbar_abc") {
input = get_label_info(":gen_toolbar_abc", "target_out_dir") + "/toolbar.abc"
output = target_out_dir + "/toolbar_abc.o"
dep = ":gen_toolbar_abc"
}
ohos_shared_library("toolbar") {
sources = [ "toolbar.cpp" ]
deps = [ ":toolbar_abc" ]
external_deps = [
"hilog:libhilog",
"napi:ace_napi",
]
subsystem_name = "arkui"
part_name = "advanced_ui_component"
relative_install_dir = "module/arkui/advanced"
}

53
interface/toolbar/toolbar.cpp Normal file
View File

@ -0,0 +1,53 @@
/*
* Copyright (c) 2023-2023 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.
*/
#include "native_engine/native_engine.h"
#include "napi/native_api.h"
#include "napi/native_node_api.h"
extern const char _binary_toolbar_abc_start[];
extern const char _binary_toolbar_abc_end[];
// Napi get abc code function
extern "C" __attribute__((visibility("default")))
void NAPI_arkui_advanced_ToolBar_GetABCCode(const char **buf, int *buflen)
{
if (buf != nullptr) {
*buf = _binary_toolbar_abc_start;
}
if (buflen != nullptr) {
*buflen = _binary_toolbar_abc_end - _binary_toolbar_abc_start;
}
}
/*
* Module define
*/
static napi_module toolbarModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_modname = "arkui.advanced.ToolBar",
.nm_priv = ((void*)0),
.reserved = { 0 },
};
/*
* Module register function
*/
extern "C" __attribute__((constructor)) void toolbarRegisterModule(void)
{
napi_module_register(&toolbarModule);
}

477
interface/toolbar/toolbar.js Normal file
View File

@ -0,0 +1,477 @@
/*
* Copyright (c) 2023-2023 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.
*/
const REFLECT_MAX_COUNT = 3;
const IMAGE_SIZE_WIDTH_HEIGHT = 24;
const TEXT_MIN_SIZE = 9;
const DISABLE_OPACITY = 0.4;
const TEXT_MAX_LINES = 2;
const TOOLBAR_LIST_LENGTH = 5;
const TOOLBAR_LIST_NORMORL = 4;
const ITEM_DISABLE_STATE = 2;
const ITEM_DISABLE_ACTIVATE = 3;
let __decorate = this && this.__decorate || function (e, t, o, r) {
let s;
let i = arguments.length;
let a = i < REFLECT_MAX_COUNT ? t : null === r ? r = Object.getOwnPropertyDescriptor(t, o) : r;
if ('object' === typeof Reflect && 'function' === typeof Reflect.decorate) {
a = Reflect.decorate(e, t, o, r);
} else {
for (let n = e.length - 1; n >= 0; n--) {
(s = e[n]) && (a = (i < REFLECT_MAX_COUNT ? s(a) : i > REFLECT_MAX_COUNT ? s(t, o, a) : s(t, o)) || a);
}
}
return i > REFLECT_MAX_COUNT && a && Object.defineProperty(t, o, a), a;
};
export let ItemState;
!function(e) {
e[e.ENABLE = 1] = 'ENABLE';
e[e.DISABLE = 2] = 'DISABLE';
e[e.ACTIVATE = 3] = 'ACTIVATE';
}(ItemState || (ItemState = {}));
const PUBLIC_MORE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAA' +
'IGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IAr' +
's4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8' +
'G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxa' +
'm9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIYeQ+8lrJyU+re7Hg' +
'JtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpY' +
'KTmVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2r' +
'e1oP43rNDc6wh1qDS/6t0n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdu' +
'sCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF8EUcdfbsAAAAASUVORK5CYII=';
let ToolBarOption = class {
constructor() {
this.state = 1;
}
};
ToolBarOption = __decorate([Observed], ToolBarOption);
export { ToolBarOption };
let ToolBarOptions = class extends Array {
};
ToolBarOptions = __decorate([Observed], ToolBarOptions);
export { ToolBarOptions };
export class ToolBar extends ViewPU {
constructor(e, t, o, r = -1) {
super(e, o, r);
this.__toolBarList = new SynchedPropertyNesedObjectPU(t.toolBarList, this, 'toolBarList');
this.controller = void 0;
this.__activateIndex = new SynchedPropertySimpleOneWayPU(t.activateIndex, this, 'activateIndex');
this.__menuContent = new ObservedPropertyObjectPU([], this, 'menuContent');
this.toolBarItemBackground = [];
this.__itemBackground = new ObservedPropertyObjectPU({
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_bg'],
bundleName: '',
moduleName: ''
}, this, 'itemBackground');
this.setInitiallyProvidedValue(t);
}
setInitiallyProvidedValue(e) {
this.__toolBarList.set(e.toolBarList);
void 0 !== e.controller && (this.controller = e.controller);
void 0 !== e.activateIndex ? this.__activateIndex.set(e.activateIndex) : this.__activateIndex.set(-1);
void 0 !== e.menuContent && (this.menuContent = e.menuContent);
void 0 !== e.toolBarItemBackground && (this.toolBarItemBackground = e.toolBarItemBackground);
void 0 !== e.itemBackground && (this.itemBackground = e.itemBackground);
}
updateStateVars(e) {
this.__toolBarList.set(e.toolBarList);
this.__activateIndex.reset(e.activateIndex);
}
purgeVariableDependenciesOnElmtId(e) {
this.__toolBarList.purgeDependencyOnElmtId(e);
this.__activateIndex.purgeDependencyOnElmtId(e);
this.__menuContent.purgeDependencyOnElmtId(e);
this.__itemBackground.purgeDependencyOnElmtId(e);
}
aboutToBeDeleted() {
this.__toolBarList.aboutToBeDeleted();
this.__activateIndex.aboutToBeDeleted();
this.__menuContent.aboutToBeDeleted();
this.__itemBackground.aboutToBeDeleted();
SubscriberManager.Get().delete(this.id__());
this.aboutToBeDeletedInternal();
}
get toolBarList() {
return this.__toolBarList.get();
}
get activateIndex() {
return this.__activateIndex.get();
}
set activateIndex(e) {
this.__activateIndex.set(e);
}
get menuContent() {
return this.__menuContent.get();
}
set menuContent(e) {
this.__menuContent.set(e);
}
get itemBackground() {
return this.__itemBackground.get();
}
set itemBackground(e) {
this.__itemBackground.set(e);
}
MoreTabBuilder(e, t = null) {
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Column.create();
Column.width('100%');
Column.height('100%');
Column.bindMenu(ObservedObject.GetRawObject(this.menuContent), { offset: { x: 5, y: -10 } });
Column.padding({ left: 4, right: 4 });
Column.borderRadius({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_corner_radius_clicked'],
bundleName: '',
moduleName: ''
});
t || Column.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Image.create(PUBLIC_MORE);
Image.width(IMAGE_SIZE_WIDTH_HEIGHT);
Image.height(IMAGE_SIZE_WIDTH_HEIGHT);
Image.fillColor({
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_icon'],
bundleName: '',
moduleName: ''
});
Image.margin({ top: 8, bottom: 2 });
Image.objectFit(ImageFit.Contain);
t || Image.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Text.create({
id: -1,
type: 10003,
params: ['app.string.id_string_more'],
bundleName: '',
moduleName: ''
});
Text.fontColor({
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_text'],
bundleName: '',
moduleName: ''
});
Text.fontSize({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_text_size_caption'],
bundleName: '',
moduleName: ''
});
Text.fontWeight(FontWeight.Medium);
t || Text.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
Text.pop();
Column.pop();
}
TabBuilder(e, t = null) {
this.observeComponentCreation(((t, o) => {
ViewStackProcessor.StartGetAccessRecordingFor(t);
Column.create();
Column.width('100%');
Column.height('100%');
Column.focusable(!(ITEM_DISABLE_STATE === this.toolBarList[e].state));
Column.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[e].state));
Column.padding({ left: 4, right: 4 });
Column.borderRadius({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_corner_radius_clicked'],
bundleName: '',
moduleName: ''
});
Column.backgroundColor(ObservedObject.GetRawObject(this.itemBackground));
Column.onClick((() => {
ITEM_DISABLE_ACTIVATE === this.toolBarList[e].state && (this.activateIndex === e ? this.activateIndex = -1 : this.activateIndex = e);
ITEM_DISABLE_STATE !== this.toolBarList[e].state && this.toolBarList[e].action && this.toolBarList[e].action();
}));
Column.onHover((t => {
this.toolBarItemBackground[e] = t ? ITEM_DISABLE_STATE === this.toolBarList[e].state ? {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_bg'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_hover'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_bg'],
bundleName: '',
moduleName: ''
};
this.itemBackground = this.toolBarItemBackground[e];
}));
ViewStackProcessor.visualState('pressed');
Column.backgroundColor(ITEM_DISABLE_STATE === this.toolBarList[e].state ? this.toolBarItemBackground[e] : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_click_effect'],
bundleName: '',
moduleName: ''
});
ViewStackProcessor.visualState('normal');
Column.backgroundColor(this.toolBarItemBackground[e]);
ViewStackProcessor.visualState();
o || Column.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((t, o) => {
ViewStackProcessor.StartGetAccessRecordingFor(t);
Image.create(this.toolBarList[e].icon);
Image.width(IMAGE_SIZE_WIDTH_HEIGHT);
Image.height(IMAGE_SIZE_WIDTH_HEIGHT);
Image.fillColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_text_primary_activated'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_primary'],
bundleName: '',
moduleName: ''
});
Image.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1);
Image.margin({ top: 8, bottom: 2 });
Image.objectFit(ImageFit.Contain);
o || Image.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((t, o) => {
ViewStackProcessor.StartGetAccessRecordingFor(t);
Text.create(this.toolBarList[e].content);
Text.fontColor(this.activateIndex === e && ITEM_DISABLE_STATE !== this.toolBarList[e].state ? {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_text_actived'],
bundleName: '',
moduleName: ''
} : {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_text'],
bundleName: '',
moduleName: ''
});
Text.fontSize({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_text_size_caption'],
bundleName: '',
moduleName: ''
});
Text.maxFontSize({
id: -1,
type: 10002,
params: ['sys.float.ohos_id_text_size_caption'],
bundleName: '',
moduleName: ''
});
Text.minFontSize(TEXT_MIN_SIZE);
Text.fontWeight(FontWeight.Medium);
Text.maxLines(TEXT_MAX_LINES);
Text.textOverflow({ overflow: TextOverflow.Ellipsis });
Text.opacity(ITEM_DISABLE_STATE === this.toolBarList[e].state ? DISABLE_OPACITY : 1);
o || Text.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
Text.pop();
Column.pop();
}
refreshData() {
this.menuContent = [];
for (let e = 0; e < this.toolBarList.length; e++) {
if (e >= TOOLBAR_LIST_NORMORL && this.toolBarList.length > TOOLBAR_LIST_LENGTH) {
this.menuContent[e - TOOLBAR_LIST_NORMORL] = {
value: this.toolBarList[e].content,
action: this.toolBarList[e].action
};
} else {
this.toolBarItemBackground[e] = {
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_bg'],
bundleName: '',
moduleName: ''
};
this.menuContent = [];
}
}
return !0;
}
aboutToAppear() {
this.refreshData();
}
initialRender() {
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Column.create();
t || Column.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Divider.create();
Divider.width('100%');
Divider.height(1);
t || Divider.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Column.create();
Column.width('100%');
t || Column.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
Tabs.create({ barPosition: BarPosition.End, controller: this.controller });
Tabs.vertical(!1);
Tabs.constraintSize({ minHeight: 56, maxHeight: 56 });
Tabs.barMode(BarMode.Fixed);
Tabs.onChange((e => {
}));
Tabs.width('100%');
Tabs.backgroundColor({
id: -1,
type: 10001,
params: ['sys.color.ohos_id_color_toolbar_bg'],
bundleName: '',
moduleName: ''
});
t || Tabs.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
ForEach.create();
this.forEachUpdateFunction(e, this.toolBarList, ((e, t) => {
this.observeComponentCreation(((e, o) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
If.create();
this.toolBarList.length <= TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => {
this.observeComponentCreation(((e, r) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
TabContent.create();
TabContent.tabBar({
builder: () => {
this.TabBuilder.call(this, t);
}
});
TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
r || TabContent.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
TabContent.pop();
})) : t < TOOLBAR_LIST_NORMORL && this.ifElseBranchUpdateFunction(1, (() => {
this.observeComponentCreation(((e, r) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
TabContent.create();
TabContent.tabBar({
builder: () => {
this.TabBuilder.call(this, t);
}
});
TabContent.enabled(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
TabContent.focusOnTouch(!(ITEM_DISABLE_STATE === this.toolBarList[t].state));
r || TabContent.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
TabContent.pop();
}));
r || If.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
If.pop();
}), void 0, !0, !1);
t || ForEach.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
ForEach.pop();
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
If.create();
this.refreshData() && this.toolBarList.length > TOOLBAR_LIST_LENGTH ? this.ifElseBranchUpdateFunction(0, (() => {
this.observeComponentCreation(((e, t) => {
ViewStackProcessor.StartGetAccessRecordingFor(e);
TabContent.create();
TabContent.tabBar({
builder: () => {
this.MoreTabBuilder.call(this, TOOLBAR_LIST_NORMORL);
}
});
t || TabContent.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
TabContent.pop();
})) : If.branchId(1);
t || If.pop();
ViewStackProcessor.StopGetAccessRecording();
}));
If.pop();
Tabs.pop();
Column.pop();
Column.pop();
}
rerender() {
this.updateDirtyElements();
}
}
export default { ToolBarOptions, ToolBar };

417
source/ArkDialog/ArkDialog.ets Normal file
View File

@ -0,0 +1,417 @@
/*
* Copyright (c) 2023-2023 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.
*/
const CHECKBOX_CONTAINER_HEIGHT: number = 48
const CONTENT_MAX_LINES: number = 2
const DIVIDER_CONTAINER_WIDTH: number = 16
const DIVIDER_HEIGHT: number = 24
const DIVIDER_WIDTH: number = 2
const LOADING_PROGRESS_WIDTH: number = 40
const LOADING_PROGRESS_HEIGHT: number = 48
const ITEM_TEXT_SIZE: number = 14
export declare type ButtonOptions = {
value: ResourceStr;
action?: () => void;
background?: ResourceColor;
fontColor?: ResourceColor;
}
@CustomDialog
export struct TipsDialog{
controller: CustomDialogController
imageRes: Resource
imageSize: SizeOptions = {width: '100%', height: 180}
title: ResourceStr = ''
content?: ResourceStr = ''
checkTips?: ResourceStr = ''
@State isChecked?: boolean = false
primaryButton?: ButtonOptions = {value: ""}
secondaryButton?: ButtonOptions = {value: ""}
build() {
Column() {
Row() {
Column() {
Image(this.imageRes)
.size(this.imageSize)
.objectFit(ImageFit.Fill)
}.layoutWeight(1)
.clip(true)
}.width('100%')
.padding({ left: 24, right: 24})
.margin({top: 24})
Row() {
Text(this.title)
.fontSize($r('sys.float.ohos_id_text_size_headline8'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.textAlign(TextAlign.Center)
}.padding({ left: 24, right: 24 })
.margin({top: 16})
if (this.content) {
Row() {
Text(this.content)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.textAlign(TextAlign.Center)
.minFontSize($r('sys.float.ohos_id_text_size_body3'))
}.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.width('100%')
}
Row() {
Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
.onChange((checked: boolean) => {
this.isChecked = checked
})
.margin({ left: 0, right: 8})
Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.maxLines(CONTENT_MAX_LINES)
.layoutWeight(1)
.focusOnTouch(true)
.onClick(() => {
this.isChecked = !this.isChecked
})
}.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
Row() {
if (this.primaryButton.value) {
Button(this.primaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.primaryButton.action) this.primaryButton.action()
this.controller.close()
})
}
if (this.secondaryButton.value && this.primaryButton.value) {
Column() {
if (!this.secondaryButton.background) {
Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
}
}.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
}
if (this.secondaryButton.value) {
Button(this.secondaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.secondaryButton.action) this.secondaryButton.action()
this.controller.close()
})
}
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
}
.backgroundBlurStyle(BlurStyle.Thick)
.borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
.margin({
left: $r('sys.float.ohos_id_dialog_margin_start'),
right: $r('sys.float.ohos_id_dialog_margin_end'),
bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
})
// 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
.backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
}
}
@CustomDialog
export struct SelectDialog{
controller: CustomDialogController
title: ResourceStr = ''
content?: ResourceStr = ''
selectedIndex?: number = -1
confirm?: ButtonOptions = {value: ""}
radioContent: Array<SheetInfo> = []
build() {
Column() {
Row() {
Text(this.title)
.fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
.fontWeight(FontWeight.Medium)
.maxLines(CONTENT_MAX_LINES)
.minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
.textOverflow({ overflow: TextOverflow.Ellipsis})
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.textAlign(TextAlign.Start)
.width('100%')
}.padding({ left: 24, right: 24, top: 24 })
.constraintSize({minHeight: 56})
if (this.content) {
Row() {
Text(this.content)
.fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.maxLines(CONTENT_MAX_LINES)
.textOverflow({ overflow: TextOverflow.Ellipsis})
.minFontSize($r('sys.float.ohos_id_text_size_body3'))
}.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.width('100%')
}
List({space: 1}) {
ForEach(this.radioContent, (item: SheetInfo, index?: number) => {
ListItem() {
Column() {
Row() {
Text(item.title)
.fontSize(ITEM_TEXT_SIZE)
.fontWeight(FontWeight.Regular)
.maxLines(CONTENT_MAX_LINES)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.layoutWeight(1)
Radio({ value: 'item.title', group: 'radioGroup'}).checked(this.selectedIndex == index)
.onChange(() => {
item.action && item.action()
this.controller.close()
})
.onClick(() => {
item.action && item.action()
this.controller.close()
})
}.constraintSize({minHeight: 48}).clip(false)
.onClick(() => {
item.action && item.action()
this.controller.close()
})
if (index < this.radioContent.length - 1) {
Divider().color($r('sys.color.ohos_id_color_list_separator'))
}
}
}
})
}.width('100%').padding({ left: 24, right: 24, top: 8, bottom: 8 }).clip(false)
Row() {
if (this.confirm.value) {
Button(this.confirm.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.confirm.background? this.confirm.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.confirm.fontColor ? this.confirm.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
this.confirm.action && this.confirm.action()
this.controller.close()
})
}
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
}
.backgroundBlurStyle(BlurStyle.Thick)
.borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
.margin({
left: $r('sys.float.ohos_id_dialog_margin_start'),
right: $r('sys.float.ohos_id_dialog_margin_end'),
bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
})
// 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
.backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
}
}
@CustomDialog
export struct ConfirmDialog{
controller: CustomDialogController
title: ResourceStr = ''
content?: ResourceStr = ''
checkTips?: ResourceStr = ''
@State isChecked?: boolean = false
primaryButton?: ButtonOptions = {value: ""}
secondaryButton?: ButtonOptions = {value: ""}
build() {
Column() {
Row() {
Text(this.title)
.fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
.fontWeight(FontWeight.Medium)
.maxLines(CONTENT_MAX_LINES)
.minFontSize($r('sys.float.ohos_id_text_size_sub_title1'))
.textOverflow({ overflow: TextOverflow.Ellipsis})
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.textAlign(TextAlign.Start)
.width('100%')
}.padding({ left: 24, right: 24, top: 24 })
.constraintSize({minHeight: 56})
if (this.content) {
Row() {
Text(this.content)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.maxLines(CONTENT_MAX_LINES)
.textOverflow({ overflow: TextOverflow.Ellipsis})
.minFontSize($r('sys.float.ohos_id_text_size_body3'))
}.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.width('100%')
.constraintSize({minHeight: 36})
}
Row() {
Checkbox({ name: 'checkbox', group: 'checkboxGroup' }).select(this.isChecked)
.onChange((checked: boolean) => {
this.isChecked = checked
})
.margin({ left: 0, right: 8})
Text(this.checkTips).fontSize($r('sys.float.ohos_id_text_size_body2'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.maxLines(CONTENT_MAX_LINES)
.layoutWeight(1)
.focusOnTouch(true)
.onClick(() => {
this.isChecked = !this.isChecked
})
}.height(CHECKBOX_CONTAINER_HEIGHT).width('100%').padding({ left: 24, right: 24 , top: 8, bottom: 8 })
Row() {
if (this.primaryButton.value) {
Button(this.primaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.primaryButton.action) this.primaryButton.action()
this.controller.close()
})
}
if (this.secondaryButton.value && this.primaryButton.value) {
Column() {
if (!this.secondaryButton.background) {
Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
}
}.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
}
if (this.secondaryButton.value) {
Button(this.secondaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.secondaryButton.action) this.secondaryButton.action()
this.controller.close()
})
}
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
}
.backgroundBlurStyle(BlurStyle.Thick)
.borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
.margin({
left: $r('sys.float.ohos_id_dialog_margin_start'),
right: $r('sys.float.ohos_id_dialog_margin_end'),
bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
})
// 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
.backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
}
}
@CustomDialog
export struct AlertDialog{
controller: CustomDialogController
content: ResourceStr = ''
primaryButton?: ButtonOptions = {value: ""}
secondaryButton?: ButtonOptions = {value: ""}
build() {
Column() {
Row() {
Text(this.content)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
}.padding({ left: 24, right: 24, top: 24 })
Row() {
if (this.primaryButton.value) {
Button(this.primaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.primaryButton.background? this.primaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.primaryButton.fontColor ? this.primaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.primaryButton.action) this.primaryButton.action()
this.controller.close()
})
}
if (this.secondaryButton.value && this.primaryButton.value) {
Column() {
if (!this.secondaryButton.background) {
Divider().width(DIVIDER_WIDTH).height(DIVIDER_HEIGHT).color($r('sys.color.ohos_id_color_list_separator')).vertical(true)
}
}.width(DIVIDER_CONTAINER_WIDTH).alignItems(HorizontalAlign.Center)
}
if (this.secondaryButton.value) {
Button(this.secondaryButton.value)
.fontSize($r('sys.float.ohos_id_text_size_button1'))
.fontWeight(FontWeight.Medium)
.layoutWeight(1)
.backgroundColor(this.secondaryButton.background? this.secondaryButton.background: $r('sys.color.ohos_id_color_background_transparent'))
.fontColor(this.secondaryButton.fontColor ? this.secondaryButton.fontColor: $r('sys.color.ohos_id_color_text_primary_activated'))
.onClick(() => {
if (this.secondaryButton.action) this.secondaryButton.action()
this.controller.close()
})
}
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 })
}
.backgroundBlurStyle(BlurStyle.Thick)
.borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
.margin({
left: $r('sys.float.ohos_id_dialog_margin_start'),
right: $r('sys.float.ohos_id_dialog_margin_end'),
bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
})
// 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
.backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
}
}
@CustomDialog
export struct LoadingDialog{
controller: CustomDialogController
content?: ResourceStr = ''
build() {
Column() {
Row() {
Text(this.content)
.fontSize($r('sys.float.ohos_id_text_size_body1'))
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.layoutWeight(1)
LoadingProgress().width(LOADING_PROGRESS_WIDTH).height(LOADING_PROGRESS_HEIGHT).margin({ left: 16 })
}.margin({ left: 24, right: 24, top: 24, bottom: 24 })
.constraintSize({minHeight: 48})
}
.backgroundBlurStyle(BlurStyle.Thick)
.borderRadius($r('sys.float.ohos_id_corner_radius_dialog'))
.margin({
left: $r('sys.float.ohos_id_dialog_margin_start'),
right: $r('sys.float.ohos_id_dialog_margin_end'),
bottom: $r('sys.float.ohos_id_dialog_margin_bottom')
})
// 1.backgroundcolor use in blur enable mod mast set this color: colorDialogBgBlur. but now it is not found
.backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
}
}

95
source/ProgressButton/ProgressButton.ets Normal file
View File

@ -0,0 +1,95 @@
/*
* Copyright (c) 2023-2023 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.
*/
const EMPTY_STRING: string = ''
const MAX_PROGRESS: number = 100
const MAX_PERCENTAGE: string = '100%'
const MIN_PERCENTAGE: string = '0%'
@Component
export struct ProgressButton {
@Prop @Watch('getProgressContext') progress: number
@State textProgress: string = EMPTY_STRING
@Prop content: string = EMPTY_STRING
@State isLoading: boolean = false
progressButtonWidth?: Length = 44
clickCallback: () => void = null
@Prop enable: boolean = true
private getButtonProgress(): number {
if (this.progress < 0) {
return 0
} else if (this.progress > MAX_PROGRESS) {
return MAX_PROGRESS
}
return this.progress
}
private getProgressContext() {
if (this.progress < 0) {
this.isLoading = false
this.textProgress = MIN_PERCENTAGE
} else if (this.progress >= MAX_PROGRESS) {
this.isLoading = false
this.textProgress = MAX_PERCENTAGE
} else {
this.textProgress = Math.floor(this.progress / MAX_PROGRESS * MAX_PROGRESS).toString() + "%"
}
}
build() {
Button() {
Stack(){
Progress({ value: this.getButtonProgress(), total: MAX_PROGRESS,
style: ProgressStyle.Capsule })
.height(28)
.borderRadius(14)
.width('100%')
.hoverEffect(HoverEffect.None)
.clip(false)
.enabled(this.enable)
Row() {
Text(this.isLoading? this.textProgress: this.content)
.fontSize($r('sys.float.ohos_id_text_size_button3'))
.fontWeight(FontWeight.Medium)
.fontColor(this.isLoading? $r('sys.color.ohos_id_color_text_primary')
:$r('sys.color.ohos_id_color_emphasize'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.padding({left: 8, right: 8})
.opacity(this.enable? 1.0: 0.4)
}
}
}
.borderRadius(14)
.clip(false)
.hoverEffect(HoverEffect.None)
.backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
.border({ width: 0.5, color: this.enable ? $r("sys.color.ohos_id_color_toolbar_text_actived")
: $r('sys.color.ohos_id_color_foreground_contrary_disable') })
.constraintSize({minWidth: 44})
.width(this.progressButtonWidth < 44? 44: this.progressButtonWidth)
.stateEffect(this.enable)
.onClick(() => {
if(!this.enable){
return
}
if (this.progress < MAX_PROGRESS) {
this.isLoading = !this.isLoading
}
this.clickCallback && this.clickCallback()
})
}
}

178
source/ToolBar/ToolBar.ets Normal file
View File

@ -0,0 +1,178 @@
/*
* Copyright (c) 2023-2023 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.
*/
export enum ItemState {
ENABLE = 1,
DISABLE = 2,
ACTIVATE = 3
}
const PUBLIC_MORE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAIGNIUk0AAHomAACAhAAA" +
"+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzA" +
"AAOxAAADsQBlSsOGwAAAYFJREFUeNrt3CFLQ1EUB/CpCwYRo8G4j2IwCNrUYjH4AfwcfgBBwWZRMNgtFqPdILJgEhGDweAZvDjmJnfv3I" +
"3fD/5l3DfOfWdv23vhdDoAAAAAAAAwzxam9L5rkePIdmSjee05chu5iHxXej5ar3saDdiJXDabGaYfOYg8VHbyU+peKryJvch1ZHnEmtXIY" +
"eQ+8lrJyU+re7HgJtYj52Ou7Uau/thwW1LrLtmAk8jKBOsH37FHFTQgte6SDdht6ZjSUusu2YBeS8eUllr3YvLmuzP6971bYwP6/zjmpYKT" +
"mVp3yQbctXRMaal1l2zAaeRngvUfkbMKGpBad8kbsffIZ2RrzPX7kacKGpBad+k74cfmE7I54ur6au4obyr6UU2re1oP43rNDc6wh1qDS/6t0" +
"n83s1o3AAAAAAAAAAAAAEAysyKS6zYrIrlusyKS6zYrwqyIdGZFJDMrIplZETPIrIh5qdusCLMi0pkVkcysiAqYFVEJsyIAAAAAAAAAKOYXUlF" +
"8EUcdfbsAAAAASUVORK5CYII=";
@Observed
export class ToolBarOption {
content: string;
action?: () => void;
icon?: Resource;
state?: ItemState = 1;
}
@Observed
export class ToolBarOptions extends Array<ToolBarOption> {
}
@Component
export struct ToolBar {
@ObjectLink toolBarList: ToolBarOptions
controller: TabsController
@Prop activateIndex: number = -1
@State menuContent: { value: string, action: () => void }[] = []
toolBarItemBackground: Resource[] = []
@State itemBackground: Resource = $r('sys.color.ohos_id_color_toolbar_bg')
@Builder MoreTabBuilder(index: number) {
Column() {
Image(PUBLIC_MORE)
.width(24)
.height(24)
.fillColor($r('sys.color.ohos_id_color_toolbar_icon'))
.margin({ top: 8, bottom: 2 })
.objectFit(ImageFit.Contain)
Text($r('app.string.id_string_more'))
.fontColor($r('sys.color.ohos_id_color_toolbar_text'))
.fontSize($r('sys.float.ohos_id_text_size_caption'))
.fontWeight(FontWeight.Medium)
}.width('100%').height('100%').bindMenu(this.menuContent, { offset: { x: 5, y : -10}})
.padding({left: 4, right: 4})
.borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
}
@Builder TabBuilder(index: number) {
Column() {
Image(this.toolBarList[index].icon)
.width(24)
.height(24)
.fillColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
? $r('sys.color.ohos_id_color_text_primary_activated') : $r('sys.color.ohos_id_color_primary'))
.opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
.margin({ top: 8, bottom: 2 })
.objectFit(ImageFit.Contain)
Text(this.toolBarList[index].content)
.fontColor(this.activateIndex === index && !(this.toolBarList[index].state === 2)
? $r('sys.color.ohos_id_color_toolbar_text_actived') : $r('sys.color.ohos_id_color_toolbar_text'))
.fontSize($r('sys.float.ohos_id_text_size_caption'))
.maxFontSize($r('sys.float.ohos_id_text_size_caption'))
.minFontSize(9)
.fontWeight(FontWeight.Medium)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.opacity((this.toolBarList[index].state === 2) ? 0.4 : 1)
}
.width('100%').height('100%')
.focusable(!(this.toolBarList[index].state === 2))
.focusOnTouch(!(this.toolBarList[index].state === 2))
.padding({left: 4, right: 4})
.borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
.backgroundColor(this.itemBackground)
.onClick(() => {
if (this.toolBarList[index].state === 3) {
if (this.activateIndex === index)
this.activateIndex = -1
else {
this.activateIndex = index
}
}
if (!(this.toolBarList[index].state === 2)) {
this.toolBarList[index].action && this.toolBarList[index].action()
}
})
.onHover((isHover: boolean) => {
if (isHover ) {
this.toolBarItemBackground[index] = (this.toolBarList[index].state === 2)
? $r('sys.color.ohos_id_color_toolbar_bg'): $r('sys.color.ohos_id_color_hover')
} else {
this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_toolbar_bg')
}
this.itemBackground = this.toolBarItemBackground[index]
})
.stateStyles({
pressed: {
.backgroundColor((this.toolBarList[index].state === 2) ? this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect'))
},
normal: {
.backgroundColor(this.toolBarItemBackground[index])
}
})
}
refreshData() {
this.menuContent = []
for (let i = 0; i < this.toolBarList.length; i++) {
if (i >= 4 && this.toolBarList.length > 5) {
this.menuContent[i - 4] = {
value: this.toolBarList[i].content,
action: this.toolBarList[i].action
}
} else {
this.toolBarItemBackground[i] = $r('sys.color.ohos_id_color_toolbar_bg')
this.menuContent = []
}
}
return true
}
aboutToAppear() {
this.refreshData()
}
build() {
Column() {
Divider().width('100%').height(1)
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.controller}) {
ForEach(this.toolBarList, (item: ToolBarOption, index: number) => {
if (this.toolBarList.length <= 5) {
TabContent() {
}.tabBar(this.TabBuilder(index))
.enabled(!(this.toolBarList[index].state === 2))
.focusOnTouch(!(this.toolBarList[index].state === 2))
} else if (index < 4){
TabContent() {
}.tabBar(this.TabBuilder(index))
.enabled(!(this.toolBarList[index].state === 2))
.focusOnTouch(!(this.toolBarList[index].state === 2))
}
})
if (this.refreshData() && this.toolBarList.length > 5) {
TabContent() {
}.tabBar(this.MoreTabBuilder(4))
}
}
.vertical(false)
.constraintSize({ minHeight: 56, maxHeight: 56})
.barMode(BarMode.Fixed)
.onChange((index: number) => {
})
.width('100%')
.backgroundColor($r('sys.color.ohos_id_color_toolbar_bg'))
}.width('100%')
}
}
}