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",
hpack: "start",
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",
hpack: "start",
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,
children: [
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";
export const Menu = () => {
return Widget.Box({
child: Widget.Button({
on_primary_click: () => exec('/home/jaskir/.config/hypr/scripts/rofi.sh'),
const Menu = () => {
return {
component: Widget.Box({
child: Widget.Label({
class_name: "bar-menu_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";
const notifs = await Service.import("notifications");
import icons from "../../icons/index.js";
import GLib from "gi://GLib";
export default () => {
notifs.popupTimeout = 5000;
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return PopupWindow({
name: "notificationsmenu",
@@ -141,9 +143,11 @@ export default () => {
];
}
return [Widget.Box({
class_name: "spacer"
})];
return [
Widget.Box({
class_name: "spacer",
}),
];
};
const NotificationIcon = ({
@@ -219,6 +223,12 @@ export default () => {
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name:
"notification-card-header menu",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name:
"notification-card-header menu",
@@ -232,8 +242,8 @@ export default () => {
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif)
? 27
: 20,
? 34
: 26,
truncate: "end",
wrap: true,
label: notif["summary"],
@@ -243,9 +253,14 @@ export default () => {
Widget.Box({
class_name:
"notification-card-header menu",
hexpand: true,
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");
import GLib from "gi://GLib";
import icons from "../icons/index.js";
export default () => {
notifs.popupTimeout = 7000;
const time = (time, format = "%I:%M %p") =>
GLib.DateTime.new_from_unix_local(time).format(format);
return Widget.Window({
name: "notifications-window",
class_name: "notifications-window",
@@ -122,9 +126,15 @@ export default () => {
vertical: false,
hexpand: true,
children: [
Widget.Box({
class_name: "notification-card-header",
hpack: "start",
children: [NotificationIcon(notif)],
}),
Widget.Box({
class_name: "notification-card-header",
hexpand: true,
hpack: "start",
vpack: "start",
children: [
Widget.Label({
@@ -132,7 +142,7 @@ export default () => {
hpack: "start",
hexpand: true,
vexpand: true,
max_width_chars: !notifHasImg(notif) ? 27 : 20,
max_width_chars: !notifHasImg(notif) ? 30 : 23,
truncate: "end",
wrap: true,
label: notif["summary"],
@@ -140,10 +150,15 @@ export default () => {
],
}),
Widget.Box({
class_name: "notification-card-header",
hexpand: true,
class_name: "notification-card-header menu",
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 {
color: $teal;
margin-right: 1.5rem;
font-size: 2rem;
font-size: 1.3em;
}

4
scss/menus/media.scss
View File

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

50
scss/menus/notifications.scss
View File

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

27
scss/notifications/popups.scss
View File

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

73
style.css
View File

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

2
style.css.map
View File

File diff suppressed because one or more lines are too long