mirror of
https://gitee.com/openharmony/arkui_ace_engine
synced 2024-11-27 01:03:08 +00:00
[L] 窗口工具栏三键 UX 变更
Signed-off-by:lisitaolisitao3@huawei.com Signed-off-by: lisitao <lisitao3@huawei.com> Change-Id: I18c648490178656913df355da6a7cb15f1aa1c86
This commit is contained in:
lisitao
parent
7f49d50a00
commit
9187fe213d
@ -176,11 +176,10 @@ if (!("finalizeConstruction" in ViewPU.prototype)) {
|
|||||||
}
|
}
|
||||||
const i = '28vp';
|
const i = '28vp';
|
||||||
const j = '28vp';
|
const j = '28vp';
|
||||||
const j4 = '4vp';
|
|
||||||
const m = '12vp';
|
const m = '12vp';
|
||||||
const i4 = '8vp';
|
const i4 = '8vp';
|
||||||
const o = '-8vp';
|
const o = '-8vp';
|
||||||
const t = '-8vp';
|
const u4 = '-8vp';
|
||||||
const u = '40vp';
|
const u = '40vp';
|
||||||
const a1 = '40vp';
|
const a1 = '40vp';
|
||||||
const b1 = '24vp';
|
const b1 = '24vp';
|
||||||
@ -270,246 +269,6 @@ const u1 = {
|
|||||||
id: 125831024,
|
id: 125831024,
|
||||||
type: 10001
|
type: 10001
|
||||||
};
|
};
|
||||||
class l4 extends ViewPU {
|
|
||||||
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
|
|
||||||
super(parent, __localStorage, elmtId, extraInfo);
|
|
||||||
if (typeof paramsLambda === "function") {
|
|
||||||
this.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
this.g3 = new SynchedPropertySimpleOneWayPU(params.componentId, this, "componentId");
|
|
||||||
this.h3 = new SynchedPropertyObjectOneWayPU(params.imageResource, this, "imageResource");
|
|
||||||
this.i3 = new SynchedPropertySimpleOneWayPU(params.imageSize, this, "imageSize");
|
|
||||||
this.j3 = new SynchedPropertyObjectOneWayPU(params.fillColor, this, "fillColor");
|
|
||||||
this.l3 = new SynchedPropertySimpleOneWayPU(params.imageScale, this, "imageScale");
|
|
||||||
this.m3 = new SynchedPropertyObjectOneWayPU(params.buttonBackgroundColor, this, "buttonBackgroundColor");
|
|
||||||
this.n3 = new SynchedPropertySimpleOneWayPU(params.buttonSize, this, "buttonSize");
|
|
||||||
this.n4 = new ObservedPropertySimplePU('4vp', this, "buttonBorderRadius");
|
|
||||||
this.o4 = new SynchedPropertySimpleOneWayPU(params.buttonVisibility, this, "buttonVisibility");
|
|
||||||
this.setInitiallyProvidedValue(params);
|
|
||||||
this.finalizeConstruction();
|
|
||||||
}
|
|
||||||
setInitiallyProvidedValue(params) {
|
|
||||||
if (params.buttonBorderRadius !== undefined) {
|
|
||||||
this.buttonBorderRadius = params.buttonBorderRadius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateStateVars(params) {
|
|
||||||
this.g3.reset(params.componentId);
|
|
||||||
this.h3.reset(params.imageResource);
|
|
||||||
this.i3.reset(params.imageSize);
|
|
||||||
this.j3.reset(params.fillColor);
|
|
||||||
this.l3.reset(params.imageScale);
|
|
||||||
this.m3.reset(params.buttonBackgroundColor);
|
|
||||||
this.n3.reset(params.buttonSize);
|
|
||||||
this.o4.reset(params.buttonVisibility);
|
|
||||||
}
|
|
||||||
purgeVariableDependenciesOnElmtId(rmElmtId) {
|
|
||||||
this.g3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.h3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.i3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.j3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.l3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.m3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.n3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.n4.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.o4.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
}
|
|
||||||
aboutToBeDeleted() {
|
|
||||||
this.g3.aboutToBeDeleted();
|
|
||||||
this.h3.aboutToBeDeleted();
|
|
||||||
this.i3.aboutToBeDeleted();
|
|
||||||
this.j3.aboutToBeDeleted();
|
|
||||||
this.l3.aboutToBeDeleted();
|
|
||||||
this.m3.aboutToBeDeleted();
|
|
||||||
this.n3.aboutToBeDeleted();
|
|
||||||
this.n4.aboutToBeDeleted();
|
|
||||||
this.o4.aboutToBeDeleted();
|
|
||||||
SubscriberManager.Get().delete(this.id__());
|
|
||||||
this.aboutToBeDeletedInternal();
|
|
||||||
}
|
|
||||||
get componentId() {
|
|
||||||
return this.g3.get();
|
|
||||||
}
|
|
||||||
set componentId(newValue) {
|
|
||||||
this.g3.set(newValue);
|
|
||||||
}
|
|
||||||
get imageResource() {
|
|
||||||
return this.h3.get();
|
|
||||||
}
|
|
||||||
set imageResource(newValue) {
|
|
||||||
this.h3.set(newValue);
|
|
||||||
}
|
|
||||||
get imageSize() {
|
|
||||||
return this.i3.get();
|
|
||||||
}
|
|
||||||
set imageSize(newValue) {
|
|
||||||
this.i3.set(newValue);
|
|
||||||
}
|
|
||||||
get fillColor() {
|
|
||||||
return this.j3.get();
|
|
||||||
}
|
|
||||||
set fillColor(newValue) {
|
|
||||||
this.j3.set(newValue);
|
|
||||||
}
|
|
||||||
get imageScale() {
|
|
||||||
return this.l3.get();
|
|
||||||
}
|
|
||||||
set imageScale(newValue) {
|
|
||||||
this.l3.set(newValue);
|
|
||||||
}
|
|
||||||
get buttonBackgroundColor() {
|
|
||||||
return this.m3.get();
|
|
||||||
}
|
|
||||||
set buttonBackgroundColor(newValue) {
|
|
||||||
this.m3.set(newValue);
|
|
||||||
}
|
|
||||||
get buttonSize() {
|
|
||||||
return this.n3.get();
|
|
||||||
}
|
|
||||||
set buttonSize(newValue) {
|
|
||||||
this.n3.set(newValue);
|
|
||||||
}
|
|
||||||
get buttonBorderRadius() {
|
|
||||||
return this.n4.get();
|
|
||||||
}
|
|
||||||
set buttonBorderRadius(newValue) {
|
|
||||||
this.n4.set(newValue);
|
|
||||||
}
|
|
||||||
get buttonVisibility() {
|
|
||||||
return this.o4.get();
|
|
||||||
}
|
|
||||||
set buttonVisibility(newValue) {
|
|
||||||
this.o4.set(newValue);
|
|
||||||
}
|
|
||||||
initialRender() {
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
Button.createWithChild();
|
|
||||||
Button.id(this.componentId);
|
|
||||||
Button.backgroundColor(ObservedObject.GetRawObject(this.buttonBackgroundColor));
|
|
||||||
Button.width(this.buttonSize);
|
|
||||||
Button.height(this.buttonSize);
|
|
||||||
Button.type(ButtonType.Normal);
|
|
||||||
Button.borderRadius(this.buttonBorderRadius);
|
|
||||||
Button.visibility(this.buttonVisibility);
|
|
||||||
}, Button);
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
Image.create(this.imageResource);
|
|
||||||
Image.width(this.imageSize);
|
|
||||||
Image.height(this.imageSize);
|
|
||||||
Image.fillColor(ObservedObject.GetRawObject(this.fillColor));
|
|
||||||
Image.draggable(false);
|
|
||||||
Image.interpolation(ImageInterpolation.High);
|
|
||||||
Image.scale({ x: this.imageScale, y: this.imageScale });
|
|
||||||
}, Image);
|
|
||||||
Button.pop();
|
|
||||||
}
|
|
||||||
rerender() {
|
|
||||||
this.updateDirtyElements();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class m4 extends ViewPU {
|
|
||||||
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
|
|
||||||
super(parent, __localStorage, elmtId, extraInfo);
|
|
||||||
if (typeof paramsLambda === "function") {
|
|
||||||
this.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
this.h3 = new SynchedPropertyObjectOneWayPU(params.imageResource, this, "imageResource");
|
|
||||||
this.i3 = new SynchedPropertySimpleOneWayPU(params.imageSize, this, "imageSize");
|
|
||||||
this.j3 = new SynchedPropertyObjectOneWayPU(params.fillColor, this, "fillColor");
|
|
||||||
this.q4 = new SynchedPropertyObjectOneWayPU(params.title, this, "title");
|
|
||||||
this.r4 = new SynchedPropertyObjectOneWayPU(params.itemBackgroundColor, this, "itemBackgroundColor");
|
|
||||||
this.setInitiallyProvidedValue(params);
|
|
||||||
this.finalizeConstruction();
|
|
||||||
}
|
|
||||||
setInitiallyProvidedValue(params) {
|
|
||||||
}
|
|
||||||
updateStateVars(params) {
|
|
||||||
this.h3.reset(params.imageResource);
|
|
||||||
this.i3.reset(params.imageSize);
|
|
||||||
this.j3.reset(params.fillColor);
|
|
||||||
this.q4.reset(params.title);
|
|
||||||
this.r4.reset(params.itemBackgroundColor);
|
|
||||||
}
|
|
||||||
purgeVariableDependenciesOnElmtId(rmElmtId) {
|
|
||||||
this.h3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.i3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.j3.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.q4.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
this.r4.purgeDependencyOnElmtId(rmElmtId);
|
|
||||||
}
|
|
||||||
aboutToBeDeleted() {
|
|
||||||
this.h3.aboutToBeDeleted();
|
|
||||||
this.i3.aboutToBeDeleted();
|
|
||||||
this.j3.aboutToBeDeleted();
|
|
||||||
this.q4.aboutToBeDeleted();
|
|
||||||
this.r4.aboutToBeDeleted();
|
|
||||||
SubscriberManager.Get().delete(this.id__());
|
|
||||||
this.aboutToBeDeletedInternal();
|
|
||||||
}
|
|
||||||
get imageResource() {
|
|
||||||
return this.h3.get();
|
|
||||||
}
|
|
||||||
set imageResource(newValue) {
|
|
||||||
this.h3.set(newValue);
|
|
||||||
}
|
|
||||||
get imageSize() {
|
|
||||||
return this.i3.get();
|
|
||||||
}
|
|
||||||
set imageSize(newValue) {
|
|
||||||
this.i3.set(newValue);
|
|
||||||
}
|
|
||||||
get fillColor() {
|
|
||||||
return this.j3.get();
|
|
||||||
}
|
|
||||||
set fillColor(newValue) {
|
|
||||||
this.j3.set(newValue);
|
|
||||||
}
|
|
||||||
get title() {
|
|
||||||
return this.q4.get();
|
|
||||||
}
|
|
||||||
set title(newValue) {
|
|
||||||
this.q4.set(newValue);
|
|
||||||
}
|
|
||||||
get itemBackgroundColor() {
|
|
||||||
return this.r4.get();
|
|
||||||
}
|
|
||||||
set itemBackgroundColor(newValue) {
|
|
||||||
this.r4.set(newValue);
|
|
||||||
}
|
|
||||||
initialRender() {
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
Row.create();
|
|
||||||
Row.borderRadius('4vp');
|
|
||||||
Row.width('100%');
|
|
||||||
Row.backgroundColor(ObservedObject.GetRawObject(this.itemBackgroundColor));
|
|
||||||
Row.justifyContent(FlexAlign.Start);
|
|
||||||
}, Row);
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
Image.create(this.imageResource);
|
|
||||||
Image.width(this.imageSize);
|
|
||||||
Image.height(this.imageSize);
|
|
||||||
Image.fillColor(ObservedObject.GetRawObject(this.fillColor));
|
|
||||||
Image.margin({
|
|
||||||
top: c1,
|
|
||||||
bottom: c1,
|
|
||||||
left: d1,
|
|
||||||
right: d1
|
|
||||||
});
|
|
||||||
}, Image);
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
Text.create(this.title);
|
|
||||||
Text.fontSize(f1);
|
|
||||||
Text.textAlign(TextAlign.Start);
|
|
||||||
Text.maxLines(1);
|
|
||||||
Text.margin({ top: e1, bottom: e1, right: d1 });
|
|
||||||
}, Text);
|
|
||||||
Text.pop();
|
|
||||||
Row.pop();
|
|
||||||
}
|
|
||||||
rerender() {
|
|
||||||
this.updateDirtyElements();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class v1 extends ViewPU {
|
class v1 extends ViewPU {
|
||||||
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
|
constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
|
||||||
super(parent, __localStorage, elmtId, extraInfo);
|
super(parent, __localStorage, elmtId, extraInfo);
|
||||||
@ -1074,17 +833,21 @@ class v1 extends ViewPU {
|
|||||||
Column.width(this.menuWidth);
|
Column.width(this.menuWidth);
|
||||||
}, Column);
|
}, Column);
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
__Common__.create();
|
Row.create();
|
||||||
__Common__.margin({
|
Row.borderRadius('4vp');
|
||||||
|
Row.width('100%');
|
||||||
|
Row.backgroundColor(ObservedObject.GetRawObject(this.leftSplitBackgroundColor));
|
||||||
|
Row.margin({
|
||||||
top: '0vp',
|
top: '0vp',
|
||||||
bottom: '2vp',
|
bottom: '2vp',
|
||||||
left: '4vp',
|
left: '4vp',
|
||||||
right: '4vp'
|
right: '4vp'
|
||||||
});
|
});
|
||||||
__Common__.onClick(() => {
|
Row.justifyContent(FlexAlign.Start);
|
||||||
|
Row.onClick(() => {
|
||||||
this.onMenuLeftSplitClick();
|
this.onMenuLeftSplitClick();
|
||||||
});
|
});
|
||||||
__Common__.onHover((isHover, event) => {
|
Row.onHover((isHover, event) => {
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
this.leftSplitBackgroundColor = u1;
|
this.leftSplitBackgroundColor = u1;
|
||||||
}
|
}
|
||||||
@ -1092,53 +855,44 @@ class v1 extends ViewPU {
|
|||||||
this.leftSplitBackgroundColor = Color.Transparent;
|
this.leftSplitBackgroundColor = Color.Transparent;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, __Common__);
|
}, Row);
|
||||||
{
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
if (isInitialRender) {
|
|
||||||
let componentCall = new m4(this, {
|
|
||||||
imageResource: this.menuLeftResource,
|
|
||||||
imageSize: b1,
|
|
||||||
fillColor: this.splitFillColor,
|
|
||||||
title: this.leftSplitTitle,
|
|
||||||
itemBackgroundColor: this.leftSplitBackgroundColor
|
|
||||||
}, undefined, elmtId, () => { }, { page: "library/Index.ets", line: 425, s4: 7 });
|
|
||||||
ViewPU.create(componentCall);
|
|
||||||
let paramsLambda = () => {
|
|
||||||
return {
|
|
||||||
imageResource: this.menuLeftResource,
|
|
||||||
imageSize: b1,
|
|
||||||
fillColor: this.splitFillColor,
|
|
||||||
title: this.leftSplitTitle,
|
|
||||||
itemBackgroundColor: this.leftSplitBackgroundColor
|
|
||||||
};
|
|
||||||
};
|
|
||||||
componentCall.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.updateStateVarsOfChildByElmtId(elmtId, {
|
|
||||||
imageResource: this.menuLeftResource,
|
|
||||||
imageSize: b1,
|
|
||||||
fillColor: this.splitFillColor,
|
|
||||||
title: this.leftSplitTitle,
|
|
||||||
itemBackgroundColor: this.leftSplitBackgroundColor
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, { name: "MenuItemComponent" });
|
|
||||||
}
|
|
||||||
__Common__.pop();
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
__Common__.create();
|
Image.create(this.menuLeftResource);
|
||||||
__Common__.margin({
|
Image.width(b1);
|
||||||
|
Image.height(b1);
|
||||||
|
Image.fillColor(ObservedObject.GetRawObject(this.splitFillColor));
|
||||||
|
Image.margin({
|
||||||
|
top: c1,
|
||||||
|
bottom: c1,
|
||||||
|
left: d1,
|
||||||
|
right: d1
|
||||||
|
});
|
||||||
|
}, Image);
|
||||||
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
|
Text.create(this.leftSplitTitle);
|
||||||
|
Text.fontSize(f1);
|
||||||
|
Text.textAlign(TextAlign.Start);
|
||||||
|
Text.maxLines(1);
|
||||||
|
Text.margin({ top: e1, bottom: e1, right: d1 });
|
||||||
|
}, Text);
|
||||||
|
Text.pop();
|
||||||
|
Row.pop();
|
||||||
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
|
Row.create();
|
||||||
|
Row.borderRadius('4vp');
|
||||||
|
Row.width('100%');
|
||||||
|
Row.backgroundColor(ObservedObject.GetRawObject(this.rightSplitBackgroundColor));
|
||||||
|
Row.margin({
|
||||||
top: '2vp',
|
top: '2vp',
|
||||||
bottom: '0vp',
|
bottom: '0vp',
|
||||||
left: '4vp',
|
left: '4vp',
|
||||||
right: '4vp'
|
right: '4vp'
|
||||||
});
|
});
|
||||||
__Common__.onClick(() => {
|
Row.justifyContent(FlexAlign.Start);
|
||||||
|
Row.onClick(() => {
|
||||||
this.onMenuRightSplitClick();
|
this.onMenuRightSplitClick();
|
||||||
});
|
});
|
||||||
__Common__.onHover((isHover, event) => {
|
Row.onHover((isHover, event) => {
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
this.rightSplitBackgroundColor = u1;
|
this.rightSplitBackgroundColor = u1;
|
||||||
}
|
}
|
||||||
@ -1146,41 +900,28 @@ class v1 extends ViewPU {
|
|||||||
this.rightSplitBackgroundColor = Color.Transparent;
|
this.rightSplitBackgroundColor = Color.Transparent;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, __Common__);
|
}, Row);
|
||||||
{
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
Image.create(this.menuRightResource);
|
||||||
if (isInitialRender) {
|
Image.width(b1);
|
||||||
let componentCall = new m4(this, {
|
Image.height(b1);
|
||||||
imageResource: this.menuRightResource,
|
Image.fillColor(ObservedObject.GetRawObject(this.splitFillColor));
|
||||||
imageSize: b1,
|
Image.margin({
|
||||||
fillColor: this.splitFillColor,
|
top: c1,
|
||||||
title: this.rightSplitTitle,
|
bottom: c1,
|
||||||
itemBackgroundColor: this.rightSplitBackgroundColor
|
left: d1,
|
||||||
}, undefined, elmtId, () => { }, { page: "library/Index.ets", line: 448, s4: 7 });
|
right: d1
|
||||||
ViewPU.create(componentCall);
|
});
|
||||||
let paramsLambda = () => {
|
}, Image);
|
||||||
return {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
imageResource: this.menuRightResource,
|
Text.create(this.rightSplitTitle);
|
||||||
imageSize: b1,
|
Text.fontSize(f1);
|
||||||
fillColor: this.splitFillColor,
|
Text.textAlign(TextAlign.Start);
|
||||||
title: this.rightSplitTitle,
|
Text.maxLines(1);
|
||||||
itemBackgroundColor: this.rightSplitBackgroundColor
|
Text.margin({ top: e1, bottom: e1, right: d1 });
|
||||||
};
|
}, Text);
|
||||||
};
|
Text.pop();
|
||||||
componentCall.paramsGenerator_ = paramsLambda;
|
Row.pop();
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.updateStateVarsOfChildByElmtId(elmtId, {
|
|
||||||
imageResource: this.menuRightResource,
|
|
||||||
imageSize: b1,
|
|
||||||
fillColor: this.splitFillColor,
|
|
||||||
title: this.rightSplitTitle,
|
|
||||||
itemBackgroundColor: this.rightSplitBackgroundColor
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, { name: "MenuItemComponent" });
|
|
||||||
}
|
|
||||||
__Common__.pop();
|
|
||||||
Column.pop();
|
Column.pop();
|
||||||
}
|
}
|
||||||
initialRender() {
|
initialRender() {
|
||||||
@ -1206,15 +947,22 @@ class v1 extends ViewPU {
|
|||||||
});
|
});
|
||||||
}, Row);
|
}, Row);
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
__Common__.create();
|
Button.createWithChild();
|
||||||
__Common__.margin({ right: m });
|
Button.id('EnhanceMaximizeBtn');
|
||||||
__Common__.responseRegion({
|
Button.backgroundColor(ObservedObject.GetRawObject(this.maximizeBackgroundColor));
|
||||||
|
Button.width(j);
|
||||||
|
Button.height(j);
|
||||||
|
Button.type(ButtonType.Normal);
|
||||||
|
Button.borderRadius('4vp');
|
||||||
|
Button.margin({ right: m });
|
||||||
|
Button.responseRegion({
|
||||||
x: o,
|
x: o,
|
||||||
y: t,
|
y: u4,
|
||||||
width: u,
|
width: u,
|
||||||
height: a1
|
height: a1
|
||||||
});
|
});
|
||||||
__Common__.bindMenu(this.isShowMenu, { builder: this.MenuBuilder.bind(this) }, {
|
Button.visibility(this.maximizeVisibility);
|
||||||
|
Button.bindMenu(this.isShowMenu, { builder: this.MenuBuilder.bind(this) }, {
|
||||||
placement: Placement.BottomRight, aboutToDisappear: () => {
|
placement: Placement.BottomRight, aboutToDisappear: () => {
|
||||||
this.isShowMenu = false;
|
this.isShowMenu = false;
|
||||||
}
|
}
|
||||||
@ -1234,7 +982,7 @@ class v1 extends ViewPU {
|
|||||||
TapGesture.pop();
|
TapGesture.pop();
|
||||||
GestureGroup.pop();
|
GestureGroup.pop();
|
||||||
Gesture.pop();
|
Gesture.pop();
|
||||||
__Common__.onHover((isHover, event) => {
|
Button.onHover((isHover, event) => {
|
||||||
this.onHoverMaximizeButton(isHover);
|
this.onHoverMaximizeButton(isHover);
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
this.onMenuWidthChange();
|
this.onMenuWidthChange();
|
||||||
@ -1252,62 +1000,33 @@ class v1 extends ViewPU {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, __Common__);
|
}, Button);
|
||||||
{
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
if (isInitialRender) {
|
|
||||||
let componentCall = new l4(this, {
|
|
||||||
componentId: 'EnhanceMaximizeBtn',
|
|
||||||
imageResource: this.maximizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.maximizeFillColor,
|
|
||||||
imageScale: this.maximizeScale,
|
|
||||||
buttonBackgroundColor: this.maximizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.maximizeVisibility
|
|
||||||
}, undefined, elmtId, () => { }, { page: "library/Index.ets", line: 476, s4: 9 });
|
|
||||||
ViewPU.create(componentCall);
|
|
||||||
let paramsLambda = () => {
|
|
||||||
return {
|
|
||||||
componentId: 'EnhanceMaximizeBtn',
|
|
||||||
imageResource: this.maximizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.maximizeFillColor,
|
|
||||||
imageScale: this.maximizeScale,
|
|
||||||
buttonBackgroundColor: this.maximizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.maximizeVisibility
|
|
||||||
};
|
|
||||||
};
|
|
||||||
componentCall.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.updateStateVarsOfChildByElmtId(elmtId, {
|
|
||||||
componentId: 'EnhanceMaximizeBtn',
|
|
||||||
imageResource: this.maximizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.maximizeFillColor,
|
|
||||||
imageScale: this.maximizeScale,
|
|
||||||
buttonBackgroundColor: this.maximizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonVisibility: this.maximizeVisibility
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, { name: "ButtonComponent" });
|
|
||||||
}
|
|
||||||
__Common__.pop();
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
__Common__.create();
|
Image.create(this.maximizeResource);
|
||||||
__Common__.margin({ right: m });
|
Image.width(i);
|
||||||
__Common__.responseRegion({
|
Image.height(i);
|
||||||
|
Image.fillColor(ObservedObject.GetRawObject(this.maximizeFillColor));
|
||||||
|
Image.draggable(false);
|
||||||
|
Image.interpolation(ImageInterpolation.High);
|
||||||
|
Image.scale({ x: this.maximizeScale, y: this.maximizeScale });
|
||||||
|
}, Image);
|
||||||
|
Button.pop();
|
||||||
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
|
Button.createWithChild();
|
||||||
|
Button.id('EnhanceMinimizeBtn');
|
||||||
|
Button.backgroundColor(ObservedObject.GetRawObject(this.minimizeBackgroundColor));
|
||||||
|
Button.width(j);
|
||||||
|
Button.height(j);
|
||||||
|
Button.type(ButtonType.Normal);
|
||||||
|
Button.borderRadius('4vp');
|
||||||
|
Button.margin({ right: m });
|
||||||
|
Button.responseRegion({
|
||||||
x: o,
|
x: o,
|
||||||
y: t,
|
y: u4,
|
||||||
width: u,
|
width: u,
|
||||||
height: a1
|
height: a1
|
||||||
});
|
});
|
||||||
__Common__.visibility(this.minimizeVisibility);
|
Button.visibility(this.minimizeVisibility);
|
||||||
Gesture.create(GesturePriority.Low);
|
Gesture.create(GesturePriority.Low);
|
||||||
TapGesture.create();
|
TapGesture.create();
|
||||||
TapGesture.onAction(() => {
|
TapGesture.onAction(() => {
|
||||||
@ -1315,7 +1034,7 @@ class v1 extends ViewPU {
|
|||||||
});
|
});
|
||||||
TapGesture.pop();
|
TapGesture.pop();
|
||||||
Gesture.pop();
|
Gesture.pop();
|
||||||
__Common__.onHover((isHover, event) => {
|
Button.onHover((isHover, event) => {
|
||||||
this.onHoverMinimizeButton(isHover);
|
this.onHoverMinimizeButton(isHover);
|
||||||
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
@ -1326,61 +1045,33 @@ class v1 extends ViewPU {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, __Common__);
|
}, Button);
|
||||||
{
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
|
||||||
if (isInitialRender) {
|
|
||||||
let componentCall = new l4(this, {
|
|
||||||
componentId: 'EnhanceMinimizeBtn',
|
|
||||||
imageResource: this.minimizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.minimizeFillColor,
|
|
||||||
imageScale: this.minimizeScale,
|
|
||||||
buttonBackgroundColor: this.minimizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.minimizeVisibility
|
|
||||||
}, undefined, elmtId, () => { }, { page: "library/Index.ets", line: 522, s4: 9 });
|
|
||||||
ViewPU.create(componentCall);
|
|
||||||
let paramsLambda = () => {
|
|
||||||
return {
|
|
||||||
componentId: 'EnhanceMinimizeBtn',
|
|
||||||
imageResource: this.minimizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.minimizeFillColor,
|
|
||||||
imageScale: this.minimizeScale,
|
|
||||||
buttonBackgroundColor: this.minimizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.minimizeVisibility
|
|
||||||
};
|
|
||||||
};
|
|
||||||
componentCall.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.updateStateVarsOfChildByElmtId(elmtId, {
|
|
||||||
componentId: 'EnhanceMinimizeBtn',
|
|
||||||
imageResource: this.minimizeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.minimizeFillColor,
|
|
||||||
imageScale: this.minimizeScale,
|
|
||||||
buttonBackgroundColor: this.minimizeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonVisibility: this.minimizeVisibility
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, { name: "ButtonComponent" });
|
|
||||||
}
|
|
||||||
__Common__.pop();
|
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
__Common__.create();
|
Image.create(this.minimizeResource);
|
||||||
__Common__.margin({ right: m });
|
Image.width(i);
|
||||||
__Common__.responseRegion({
|
Image.height(i);
|
||||||
|
Image.fillColor(ObservedObject.GetRawObject(this.minimizeFillColor));
|
||||||
|
Image.draggable(false);
|
||||||
|
Image.interpolation(ImageInterpolation.High);
|
||||||
|
Image.scale({ x: this.minimizeScale, y: this.minimizeScale });
|
||||||
|
}, Image);
|
||||||
|
Button.pop();
|
||||||
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
|
Button.createWithChild();
|
||||||
|
Button.id('EnhanceCloseBtn');
|
||||||
|
Button.backgroundColor(ObservedObject.GetRawObject(this.closeBackgroundColor));
|
||||||
|
Button.width(j);
|
||||||
|
Button.height(j);
|
||||||
|
Button.type(ButtonType.Normal);
|
||||||
|
Button.borderRadius('4vp');
|
||||||
|
Button.margin({ right: m });
|
||||||
|
Button.responseRegion({
|
||||||
x: o,
|
x: o,
|
||||||
y: t,
|
y: u4,
|
||||||
width: u,
|
width: u,
|
||||||
height: a1
|
height: a1
|
||||||
});
|
});
|
||||||
|
Button.visibility(this.closeVisibility);
|
||||||
Gesture.create(GesturePriority.Low);
|
Gesture.create(GesturePriority.Low);
|
||||||
TapGesture.create();
|
TapGesture.create();
|
||||||
TapGesture.onAction(() => {
|
TapGesture.onAction(() => {
|
||||||
@ -1388,7 +1079,7 @@ class v1 extends ViewPU {
|
|||||||
});
|
});
|
||||||
TapGesture.pop();
|
TapGesture.pop();
|
||||||
Gesture.pop();
|
Gesture.pop();
|
||||||
__Common__.onHover((isHover, event) => {
|
Button.onHover((isHover, event) => {
|
||||||
this.onHoverCloseButton(isHover);
|
this.onHoverCloseButton(isHover);
|
||||||
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
@ -1399,52 +1090,17 @@ class v1 extends ViewPU {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, __Common__);
|
}, Button);
|
||||||
{
|
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
||||||
this.observeComponentCreation2((elmtId, isInitialRender) => {
|
Image.create(this.closeResource);
|
||||||
if (isInitialRender) {
|
Image.width(i);
|
||||||
let componentCall = new l4(this, {
|
Image.height(i);
|
||||||
componentId: 'EnhanceCloseBtn',
|
Image.fillColor(ObservedObject.GetRawObject(this.closeFillColor));
|
||||||
imageResource: this.closeResource,
|
Image.draggable(false);
|
||||||
imageSize: i,
|
Image.interpolation(ImageInterpolation.High);
|
||||||
fillColor: this.closeFillColor,
|
Image.scale({ x: this.closeScale, y: this.closeScale });
|
||||||
imageScale: this.closeScale,
|
}, Image);
|
||||||
buttonBackgroundColor: this.closeBackgroundColor,
|
Button.pop();
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.closeVisibility
|
|
||||||
}, undefined, elmtId, () => { }, { page: "library/Index.ets", line: 555, s4: 9 });
|
|
||||||
ViewPU.create(componentCall);
|
|
||||||
let paramsLambda = () => {
|
|
||||||
return {
|
|
||||||
componentId: 'EnhanceCloseBtn',
|
|
||||||
imageResource: this.closeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.closeFillColor,
|
|
||||||
imageScale: this.closeScale,
|
|
||||||
buttonBackgroundColor: this.closeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonBorderRadius: j4,
|
|
||||||
buttonVisibility: this.closeVisibility
|
|
||||||
};
|
|
||||||
};
|
|
||||||
componentCall.paramsGenerator_ = paramsLambda;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.updateStateVarsOfChildByElmtId(elmtId, {
|
|
||||||
componentId: 'EnhanceCloseBtn',
|
|
||||||
imageResource: this.closeResource,
|
|
||||||
imageSize: i,
|
|
||||||
fillColor: this.closeFillColor,
|
|
||||||
imageScale: this.closeScale,
|
|
||||||
buttonBackgroundColor: this.closeBackgroundColor,
|
|
||||||
buttonSize: j,
|
|
||||||
buttonVisibility: this.closeVisibility
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, { name: "ButtonComponent" });
|
|
||||||
}
|
|
||||||
__Common__.pop();
|
|
||||||
Row.pop();
|
Row.pop();
|
||||||
Row.pop();
|
Row.pop();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
const IMAGE_SIZE: string = '28vp'
|
const IMAGE_SIZE: string = '28vp'
|
||||||
const BUTTON_SIZE: string = '28vp'
|
const BUTTON_SIZE: string = '28vp'
|
||||||
const BUTTON_RADIUS: string = '4vp'
|
|
||||||
const BUTTON_ELEMENT_MARGIN_HORIZONTAL: string = '12vp'
|
const BUTTON_ELEMENT_MARGIN_HORIZONTAL: string = '12vp'
|
||||||
const BUTTON_ELEMENT_MARGIN_HORIZONTAL_END: string = '8vp'
|
const BUTTON_ELEMENT_MARGIN_HORIZONTAL_END: string = '8vp'
|
||||||
const TITLE_BUTTON_RESPONSE_REGION_OFFSET_X: string = '-8vp'
|
const TITLE_BUTTON_RESPONSE_REGION_OFFSET_X: string = '-8vp'
|
||||||
@ -48,7 +47,7 @@ const recoverNormalResource: Resource = {
|
|||||||
type: 20000
|
type: 20000
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonNormalBackgroundColor: Color = Color.Transparent
|
const buttonNormalBackgroundColor: Color = Color.Transparent
|
||||||
|
|
||||||
const buttonNormalIconFillColor: Resource = {
|
const buttonNormalIconFillColor: Resource = {
|
||||||
bundleName: '',
|
bundleName: '',
|
||||||
@ -74,7 +73,7 @@ const buttonHoverIconFillColor: Resource = {
|
|||||||
type: 10001
|
type: 10001
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeNormalBackgroundColor: Color = Color.Transparent
|
const closeNormalBackgroundColor : Color = Color.Transparent
|
||||||
|
|
||||||
const closeNormalIconFillColor: Resource = {
|
const closeNormalIconFillColor: Resource = {
|
||||||
bundleName: '',
|
bundleName: '',
|
||||||
@ -108,72 +107,6 @@ const menuHoverColor: Resource = {
|
|||||||
type: 10001
|
type: 10001
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Component
|
|
||||||
struct ButtonComponent {
|
|
||||||
@Prop componentId: string
|
|
||||||
@Prop imageResource: Resource
|
|
||||||
@Prop imageSize: string
|
|
||||||
@Prop fillColor: Resource
|
|
||||||
@Prop imageScale: number
|
|
||||||
@Prop buttonBackgroundColor: Resource | Color
|
|
||||||
@Prop buttonSize: string
|
|
||||||
@State buttonBorderRadius: string = '4vp'
|
|
||||||
@Prop buttonVisibility: Visibility
|
|
||||||
|
|
||||||
build() {
|
|
||||||
Button() {
|
|
||||||
Image(this.imageResource)
|
|
||||||
.width(this.imageSize)
|
|
||||||
.height(this.imageSize)
|
|
||||||
.fillColor(this.fillColor)
|
|
||||||
.draggable(false)
|
|
||||||
.interpolation(ImageInterpolation.High)
|
|
||||||
.scale({ x: this.imageScale, y: this.imageScale })
|
|
||||||
}
|
|
||||||
.id(this.componentId)
|
|
||||||
.backgroundColor(this.buttonBackgroundColor)
|
|
||||||
.width(this.buttonSize)
|
|
||||||
.height(this.buttonSize)
|
|
||||||
.type(ButtonType.Normal)
|
|
||||||
.borderRadius(this.buttonBorderRadius)
|
|
||||||
.visibility(this.buttonVisibility)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component
|
|
||||||
struct MenuItemComponent {
|
|
||||||
@Prop imageResource: Resource
|
|
||||||
@Prop imageSize: string
|
|
||||||
@Prop fillColor: Resource
|
|
||||||
@Prop title: Resource
|
|
||||||
@Prop itemBackgroundColor: ResourceColor
|
|
||||||
|
|
||||||
build() {
|
|
||||||
Row() {
|
|
||||||
Image(this.imageResource)
|
|
||||||
.width(this.imageSize)
|
|
||||||
.height(this.imageSize)
|
|
||||||
.fillColor(this.fillColor)
|
|
||||||
.margin({
|
|
||||||
top: MENU_MARGIN_V,
|
|
||||||
bottom: MENU_MARGIN_V,
|
|
||||||
left: MENU_MARGIN_H,
|
|
||||||
right: MENU_MARGIN_H
|
|
||||||
})
|
|
||||||
Text(this.title)
|
|
||||||
.fontSize(MENU_TITLE_TEXT_FONT_SIZE)
|
|
||||||
.textAlign(TextAlign.Start)
|
|
||||||
.maxLines(1)
|
|
||||||
.margin({ top: MENU_TITLE_MARGIN_V, bottom: MENU_TITLE_MARGIN_V, right: MENU_MARGIN_H })
|
|
||||||
}
|
|
||||||
.borderRadius('4vp')
|
|
||||||
.width('100%')
|
|
||||||
.backgroundColor(this.itemBackgroundColor)
|
|
||||||
.justifyContent(FlexAlign.Start)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
@Component
|
@Component
|
||||||
struct Index {
|
struct Index {
|
||||||
@ -363,6 +296,7 @@ struct Index {
|
|||||||
this.menuWidth = (80 + parseInt(width)) + 'vp'
|
this.menuWidth = (80 + parseInt(width)) + 'vp'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
setRowVisibility() {
|
setRowVisibility() {
|
||||||
if (this.maximizeVisibility == Visibility.None && this.minimizeVisibility == Visibility.None &&
|
if (this.maximizeVisibility == Visibility.None && this.minimizeVisibility == Visibility.None &&
|
||||||
this.closeVisibility == Visibility.None) {
|
this.closeVisibility == Visibility.None) {
|
||||||
@ -422,167 +356,211 @@ struct Index {
|
|||||||
@Builder
|
@Builder
|
||||||
MenuBuilder() {
|
MenuBuilder() {
|
||||||
Column() {
|
Column() {
|
||||||
MenuItemComponent({
|
Row() {
|
||||||
imageResource: this.menuLeftResource,
|
Image(this.menuLeftResource)
|
||||||
imageSize: MENU_ICON_SIZE,
|
.width(MENU_ICON_SIZE)
|
||||||
fillColor: this.splitFillColor,
|
.height(MENU_ICON_SIZE)
|
||||||
title: this.leftSplitTitle,
|
.fillColor(this.splitFillColor)
|
||||||
itemBackgroundColor: this.leftSplitBackgroundColor
|
.margin({
|
||||||
|
top: MENU_MARGIN_V,
|
||||||
|
bottom: MENU_MARGIN_V,
|
||||||
|
left: MENU_MARGIN_H,
|
||||||
|
right: MENU_MARGIN_H
|
||||||
|
})
|
||||||
|
Text(this.leftSplitTitle)
|
||||||
|
.fontSize(MENU_TITLE_TEXT_FONT_SIZE)
|
||||||
|
.textAlign(TextAlign.Start)
|
||||||
|
.maxLines(1)
|
||||||
|
.margin({ top: MENU_TITLE_MARGIN_V, bottom: MENU_TITLE_MARGIN_V, right: MENU_MARGIN_H })
|
||||||
|
}
|
||||||
|
.borderRadius('4vp')
|
||||||
|
.width('100%')
|
||||||
|
.backgroundColor(this.leftSplitBackgroundColor)
|
||||||
|
.margin({
|
||||||
|
top: '0vp',
|
||||||
|
bottom: '2vp',
|
||||||
|
left: '4vp',
|
||||||
|
right: '4vp'
|
||||||
})
|
})
|
||||||
.margin({
|
.justifyContent(FlexAlign.Start)
|
||||||
top: '0vp',
|
.onClick(() => {
|
||||||
bottom: '2vp',
|
this.onMenuLeftSplitClick()
|
||||||
left: '4vp',
|
})
|
||||||
right: '4vp'
|
.onHover((isHover: boolean, event: HoverEvent) => {
|
||||||
})
|
if (isHover) {
|
||||||
.onClick(() => {
|
this.leftSplitBackgroundColor = menuHoverColor
|
||||||
this.onMenuLeftSplitClick()
|
} else {
|
||||||
})
|
this.leftSplitBackgroundColor = Color.Transparent
|
||||||
.onHover((isHover: boolean, event: HoverEvent) => {
|
}
|
||||||
if (isHover) {
|
})
|
||||||
this.leftSplitBackgroundColor = menuHoverColor
|
|
||||||
} else {
|
Row() {
|
||||||
this.leftSplitBackgroundColor = Color.Transparent
|
Image(this.menuRightResource)
|
||||||
}
|
.width(MENU_ICON_SIZE)
|
||||||
})
|
.height(MENU_ICON_SIZE)
|
||||||
MenuItemComponent({
|
.fillColor(this.splitFillColor)
|
||||||
imageResource: this.menuRightResource,
|
.margin({
|
||||||
imageSize: MENU_ICON_SIZE,
|
top: MENU_MARGIN_V,
|
||||||
fillColor: this.splitFillColor,
|
bottom: MENU_MARGIN_V,
|
||||||
title: this.rightSplitTitle,
|
left: MENU_MARGIN_H,
|
||||||
itemBackgroundColor: this.rightSplitBackgroundColor
|
right: MENU_MARGIN_H
|
||||||
}).margin({
|
})
|
||||||
|
Text(this.rightSplitTitle)
|
||||||
|
.fontSize(MENU_TITLE_TEXT_FONT_SIZE)
|
||||||
|
.textAlign(TextAlign.Start)
|
||||||
|
.maxLines(1)
|
||||||
|
.margin({ top: MENU_TITLE_MARGIN_V, bottom: MENU_TITLE_MARGIN_V, right: MENU_MARGIN_H })
|
||||||
|
}
|
||||||
|
.borderRadius('4vp')
|
||||||
|
.width('100%')
|
||||||
|
.backgroundColor(this.rightSplitBackgroundColor)
|
||||||
|
.margin({
|
||||||
top: '2vp',
|
top: '2vp',
|
||||||
bottom: '0vp',
|
bottom: '0vp',
|
||||||
left: '4vp',
|
left: '4vp',
|
||||||
right: '4vp'
|
right: '4vp'
|
||||||
})
|
})
|
||||||
.onClick(() => {
|
.justifyContent(FlexAlign.Start)
|
||||||
this.onMenuRightSplitClick()
|
.onClick(() => {
|
||||||
})
|
this.onMenuRightSplitClick()
|
||||||
.onHover((isHover: boolean, event: HoverEvent) => {
|
})
|
||||||
if (isHover) {
|
.onHover((isHover: boolean, event: HoverEvent) => {
|
||||||
this.rightSplitBackgroundColor = menuHoverColor
|
if (isHover) {
|
||||||
} else {
|
this.rightSplitBackgroundColor = menuHoverColor
|
||||||
this.rightSplitBackgroundColor = Color.Transparent
|
} else {
|
||||||
}
|
this.rightSplitBackgroundColor = Color.Transparent
|
||||||
})
|
}
|
||||||
|
})
|
||||||
}.width(this.menuWidth)
|
}.width(this.menuWidth)
|
||||||
}
|
}
|
||||||
|
|
||||||
build() {
|
build() {
|
||||||
Row() {
|
Row() {
|
||||||
Row() {
|
Row() {
|
||||||
ButtonComponent({
|
Button() {
|
||||||
componentId: 'EnhanceMaximizeBtn',
|
Image(this.maximizeResource)
|
||||||
imageResource: this.maximizeResource,
|
.width(IMAGE_SIZE)
|
||||||
imageSize: IMAGE_SIZE,
|
.height(IMAGE_SIZE)
|
||||||
fillColor: this.maximizeFillColor,
|
.fillColor(this.maximizeFillColor)
|
||||||
imageScale: this.maximizeScale,
|
.draggable(false)
|
||||||
buttonBackgroundColor: this.maximizeBackgroundColor,
|
.interpolation(ImageInterpolation.High)
|
||||||
buttonSize: BUTTON_SIZE,
|
.scale({ x: this.maximizeScale, y: this.maximizeScale })
|
||||||
buttonBorderRadius: BUTTON_RADIUS,
|
}
|
||||||
buttonVisibility: this.maximizeVisibility
|
.id('EnhanceMaximizeBtn')
|
||||||
|
.backgroundColor(this.maximizeBackgroundColor)
|
||||||
|
.width(BUTTON_SIZE)
|
||||||
|
.height(BUTTON_SIZE)
|
||||||
|
.type(ButtonType.Normal)
|
||||||
|
.borderRadius('4vp')
|
||||||
|
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
||||||
|
.responseRegion({
|
||||||
|
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
||||||
|
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
||||||
|
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
||||||
|
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
||||||
})
|
})
|
||||||
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
.visibility(this.maximizeVisibility)
|
||||||
.responseRegion({
|
.bindMenu(this.isShowMenu, this.MenuBuilder, {
|
||||||
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
placement: Placement.BottomRight, aboutToDisappear: () => {
|
||||||
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
this.isShowMenu = false;
|
||||||
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
}
|
||||||
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
})
|
||||||
})
|
.gesture(GestureGroup(GestureMode.Exclusive, LongPressGesture({ repeat: false }).onAction(() => {
|
||||||
.bindMenu(this.isShowMenu, this.MenuBuilder, {
|
this.onMenuWidthChange()
|
||||||
placement: Placement.BottomRight, aboutToDisappear: () => {
|
this.isShowMenu = true
|
||||||
this.isShowMenu = false;
|
}), TapGesture().onAction(() => {
|
||||||
}
|
this.onMaximizeButtonClick()
|
||||||
})
|
})))
|
||||||
.gesture(GestureGroup(GestureMode.Exclusive, LongPressGesture({ repeat: false }).onAction(() => {
|
.onHover((isHover: boolean, event: HoverEvent) => {
|
||||||
|
this.onHoverMaximizeButton(isHover)
|
||||||
|
if (isHover) {
|
||||||
this.onMenuWidthChange()
|
this.onMenuWidthChange()
|
||||||
this.isShowMenu = true
|
this.onShowMenuWithTimer()
|
||||||
}), TapGesture().onAction(() => {
|
} else {
|
||||||
this.onMaximizeButtonClick()
|
this.onCancelMenuTimer()
|
||||||
})))
|
}
|
||||||
.onHover((isHover: boolean, event: HoverEvent) => {
|
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
||||||
this.onHoverMaximizeButton(isHover)
|
|
||||||
if (isHover) {
|
if (isHover) {
|
||||||
this.onMenuWidthChange()
|
this.maximizeScale = 1.1
|
||||||
this.onShowMenuWithTimer()
|
|
||||||
} else {
|
} else {
|
||||||
this.onCancelMenuTimer()
|
this.maximizeScale = 1.0
|
||||||
}
|
}
|
||||||
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
|
||||||
if (isHover) {
|
|
||||||
this.maximizeScale = 1.1
|
|
||||||
} else {
|
|
||||||
this.maximizeScale = 1.0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
ButtonComponent({
|
|
||||||
componentId: 'EnhanceMinimizeBtn',
|
|
||||||
imageResource: this.minimizeResource,
|
|
||||||
imageSize: IMAGE_SIZE,
|
|
||||||
fillColor: this.minimizeFillColor,
|
|
||||||
imageScale: this.minimizeScale,
|
|
||||||
buttonBackgroundColor: this.minimizeBackgroundColor,
|
|
||||||
buttonSize: BUTTON_SIZE,
|
|
||||||
buttonBorderRadius: BUTTON_RADIUS,
|
|
||||||
buttonVisibility: this.minimizeVisibility
|
|
||||||
})
|
})
|
||||||
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
|
||||||
.responseRegion({
|
|
||||||
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
|
||||||
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
|
||||||
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
|
||||||
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
|
||||||
})
|
|
||||||
.visibility(this.minimizeVisibility)
|
|
||||||
.gesture(TapGesture().onAction(() => {
|
|
||||||
this.onMinimizeButtonClick()
|
|
||||||
}))
|
|
||||||
.onHover((isHover: boolean, event: HoverEvent) => {
|
|
||||||
this.onHoverMinimizeButton(isHover)
|
|
||||||
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
|
||||||
if (isHover) {
|
|
||||||
this.minimizeScale = 1.1
|
|
||||||
} else {
|
|
||||||
this.minimizeScale = 1.0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
ButtonComponent({
|
Button() {
|
||||||
componentId: 'EnhanceCloseBtn',
|
Image(this.minimizeResource)
|
||||||
imageResource: this.closeResource,
|
.width(IMAGE_SIZE)
|
||||||
imageSize: IMAGE_SIZE,
|
.height(IMAGE_SIZE)
|
||||||
fillColor: this.closeFillColor,
|
.fillColor(this.minimizeFillColor)
|
||||||
imageScale: this.closeScale,
|
.draggable(false)
|
||||||
buttonBackgroundColor: this.closeBackgroundColor,
|
.interpolation(ImageInterpolation.High)
|
||||||
buttonSize: BUTTON_SIZE,
|
.scale({ x: this.minimizeScale, y: this.minimizeScale })
|
||||||
buttonBorderRadius: BUTTON_RADIUS,
|
}
|
||||||
buttonVisibility: this.closeVisibility
|
.id('EnhanceMinimizeBtn')
|
||||||
|
.backgroundColor(this.minimizeBackgroundColor)
|
||||||
|
.width(BUTTON_SIZE)
|
||||||
|
.height(BUTTON_SIZE)
|
||||||
|
.type(ButtonType.Normal)
|
||||||
|
.borderRadius('4vp')
|
||||||
|
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
||||||
|
.responseRegion({
|
||||||
|
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
||||||
|
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
||||||
|
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
||||||
|
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
||||||
})
|
})
|
||||||
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
.visibility(this.minimizeVisibility)
|
||||||
.responseRegion({
|
.gesture(TapGesture().onAction(() => {
|
||||||
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
this.onMinimizeButtonClick()
|
||||||
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
}))
|
||||||
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
.onHover((isHover: boolean, event: HoverEvent) => {
|
||||||
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
this.onHoverMinimizeButton(isHover)
|
||||||
|
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
||||||
|
if (isHover) {
|
||||||
|
this.minimizeScale = 1.1
|
||||||
|
} else {
|
||||||
|
this.minimizeScale = 1.0
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.gesture(TapGesture().onAction(() => {
|
})
|
||||||
this.onCloseButtonClick()
|
|
||||||
}))
|
Button() {
|
||||||
.onHover((isHover: boolean, event: HoverEvent) => {
|
Image(this.closeResource)
|
||||||
this.onHoverCloseButton(isHover)
|
.width(IMAGE_SIZE)
|
||||||
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
.height(IMAGE_SIZE)
|
||||||
if (isHover) {
|
.fillColor(this.closeFillColor)
|
||||||
this.closeScale = 1.1
|
.draggable(false)
|
||||||
} else {
|
.interpolation(ImageInterpolation.High)
|
||||||
this.closeScale = 1.0
|
.scale({ x: this.closeScale, y: this.closeScale })
|
||||||
}
|
}
|
||||||
})
|
.id('EnhanceCloseBtn')
|
||||||
|
.backgroundColor(this.closeBackgroundColor)
|
||||||
|
.width(BUTTON_SIZE)
|
||||||
|
.height(BUTTON_SIZE)
|
||||||
|
.type(ButtonType.Normal)
|
||||||
|
.borderRadius('4vp')
|
||||||
|
.margin({ right: BUTTON_ELEMENT_MARGIN_HORIZONTAL })
|
||||||
|
.responseRegion({
|
||||||
|
x: TITLE_BUTTON_RESPONSE_REGION_OFFSET_X,
|
||||||
|
y: TITLE_BUTTON_RESPONSE_REGION_OFFSET_Y,
|
||||||
|
width: TITLE_BUTTON_RESPONSE_REGION_WIDTH,
|
||||||
|
height: TITLE_BUTTON_RESPONSE_REGION_HEIGHT
|
||||||
|
})
|
||||||
|
.visibility(this.closeVisibility)
|
||||||
|
.gesture(TapGesture().onAction(() => {
|
||||||
|
this.onCloseButtonClick()
|
||||||
|
}))
|
||||||
|
.onHover((isHover: boolean, event: HoverEvent) => {
|
||||||
|
this.onHoverCloseButton(isHover)
|
||||||
|
this.getUIContext()?.animateTo({ duration: 0 }, () => {
|
||||||
|
if (isHover) {
|
||||||
|
this.closeScale = 1.1
|
||||||
|
} else {
|
||||||
|
this.closeScale = 1.0
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
})
|
||||||
}.id('containerModalButtonRowId')
|
}.id('containerModalButtonRowId')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
.padding({ left: BUTTON_ELEMENT_MARGIN_HORIZONTAL, right: BUTTON_ELEMENT_MARGIN_HORIZONTAL_END })
|
.padding({ left: BUTTON_ELEMENT_MARGIN_HORIZONTAL, right: BUTTON_ELEMENT_MARGIN_HORIZONTAL_END })
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user