⚡ chore(apps-window): improvements to the style and flowbox stuff
also fixes opening app when clicking on empty space
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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, "&"),
|
: ""}`.replace(/\&/g, "&"),
|
||||||
|
|||||||
Reference in New Issue
Block a user