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

Added an icon to the calendar widget in the bar. (#181)

Browse Source 
* Added an icon to the calendar widget in the bar.

* Updated themes for calendar icon.
This commit is contained in:
Jas Singh
2024-08-24 23:52:33 -07:00
committed by GitHub
parent bc08692317
commit b080d6b00d
22 changed files with 143 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/bar/Bar.ts
View File

@@ -17,6 +17,8 @@ import Gdk from "gi://Gdk?version=3.0";
import Button from "types/widgets/button.js";
import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";
import './SideEffects';
const { layouts } = options.bar;
export type BarWidget = keyof typeof widget;

15
modules/bar/SideEffects.ts Normal file
View File

@@ -0,0 +1,15 @@
import options from "options";
const { showIcon, showTime } = options.bar.clock;
showIcon.connect("changed", () => {
if (!showTime.value && !showIcon.value) {
showTime.value = true;
}
});
showTime.connect("changed", () => {
if (!showTime.value && !showIcon.value) {
showIcon.value = true;
}
});

41
modules/bar/clock/index.ts
View File

@@ -2,7 +2,9 @@ import Gdk from 'gi://Gdk?version=3.0';
import GLib from "gi://GLib";
import { openMenu } from "../utils.js";
import options from "options";
const { format } = options.bar.clock;
const { format, icon, showIcon, showTime } = options.bar.clock;
const { style } = options.theme.bar.buttons;
const date = Variable(GLib.DateTime.new_now_local(), {
poll: [1000, () => GLib.DateTime.new_now_local()],
@@ -10,10 +12,41 @@ const date = Variable(GLib.DateTime.new_now_local(), {
const time = Utils.derive([date, format], (c, f) => c.format(f) || "");
const Clock = () => {
const clockTime = Widget.Label({
class_name: "bar-button-label clock bar",
label: time.bind(),
});
const clockIcon = Widget.Label({
label: icon.bind("value"),
class_name: "bar-button-icon clock txt-icon bar",
});
return {
component: Widget.Label({
class_name: "clock",
label: time.bind(),
component: Widget.Box({
className: Utils.merge([
style.bind("value"),
showIcon.bind("value"), showTime.bind("value")
], (btnStyle, shwIcn, shwLbl) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `bluetooth ${styleMap[btnStyle]} ${!shwLbl ? "no-label" : ""} ${!shwIcn ? "no-icon" : ""}`;
}),
children: Utils.merge([showIcon.bind("value"), showTime.bind("value")], (shIcn, shTm) => {
if (shIcn && !shTm) {
return [clockIcon];
} else if (shTm && !shIcn) {
return [clockTime];
}
return [clockIcon, clockTime];
})
}),
isVisible: true,
boxClass: "clock",

6
options.ts
View File

@@ -226,6 +226,7 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.pink),
icon: opt(colors.pink),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
notifications: {
@@ -741,7 +742,10 @@ const options = mkOptions(OPTIONS, {
]),
},
clock: {
format: opt("󰃭 %a %b %d  %I:%M:%S %p"),
icon: opt("󰸗"),
showIcon: opt(true),
showTime: opt(true),
format: opt("%a %b %d %I:%M:%S %p"),
},
media: {
show_artist: opt(false),

5
scss/style/bar/bar.scss
View File

@@ -175,6 +175,11 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value);
color: $bar-buttons-windowtitle-icon_background;
}
.clock.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value);
color: $bar-buttons-clock-icon_background;
}
}
}
}

26
scss/style/bar/clock.scss
View File

@@ -1,7 +1,27 @@
.clock {
.bar-button-label.clock {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
margin-left: $bar-buttons-clock-spacing;
}
.style2.clock {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
.bar-button-icon.clock {
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
}
.style2 {
.bar-button-icon.clock {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
}
.bar-button-label.clock {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-clock-spacing;
margin-left: 0em;
}
}

5
themes/catppuccin_frappe_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#303446",
"theme.bar.buttons.notifications.hover": "#51576d",
"theme.bar.buttons.notifications.background": "#303446",
"theme.bar.buttons.clock.icon": "#f4b8e4",
"theme.bar.buttons.clock.icon": "#303446",
"theme.bar.buttons.clock.text": "#f4b8e4",
"theme.bar.buttons.clock.hover": "#51576d",
"theme.bar.buttons.clock.background": "#303446",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#f4b8e4",
"theme.bar.buttons.media.icon_background": "#babbf1",
"theme.bar.buttons.notifications.icon_background": "#b4befe",
"theme.bar.buttons.battery.icon_background": "#e5c890"
"theme.bar.buttons.battery.icon_background": "#e5c890",
"theme.bar.buttons.clock.icon_background": "#f4b8e4"
}

5
themes/catppuccin_latte_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#dcdee8",
"theme.bar.buttons.notifications.hover": "#bcc0cc",
"theme.bar.buttons.notifications.background": "#dcdfe8",
"theme.bar.buttons.clock.icon": "#ea76cb",
"theme.bar.buttons.clock.icon": "#dcdee8",
"theme.bar.buttons.clock.text": "#ea76cb",
"theme.bar.buttons.clock.hover": "#bcc0cc",
"theme.bar.buttons.clock.background": "#dcdfe8",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#ea76cb",
"theme.bar.buttons.media.icon_background": "#7287fd",
"theme.bar.buttons.notifications.icon_background": "#7287fd",
"theme.bar.buttons.battery.icon_background": "#df8e1d"
"theme.bar.buttons.battery.icon_background": "#df8e1d",
"theme.bar.buttons.clock.icon_background": "#ea76cb"
}

5
themes/catppuccin_macchiato_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#24273a",
"theme.bar.buttons.notifications.hover": "#494d64",
"theme.bar.buttons.notifications.background": "#24273a",
"theme.bar.buttons.clock.icon": "#f5bde6",
"theme.bar.buttons.clock.icon": "#24273a",
"theme.bar.buttons.clock.text": "#f5bde6",
"theme.bar.buttons.clock.hover": "#494d64",
"theme.bar.buttons.clock.background": "#24273a",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#f5bde6",
"theme.bar.buttons.media.icon_background": "#b7bcf8",
"theme.bar.buttons.notifications.icon_background": "#b7bcf8",
"theme.bar.buttons.battery.icon_background": "#eed49f"
"theme.bar.buttons.battery.icon_background": "#eed49f",
"theme.bar.buttons.clock.icon_background": "#f5bde6"
}

10
themes/catppuccin_mocha_split.json
View File

@@ -203,11 +203,11 @@
"theme.bar.buttons.notifications.icon": "#1e1e2e",
"theme.bar.buttons.notifications.hover": "#45475a",
"theme.bar.buttons.notifications.background": "#242438",
"theme.bar.buttons.clock.icon": "#f5c2e7",
"theme.bar.buttons.clock.icon": "#232338",
"theme.bar.buttons.clock.text": "#f5c2e7",
"theme.bar.buttons.clock.hover": "#45475a",
"theme.bar.buttons.clock.background": "#242438",
"theme.bar.buttons.battery.icon": "#f9e2af",
"theme.bar.buttons.battery.icon": "#242438",
"theme.bar.buttons.battery.text": "#f9e2af",
"theme.bar.buttons.battery.hover": "#45475a",
"theme.bar.buttons.battery.background": "#242438",
@@ -263,10 +263,12 @@
"theme.bar.menus.check_radio_button.active": "#b4beff",
"theme.bar.buttons.style": "split",
"theme.bar.buttons.icon_background": "#242438",
"theme.bar.buttons.volume.icon_background": "#f5c2e7",
"theme.bar.buttons.volume.icon_background": "#eba0ac",
"theme.bar.buttons.network.icon_background": "#caa6f7",
"theme.bar.buttons.bluetooth.icon_background": "#89dbeb",
"theme.bar.buttons.windowtitle.icon_background": "#f5c2e7",
"theme.bar.buttons.media.icon_background": "#b4befe",
"theme.bar.buttons.notifications.icon_background": "#b4befe"
"theme.bar.buttons.notifications.icon_background": "#b4befe",
"theme.bar.buttons.battery.icon_background": "#f9e2af",
"theme.bar.buttons.clock.icon_background": "#f5c2e7"
}

3
themes/cyberpunk_split.json
View File

@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#5bafff",
"theme.bar.buttons.media.icon_background": "#00ffff",
"theme.bar.buttons.notifications.icon_background": "#f7d04b",
"theme.bar.buttons.battery.icon_background": "#f7d04b"
"theme.bar.buttons.battery.icon_background": "#f7d04b",
"theme.bar.buttons.clock.icon_background": "#5bafff"
}

11
themes/dracula_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#44475a",
"theme.bar.buttons.notifications.hover": "#6272a4",
"theme.bar.buttons.notifications.background": "#44475a",
"theme.bar.buttons.clock.icon": "#ff79c6",
"theme.bar.buttons.clock.icon": "#44475a",
"theme.bar.buttons.clock.text": "#ff79c6",
"theme.bar.buttons.clock.hover": "#6272a4",
"theme.bar.buttons.clock.background": "#44475a",
@@ -234,7 +234,7 @@
"theme.bar.buttons.workspaces.active": "#ff79c6",
"theme.bar.buttons.workspaces.occupied": "#ffb86c",
"theme.bar.buttons.workspaces.available": "#8be9fd",
"theme.bar.buttons.workspaces.hover": "#e23ee2",
"theme.bar.buttons.workspaces.hover": "#ff79c6",
"theme.bar.buttons.workspaces.background": "#44475a",
"theme.bar.buttons.dashboard.icon": "#44475a",
"theme.bar.buttons.dashboard.hover": "#6272a4",
@@ -256,8 +256,8 @@
"theme.notification.actions.text": "#282a36",
"theme.notification.actions.background": "#bd93f9",
"theme.notification.background": "#44475a",
"theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#e23fe2",
"theme.bar.buttons.workspaces.numbered_active_underline_color": "#e23ee2",
"theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#ff79c6",
"theme.bar.buttons.workspaces.numbered_active_underline_color": "#ff79c6",
"theme.bar.menus.menu.media.card.color": "#44475a",
"theme.bar.menus.check_radio_button.background": "#282936",
"theme.bar.menus.check_radio_button.active": "#bd93f9",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#f1fa8c",
"theme.bar.buttons.media.icon_background": "#bd93f9",
"theme.bar.buttons.notifications.icon_background": "#bd93f9",
"theme.bar.buttons.battery.icon_background": "#f1fa8c"
"theme.bar.buttons.battery.icon_background": "#f1fa8c",
"theme.bar.buttons.clock.icon_background": "#ff79c6"
}

5
themes/everforest_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#323d43",
"theme.bar.buttons.notifications.hover": "#454b53",
"theme.bar.buttons.notifications.background": "#323d43",
"theme.bar.buttons.clock.icon": "#dbbc7f",
"theme.bar.buttons.clock.icon": "#323d43",
"theme.bar.buttons.clock.text": "#dbbc7f",
"theme.bar.buttons.clock.hover": "#454b53",
"theme.bar.buttons.clock.background": "#323d43",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#dbbc7f",
"theme.bar.buttons.media.icon_background": "#a7c080",
"theme.bar.buttons.notifications.icon_background": "#83c092",
"theme.bar.buttons.battery.icon_background": "#e69875"
"theme.bar.buttons.battery.icon_background": "#e69875",
"theme.bar.buttons.clock.icon_background": "#dbbc7f"
}

5
themes/gruvbox_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#282828",
"theme.bar.buttons.notifications.hover": "#504945",
"theme.bar.buttons.notifications.background": "#282828",
"theme.bar.buttons.clock.icon": "#d3869b",
"theme.bar.buttons.clock.icon": "#282828",
"theme.bar.buttons.clock.text": "#d3869b",
"theme.bar.buttons.clock.hover": "#504945",
"theme.bar.buttons.clock.background": "#282828",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#d3869b",
"theme.bar.buttons.media.icon_background": "#83a598",
"theme.bar.buttons.notifications.icon_background": "#83a598",
"theme.bar.buttons.battery.icon_background": "#fabd2f"
"theme.bar.buttons.battery.icon_background": "#fabd2f",
"theme.bar.buttons.clock.icon_background": "#d3869b"
}

5
themes/monochrome_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#090909",
"theme.bar.buttons.notifications.hover": "#444444",
"theme.bar.buttons.notifications.background": "#090909",
"theme.bar.buttons.clock.icon": "#FFFFFF",
"theme.bar.buttons.clock.icon": "#000000",
"theme.bar.buttons.clock.text": "#FFFFFF",
"theme.bar.buttons.clock.hover": "#444444",
"theme.bar.buttons.clock.background": "#090909",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#ffffff",
"theme.bar.buttons.media.icon_background": "#ffffff",
"theme.bar.buttons.notifications.icon_background": "#ffffff",
"theme.bar.buttons.battery.icon_background": "#ffffff"
"theme.bar.buttons.battery.icon_background": "#ffffff",
"theme.bar.buttons.clock.icon_background": "#ffffff"
}

5
themes/nord_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#3b4252",
"theme.bar.buttons.notifications.hover": "#434c53",
"theme.bar.buttons.notifications.background": "#3b4252",
"theme.bar.buttons.clock.icon": "#8fbcbb",
"theme.bar.buttons.clock.icon": "#3b4252",
"theme.bar.buttons.clock.text": "#8fbcbb",
"theme.bar.buttons.clock.hover": "#434c53",
"theme.bar.buttons.clock.background": "#3b4252",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#8fbcbb",
"theme.bar.buttons.media.icon_background": "#88c0d0",
"theme.bar.buttons.notifications.icon_background": "#88c0d0",
"theme.bar.buttons.battery.icon_background": "#81a1c1"
"theme.bar.buttons.battery.icon_background": "#81a1c1",
"theme.bar.buttons.clock.icon_background": "#8fbcbb"
}

5
themes/one_dark_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#21252b",
"theme.bar.buttons.notifications.hover": "#4b5263",
"theme.bar.buttons.notifications.background": "#21252b",
"theme.bar.buttons.clock.icon": "#98c379",
"theme.bar.buttons.clock.icon": "#21252b",
"theme.bar.buttons.clock.text": "#98c379",
"theme.bar.buttons.clock.hover": "#4b5263",
"theme.bar.buttons.clock.background": "#21252b",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#98c379",
"theme.bar.buttons.media.icon_background": "#61afef",
"theme.bar.buttons.notifications.icon_background": "#61afef",
"theme.bar.buttons.battery.icon_background": "#e5c07b"
"theme.bar.buttons.battery.icon_background": "#e5c07b",
"theme.bar.buttons.clock.icon_background": "#98c379"
}

5
themes/rose_pine_moon_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#2a283e",
"theme.bar.buttons.notifications.hover": "#393552",
"theme.bar.buttons.notifications.background": "#2a283e",
"theme.bar.buttons.clock.icon": "#c4a7e7",
"theme.bar.buttons.clock.icon": "#2a283e",
"theme.bar.buttons.clock.text": "#c4a7e7",
"theme.bar.buttons.clock.hover": "#393552",
"theme.bar.buttons.clock.background": "#2a283e",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#c4a7e7",
"theme.bar.buttons.media.icon_background": "#c4a7e7",
"theme.bar.buttons.notifications.icon_background": "#c4a7e7",
"theme.bar.buttons.battery.icon_background": "#f6c177"
"theme.bar.buttons.battery.icon_background": "#f6c177",
"theme.bar.buttons.clock.icon_background": "#c4a7e7"
}

5
themes/rose_pine_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#21202e",
"theme.bar.buttons.notifications.hover": "#26233a",
"theme.bar.buttons.notifications.background": "#21202e",
"theme.bar.buttons.clock.icon": "#c4a7e7",
"theme.bar.buttons.clock.icon": "#21202e",
"theme.bar.buttons.clock.text": "#c4a7e7",
"theme.bar.buttons.clock.hover": "#26233a",
"theme.bar.buttons.clock.background": "#21202e",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#c4a7e7",
"theme.bar.buttons.media.icon_background": "#c4a7e7",
"theme.bar.buttons.notifications.icon_background": "#c4a7e7",
"theme.bar.buttons.battery.icon_background": "#f6c177"
"theme.bar.buttons.battery.icon_background": "#f6c177",
"theme.bar.buttons.clock.icon_background": "#c4a7e7"
}

5
themes/tokyo_night_split.json
View File

@@ -203,7 +203,7 @@
"theme.bar.buttons.notifications.icon": "#272a3d",
"theme.bar.buttons.notifications.hover": "#414868",
"theme.bar.buttons.notifications.background": "#272a3d",
"theme.bar.buttons.clock.icon": "#f7768e",
"theme.bar.buttons.clock.icon": "#272a3d",
"theme.bar.buttons.clock.text": "#f7768e",
"theme.bar.buttons.clock.hover": "#414868",
"theme.bar.buttons.clock.background": "#272a3d",
@@ -269,5 +269,6 @@
"theme.bar.buttons.windowtitle.icon_background": "#f7768e",
"theme.bar.buttons.media.icon_background": "#bb9af7",
"theme.bar.buttons.notifications.icon_background": "#bb9af7",
"theme.bar.buttons.battery.icon_background": "#e0af68"
"theme.bar.buttons.battery.icon_background": "#e0af68",
"theme.bar.buttons.clock.icon_background": "#f7768e"
}

3
widget/settings/pages/config/bar/index.ts
View File

@@ -96,6 +96,9 @@ Forces each Monitor's Workspace labels to start from 1.`,
Header('Clock'),
Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
Option({ opt: options.bar.clock.icon, title: 'Icon', type: 'string' }),
Option({ opt: options.bar.clock.showIcon, title: 'Show Icon', type: 'boolean' }),
Option({ opt: options.bar.clock.showTime, title: 'Show Time', type: 'boolean' }),
Header('Media'),
Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),

6
widget/settings/pages/theme/bar/index.ts
View File

@@ -126,6 +126,12 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.buttons.clock.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.clock.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.clock.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.clock.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Notifications'),
Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),