tux/tpanel
1
0
Fork 0
mirror of https://github.com/tuxdotrs/tpanel.git synced 2025-10-10 12:51:54 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: add minimal styles

Browse Source
This commit is contained in:
tux
2025-06-16 23:16:07 +05:30
parent e93f98d154
commit db99f77c26
2 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
widgets/app-launcher/index.tsx
View File

@@ -14,7 +14,7 @@ const hide = () => {
const AppButton = ({ app }: { app: AstalApps.Application }) => { const AppButton = ({ app }: { app: AstalApps.Application }) => {
return ( return (
<button <button
cssClasses={["app-button"]} cssClasses={["button"]}
onClicked={() => { onClicked={() => {
hide(); hide();
app.launch(); app.launch();
@@ -33,7 +33,7 @@ const AppList = () => {
return ( return (
<Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={300}> <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={300}>
<box vertical spacing={6} cssClasses={["app-list"]}> <box vertical spacing={6} cssClasses={["list"]}>
{appList.as((list) => list.map((app) => <AppButton app={app} />))} {appList.as((list) => list.map((app) => <AppButton app={app} />))}
</box> </box>
</Gtk.ScrolledWindow> </Gtk.ScrolledWindow>
@@ -46,36 +46,26 @@ const AppSearch = () => {
hide(); hide();
}; };
return ( return (
<overlay cssClasses={["entry-overlay"]} heightRequest={100}> <entry
<Gtk.ScrolledWindow heightRequest={100}> cssClasses={["search"]}
<Picture vexpand
file={Gio.file_new_for_path("/home/tux/Wallpapers/5m5kLI9.png")} text={text.get()}
contentFit={Gtk.ContentFit.COVER} placeholderText="Search..."
overflow={Gtk.Overflow.HIDDEN} onChanged={(self) => text.set(self.text)}
/> onActivate={onEnter}
</Gtk.ScrolledWindow> setup={(self) => {
<entry hook(self, App, "window-toggled", (_, win) => {
type="overlay" const winName = win.name;
vexpand const visible = win.visible;
text={text.get()}
primaryIconName={"system-search-symbolic"}
placeholderText="Search..."
onChanged={(self) => text.set(self.text)}
onActivate={onEnter}
setup={(self) => {
hook(self, App, "window-toggled", (_, win) => {
const winName = win.name;
const visible = win.visible;
if (winName == WINDOW_NAME && visible) { if (winName == WINDOW_NAME && visible) {
text.set(""); text.set("");
self.set_text(""); self.set_text("");
self.grab_focus(); self.grab_focus();
} }
}); });
}} }}
/> />
</overlay>
); );
}; };
@@ -96,6 +86,7 @@ export const AppLauncher = (gdkmonitor: Gdk.Monitor) => {
> >
<box vertical spacing={6}> <box vertical spacing={6}>
<AppSearch /> <AppSearch />
<Gtk.Separator orientation={Gtk.Orientation.HORIZONTAL} />
<AppList /> <AppList />
</box> </box>
</window> </window>

20
widgets/app-launcher/style.scss
View File

@@ -3,12 +3,28 @@ window.app-launcher {
border-radius: $rounded; border-radius: $rounded;
padding: 10px; padding: 10px;
.app-list { .search {
min-width: 300px;
padding: 10px;
color: rgba($fg-color, 0.5);
}
separator {
border: 1px solid rgba($inactive-color, 0.5);
}
.list {
background: $bg-color; background: $bg-color;
} }
.app-button { .button {
border-radius: $rounded; border-radius: $rounded;
padding: 10px;
&:hover,
&:focus {
background: $inactive-color;
}
} }
.name { .name {