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

Update the media menu - move time stamp to tooltip

Browse Source
This commit is contained in:
Jas Singh
2024-06-28 01:20:16 -07:00
parent 5d9be96cca
commit 9a2a9d4ec5
8 changed files with 57 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/bar/bar.js
View File

@@ -18,6 +18,7 @@ const closeAllMenus = () => {
App.closeWindow("audiomenu");
App.closeWindow("networkmenu");
App.closeWindow("mediamenu");
App.closeWindow("calendarmenu");
}
// layout of the bar

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

@@ -1,3 +1,5 @@
import { closeAllMenus } from "../bar.js";
const date = Variable("", {
poll: [1000, 'date "+󰃭 %a %b %d  %I:%M:%S %p"'],
});
@@ -10,7 +12,10 @@ const Clock = () => {
}),
isVisible: true,
props: {
on_primary_click: () => App.toggleWindow("calendarmenu"),
on_primary_click: () => {
closeAllMenus();
App.toggleWindow("calendarmenu");
},
},
};
};

97
modules/menus/media/index.js
View File

@@ -107,6 +107,7 @@ export default () => {
children: [
Widget.Label({
truncate: "end",
max_width_chars: 21,
wrap: true,
class_name:
"media-indicator-current-song-name-label",
@@ -249,45 +250,11 @@ export default () => {
class_name: "media-indicator-current-progress-bar",
hexpand: true,
children: [
Widget.Label({
class_name: "media-indicator-time current",
vpack: "center",
setup: (self) => {
function update() {
const curHour = Math.floor(
curPlayer.position / 3600,
);
const curMin = Math.floor(
(curPlayer.position % 3600) / 60,
);
const curSec = Math.floor(
curPlayer.position % 60,
);
if (
typeof curPlayer.position === "number" &&
curPlayer.position >= 0
) {
// WARN: These nested ternaries are absolutely disgusting lol
self.label = `${
curHour > 0
? (curHour < 10
? "0" + curHour
: curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
} else {
self.label = `00:00`;
}
}
self.poll(1000, update);
self.hook(curPlayer, update);
},
}),
Widget.Box({
hexpand: true,
child: Widget.Slider({
hexpand: true,
tooltip_text: "yoyo",
class_name: "menu-slider media progress",
draw_value: false,
on_change: ({ value }) =>
@@ -312,38 +279,40 @@ export default () => {
self.hook(curPlayer, update);
self.hook(curPlayer, update, "position");
self.poll(1000, update);
function updateTooltip() {
const curHour = Math.floor(
curPlayer.position / 3600,
);
const curMin = Math.floor(
(curPlayer.position % 3600) / 60,
);
const curSec = Math.floor(
curPlayer.position % 60,
);
if (
typeof curPlayer.position ===
"number" &&
curPlayer.position >= 0
) {
// WARN: These nested ternaries are absolutely disgusting lol
self.tooltip_text = `${
curHour > 0
? (curHour < 10
? "0" + curHour
: curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
} else {
self.tooltip_text = `00:00`;
}
}
self.poll(1000, updateTooltip);
self.hook(curPlayer, updateTooltip);
},
}),
}),
Widget.Label({
class_name: "media-indicator-time total",
setup: (self) => {
const update = () => {
const totalSeconds = curPlayer.length;
const curHour = Math.floor(
totalSeconds / 3600,
);
const curMin = Math.floor(
(totalSeconds % 3600) / 60,
);
const curSec = Math.floor(
totalSeconds % 60,
);
self.label = `${
curHour > 0
? (curHour < 10
? "0" + curHour
: curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${
curSec < 10 ? "0" + curSec : curSec
}`;
};
self.hook(curPlayer, update);
},
}),
],
}),
],

2
scss/bar/workspace.scss
View File

@@ -21,7 +21,7 @@
&.active {
color: $pink;
background-color: $pink;
min-width: 11em;
min-width: 14em;
min-height: 4.5em;
}
}

29
scss/menus/media.scss
View File

@@ -1,7 +1,7 @@
@import "../colors";
.media-indicator-container {
min-width: 40rem;
min-width: 35rem;
min-height: 10rem;
background: $mantle;
border: 0.13em solid $surface0;
@@ -17,17 +17,13 @@
border: 0.2em solid $surface0;
background-color: $surface0;
border-radius: 0.25em;
min-width: 8.3em;
min-height: 8.3em;
min-width: 8.5em;
min-height: 8.5em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2rem;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
@@ -38,7 +34,7 @@
.media-indicator-current-song-name-label {
color: $lavender;
font-size: 1.4em;
font-size: 1.35em;
}
.media-indicator-current-song-author-label {
@@ -60,21 +56,6 @@
margin: 0rem 0.5rem;
}
.media-indicator-time {
color: $overlay2;
font-size: 0.8em;
font-weight: 800;
margin-top: 0.9rem;
&.total {
margin-left: 1.2rem;
}
&.current {
margin-right: 1.2rem;
}
}
.media-indicator-control-button {
background: $lavender;
color: $crust;
@@ -107,7 +88,7 @@ image {
.menu-slider.media.progress {
margin-top: 1rem;
min-height: 2em;
min-width: 15em;
min-width: 12em;
trough {
background: $base;

4
scss/menus/notifications.scss
View File

@@ -4,7 +4,7 @@
margin-top: 0em;
min-width: 26em;
min-height: 6em;
background: $mantle;
background: $crust;
border: 0.13em solid $surface0; border-radius: 0.4em;
}
@@ -24,7 +24,7 @@
}
.notification-card.menu {
background: $crust;
background: $base;
border: 0.1em solid $surface0;
margin: 0em;
}

33
style.css
View File

@@ -346,7 +346,7 @@ spinner:checked {
.workspaces label.active {
color: #f5c2e7;
background-color: #f5c2e7;
min-width: 11em;
min-width: 14em;
min-height: 4.5em;
}
@@ -916,7 +916,7 @@ window#powermenu .powermenu.box {
}
.media-indicator-container {
min-width: 40rem;
min-width: 35rem;
min-height: 10rem;
background: #181825;
border: 0.13em solid #313244;
@@ -932,17 +932,13 @@ window#powermenu .powermenu.box {
border: 0.2em solid #313244;
background-color: #313244;
border-radius: 0.25em;
min-width: 8.3em;
min-height: 8.3em;
min-width: 8.5em;
min-height: 8.5em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2rem;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
@@ -953,7 +949,7 @@ window#powermenu .powermenu.box {
.media-indicator-current-song-name-label {
color: #b4befe;
font-size: 1.4em;
font-size: 1.35em;
}
.media-indicator-current-song-author-label {
@@ -975,19 +971,6 @@ window#powermenu .powermenu.box {
margin: 0rem 0.5rem;
}
.media-indicator-time {
color: #9399b2;
font-size: 0.8em;
font-weight: 800;
margin-top: 0.9rem;
}
.media-indicator-time.total {
margin-left: 1.2rem;
}
.media-indicator-time.current {
margin-right: 1.2rem;
}
.media-indicator-control-button {
background: #b4befe;
color: #11111b;
@@ -1015,7 +998,7 @@ image {
.menu-slider.media.progress {
margin-top: 1rem;
min-height: 2em;
min-width: 15em;
min-width: 12em;
}
.menu-slider.media.progress trough {
background: #1e1e2e;
@@ -1046,7 +1029,7 @@ image {
margin-top: 0em;
min-width: 26em;
min-height: 6em;
background: #181825;
background: #11111b;
border: 0.13em solid #313244;
border-radius: 0.4em;
}
@@ -1067,7 +1050,7 @@ image {
}
.notification-card.menu {
background: #11111b;
background: #1e1e2e;
border: 0.1em solid #313244;
margin: 0em;
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long