tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

support corners

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-21 17:49:34 +08:00
parent 689e2713f0
commit adf0077759
4 changed files with 385 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

508
dist/Counter.js vendored
View File

@ -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, ]).apply({
}), gravity: doric.Gravity.Center,
label('toast on bottom'), space: 10,
label('Click me').apply({ }),
width: 200, doric.vlayout([
height: 50, label("Border"),
backgroundColor: colors[0], box().apply({
textSize: 30, width: 100,
textColor: doric.Color.WHITE, height: 100,
layoutConfig: doric.layoutConfig().just(), border: {
onClick: () => { width: 5,
doric.modal(context).toast('This is a toast.'); color: colors[3]
} },
}), layoutConfig: doric.layoutConfig().just().configMargin({
label('toast on top'), left: 5,
label('Click me').apply({ right: 5,
width: 200, bottom: 5,
height: 50, })
backgroundColor: colors[0], }),
textSize: 30, ]).apply({
textColor: doric.Color.WHITE, gravity: doric.Gravity.Center,
layoutConfig: doric.layoutConfig().just(), space: 10,
onClick: () => { }),
doric.modal(context).toast('This is a toast.', doric.Gravity.Top); doric.vlayout([
} label("Corner"),
}), box().apply({
label('toast on center'), width: 100,
label('Click me').apply({ height: 100,
width: 200, corners: 10,
height: 50, layoutConfig: doric.layoutConfig().just().configMargin({
backgroundColor: colors[0], bottom: 10
textSize: 30, })
textColor: doric.Color.WHITE, }),
layoutConfig: doric.layoutConfig().just(), ]).apply({
onClick: () => { gravity: doric.Gravity.Center,
doric.modal(context).toast('This is a toast.', doric.Gravity.Center); space: 10,
} }),
}), doric.vlayout([
doric.text({ label("Shadow"),
text: "Alert", box().apply({
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST), width: 100,
textSize: 30, height: 100,
textColor: doric.Color.WHITE, shadow: {
backgroundColor: colors[2], opacity: 1,
textAlignment: doric.Gravity.Center, color: colors[1],
height: 50, offsetX: 3,
}), offsetY: 3,
label('Click me').apply({ radius: 5,
width: 200, },
height: 50, layoutConfig: doric.layoutConfig().just().configMargin({
backgroundColor: colors[0], bottom: 10
textSize: 30, })
textColor: doric.Color.WHITE, }),
layoutConfig: doric.layoutConfig().just(), ]).apply({
onClick: () => { gravity: doric.Gravity.Center,
doric.modal(context).alert({ space: 10,
msg: 'This is alert.', }),
title: 'Alert title', ]).apply({ space: 20 }),
okLabel: "OkLabel" doric.hlayout([
}).then(e => { doric.vlayout([
doric.modal(context).toast('Clicked OK.'); label("Border,Corner"),
}); box().apply({
} width: 100,
}), height: 100,
doric.text({ border: {
text: "Confirm", width: 5,
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST), color: colors[3]
textSize: 30, },
textColor: doric.Color.WHITE, corners: 10,
backgroundColor: colors[3], layoutConfig: doric.layoutConfig().just().configMargin({
textAlignment: doric.Gravity.Center, left: 5,
height: 50, right: 5,
}), bottom: 5,
label('Click me').apply({ })
width: 200, }),
height: 50, ]).apply({
backgroundColor: colors[0], gravity: doric.Gravity.Center,
textSize: 30, space: 10,
textColor: doric.Color.WHITE, }),
layoutConfig: doric.layoutConfig().just(), doric.vlayout([
onClick: () => { label("Border,Shadow"),
doric.modal(context).confirm({ box().apply({
msg: 'This is Confirm.', width: 100,
title: 'Confirm title', height: 100,
okLabel: "OkLabel", border: {
cancelLabel: 'CancelLabel', width: 5,
}).then(() => { color: colors[3]
doric.modal(context).toast('Clicked OK.'); },
}, () => { shadow: {
doric.modal(context).toast('Clicked Cancel.'); opacity: 1,
}); color: colors[1],
} offsetX: 3,
}), offsetY: 3,
doric.text({ radius: 5,
text: "Prompt", },
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST), layoutConfig: doric.layoutConfig().just().configMargin({
textSize: 30, bottom: 10
textColor: doric.Color.WHITE, })
backgroundColor: colors[4], }),
textAlignment: doric.Gravity.Center, ]).apply({
height: 50, gravity: doric.Gravity.Center,
}), space: 10,
label('Click me').apply({ }),
width: 200, doric.vlayout([
height: 50, label("Corner,Shadow"),
backgroundColor: colors[0], box().apply({
textSize: 30, width: 100,
textColor: doric.Color.WHITE, height: 100,
layoutConfig: doric.layoutConfig().just(), corners: 10,
onClick: () => { shadow: {
doric.modal(context).prompt({ opacity: 1,
msg: 'This is Prompt.', color: colors[1],
title: 'Prompt title', offsetX: 3,
okLabel: "OkLabel", offsetY: 3,
cancelLabel: 'CancelLabel', radius: 5,
}).then(e => { },
doric.modal(context).toast(`Clicked OK.Input:${e}`); layoutConfig: doric.layoutConfig().just().configMargin({
}, e => { bottom: 10
doric.modal(context).toast(`Clicked Cancel.Input:${e}`); })
}); }),
} ]).apply({
}), gravity: doric.Gravity.Center,
]).apply({ space: 10,
layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT), }),
gravity: doric.Gravity.Center, doric.vlayout([
space: 10, label("Border,Corner,Shadow"),
})).apply({ box().apply({
layoutConfig: doric.layoutConfig().most(), 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
View File

@ -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
View File

File diff suppressed because one or more lines are too long

10
src/shader/DoricViewNode.ts
View File

@ -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
} }
} }