From af51aa838d704ddaab64b6ba681e9de93f477931 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Tue, 10 Sep 2024 00:58:27 -0700 Subject: [PATCH] Added an option to make HyprPanel compatible with Hyprland tearing. (#243) * Adding an option to make HyprPanel compatible with Hyprland tearing. * Added bar to Tearing Compatibility checks --- lib/types/options.d.ts | 2 ++ modules/bar/Bar.ts | 36 +++++++++++++------ modules/notifications/index.ts | 2 +- modules/osd/index.ts | 2 +- options.ts | 6 ++-- widget/settings/pages/config/general/index.ts | 8 +++++ 6 files changed, 41 insertions(+), 15 deletions(-) diff --git a/lib/types/options.d.ts b/lib/types/options.d.ts index 5474258..2c722bd 100644 --- a/lib/types/options.d.ts +++ b/lib/types/options.d.ts @@ -48,6 +48,8 @@ export type OSDOrientation = "horizontal" | "vertical"; export type HexColor = `#${string}`; +export type WindowLayer = "top" | "bottom" | "overlay" | "background"; + export type MatugenColors = { "background": HexColor, "error": HexColor, diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts index b3b4f43..d34cb76 100644 --- a/modules/bar/Bar.ts +++ b/modules/bar/Bar.ts @@ -29,6 +29,7 @@ import Button from "types/widgets/button.js"; import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js"; import './SideEffects'; +import { WindowLayer } from "lib/types/options.js"; const { layouts } = options.bar; @@ -44,14 +45,14 @@ type Section = "battery" | "network" | "bluetooth" | "clock" - | "Ram" - | "Cpu" - | "Storage" - | "Netstat" - | "KbInput" - | "Updates" - | "Weather" - | "Power" + | "ram" + | "cpu" + | "storage" + | "netstat" + | "kbinput" + | "updates" + | "weather" + | "power" | "systray"; type Layout = { @@ -134,7 +135,7 @@ function getGdkMonitors(): GdkMonitors { } const numGdkMonitors = display.get_n_monitors(); - const gdkMonitors = {}; + const gdkMonitors: GdkMonitors = {}; for (let i = 0; i < numGdkMonitors; i++) { const curMonitor = display.get_monitor(i); @@ -144,7 +145,7 @@ function getGdkMonitors(): GdkMonitors { continue; } - const model = curMonitor.get_model(); + const model = curMonitor.get_model() || ''; const geometry = curMonitor.get_geometry(); const scaleFactor = curMonitor.get_scale_factor(); @@ -260,7 +261,20 @@ export const Bar = (() => { visible: true, anchor: ["top", "left", "right"], exclusivity: "exclusive", - layer: options.theme.bar.layer.bind("value"), + layer: Utils.merge( + [ + options.theme.bar.layer.bind("value"), + options.tear.bind("value") + ], + ( + barLayer: WindowLayer, + tear: boolean + ) => { + if (tear && barLayer === "overlay") { + return "top"; + } + return barLayer; + }), child: Widget.Box({ class_name: 'bar-panel-container', child: Widget.CenterBox({ diff --git a/modules/notifications/index.ts b/modules/notifications/index.ts index 54eb2ca..abf1604 100644 --- a/modules/notifications/index.ts +++ b/modules/notifications/index.ts @@ -40,7 +40,7 @@ export default () => { return mon; } ), - layer: "overlay", + layer: options.tear.bind("value").as(tear => tear ? "top" : "overlay"), anchor: position.bind("value").as(v => getPosition(v)), exclusivity: "normal", child: Widget.Box({ diff --git a/modules/osd/index.ts b/modules/osd/index.ts index 6ee71d8..d042504 100644 --- a/modules/osd/index.ts +++ b/modules/osd/index.ts @@ -98,7 +98,7 @@ export default () => Widget.Window({ }), name: `indicator`, class_name: "indicator", - layer: "overlay", + layer: options.tear.bind("value").as(tear => tear ? "top" : "overlay"), anchor: location.bind("value").as(v => getPosition(v)), click_through: true, child: Widget.Box({ diff --git a/options.ts b/options.ts index 60904fd..d600e0e 100644 --- a/options.ts +++ b/options.ts @@ -1,7 +1,7 @@ import { opt, mkOptions } from "lib/option" import { NetstatIcon, NetstatLabelType, PowerIcon, RateUnit, ResourceLabelType, StorageIcon, UpdatesIcon } from "lib/types/bar"; import { KbIcon, KbLabelType } from "lib/types/customModules/kbLayout"; -import { BarButtonStyles, NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options"; +import { BarButtonStyles, NotificationAnchor, OSDAnchor, OSDOrientation, WindowLayer } from "lib/types/options"; import { MatugenScheme, MatugenTheme, MatugenVariation } from "lib/types/options"; import { UnitType } from "lib/types/weather"; @@ -130,7 +130,7 @@ const options = mkOptions(OPTIONS, { bar: { scaling: opt(100), floating: opt(false), - layer: opt<"top" | "bottom" | "overlay" | "background">("top"), + layer: opt("top"), margin_top: opt("0.5em"), opacity: opt(100), margin_bottom: opt("0em"), @@ -1067,6 +1067,8 @@ const options = mkOptions(OPTIONS, { terminal: opt("kitty"), + tear: opt(false), + wallpaper: { enable: opt(true), image: opt(""), diff --git a/widget/settings/pages/config/general/index.ts b/widget/settings/pages/config/general/index.ts index a58a94c..82bac02 100644 --- a/widget/settings/pages/config/general/index.ts +++ b/widget/settings/pages/config/general/index.ts @@ -25,6 +25,14 @@ export const BarGeneral = () => { } }), Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }), + Option({ + opt: options.tear, + title: 'Tearing Compatible', + subtitle: + "Makes HyprPanel compatible with Hyprland tearing.\n" + + "Enabling this will change all overlays (Notifications, OSDs, Bar) to the \'top\' layer instead the \'overlay\' layer.", + type: 'boolean' + }), Header('Scaling'), Option({ opt: options.theme.bar.scaling, title: 'Bar', type: 'number', min: 1, max: 100, increment: 5 }),