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

Added basic Calendar menu (WIP)

Browse Source
This commit is contained in:
Jas Singh
2024-06-26 02:00:53 -07:00
parent 2b8eb9144d
commit 4ff2392c48
17 changed files with 189 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/bar/clock/index.js
View File

@@ -9,6 +9,9 @@ const Clock = () => {
label: date.bind(),
}),
isVisible: true,
props: {
on_primary_click: () => App.toggleWindow("calendarmenu"),
},
};
};

2
modules/bar/notifications/index.js
View File

@@ -10,7 +10,7 @@ export const Notifications = () => {
hexpand: true,
class_name: "bar-notifications",
child: Widget.Label({
hpack: "start",
hpack: "center",
hexpand: true,
class_name: "bar-notifications-label",
setup: (self) => {

2
modules/menus/DropdownMenu.js
View File

@@ -8,7 +8,6 @@ export const Padding = (name) =>
child: Widget.Box(),
setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
});
const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
globalMousePos.connect("changed", ({ value }) => {
let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
@@ -73,6 +72,7 @@ export default ({
moveBoxToCursor(self, minWidth, minHeight, fixed);
},
child: Widget.Box({
class_name: "dropdown-menu-container",
css: "padding: 1px; margin: -1px;",
child: Widget.Revealer({
revealChild: false,

34
modules/menus/calendar/index.js Normal file
View File

@@ -0,0 +1,34 @@
import PopupWindow from "../PopupWindow.js";
import icons from "../../icons/index.js";
export default () => {
return PopupWindow({
name: "calendarmenu",
visible: false,
transition: "crossfade",
layout: "top-right",
child: Widget.Box({
class_name: "calendar-menu-content",
css: "padding: 1px; margin: -1px;",
vexpand: false,
children: [
Widget.Box({
class_name: "calendar-content-container",
children: [
Widget.Box({
class_name: "calendar-content-items",
children: [
Widget.Calendar({
class_name: "calendar-menu-calendar",
showDayNames: true,
showDetails: true,
showHeading: true,
}),
],
}),
],
}),
],
}),
});
};

3
modules/menus/main.js
View File

@@ -5,5 +5,6 @@ import NetworkMenu from "./network/index.js";
import BluetoothMenu from "./bluetooth/index.js";
import MediaMenu from "./media/index.js";
import NotificationsMenu from "./notifications/index.js";
import CalendarMenu from "./calendar/index.js";
export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu()];
export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu(), CalendarMenu()];

12
modules/menus/network/index.js
View File

@@ -398,6 +398,18 @@ export default () => {
});
}
if (sortedNetworks.length <= 0) {
return self.children = [
Widget.Label({
class_name: "not-found-label dim",
expand: true,
hpack: "center",
vpack: "center",
label: "No Wifi Networks Found"
})
]
}
return (self.children = sortedNetworks.map((accPoint) => {
return Widget.Box({
vertical: true,

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

@@ -63,6 +63,7 @@ export default () => {
}),
Widget.Button({
class_name: "clear-notifications-button",
tooltip_text: "Clear Notifications",
on_primary_click: () => notifs.clear(),
child: Widget.Label({
class_name: "clear-notifications-label",

4
scss/bar/bar.scss
View File

@@ -5,8 +5,8 @@
}
.bar_item_box_visible {
background: $surface0;
border-radius: 0.35rem;
background: transparentize($surface0, 0.2);
border-radius: 0.35em;
padding: 0.2rem 0.9rem;
margin: 0.5rem 0.25rem;

3
scss/bar/notifications.scss
View File

@@ -1,8 +1,7 @@
@import "../colors";
.bar-notifications-label {
color: $yellow;
color: $lavender;
font-size: 1.3em;
min-width: 1em;
margin-right: 0.15em;
}

8
scss/bar/workspace.scss
View File

@@ -8,8 +8,8 @@
border-radius: 1.9rem * .6;
margin: 0rem 0.5rem * .5;
transition: 300ms * .5;
background-color: $mauve;
color: $mauve;
background-color: $sky;
color: $sky;
&.occupied {
background-color: $yellow;
@@ -19,8 +19,8 @@
}
&.active {
color: $sky;
background-color: $sky;
color: $lavender;
background-color: $lavender;
min-width: 11em;
min-height: 4.5em;
}

1
scss/main.scss
View File

@@ -33,6 +33,7 @@
@import "menus/bluetooth";
@import "menus/media";
@import "menus/notifications";
@import "menus/calendar";
//notifications
@import "notifications/popups";

49
scss/menus/calendar.scss Normal file
View File

@@ -0,0 +1,49 @@
@import "../colors";
.calendar-content-container {
margin-top: 0em;
min-width: 16em;
min-height: 6em;
background: $mantle;
border: 0.13em solid $surface0; border-radius: 0.4em;
}
.window-content.calendarmenu-window {
margin-right: 0.50em;
}
.calendar-content-items {
margin: 1em;
}
.calendar-menu-calendar {
all: unset;
padding: 1em;
color: $text;
&:selected {
box-shadow: inset 0 -0.4em 0 0 $pink,
inset 0 -0.2em 0 0 $mantle,
inset 0 0 0 0.01em $mantle;
color: $pink;
border-radius: 0em;
}
&.header {
background-color: transparent;
color: $teal;
}
&.highlight {
border: 2em solid $pink;
background-color: transparent;
color: $pink;
}
&:indeterminate {
color: $surface2;
}
font-size: 1.1em;
padding: 0.2em;
}

10
scss/menus/media.scss
View File

@@ -4,7 +4,7 @@
min-width: 40rem;
min-height: 10rem;
background: $mantle;
border: 0.25rem solid $surface0;
border: 0.13em solid $surface0;
border-radius: 0.4rem;
}
@@ -82,12 +82,6 @@
min-width: 2em;
border-radius: 0.2rem;
tooltip {
min-width: 10rem;
min-height: 10rem;
background: red;
}
&.disabled {
background: $surface0;
}
@@ -122,7 +116,7 @@ image {
highlight,
progress {
min-height: 1rem;
background: $pink;
background: $lavender;
border-radius: 0.3rem;
}
}

15
scss/menus/menu.scss
View File

@@ -79,6 +79,10 @@
}
}
tooltip label {
font-size: 0.9em;
}
.menu-separator {
min-height: .1rem;
margin: .6rem 0rem;
@@ -87,7 +91,7 @@
.menu-items {
background: $mantle;
border: .25rem solid $surface0;
border: .13em solid $surface0;
border-radius: .5rem;
min-width: 375px;
color: $text;
@@ -184,3 +188,12 @@
.menu-item-box {
margin-bottom: 0.5rem;
}
.dropdown-menu-container {
// margin: 1.5em;
// box-shadow: 0 0 0.6em $mantle;
}
.top-right-event-box_top *{
min-height: 0em;
margin-top: 2.5em;
}

7
scss/menus/notifications.scss
View File

@@ -5,7 +5,7 @@
min-width: 26em;
min-height: 6em;
background: $mantle;
border: 0.2em solid $surface0; border-radius: 0.4em;
border: 0.13em solid $surface0; border-radius: 0.4em;
}
.window-content.notificationsmenu-window {
@@ -67,8 +67,3 @@
color: $red;
font-size: 1.5em;
}
.top-right-event-box_top *{
min-height: 0em;
margin-top: 2.5em;
}

80
style.css
View File

@@ -334,8 +334,8 @@ spinner:checked {
border-radius: 1.14rem;
margin: 0rem 0.25rem;
transition: 150ms;
background-color: #cba6f7;
color: #cba6f7;
background-color: #89dceb;
color: #89dceb;
}
.workspaces label.occupied {
background-color: #f9e2af;
@@ -344,8 +344,8 @@ spinner:checked {
min-height: 4.5em;
}
.workspaces label.active {
color: #89dceb;
background-color: #89dceb;
color: #b4befe;
background-color: #b4befe;
min-width: 11em;
min-height: 4.5em;
}
@@ -389,10 +389,9 @@ spinner:checked {
}
.bar-notifications-label {
color: #f9e2af;
color: #b4befe;
font-size: 1.3em;
min-width: 1em;
margin-right: 0.15em;
}
.bar-power_label {
@@ -405,8 +404,8 @@ spinner:checked {
}
.bar_item_box_visible {
background: #313244;
border-radius: 0.35rem;
background: rgba(49, 50, 68, 0.8);
border-radius: 0.35em;
padding: 0.2rem 0.9rem;
margin: 0.5rem 0.25rem;
}
@@ -485,6 +484,10 @@ spinner:checked {
.menu-switch:active {
background-color: #89dceb;
}
tooltip label {
font-size: 0.9em;
}
.menu-separator {
min-height: 0.1rem;
margin: 0.6rem 0rem;
@@ -493,7 +496,7 @@ spinner:checked {
.menu-items {
background: #181825;
border: 0.25rem solid #313244;
border: 0.13em solid #313244;
border-radius: 0.5rem;
min-width: 375px;
color: #cdd6f4;
@@ -591,6 +594,11 @@ spinner:checked {
margin-bottom: 0.5rem;
}
.top-right-event-box_top * {
min-height: 0em;
margin-top: 2.5em;
}
window#powermenu,
window#verification {
background-color: rgba(0, 0, 0, 0.4);
@@ -909,7 +917,7 @@ window#powermenu .powermenu.box {
min-width: 40rem;
min-height: 10rem;
background: #181825;
border: 0.25rem solid #313244;
border: 0.13em solid #313244;
border-radius: 0.4rem;
}
@@ -985,11 +993,6 @@ window#powermenu .powermenu.box {
min-width: 2em;
border-radius: 0.2rem;
}
.media-indicator-control-button tooltip {
min-width: 10rem;
min-height: 10rem;
background: red;
}
.media-indicator-control-button.disabled {
background: #313244;
}
@@ -1019,7 +1022,7 @@ image {
.menu-slider.media.progress trough highlight,
.menu-slider.media.progress trough progress {
min-height: 1rem;
background: #f5c2e7;
background: #b4befe;
border-radius: 0.3rem;
}
.menu-slider.media.progress slider {
@@ -1042,7 +1045,7 @@ image {
min-width: 26em;
min-height: 6em;
background: #181825;
border: 0.2em solid #313244;
border: 0.13em solid #313244;
border-radius: 0.4em;
}
@@ -1103,9 +1106,46 @@ image {
font-size: 1.5em;
}
.top-right-event-box_top * {
min-height: 0em;
margin-top: 2.5em;
.calendar-content-container {
margin-top: 0em;
min-width: 16em;
min-height: 6em;
background: #181825;
border: 0.13em solid #313244;
border-radius: 0.4em;
}
.window-content.calendarmenu-window {
margin-right: 0.5em;
}
.calendar-content-items {
margin: 1em;
}
.calendar-menu-calendar {
all: unset;
padding: 1em;
color: #cdd6f4;
font-size: 1.1em;
padding: 0.2em;
}
.calendar-menu-calendar:selected {
box-shadow: inset 0 -0.4em 0 0 #f5c2e7, inset 0 -0.2em 0 0 #181825, inset 0 0 0 0.01em #181825;
color: #f5c2e7;
border-radius: 0em;
}
.calendar-menu-calendar.header {
background-color: transparent;
color: #94e2d5;
}
.calendar-menu-calendar.highlight {
border: 2em solid #f5c2e7;
background-color: transparent;
color: #f5c2e7;
}
.calendar-menu-calendar:indeterminate {
color: #585b70;
}
.notification-card-container {

2
style.css.map
View File

File diff suppressed because one or more lines are too long