refactor(ags launcher): clean up stuff and fix label vpack
This commit is contained in:
parent
c6cd289046
commit
d4b5232339
3 changed files with 42 additions and 69 deletions
|
@ -1,31 +1,13 @@
|
||||||
import App from 'resource:///com/github/Aylur/ags/app.js';
|
import App from 'resource:///com/github/Aylur/ags/app.js';
|
||||||
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
|
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
|
||||||
|
|
||||||
import { Box, Button, CenterBox, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
|
import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
import { lookUpIcon } from 'resource:///com/github/Aylur/ags/utils.js';
|
import { lookUpIcon } from 'resource:///com/github/Aylur/ags/utils.js';
|
||||||
|
|
||||||
import Separator from '../misc/separator.js';
|
import EventBox from '../misc/cursorbox.js';
|
||||||
|
|
||||||
const ENTRY_SPACING = 16;
|
|
||||||
|
|
||||||
export default (app) => {
|
export default (app) => {
|
||||||
const title = Label({
|
|
||||||
class_name: 'title',
|
|
||||||
label: app.name,
|
|
||||||
xalign: 0,
|
|
||||||
vpack: 'center',
|
|
||||||
truncate: 'end',
|
|
||||||
});
|
|
||||||
|
|
||||||
const description = Label({
|
|
||||||
class_name: 'description',
|
|
||||||
label: app.description || '',
|
|
||||||
wrap: true,
|
|
||||||
xalign: 0,
|
|
||||||
justification: 'left',
|
|
||||||
vpack: 'center',
|
|
||||||
});
|
|
||||||
|
|
||||||
const icon = Icon({
|
const icon = Icon({
|
||||||
icon: lookUpIcon(app.icon_name) ?
|
icon: lookUpIcon(app.icon_name) ?
|
||||||
app.icon_name :
|
app.icon_name :
|
||||||
|
@ -35,15 +17,32 @@ export default (app) => {
|
||||||
size: 42,
|
size: 42,
|
||||||
});
|
});
|
||||||
|
|
||||||
const textBox = CenterBox({
|
const textBox = Box({
|
||||||
vertical: true,
|
vertical: true,
|
||||||
start_widget: title,
|
vpack: 'start',
|
||||||
center_widget: description,
|
|
||||||
end_widget: Separator(ENTRY_SPACING, { vertical: true }),
|
children: [
|
||||||
|
Label({
|
||||||
|
class_name: 'title',
|
||||||
|
label: app.name,
|
||||||
|
xalign: 0,
|
||||||
|
truncate: 'end',
|
||||||
|
}),
|
||||||
|
|
||||||
|
Label({
|
||||||
|
class_name: 'description',
|
||||||
|
label: app.description || '',
|
||||||
|
wrap: true,
|
||||||
|
xalign: 0,
|
||||||
|
justification: 'left',
|
||||||
|
}),
|
||||||
|
|
||||||
|
Label(),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return Button({
|
return EventBox({
|
||||||
hexpand: true,
|
hexpand: true,
|
||||||
class_name: 'app',
|
class_name: 'app',
|
||||||
|
|
||||||
|
@ -60,7 +59,6 @@ export default (app) => {
|
||||||
child: Box({
|
child: Box({
|
||||||
children: [
|
children: [
|
||||||
icon,
|
icon,
|
||||||
Separator(ENTRY_SPACING),
|
|
||||||
textBox,
|
textBox,
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -7,15 +7,13 @@ import { Fzf } from '../../node_modules/fzf/dist/fzf.es.js';
|
||||||
import { Box, Entry, Icon, Label, ListBox, Scrollable } from 'resource:///com/github/Aylur/ags/widget.js';
|
import { Box, Entry, Icon, Label, ListBox, Scrollable } from 'resource:///com/github/Aylur/ags/widget.js';
|
||||||
|
|
||||||
import PopupWindow from '../misc/popup.js';
|
import PopupWindow from '../misc/popup.js';
|
||||||
import Separator from '../misc/separator.js';
|
|
||||||
import AppItem from './app-item.js';
|
import AppItem from './app-item.js';
|
||||||
|
|
||||||
|
|
||||||
const Applauncher = ({ window_name = 'applauncher' } = {}) => {
|
const Applauncher = ({ window_name = 'applauncher' } = {}) => {
|
||||||
const ICON_SEPARATION = 4;
|
|
||||||
|
|
||||||
let fzfResults;
|
let fzfResults;
|
||||||
const list = ListBox();
|
const list = ListBox();
|
||||||
|
|
||||||
const setSort = (text) => {
|
const setSort = (text) => {
|
||||||
const fzf = new Fzf(Applications.list, {
|
const fzf = new Fzf(Applications.list, {
|
||||||
selector: (app) => app.name,
|
selector: (app) => app.name,
|
||||||
|
@ -25,8 +23,8 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
|
||||||
|
|
||||||
fzfResults = fzf.find(text);
|
fzfResults = fzf.find(text);
|
||||||
list.set_sort_func((a, b) => {
|
list.set_sort_func((a, b) => {
|
||||||
const row1 = a.get_children()[0].children[1]?.app.name;
|
const row1 = a.get_children()[0]?.app.name;
|
||||||
const row2 = b.get_children()[0].children[1]?.app.name;
|
const row2 = b.get_children()[0]?.app.name;
|
||||||
|
|
||||||
if (!row1 || !row2) {
|
if (!row1 || !row2) {
|
||||||
return 0;
|
return 0;
|
||||||
|
@ -42,22 +40,13 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
|
||||||
ch.destroy();
|
ch.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
[...Applications.query('').flatMap((app) => {
|
const children = Applications.query('')
|
||||||
const item = AppItem(app);
|
.flatMap((app) => AppItem(app));
|
||||||
|
|
||||||
return Box({
|
children.forEach((ch) => {
|
||||||
children: [
|
|
||||||
Separator(ICON_SEPARATION, {
|
|
||||||
binds: [['visible', item, 'visible']],
|
|
||||||
}),
|
|
||||||
item,
|
|
||||||
],
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
Separator(ICON_SEPARATION)]
|
|
||||||
.forEach(((ch) => {
|
|
||||||
list.add(ch);
|
list.add(ch);
|
||||||
}));
|
});
|
||||||
|
list.show_all();
|
||||||
};
|
};
|
||||||
|
|
||||||
makeNewChildren();
|
makeNewChildren();
|
||||||
|
@ -90,7 +79,7 @@ const Applauncher = ({ window_name = 'applauncher' } = {}) => {
|
||||||
list.get_children().forEach((row) => {
|
list.get_children().forEach((row) => {
|
||||||
row.changed();
|
row.changed();
|
||||||
|
|
||||||
const item = row.get_children()[0].children[1];
|
const item = row.get_children()[0];
|
||||||
|
|
||||||
if (item?.app) {
|
if (item?.app) {
|
||||||
const isMatching = fzfResults.find((r) => {
|
const isMatching = fzfResults.find((r) => {
|
||||||
|
|
|
@ -77,27 +77,7 @@
|
||||||
.app {
|
.app {
|
||||||
all: unset;
|
all: unset;
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
padding: 2px 9px;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: rgba($contrast-bg, 0.5);
|
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #f8f8f2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
.title {
|
|
||||||
color: $contrast-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
-gtk-icon-shadow: 2px 2px $contrast-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
|
@ -113,10 +93,16 @@
|
||||||
|
|
||||||
image {
|
image {
|
||||||
transition: 200ms;
|
transition: 200ms;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: rgba($contrast-bg, 0.5);
|
||||||
|
box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
*:selected {
|
*:selected, .app:hover, .app:focus {
|
||||||
* {
|
* {
|
||||||
font-weight: unset;
|
font-weight: unset;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue