fix(ags corners): fix standalone corners not showing
This commit is contained in:
parent
d8cdcda982
commit
cfeba78d79
1 changed files with 55 additions and 48 deletions
|
@ -2,64 +2,71 @@ import { Widget } from '../imports.js';
|
|||
const { Gtk } = imports.gi;
|
||||
const Lang = imports.lang;
|
||||
|
||||
export const RoundedCorner = (place, props) => Widget({
|
||||
...props,
|
||||
type: Gtk.DrawingArea,
|
||||
export const RoundedCorner = (place, props) => Widget.Box({
|
||||
halign: place.includes('left') ? 'start' : 'end',
|
||||
valign: place.includes('top') ? 'start' : 'end',
|
||||
setup: widget => {
|
||||
const r = widget.get_style_context()
|
||||
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
|
||||
widget.set_size_request(r, r);
|
||||
widget.connect('draw', Lang.bind(widget, (widget, cr) => {
|
||||
const c = widget.get_style_context()
|
||||
.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
valign: place.includes('top') ? 'start' : 'end',
|
||||
style: `padding: 1px; margin:
|
||||
${place.includes('top') ? '-1px' : '0'}
|
||||
${place.includes('right') ? '-1px' : '0'}
|
||||
${place.includes('bottom') ? '-1px' : '0'}
|
||||
${place.includes('left') ? '-1px' : '0'};`,
|
||||
child: Widget({
|
||||
...props,
|
||||
type: Gtk.DrawingArea,
|
||||
setup: widget => {
|
||||
const r = widget.get_style_context()
|
||||
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const borderColor = widget.get_style_context()
|
||||
.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
// ur going to write border-width: something anyway
|
||||
const borderWidth = widget.get_style_context()
|
||||
.get_border(Gtk.StateFlags.NORMAL).left;
|
||||
widget.set_size_request(r, r);
|
||||
widget.connect('draw', Lang.bind(widget, (widget, cr) => {
|
||||
const c = widget.get_style_context()
|
||||
.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
switch (place) {
|
||||
case 'topleft':
|
||||
cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
|
||||
cr.lineTo(0, 0);
|
||||
break;
|
||||
const r = widget.get_style_context()
|
||||
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
|
||||
case 'topright':
|
||||
cr.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
|
||||
cr.lineTo(r, 0);
|
||||
break;
|
||||
const borderColor = widget.get_style_context()
|
||||
.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
case 'bottomleft':
|
||||
cr.arc(r, 0, r, Math.PI / 2, Math.PI);
|
||||
cr.lineTo(0, r);
|
||||
break;
|
||||
// ur going to write border-width: something anyway
|
||||
const borderWidth = widget.get_style_context()
|
||||
.get_border(Gtk.StateFlags.NORMAL).left;
|
||||
widget.set_size_request(r, r);
|
||||
|
||||
case 'bottomright':
|
||||
cr.arc(0, 0, r, 0, Math.PI / 2);
|
||||
cr.lineTo(r, r);
|
||||
break;
|
||||
}
|
||||
switch (place) {
|
||||
case 'topleft':
|
||||
cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
|
||||
cr.lineTo(0, 0);
|
||||
break;
|
||||
|
||||
cr.closePath();
|
||||
cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha);
|
||||
cr.fill();
|
||||
cr.setLineWidth(borderWidth);
|
||||
cr.setSourceRGBA(borderColor.red,
|
||||
borderColor.green,
|
||||
borderColor.blue,
|
||||
borderColor.alpha);
|
||||
cr.stroke();
|
||||
}));
|
||||
},
|
||||
case 'topright':
|
||||
cr.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI);
|
||||
cr.lineTo(r, 0);
|
||||
break;
|
||||
|
||||
case 'bottomleft':
|
||||
cr.arc(r, 0, r, Math.PI / 2, Math.PI);
|
||||
cr.lineTo(0, r);
|
||||
break;
|
||||
|
||||
case 'bottomright':
|
||||
cr.arc(0, 0, r, 0, Math.PI / 2);
|
||||
cr.lineTo(r, r);
|
||||
break;
|
||||
}
|
||||
|
||||
cr.closePath();
|
||||
cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha);
|
||||
cr.fill();
|
||||
cr.setLineWidth(borderWidth);
|
||||
cr.setSourceRGBA(borderColor.red,
|
||||
borderColor.green,
|
||||
borderColor.blue,
|
||||
borderColor.alpha);
|
||||
cr.stroke();
|
||||
}));
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
export const Topleft = () => Widget.Window({
|
||||
|
|
Loading…
Reference in a new issue