LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add timestamp to notifications and add styling to menu button

Browse Source
This commit is contained in:
Jas Singh
2024-07-02 23:58:49 -07:00
parent 5846470441
commit 2a0be05a2b
10 changed files with 159 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
modules/bar/index.js
View File

@@ -27,7 +27,7 @@ const Left = (monitor, wsMap) => {
class_name: "box-left", class_name: "box-left",
hpack: "start", hpack: "start",
spacing: 5, spacing: 5,
children: [Menu(), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())], children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())],
}); });
}; };
@@ -64,7 +64,7 @@ const LeftAlt = (monitor, wsMap) => {
class_name: "box-left", class_name: "box-left",
hpack: "start", hpack: "start",
spacing: 5, spacing: 5,
children: [Menu(), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())], children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())],
}); });
}; };
@@ -74,7 +74,6 @@ const CenterAlt = () => {
spacing: 5, spacing: 5,
children: [ children: [
BarItemBox(Media()), BarItemBox(Media()),
// BarItemBox(Notification())
], ],
}); });
}; };

15
modules/bar/menu/index.js
View File

@@ -1,13 +1,18 @@
import { exec } from "resource:///com/github/Aylur/ags/utils.js"; import { exec } from "resource:///com/github/Aylur/ags/utils.js";
export const Menu = () => { const Menu = () => {
return Widget.Box({ return {
child: Widget.Button({ component: Widget.Box({
on_primary_click: () => exec('/home/jaskir/.config/hypr/scripts/rofi.sh'),
child: Widget.Label({ child: Widget.Label({
class_name: "bar-menu_label", class_name: "bar-menu_label",
label: "󰣇", label: "󰣇",
}), }),
}), }),
}); isVisible: true,
props: {
on_primary_click: () => exec("/home/jaskir/.config/hypr/scripts/rofi.sh"),
},
};
}; };
export { Menu };

31
modules/menus/notifications/index.js
View File

@@ -1,9 +1,11 @@
import PopupWindow from "../PopupWindow.js"; import PopupWindow from "../PopupWindow.js";
const notifs = await Service.import("notifications"); const notifs = await Service.import("notifications");
import icons from "../../icons/index.js"; import icons from "../../icons/index.js";
import GLib from "gi://GLib";
export default () => { export default () => {
notifs.popupTimeout = 5000; const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return PopupWindow({ return PopupWindow({
name: "notificationsmenu", name: "notificationsmenu",
@@ -141,9 +143,11 @@ export default () => {
]; ];
} }
return [Widget.Box({ return [
class_name: "spacer" Widget.Box({
})]; class_name: "spacer",
}),
];
}; };
const NotificationIcon = ({ const NotificationIcon = ({
@@ -219,6 +223,12 @@ export default () => {
vertical: false, vertical: false,
hexpand: true, hexpand: true,
children: [ children: [
Widget.Box({
class_name:
"notification-card-header menu",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({ Widget.Box({
class_name: class_name:
"notification-card-header menu", "notification-card-header menu",
@@ -232,8 +242,8 @@ export default () => {
hexpand: true, hexpand: true,
vexpand: true, vexpand: true,
max_width_chars: !notifHasImg(notif) max_width_chars: !notifHasImg(notif)
? 27 ? 34
: 20, : 26,
truncate: "end", truncate: "end",
wrap: true, wrap: true,
label: notif["summary"], label: notif["summary"],
@@ -243,9 +253,14 @@ export default () => {
Widget.Box({ Widget.Box({
class_name: class_name:
"notification-card-header menu", "notification-card-header menu",
hexpand: true,
hpack: "end", hpack: "end",
children: [NotificationIcon(notif)], vpack: "start",
hexpand: true,
child: Widget.Label({
vexpand: true,
class_name: "notification-time",
label: time(notif.time),
}),
}), }),
], ],
}), }),

23
modules/notifications/index.js
View File

@@ -1,9 +1,13 @@
const notifs = await Service.import("notifications"); const notifs = await Service.import("notifications");
import GLib from "gi://GLib";
import icons from "../icons/index.js"; import icons from "../icons/index.js";
export default () => { export default () => {
notifs.popupTimeout = 7000; notifs.popupTimeout = 7000;
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return Widget.Window({ return Widget.Window({
name: "notifications-window", name: "notifications-window",
class_name: "notifications-window", class_name: "notifications-window",
@@ -122,9 +126,15 @@ export default () => {
vertical: false, vertical: false,
hexpand: true, hexpand: true,
children: [ children: [
Widget.Box({
class_name: "notification-card-header",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({ Widget.Box({
class_name: "notification-card-header", class_name: "notification-card-header",
hexpand: true, hexpand: true,
hpack: "start",
vpack: "start", vpack: "start",
children: [ children: [
Widget.Label({ Widget.Label({
@@ -132,7 +142,7 @@ export default () => {
hpack: "start", hpack: "start",
hexpand: true, hexpand: true,
vexpand: true, vexpand: true,
max_width_chars: !notifHasImg(notif) ? 27 : 20, max_width_chars: !notifHasImg(notif) ? 30 : 23,
truncate: "end", truncate: "end",
wrap: true, wrap: true,
label: notif["summary"], label: notif["summary"],
@@ -140,10 +150,15 @@ export default () => {
], ],
}), }),
Widget.Box({ Widget.Box({
class_name: "notification-card-header", class_name: "notification-card-header menu",
hexpand: true,
hpack: "end", hpack: "end",
children: [NotificationIcon(notif)], vpack: "start",
hexpand: true,
child: Widget.Label({
vexpand: true,
class_name: "notification-time",
label: time(notif.time),
}),
}), }),
], ],
}), }),

3
scss/bar/menu.scss
View File

@@ -2,6 +2,5 @@
.bar-menu_label { .bar-menu_label {
color: $teal; color: $teal;
margin-right: 1.5rem; font-size: 1.3em;
font-size: 2rem;
} }

4
scss/menus/media.scss
View File

@@ -15,8 +15,8 @@
.media-indicator-current-album-cover { .media-indicator-current-album-cover {
border-radius: 0.25em; border-radius: 0.25em;
min-width: 8.5em; min-width: 9.5em;
min-height: 8.5em; min-height: 9.5em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

50
scss/menus/notifications.scss
View File

@@ -7,70 +7,70 @@
background: $crust; background: $crust;
border: 0.13em solid $surface0; border: 0.13em solid $surface0;
border-radius: 0.7em; border-radius: 0.7em;
} margin-right: 0.45em;
.window-content.notificationsmenu-window { .window-content.notificationsmenu-window {
margin-right: 0.50em; margin-right: 0.50em;
} }
.menu-content-container.notifications { .menu-content-container.notifications {
margin: 1.35em; margin: 1.35em;
margin-bottom: 0em; margin-bottom: 0em;
min-height: 4em; min-height: 4em;
} }
.notification-menu-controls { .notification-menu-controls {
background: $base; background: $base;
margin: 1em 1.3em; margin: 1em 1.3em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.4em; border-radius: 0.4em;
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
} }
.notification-card.menu { .notification-card.menu {
background: $base; background: $base;
border: 0.15em solid $base; border: 0.15em solid $base;
border-radius: 0em; border-radius: 0em;
border-bottom-left-radius: 0.4em; border-bottom-left-radius: 0.4em;
border-top-left-radius: 0.4em; border-top-left-radius: 0.4em;
margin: 0em; margin: 0em;
} }
.notification-card-content-container { .notification-card-content-container {
margin-bottom: 1em; margin-bottom: 1em;
} }
.notification-card-content {
margin-bottom: 0.25em;
}
.menu-label-container.notifications { .menu-label.notifications {
margin: 0em;
padding: 0em;
}
.menu-label.notifications {
margin: 0em; margin: 0em;
color: $lavender; color: $lavender;
} }
.menu-separator.notification-controls { .menu-separator.notification-controls {
min-width: 0.1em; min-width: 0.1em;
background-color: $surface0; background-color: $surface0;
margin: 0em 1em; margin: 0em 1em;
} }
.menu-switch.notifications:checked { .menu-switch.notifications:checked {
&:checked { &:checked {
background: $lavender; background: $lavender;
} }
} }
.clear-notifications-button { .clear-notifications-button {
margin-right: 0.3em; margin-right: 0.3em;
&:hover label { &:hover label {
color: $maroon; color: $maroon;
} }
} }
.clear-notifications-label { .clear-notifications-label {
color: $red; color: $red;
font-size: 1.5em; font-size: 1.5em;
}
} }

27
scss/notifications/popups.scss
View File

@@ -7,10 +7,10 @@
color: $text; color: $text;
background: $mantle; background: $mantle;
margin-right: 0.45em; margin-right: 0.45em;
border: 0.15em solid $surface0; border: 0.15em solid transparentize($surface0, 0.5);
min-width: 23.5em; min-width: 26em;
min-height: 6rem; min-height: 6rem;
border-radius: 0.3em; border-radius: 0.6em;
&:not(:first-child) { &:not(:first-child) {
margin-top: 0.85em; margin-top: 0.85em;
@@ -28,8 +28,8 @@
} }
.notification-card-image { .notification-card-image {
border-radius: 0.4em; border-radius: 0.4em;
min-width: 2.5em; min-width: 1.5em;
min-height: 2.5em; min-height: 1.5em;
padding: 0.85em 0.85em; padding: 0.85em 0.85em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -40,11 +40,12 @@
min-width: 2.9em; min-width: 2.9em;
min-height: 2.9em; min-height: 2.9em;
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
margin-right: 1rem; margin-right: 0.5rem;
margin-bottom: 0.5rem;
} }
.notification-card-content.noimg { .notification-card-content.noimg {
margin-left: 1.3em; margin-left: 0.5em;
margin-top: .15em; margin-top: .15em;
} }
@@ -56,11 +57,12 @@
.notification-card-body-label { .notification-card-body-label {
font-size: 0.84em; font-size: 0.84em;
margin-bottom: 1em;
font-weight: 600; font-weight: 600;
} }
.notification-card-actions { .notification-card-actions {
margin-top: 0.95em; margin-top: 0.25em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
@@ -85,6 +87,11 @@
font-size: 1.3em; font-size: 1.3em;
} }
.notification-time {
font-size: 0.85em;
color: $overlay1;
}
.close-notification-button { .close-notification-button {
background: $red; background: $red;
color: $crust; color: $crust;
@@ -99,7 +106,3 @@
background: $maroon; background: $maroon;
} }
} }
.spacer {
margin-bottom: 0.75em;
}

73
style.css
View File

@@ -276,8 +276,7 @@ spinner:checked {
.bar-menu_label { .bar-menu_label {
color: #94e2d5; color: #94e2d5;
margin-right: 1.5rem; font-size: 1.3em;
font-size: 2rem;
} }
.bar-volume_icon { .bar-volume_icon {
@@ -992,8 +991,8 @@ window#powermenu .powermenu.box {
} }
.menu-items-container.media .media-indicator-current-album-cover { .menu-items-container.media .media-indicator-current-album-cover {
border-radius: 0.25em; border-radius: 0.25em;
min-width: 8.5em; min-width: 9.5em;
min-height: 8.5em; min-height: 9.5em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -1071,27 +1070,24 @@ window#powermenu .powermenu.box {
background: #11111b; background: #11111b;
border: 0.13em solid #313244; border: 0.13em solid #313244;
border-radius: 0.7em; border-radius: 0.7em;
margin-right: 0.45em;
} }
.notification-card-container.menu .window-content.notificationsmenu-window {
.window-content.notificationsmenu-window {
margin-right: 0.5em; margin-right: 0.5em;
} }
.notification-card-container.menu .menu-content-container.notifications {
.menu-content-container.notifications {
margin: 1.35em; margin: 1.35em;
margin-bottom: 0em; margin-bottom: 0em;
min-height: 4em; min-height: 4em;
} }
.notification-card-container.menu .notification-menu-controls {
.notification-menu-controls {
background: #1e1e2e; background: #1e1e2e;
margin: 1em 1.3em; margin: 1em 1.3em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.4em; border-radius: 0.4em;
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
} }
.notification-card-container.menu .notification-card.menu {
.notification-card.menu {
background: #1e1e2e; background: #1e1e2e;
border: 0.15em solid #1e1e2e; border: 0.15em solid #1e1e2e;
border-radius: 0em; border-radius: 0em;
@@ -1099,39 +1095,31 @@ window#powermenu .powermenu.box {
border-top-left-radius: 0.4em; border-top-left-radius: 0.4em;
margin: 0em; margin: 0em;
} }
.notification-card-container.menu .notification-card-content-container {
.notification-card-content-container {
margin-bottom: 1em; margin-bottom: 1em;
} }
.notification-card-container.menu .notification-card-content {
.menu-label-container.notifications { margin-bottom: 0.25em;
margin: 0em;
padding: 0em;
} }
.notification-card-container.menu .menu-label.notifications {
.menu-label.notifications {
margin: 0em; margin: 0em;
color: #b4befe; color: #b4befe;
} }
.notification-card-container.menu .menu-separator.notification-controls {
.menu-separator.notification-controls {
min-width: 0.1em; min-width: 0.1em;
background-color: #313244; background-color: #313244;
margin: 0em 1em; margin: 0em 1em;
} }
.notification-card-container.menu .menu-switch.notifications:checked:checked {
.menu-switch.notifications:checked:checked {
background: #b4befe; background: #b4befe;
} }
.notification-card-container.menu .clear-notifications-button {
.clear-notifications-button {
margin-right: 0.3em; margin-right: 0.3em;
} }
.clear-notifications-button:hover label { .notification-card-container.menu .clear-notifications-button:hover label {
color: #eba0ac; color: #eba0ac;
} }
.notification-card-container.menu .clear-notifications-label {
.clear-notifications-label {
color: #f38ba8; color: #f38ba8;
font-size: 1.5em; font-size: 1.5em;
} }
@@ -1329,10 +1317,10 @@ window#powermenu .powermenu.box {
color: #cdd6f4; color: #cdd6f4;
background: #181825; background: #181825;
margin-right: 0.45em; margin-right: 0.45em;
border: 0.15em solid #313244; border: 0.15em solid rgba(49, 50, 68, 0.5);
min-width: 23.5em; min-width: 26em;
min-height: 6rem; min-height: 6rem;
border-radius: 0.3em; border-radius: 0.6em;
} }
.notification-card:not(:first-child) { .notification-card:not(:first-child) {
margin-top: 0.85em; margin-top: 0.85em;
@@ -1349,8 +1337,8 @@ window#powermenu .powermenu.box {
.notification-card-image { .notification-card-image {
border-radius: 0.4em; border-radius: 0.4em;
min-width: 2.5em; min-width: 1.5em;
min-height: 2.5em; min-height: 1.5em;
padding: 0.85em 0.85em; padding: 0.85em 0.85em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -1361,11 +1349,12 @@ window#powermenu .powermenu.box {
min-width: 2.9em; min-width: 2.9em;
min-height: 2.9em; min-height: 2.9em;
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
margin-right: 1rem; margin-right: 0.5rem;
margin-bottom: 0.5rem;
} }
.notification-card-content.noimg { .notification-card-content.noimg {
margin-left: 1.3em; margin-left: 0.5em;
margin-top: 0.15em; margin-top: 0.15em;
} }
@@ -1377,11 +1366,12 @@ window#powermenu .powermenu.box {
.notification-card-body-label { .notification-card-body-label {
font-size: 0.84em; font-size: 0.84em;
margin-bottom: 1em;
font-weight: 600; font-weight: 600;
} }
.notification-card-actions { .notification-card-actions {
margin-top: 0.95em; margin-top: 0.25em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
@@ -1404,6 +1394,11 @@ window#powermenu .powermenu.box {
font-size: 1.3em; font-size: 1.3em;
} }
.notification-time {
font-size: 0.85em;
color: #7f849c;
}
.close-notification-button { .close-notification-button {
background: #f38ba8; background: #f38ba8;
color: #11111b; color: #11111b;
@@ -1417,8 +1412,4 @@ window#powermenu .powermenu.box {
background: #eba0ac; background: #eba0ac;
} }
.spacer {
margin-bottom: 0.75em;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

2
style.css.map
View File

File diff suppressed because one or more lines are too long