support corners
This commit is contained in:
pengfei.zhou
parent
689e2713f0
commit
adf0077759
500
dist/Counter.js
vendored
500
dist/Counter.js
vendored
@ -14,12 +14,6 @@ const colors = [
|
|||||||
"#686de0",
|
"#686de0",
|
||||||
"#30336b",
|
"#30336b",
|
||||||
].map(e => doric.Color.parse(e));
|
].map(e => doric.Color.parse(e));
|
||||||
function label(str) {
|
|
||||||
return doric.text({
|
|
||||||
text: str,
|
|
||||||
textSize: 16,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||||
@ -27,148 +21,372 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|||||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||||
};
|
};
|
||||||
let ModalDemo = class ModalDemo extends doric.Panel {
|
function box(idx = 0) {
|
||||||
|
return (new doric.Stack).also(it => {
|
||||||
|
it.width = it.height = 20;
|
||||||
|
it.backgroundColor = colors[idx || 0];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function label(str) {
|
||||||
|
return doric.text({
|
||||||
|
text: str,
|
||||||
|
textSize: 16,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let EffectsDemo = class EffectsDemo extends doric.Panel {
|
||||||
build(rootView) {
|
build(rootView) {
|
||||||
doric.scroller(doric.vlayout([
|
doric.scroller(doric.vlayout([
|
||||||
doric.text({
|
doric.hlayout([
|
||||||
text: "Modal",
|
doric.vlayout([
|
||||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
label("Origin view"),
|
||||||
textSize: 30,
|
box().apply({
|
||||||
textColor: doric.Color.WHITE,
|
width: 100,
|
||||||
backgroundColor: colors[1],
|
height: 100
|
||||||
textAlignment: doric.Gravity.Center,
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('toast on bottom'),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).toast('This is a toast.');
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('toast on top'),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Top);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
label('toast on center'),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).toast('This is a toast.', doric.Gravity.Center);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
doric.text({
|
|
||||||
text: "Alert",
|
|
||||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[2],
|
|
||||||
textAlignment: doric.Gravity.Center,
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).alert({
|
|
||||||
msg: 'This is alert.',
|
|
||||||
title: 'Alert title',
|
|
||||||
okLabel: "OkLabel"
|
|
||||||
}).then(e => {
|
|
||||||
doric.modal(context).toast('Clicked OK.');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
doric.text({
|
|
||||||
text: "Confirm",
|
|
||||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[3],
|
|
||||||
textAlignment: doric.Gravity.Center,
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).confirm({
|
|
||||||
msg: 'This is Confirm.',
|
|
||||||
title: 'Confirm title',
|
|
||||||
okLabel: "OkLabel",
|
|
||||||
cancelLabel: 'CancelLabel',
|
|
||||||
}).then(() => {
|
|
||||||
doric.modal(context).toast('Clicked OK.');
|
|
||||||
}, () => {
|
|
||||||
doric.modal(context).toast('Clicked Cancel.');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
doric.text({
|
|
||||||
text: "Prompt",
|
|
||||||
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
backgroundColor: colors[4],
|
|
||||||
textAlignment: doric.Gravity.Center,
|
|
||||||
height: 50,
|
|
||||||
}),
|
|
||||||
label('Click me').apply({
|
|
||||||
width: 200,
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: colors[0],
|
|
||||||
textSize: 30,
|
|
||||||
textColor: doric.Color.WHITE,
|
|
||||||
layoutConfig: doric.layoutConfig().just(),
|
|
||||||
onClick: () => {
|
|
||||||
doric.modal(context).prompt({
|
|
||||||
msg: 'This is Prompt.',
|
|
||||||
title: 'Prompt title',
|
|
||||||
okLabel: "OkLabel",
|
|
||||||
cancelLabel: 'CancelLabel',
|
|
||||||
}).then(e => {
|
|
||||||
doric.modal(context).toast(`Clicked OK.Input:${e}`);
|
|
||||||
}, e => {
|
|
||||||
doric.modal(context).toast(`Clicked Cancel.Input:${e}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
}),
|
||||||
]).apply({
|
]).apply({
|
||||||
layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
|
|
||||||
gravity: doric.Gravity.Center,
|
gravity: doric.Gravity.Center,
|
||||||
space: 10,
|
space: 10,
|
||||||
})).apply({
|
}),
|
||||||
layoutConfig: doric.layoutConfig().most(),
|
doric.vlayout([
|
||||||
|
label("Border"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
border: {
|
||||||
|
width: 5,
|
||||||
|
color: colors[3]
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 10,
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
bottom: 10
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Shadow"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 3,
|
||||||
|
offsetY: 3,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
bottom: 10
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
]).apply({ space: 20 }),
|
||||||
|
doric.hlayout([
|
||||||
|
doric.vlayout([
|
||||||
|
label("Border,Corner"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
border: {
|
||||||
|
width: 5,
|
||||||
|
color: colors[3]
|
||||||
|
},
|
||||||
|
corners: 10,
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Border,Shadow"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
border: {
|
||||||
|
width: 5,
|
||||||
|
color: colors[3]
|
||||||
|
},
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 3,
|
||||||
|
offsetY: 3,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
bottom: 10
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner,Shadow"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 10,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 3,
|
||||||
|
offsetY: 3,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
bottom: 10
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Border,Corner,Shadow"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
border: {
|
||||||
|
width: 5,
|
||||||
|
color: colors[3]
|
||||||
|
},
|
||||||
|
corners: 10,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 3,
|
||||||
|
offsetY: 3,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
]).apply({ space: 20 }),
|
||||||
|
doric.hlayout([
|
||||||
|
doric.vlayout([
|
||||||
|
label("Shadow"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 50,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 0,
|
||||||
|
radius: 10,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 10,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Shadow,offset"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 50,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 5,
|
||||||
|
offsetY: 5,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 10,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Shadow,opacity"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 50,
|
||||||
|
shadow: {
|
||||||
|
opacity: 0.5,
|
||||||
|
color: colors[1],
|
||||||
|
offsetX: 5,
|
||||||
|
offsetY: 5,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 10,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Shadow,color"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 50,
|
||||||
|
shadow: {
|
||||||
|
opacity: 1,
|
||||||
|
color: colors[2],
|
||||||
|
offsetX: 5,
|
||||||
|
offsetY: 5,
|
||||||
|
radius: 5,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 10,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
]).apply({ space: 20 }),
|
||||||
|
doric.hlayout([
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner round"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: 50,
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner left top"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: {
|
||||||
|
leftTop: 50,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner right top"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: {
|
||||||
|
rightTop: 50,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner left bottom"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: {
|
||||||
|
leftBottom: 50,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
doric.vlayout([
|
||||||
|
label("Corner right bottom"),
|
||||||
|
box().apply({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
corners: {
|
||||||
|
rightBottom: 50,
|
||||||
|
},
|
||||||
|
layoutConfig: doric.layoutConfig().just().configMargin({
|
||||||
|
left: 5,
|
||||||
|
right: 5,
|
||||||
|
bottom: 5,
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
]).apply({
|
||||||
|
gravity: doric.Gravity.Center,
|
||||||
|
space: 10,
|
||||||
|
}),
|
||||||
|
]).apply({ space: 20 }),
|
||||||
|
]).also(it => {
|
||||||
|
it.space = 20;
|
||||||
|
})).also(it => {
|
||||||
|
it.layoutConfig = doric.layoutConfig().most();
|
||||||
}).in(rootView);
|
}).in(rootView);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
ModalDemo = __decorate([
|
EffectsDemo = __decorate([
|
||||||
Entry
|
Entry
|
||||||
], ModalDemo);
|
], EffectsDemo);
|
||||||
//# sourceMappingURL=ModalDemo.js.map
|
//# sourceMappingURL=EffectsDemo.js.map
|
||||||
|
|||||||
11
dist/index.js
vendored
11
dist/index.js
vendored
@ -3845,6 +3845,17 @@ return __module.exports;
|
|||||||
this.callJSResponse(prop);
|
this.callJSResponse(prop);
|
||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
|
case 'corners':
|
||||||
|
if (typeof prop === 'object') {
|
||||||
|
this.view.style.borderTopLeftRadius = toPixelString(prop.leftTop);
|
||||||
|
this.view.style.borderTopRightRadius = toPixelString(prop.rightTop);
|
||||||
|
this.view.style.borderBottomRightRadius = toPixelString(prop.rightBottom);
|
||||||
|
this.view.style.borderBottomLeftRadius = toPixelString(prop.leftBottom);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.view.style.borderRadius = toPixelString(prop);
|
||||||
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
set backgroundColor(v) {
|
set backgroundColor(v) {
|
||||||
|
|||||||
2
dist/index.js.map
vendored
2
dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -249,6 +249,16 @@ export abstract class DoricViewNode {
|
|||||||
this.callJSResponse(prop as string)
|
this.callJSResponse(prop as string)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
case 'corners':
|
||||||
|
if (typeof prop === 'object') {
|
||||||
|
this.view.style.borderTopLeftRadius = toPixelString(prop.leftTop)
|
||||||
|
this.view.style.borderTopRightRadius = toPixelString(prop.rightTop)
|
||||||
|
this.view.style.borderBottomRightRadius = toPixelString(prop.rightBottom)
|
||||||
|
this.view.style.borderBottomLeftRadius = toPixelString(prop.leftBottom)
|
||||||
|
} else {
|
||||||
|
this.view.style.borderRadius = toPixelString(prop)
|
||||||
|
}
|
||||||
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user