81 lines
2 KiB
TypeScript
81 lines
2 KiB
TypeScript
|
const { Box, Button, Icon, Label, Revealer } = Widget;
|
||
|
|
|
||
|
|
|
||
|
|
const ImageClip = (key: number, val: string) => Box({
|
||
|
|
class_name: 'item',
|
||
|
|
name: key.toString(),
|
||
|
|
|
||
|
|
child: Icon({
|
||
|
|
icon: val.replace('img:', ''),
|
||
|
|
size: 100 * 2,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
|
||
|
|
const TextClip = (key: number, val: string) => {
|
||
|
|
const lines = val.split('\n');
|
||
|
|
|
||
|
|
if (lines.length <= 5) {
|
||
|
|
return Box({
|
||
|
|
class_name: 'item',
|
||
|
|
name: key.toString(),
|
||
|
|
|
||
|
|
child: Label({
|
||
|
|
label: val,
|
||
|
|
truncate: 'end',
|
||
|
|
max_width_chars: 100,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const revText = Revealer({
|
||
|
|
hpack: 'start',
|
||
|
|
child: Label({
|
||
|
|
label: lines.slice(2, lines.length).join('\n'),
|
||
|
|
truncate: 'end',
|
||
|
|
max_width_chars: 100,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
|
||
|
|
return Box({
|
||
|
|
class_name: 'item',
|
||
|
|
name: key.toString(),
|
||
|
|
|
||
|
|
vertical: true,
|
||
|
|
children: [
|
||
|
|
Label({
|
||
|
|
label: lines.slice(0, 2).join('\n'),
|
||
|
|
truncate: 'end',
|
||
|
|
max_width_chars: 100,
|
||
|
|
hpack: 'start',
|
||
|
|
}),
|
||
|
|
|
||
|
|
revText,
|
||
|
|
|
||
|
|
Button({
|
||
|
|
child: Icon({
|
||
|
|
class_name: 'down-arrow',
|
||
|
|
icon: 'down-large-symbolic',
|
||
|
|
size: 24,
|
||
|
|
}),
|
||
|
|
|
||
|
|
on_primary_click_release: (self) => {
|
||
|
|
const state = !revText.reveal_child;
|
||
|
|
|
||
|
|
revText.reveal_child = state;
|
||
|
|
|
||
|
|
self.child.setCss(`
|
||
|
|
-gtk-icon-transform: rotate(${state ? '180' : '0'}deg);
|
||
|
|
`);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ({
|
||
|
|
key = 0,
|
||
|
|
isImage = false,
|
||
|
|
val = '',
|
||
|
|
}) => isImage ? ImageClip(key, val) : TextClip(key, val);
|