79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
const { Box, DrawingArea } = Widget;
|
|
|
|
const { Gtk } = imports.gi;
|
|
|
|
export default (
|
|
place = 'top left',
|
|
css = 'background-color: black;',
|
|
) => Box({
|
|
hpack: place.includes('left') ? 'start' : 'end',
|
|
vpack: place.includes('top') ? 'start' : 'end',
|
|
css: `
|
|
padding: 1px; margin:
|
|
${place.includes('top') ? '-1px' : '0'}
|
|
${place.includes('right') ? '-1px' : '0'}
|
|
${place.includes('bottom') ? '-1px' : '0'}
|
|
${place.includes('left') ? '-1px' : '0'};
|
|
`,
|
|
child: DrawingArea({
|
|
css: `
|
|
border-radius: 18px;
|
|
border-width: 0.068rem;
|
|
${css}
|
|
`,
|
|
setup: (widget) => {
|
|
let r = widget.get_style_context()
|
|
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
|
|
|
widget.set_size_request(r, r);
|
|
widget.connect('draw', (_, cr) => {
|
|
const c = widget.get_style_context()
|
|
.get_property('background-color', Gtk.StateFlags.NORMAL);
|
|
|
|
r = widget.get_style_context()
|
|
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
|
|
|
const borderColor = widget.get_style_context()
|
|
.get_property('color', Gtk.StateFlags.NORMAL);
|
|
|
|
// You're 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);
|
|
|
|
switch (place) {
|
|
case 'topleft':
|
|
cr.arc(r, r, r, Math.PI, 3 * Math.PI / 2);
|
|
cr.lineTo(0, 0);
|
|
break;
|
|
|
|
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();
|
|
});
|
|
},
|
|
}),
|
|
});
|