nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

launcher: add round style

Browse source
This commit is contained in:
2 * r + 2 * t 2025-04-01 16:24:06 +11:00
parent 9baca0e61b
commit 3d4577044e
6 changed files with 147 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
scss/launcher.scss
View file

@ -13,29 +13,53 @@
background-color: color.change($colour, $alpha: 0.7);
}
.search-bar {
.mode {
@include lib.border($colour, $width: 2);
.result:focus {
color: $colour;
.sublabel {
color: color.mix(scheme.$subtext0, $colour, 60%);
}
}
&.lines {
.search-bar {
.mode {
@include lib.border($colour, $width: 2);
}
.entry {
border-bottom: lib.s(2) solid $colour;
}
}
.entry {
.mode-switcher .mode {
&.selected {
border-top: lib.s(2) solid $colour;
}
&:hover,
&:focus {
color: $colour;
}
&:active {
color: color.mix($colour, scheme.$base, 80%);
}
}
.result:focus {
border-bottom: lib.s(2) solid $colour;
}
}
.mode-switcher .mode {
&.selected {
border-top: lib.s(2) solid $colour;
&.round {
.search-bar .mode {
background-color: $colour;
}
&:hover,
&:focus {
.mode-switcher .mode.selected {
color: $colour;
}
&:active {
color: color.mix($colour, scheme.$base, 80%);
}
}
}
}
@ -65,14 +89,19 @@
@include lib.rounded(5);
@include lib.element-decel;
padding: lib.s(5);
padding: lib.s(5) lib.s(10);
@include lib.spacing(3);
.icon {
font-size: lib.s(20);
}
}
}
.mode-switcher .mode {
@include lib.element-decel;
border-top: lib.s(2) solid transparent;
padding-top: lib.s(10);
.icon {
@ -87,7 +116,6 @@
.result {
@include lib.element-decel;
border-bottom: lib.s(2) solid transparent;
padding-left: lib.s(10);
.icon {
@ -99,6 +127,8 @@
}
.sublabel {
@include lib.element-decel;
color: scheme.$subtext0;
font-size: lib.s(14);
}
@ -115,17 +145,8 @@
background-color: scheme.$surface0;
}
&:focus {
border-bottom: lib.s(2) solid scheme.$red;
color: scheme.$red;
.sublabel {
color: color.mix(scheme.$red, scheme.$base, 70%);
}
}
&:active {
background-color: scheme.$surface1;
background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
}
}
@ -140,6 +161,8 @@
}
.swatches {
margin-bottom: lib.s(5);
@include lib.spacing(3);
}
@ -168,8 +191,6 @@
}
.wallpaper {
margin: lib.s(3) 0;
.thumbnail {
background-size: cover;
background-position: center;
@ -211,4 +232,89 @@
min-height: lib.s(160);
}
}
&.lines {
.mode-switcher .mode {
border-top: lib.s(2) solid transparent;
}
.result {
border-bottom: lib.s(2) solid transparent;
}
}
&.round {
.search-bar {
.mode {
@include lib.rounded(10);
color: color.change(scheme.$base, $alpha: 1);
.icon {
color: color.change(scheme.$base, $alpha: 1);
}
}
.entry {
@include lib.rounded(10);
padding: lib.s(5) lib.s(10);
background-color: color.mix(scheme.$base, scheme.$surface0, 30%);
}
}
.mode-switcher {
padding-top: lib.s(10);
@include lib.spacing(10);
.mode {
@include lib.rounded(10);
padding: lib.s(5);
background-color: color.mix(scheme.$base, scheme.$surface0, 50%);
&:not(.selected) .icon {
color: scheme.$text;
}
&:hover,
&:focus {
background-color: scheme.$surface0;
}
&:active {
background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
}
}
}
.result {
@include lib.rounded(10);
padding-right: lib.s(10);
margin-bottom: lib.s(5);
margin-right: lib.s(5);
&:focus {
background-color: scheme.$surface0;
}
}
.math .preview .result {
@include lib.rounded(20);
background-color: scheme.$surface0;
padding: lib.s(5) lib.s(10);
}
.wallpaper-container {
padding-right: 0;
.wallpaper:not(.compact) {
padding-top: lib.s(8);
padding-bottom: lib.s(3);
}
}
}
}

3
src/config/defaults.ts
View file

@ -8,7 +8,7 @@ export default {
// Modules
bar: {
vertical: true,
style: "gaps",
style: "gaps", // One of "gaps", "panel", "embedded"
modules: {
osIcon: {
enabled: true,
@ -49,6 +49,7 @@ export default {
},
},
launcher: {
style: "lines", // One of "lines", "round"
actionPrefix: ">", // Prefix for launcher actions
apps: {
maxResults: 30, // Actual max results, -1 for infinite

1
src/config/types.ts
View file

@ -25,6 +25,7 @@ export default {
"bar.modules.dateTime.detailedFormat": STR,
"bar.modules.power.enabled": BOOL,
// Launcher
"launcher.style": ["lines", "round"],
"launcher.actionPrefix": STR,
"launcher.apps.maxResults": NUM,
"launcher.files.maxResults": NUM,

4
src/modules/launcher/actions.tsx
View file

@ -304,7 +304,7 @@ const Scheme = ({ scheme, name, colours }: { scheme?: string; name: string; colo
const Wallpaper = ({ path, thumbnail }: IWallpaper) => (
<Gtk.FlowBoxChild visible canFocus={false}>
<button
className="result"
className="result wallpaper-container"
cursor="pointer"
onClicked={() => {
execAsync(`caelestia wallpaper -f ${path}`).catch(console.error);
@ -326,7 +326,7 @@ const Wallpaper = ({ path, thumbnail }: IWallpaper) => (
const Category = ({ path, wallpapers }: ICategory) => (
<Gtk.FlowBoxChild visible canFocus={false}>
<button
className="result"
className="result wallpaper-container"
cursor="pointer"
onClicked={() => {
execAsync(`caelestia wallpaper -d ${path}`).catch(console.error);

9
src/modules/launcher/index.tsx
View file

@ -24,7 +24,10 @@ const isAction = (text: string, action: string = "") => text.startsWith(config.a
const SearchBar = ({ mode, entry }: { mode: Variable<Mode>; entry: Widget.Entry }) => (
<box className="search-bar">
<label className="mode" label={bind(mode)} />
<box className="mode">
<label className="icon" label={bind(mode).as(getModeIcon)} />
<label label={bind(mode).as(getPrettyMode)} />
</box>
{entry}
</box>
);
@ -61,6 +64,7 @@ export default class Launcher extends PopupWindow {
const mode = Variable<Mode>("apps");
const content = Modes();
const actions = new Actions(mode, entry);
const className = Variable.derive([mode, config.style], (m, s) => `launcher ${m} ${s}`);
super({
name: "launcher",
@ -86,7 +90,8 @@ export default class Launcher extends PopupWindow {
vertical
halign={Gtk.Align.CENTER}
valign={Gtk.Align.CENTER}
className={bind(mode).as(m => `launcher ${m}`)}
className={bind(className)}
onDestroy={() => className.drop()}
>
<SearchBar mode={mode} entry={entry} />
<stack

2
src/modules/launcher/modes.tsx
View file

@ -186,7 +186,7 @@ class Math extends Widget.Box implements LauncherContent {
/>
</box>
</box>
<box className="separator" />
<box visible={bind(config.style).as(s => s === "lines")} className="separator" />
</box>
</revealer>
);