chore(apps-window): improvements to the style and flowbox stuff

also fixes opening app when clicking on empty space
This commit is contained in:
retrozinndev
2025-06-15 10:11:53 -03:00
parent 143a4c92b2
commit 52c1659adb
2 changed files with 16 additions and 15 deletions
+7 -3
View File
@@ -4,14 +4,18 @@
@use "./functions"; @use "./functions";
.apps-window-container { .apps-window-container {
padding: 24px; $radius: 48px;
padding: 28px;
background: colors.$bg-translucent; background: colors.$bg-translucent;
border-radius: 32px 32px 0 0; border-radius: $radius $radius 0 0;
& > entry { & > entry {
background: rgba(colors.$bg-primary, .4); background: rgba(colors.$bg-primary, .4);
margin-bottom: 32px; margin-bottom: 32px;
min-width: 400px; min-width: 450px;
padding: 14px;
border-radius: 18px;
} }
& flowbox { & flowbox {
+9 -12
View File
@@ -11,11 +11,11 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
}); });
let results: Array<AstalApps.Application> = []; let results: Array<AstalApps.Application> = [];
const flowboxConnections: Array<number> = [];
const flowboxConnections: Array<number> = [];
const flowbox = new Gtk.FlowBox({ const flowbox = new Gtk.FlowBox({
rowSpacing: 6, rowSpacing: 60,
columnSpacing: 6, columnSpacing: 60,
homogeneous: true, homogeneous: true,
visible: true, visible: true,
minChildrenPerLine: 1, minChildrenPerLine: 1,
@@ -36,17 +36,14 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
a.name > b.name ? 1 : -1); a.name > b.name ? 1 : -1);
else results = getAstalApps().fuzzy_query(str); else results = getAstalApps().fuzzy_query(str);
// Destroy is handled by GnomeJS flowbox.get_children().map(flowboxChild =>
flowbox.get_children().map(flowboxChild => flowbox.remove(flowboxChild)); flowbox.remove(flowboxChild));
results.map(app => { results.map(app => {
flowbox.insert(AppWidget(app), -1); flowbox.insert(AppWidget(app), -1);
const flowboxchild = flowbox.get_child_at_index(flowbox.get_children().length-1)!.get_child(); const child = flowbox.get_child_at_index(flowbox.get_children().length - 1);
if(!flowboxchild) return; child?.set_valign(Gtk.Align.START);
flowboxchild.set_valign(Gtk.Align.START);
flowboxchild.set_halign(Gtk.Align.START);
}); });
const firstChild = flowbox.get_child_at_index(0); const firstChild = flowbox.get_child_at_index(0);
@@ -58,9 +55,9 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
// Astal3.Button doesn't work the way I need, so I'll use normal GtkButton // Astal3.Button doesn't work the way I need, so I'll use normal GtkButton
const button = new Gtk.Button({ const button = new Gtk.Button({
visible: true, visible: true,
widthRequest: 180, // widthRequest: 180,
heightRequest: 140, heightRequest: 140,
expand: false, expand: true,
tooltipMarkup: `${app.name}${app.description ? tooltipMarkup: `${app.name}${app.description ?
`\n<span foreground="#7f7f7f">${app.description}</span>` `\n<span foreground="#7f7f7f">${app.description}</span>`
: ""}`.replace(/\&/g, "&amp;"), : ""}`.replace(/\&/g, "&amp;"),