From 16ec78f30b62cb8359765630c0d44bd245c09f8c Mon Sep 17 00:00:00 2001 From: Rubin Bhandari Date: Wed, 23 Oct 2024 08:03:32 +0545 Subject: [PATCH 1/7] fix: make image bigger on notification card (#355) Co-authored-by: Jas Singh --- scss/style/notifications/popups.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/style/notifications/popups.scss b/scss/style/notifications/popups.scss index 297d67d..c371c3a 100644 --- a/scss/style/notifications/popups.scss +++ b/scss/style/notifications/popups.scss @@ -24,8 +24,8 @@ .notification-card-image { border-radius: 0.4em; - min-width: 1.5em; - min-height: 1.5em; + min-width: 2.5em; + min-height: 2.5em; padding: 0.85em 0.85em; background-size: contain; background-repeat: no-repeat; From c247606baad6c07f34b8e975844366d45ee646d6 Mon Sep 17 00:00:00 2001 From: Rubin Bhandari Date: Thu, 24 Oct 2024 06:00:28 +0545 Subject: [PATCH 2/7] fix: fix spells (#362) --- customModules/utils.ts | 2 +- modules/bar/utils.ts | 2 +- modules/menus/shared/dropdown/index.ts | 2 +- package.json | 2 +- widget/settings/pages/config/bar/index.ts | 2 +- widget/settings/pages/theme/menus/media.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/customModules/utils.ts b/customModules/utils.ts index b68258e..16a546d 100644 --- a/customModules/utils.ts +++ b/customModules/utils.ts @@ -159,7 +159,7 @@ export const renderResourceLabel = (lblType: ResourceLabelType, rmUsg: GenericRe B: (size: number): number => size, }; - // Get them datas in proper GiB, MiB, KiB, TiB, or bytes + // Get the data in proper GiB, MiB, KiB, TiB, or bytes const totalSizeFormatted = autoFormatSize(total, round); // get the postfix: one of [TiB, GiB, MiB, KiB, B] const postfix = getPostfix(total); diff --git a/modules/bar/utils.ts b/modules/bar/utils.ts index f2f545a..e7b10f0 100644 --- a/modules/bar/utils.ts +++ b/modules/bar/utils.ts @@ -25,7 +25,7 @@ export const openMenu = async (clicked: Button, event: Gdk.Eve /* * NOTE: We have to make some adjustments so the menu pops up relatively * to the center of the button clicked. We don't want the menu to spawn - * offcenter dependending on which edge of the button you click on. + * offcenter depending on which edge of the button you click on. * ------------- * To fix this, we take the x coordinate of the click within the button's bounds. * If you click the left edge of a 100 width button, then the x axis will be 0 diff --git a/modules/menus/shared/dropdown/index.ts b/modules/menus/shared/dropdown/index.ts index d9496e7..7ae605f 100644 --- a/modules/menus/shared/dropdown/index.ts +++ b/modules/menus/shared/dropdown/index.ts @@ -8,7 +8,7 @@ import { globalEventBoxes } from 'globals/dropdown'; const { location } = options.theme.bar; // NOTE: We make the window visible for 2 seconds (on startup) so the child -// elements can allocat their proper dimensions. +// elements can allocate their proper dimensions. // Otherwise the width that we rely on for menu positioning is set improperly // for the first time we open a menu of each type. const initRender = Variable(true); diff --git a/package.json b/package.json index a617f97..a44b92b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "hyprpanel", "version": "1.0.0", - "description": "A customizble panel built for Hyprland.", + "description": "A customizable panel built for Hyprland.", "main": "config.js", "directories": { "lib": "lib" diff --git a/widget/settings/pages/config/bar/index.ts b/widget/settings/pages/config/bar/index.ts index f713739..921f475 100644 --- a/widget/settings/pages/config/bar/index.ts +++ b/widget/settings/pages/config/bar/index.ts @@ -283,7 +283,7 @@ export const BarSettings = (): Scrollable => { title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed.\n' + - "Works in conjuction with 'Total Workspaces'.", + "Works in conjunction with 'Total Workspaces'.", type: 'boolean', }), Option({ diff --git a/widget/settings/pages/theme/menus/media.ts b/widget/settings/pages/theme/menus/media.ts index 6058cd9..2081a90 100644 --- a/widget/settings/pages/theme/menus/media.ts +++ b/widget/settings/pages/theme/menus/media.ts @@ -73,7 +73,7 @@ export const MediaMenuTheme = (): Scrollable => { }), Option({ opt: options.theme.bar.menus.menu.media.slider.backgroundhover, - title: 'Backround (Hover)', + title: 'Background (Hover)', type: 'color', }), Option({ opt: options.theme.bar.menus.menu.media.slider.puck, title: 'Puck', type: 'color' }), From 694711e0d417e7948528472bed387ab222ecf03a Mon Sep 17 00:00:00 2001 From: Rubin Bhandari Date: Thu, 24 Oct 2024 06:23:26 +0545 Subject: [PATCH 3/7] feat: use .face.icon (#360) * feat: use .face.icon * feat: use .face.icon --------- Co-authored-by: Jas Singh --- lib/icons.ts | 1 - modules/icons/index.ts | 1 - options.ts | 2 +- widget/settings/pages/config/menus/dashboard.ts | 7 ++++++- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/icons.ts b/lib/icons.ts index 8813940..7835f2e 100644 --- a/lib/icons.ts +++ b/lib/icons.ts @@ -41,7 +41,6 @@ export default { time: 'hourglass-symbolic', toolbars: 'toolbars-symbolic', warning: 'dialog-warning-symbolic', - avatar: 'avatar-default-symbolic', arrow: { right: 'pan-end-symbolic', left: 'pan-start-symbolic', diff --git a/modules/icons/index.ts b/modules/icons/index.ts index 14d0a06..a5f5a5f 100644 --- a/modules/icons/index.ts +++ b/modules/icons/index.ts @@ -41,7 +41,6 @@ export default { time: 'hourglass-symbolic', toolbars: 'toolbars-symbolic', warning: 'dialog-warning-symbolic', - avatar: 'avatar-default-symbolic', arrow: { right: 'pan-end-symbolic', left: 'pan-start-symbolic', diff --git a/options.ts b/options.ts index 24c854c..9ed6e3a 100644 --- a/options.ts +++ b/options.ts @@ -1060,7 +1060,7 @@ const options = mkOptions(OPTIONS, { logout: opt('hyprctl dispatch exit'), shutdown: opt('systemctl poweroff'), avatar: { - image: opt('avatar-default-symbolic'), + image: opt('$HOME/.face.icon'), name: opt<'system' | string>('system'), }, }, diff --git a/widget/settings/pages/config/menus/dashboard.ts b/widget/settings/pages/config/menus/dashboard.ts index fbb7128..e387d0b 100644 --- a/widget/settings/pages/config/menus/dashboard.ts +++ b/widget/settings/pages/config/menus/dashboard.ts @@ -16,7 +16,12 @@ export const DashboardMenuSettings = (): Scrollable => { vertical: true, children: [ Header('Power Menu'), - Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }), + Option({ + opt: options.menus.dashboard.powermenu.avatar.image, + title: 'Profile Image', + type: 'img', + subtitle: "By default, uses '~/.face.icon'", + }), Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', From fcdba86fec97314910b795fa135f29b5fc576b05 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Thu, 24 Oct 2024 02:26:39 -0700 Subject: [PATCH 4/7] Updated the logic for Stat/Metric tracking in the dashboard more robust. (#365) * Updated the logic for Stat/Metric tracking in the dashboard more robust. * Show used/total for stats. * Added the ability to configure the update interval of metrics in the dashboard. --- customModules/cpu/computeCPU.ts | 1 + customModules/ram/computeRam.ts | 1 + customModules/storage/computeStorage.ts | 1 + lib/types/customModules/generic.d.ts | 2 +- modules/menus/dashboard/stats/index.ts | 126 +++++------------- options.ts | 1 + services/Cpu.ts | 41 ++++++ services/Ram.ts | 73 ++++++++++ services/Storage.ts | 61 +++++++++ .../settings/pages/config/menus/dashboard.ts | 11 ++ 10 files changed, 223 insertions(+), 95 deletions(-) create mode 100644 services/Cpu.ts create mode 100644 services/Ram.ts create mode 100644 services/Storage.ts diff --git a/customModules/cpu/computeCPU.ts b/customModules/cpu/computeCPU.ts index 460b1db..dad5e69 100644 --- a/customModules/cpu/computeCPU.ts +++ b/customModules/cpu/computeCPU.ts @@ -4,6 +4,7 @@ import GTop from 'gi://GTop'; let previousCpuData = new GTop.glibtop_cpu(); GTop.glibtop_get_cpu(previousCpuData); +// FIX: Consolidate with Cpu service class export const computeCPU = (): number => { const currentCpuData = new GTop.glibtop_cpu(); GTop.glibtop_get_cpu(currentCpuData); diff --git a/customModules/ram/computeRam.ts b/customModules/ram/computeRam.ts index b8026c2..e435d40 100644 --- a/customModules/ram/computeRam.ts +++ b/customModules/ram/computeRam.ts @@ -4,6 +4,7 @@ import { divide } from 'customModules/utils'; import { GenericResourceData } from 'lib/types/customModules/generic'; import { Variable as VariableType } from 'types/variable'; +// FIX: Consolidate with Ram service class export const calculateRamUsage = (round: VariableType): GenericResourceData => { try { const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo'); diff --git a/customModules/storage/computeStorage.ts b/customModules/storage/computeStorage.ts index 49cbc14..f30ede5 100644 --- a/customModules/storage/computeStorage.ts +++ b/customModules/storage/computeStorage.ts @@ -5,6 +5,7 @@ import { divide } from 'customModules/utils'; import { Variable as VariableType } from 'types/variable'; import { GenericResourceData } from 'lib/types/customModules/generic'; +// FIX: Consolidate with Storage service class export const computeStorage = (round: VariableType): GenericResourceData => { try { const currentFsUsage = new GTop.glibtop_fsusage(); diff --git a/lib/types/customModules/generic.d.ts b/lib/types/customModules/generic.d.ts index 839e04a..22610e2 100644 --- a/lib/types/customModules/generic.d.ts +++ b/lib/types/customModules/generic.d.ts @@ -6,7 +6,7 @@ export type GenericResourceMetrics = { percentage: number; }; -type GenericResourceData = ResourceUsage & { +export type GenericResourceData = GenericResourceMetrics & { free: number; }; diff --git a/modules/menus/dashboard/stats/index.ts b/modules/menus/dashboard/stats/index.ts index 43e8457..f10e0cc 100644 --- a/modules/menus/dashboard/stats/index.ts +++ b/modules/menus/dashboard/stats/index.ts @@ -1,67 +1,31 @@ import options from 'options'; +import Ram from 'services/Ram'; import { GPU_Stat } from 'lib/types/gpustat'; import { dependencies } from 'lib/utils'; import { BoxWidget } from 'lib/types/widget'; -import { GenericResourceMetrics } from 'lib/types/customModules/generic'; +import Cpu from 'services/Cpu'; +import Storage from 'services/Storage'; +import { renderResourceLabel } from 'customModules/utils'; const { terminal } = options; -const { enable_gpu } = options.menus.dashboard.stats; +const { enable_gpu, interval } = options.menus.dashboard.stats; + +const ramService = new Ram(); +const cpuService = new Cpu(); +const storageService = new Storage(); + +ramService.setShouldRound(true); +storageService.setShouldRound(true); + +interval.connect('changed', () => { + ramService.updateTimer(interval.value); + cpuService.updateTimer(interval.value); + storageService.updateTimer(interval.value); +}); const Stats = (): BoxWidget => { const divide = ([total, free]: number[]): number => free / total; - const formatSizeInGB = (sizeInKB: number): number => Number((sizeInKB / 1024 ** 2).toFixed(2)); - - const cpu = Variable(0, { - poll: [ - 2000, - 'top -b -n 1', - (out): number => { - if (typeof out !== 'string') { - return 0; - } - - const cpuOut = out.split('\n').find((line) => line.includes('Cpu(s)')); - - if (cpuOut === undefined) { - return 0; - } - - const freeCpu = parseFloat(cpuOut.split(/\s+/)[1].replace(',', '.')); - return divide([100, freeCpu]); - }, - ], - }); - - const ram = Variable( - { total: 0, used: 0, percentage: 0 }, - { - poll: [ - 2000, - 'free', - (out): GenericResourceMetrics => { - if (typeof out !== 'string') { - return { total: 0, used: 0, percentage: 0 }; - } - - const ramOut = out.split('\n').find((line) => line.includes('Mem:')); - - if (ramOut === undefined) { - return { total: 0, used: 0, percentage: 0 }; - } - - const [totalRam, usedRam] = ramOut.split(/\s+/).splice(1, 2).map(Number); - - return { - percentage: divide([totalRam, usedRam]), - total: formatSizeInGB(totalRam), - used: formatSizeInGB(usedRam), - }; - }, - ], - }, - ); - const gpu = Variable(0); const GPUStat = Widget.Box({ @@ -170,40 +134,6 @@ const Stats = (): BoxWidget => { }), }); - const storage = Variable( - { total: 0, used: 0, percentage: 0 }, - { - poll: [ - 2000, - 'df -B1 /', - (out): GenericResourceMetrics => { - if (typeof out !== 'string') { - return { total: 0, used: 0, percentage: 0 }; - } - - const dfOut = out.split('\n').find((line) => line.startsWith('/')); - - if (dfOut === undefined) { - return { total: 0, used: 0, percentage: 0 }; - } - - const parts = dfOut.split(/\s+/); - const size = parseInt(parts[1], 10); - const used = parseInt(parts[2], 10); - - const sizeInGB = formatSizeInGB(size); - const usedInGB = formatSizeInGB(used); - - return { - total: Math.floor(sizeInGB / 1000), - used: Math.floor(usedInGB / 1000), - percentage: divide([size, used]), - }; - }, - ], - }, - ); - return Widget.Box({ class_name: 'dashboard-card stats-container', vertical: true, @@ -248,7 +178,7 @@ const Stats = (): BoxWidget => { vpack: 'center', bar_mode: 'continuous', max_value: 1, - value: cpu.bind('value'), + value: cpuService.cpu.bind('value').as((cpuUsage) => Math.round(cpuUsage) / 100), }), }), ], @@ -256,7 +186,7 @@ const Stats = (): BoxWidget => { Widget.Label({ hpack: 'end', class_name: 'stat-value cpu', - label: cpu.bind('value').as((v) => `${Math.floor(v * 100)}%`), + label: cpuService.cpu.bind('value').as((cpuUsage) => `${Math.round(cpuUsage)}%`), }), ], }), @@ -295,7 +225,9 @@ const Stats = (): BoxWidget => { class_name: 'stats-bar', hexpand: true, vpack: 'center', - value: ram.bind('value').as((v) => v.percentage), + value: ramService.ram.bind('value').as((ramUsage) => { + return ramUsage.percentage / 100; + }), }), }), ], @@ -303,7 +235,9 @@ const Stats = (): BoxWidget => { Widget.Label({ hpack: 'end', class_name: 'stat-value ram', - label: ram.bind('value').as((v) => `${v.used}/${v.total} GB`), + label: ramService.ram + .bind('value') + .as((ramUsage) => `${renderResourceLabel('used/total', ramUsage, true)}`), }), ], }), @@ -343,7 +277,9 @@ const Stats = (): BoxWidget => { class_name: 'stats-bar', hexpand: true, vpack: 'center', - value: storage.bind('value').as((v) => v.percentage), + value: storageService.storage + .bind('value') + .as((storageUsage) => storageUsage.percentage / 100), }), }), ], @@ -351,7 +287,9 @@ const Stats = (): BoxWidget => { Widget.Label({ hpack: 'end', class_name: 'stat-value storage', - label: storage.bind('value').as((v) => `${v.used}/${v.total} GB`), + label: storageService.storage + .bind('value') + .as((storageUsage) => `${renderResourceLabel('used/total', storageUsage, true)}`), }), ], }), diff --git a/options.ts b/options.ts index 9ed6e3a..1e8dce8 100644 --- a/options.ts +++ b/options.ts @@ -1066,6 +1066,7 @@ const options = mkOptions(OPTIONS, { }, stats: { enabled: opt(true), + interval: opt(2000), enable_gpu: opt(false), }, controls: { diff --git a/services/Cpu.ts b/services/Cpu.ts new file mode 100644 index 0000000..9a4c555 --- /dev/null +++ b/services/Cpu.ts @@ -0,0 +1,41 @@ +// TODO: Convert to a real service + +// @ts-expect-error: This import is a special directive that tells the compiler to use the GTop library +import GTop from 'gi://GTop'; + +import { pollVariable } from 'customModules/PollVar'; + +class Cpu { + private updateFrequency = Variable(2000); + public cpu = Variable(0); + + private previousCpuData = new GTop.glibtop_cpu(); + + constructor() { + GTop.glibtop_get_cpu(this.previousCpuData); + + this.calculateUsage = this.calculateUsage.bind(this); + pollVariable(this.cpu, [], this.updateFrequency.bind('value'), this.calculateUsage); + } + + public calculateUsage(): number { + const currentCpuData = new GTop.glibtop_cpu(); + GTop.glibtop_get_cpu(currentCpuData); + + // Calculate the differences from the previous to current data + const totalDiff = currentCpuData.total - this.previousCpuData.total; + const idleDiff = currentCpuData.idle - this.previousCpuData.idle; + + const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0; + + this.previousCpuData = currentCpuData; + + return cpuUsagePercentage; + } + + public updateTimer(timerInMs: number): void { + this.updateFrequency.value = timerInMs; + } +} + +export default Cpu; diff --git a/services/Ram.ts b/services/Ram.ts new file mode 100644 index 0000000..2454c02 --- /dev/null +++ b/services/Ram.ts @@ -0,0 +1,73 @@ +// TODO: Convert to a real service + +const GLib = imports.gi.GLib; + +import { pollVariable } from 'customModules/PollVar'; +import { GenericResourceData } from 'lib/types/customModules/generic'; + +class Ram { + private updateFrequency = Variable(2000); + private shouldRound = false; + + public ram = Variable({ total: 0, used: 0, percentage: 0, free: 0 }); + + constructor() { + this.calculateUsage = this.calculateUsage.bind(this); + pollVariable(this.ram, [], this.updateFrequency.bind('value'), this.calculateUsage); + } + + public calculateUsage(): GenericResourceData { + try { + const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo'); + + if (!success || !meminfoBytes) { + throw new Error('Failed to read /proc/meminfo or file content is null.'); + } + + const meminfo = new TextDecoder('utf-8').decode(meminfoBytes); + + const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/); + const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/); + + if (!totalMatch || !availableMatch) { + throw new Error('Failed to parse /proc/meminfo for memory values.'); + } + + const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024; + const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024; + + let usedRam = totalRamInBytes - availableRamInBytes; + usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam; + + return { + percentage: this.divide([totalRamInBytes, usedRam]), + total: totalRamInBytes, + used: usedRam, + free: availableRamInBytes, + }; + } catch (error) { + console.error('Error calculating RAM usage:', error); + return { total: 0, used: 0, percentage: 0, free: 0 }; + } + } + + public setShouldRound(round: boolean): void { + this.shouldRound = round; + } + + private divide([total, used]: number[]): number { + const percentageTotal = (used / total) * 100; + + if (this.shouldRound) { + return total > 0 ? Math.round(percentageTotal) : 0; + } + + return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0; + } + + updateTimer(timerInMs: number): void { + this.updateFrequency.value = timerInMs; + } +} + +export default Ram; diff --git a/services/Storage.ts b/services/Storage.ts new file mode 100644 index 0000000..466d5ec --- /dev/null +++ b/services/Storage.ts @@ -0,0 +1,61 @@ +// TODO: Convert to a real service + +// @ts-expect-error: This import is a special directive that tells the compiler to use the GTop library +import GTop from 'gi://GTop'; + +import { pollVariable } from 'customModules/PollVar'; +import { GenericResourceData } from 'lib/types/customModules/generic'; + +class Storage { + private updateFrequency = Variable(2000); + private shouldRound = false; + + public storage = Variable({ total: 0, used: 0, percentage: 0, free: 0 }); + + constructor() { + this.calculateUsage = this.calculateUsage.bind(this); + pollVariable(this.storage, [], this.updateFrequency.bind('value'), this.calculateUsage); + } + + public calculateUsage(): GenericResourceData { + try { + const currentFsUsage = new GTop.glibtop_fsusage(); + + GTop.glibtop_get_fsusage(currentFsUsage, '/'); + + const total = currentFsUsage.blocks * currentFsUsage.block_size; + const available = currentFsUsage.bavail * currentFsUsage.block_size; + const used = total - available; + + return { + total, + used, + free: available, + percentage: this.divide([total, used]), + }; + } catch (error) { + console.error('Error calculating Storage usage:', error); + return { total: 0, used: 0, percentage: 0, free: 0 }; + } + } + + public setShouldRound(round: boolean): void { + this.shouldRound = round; + } + + private divide([total, used]: number[]): number { + const percentageTotal = (used / total) * 100; + + if (this.shouldRound) { + return total > 0 ? Math.round(percentageTotal) : 0; + } + + return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0; + } + + public updateTimer(timerInMs: number): void { + this.updateFrequency.value = timerInMs; + } +} + +export default Storage; diff --git a/widget/settings/pages/config/menus/dashboard.ts b/widget/settings/pages/config/menus/dashboard.ts index e387d0b..8abe579 100644 --- a/widget/settings/pages/config/menus/dashboard.ts +++ b/widget/settings/pages/config/menus/dashboard.ts @@ -48,8 +48,10 @@ export const DashboardMenuSettings = (): Scrollable => { Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }), Option({ opt: options.menus.dashboard.powermenu.logout, title: 'Logout Command', type: 'string' }), Option({ opt: options.menus.dashboard.powermenu.sleep, title: 'Sleep Command', type: 'string' }), + Header('Controls'), Option({ opt: options.menus.dashboard.controls.enabled, title: 'Enabled', type: 'boolean' }), + Header('Resource Usage Metrics'), Option({ opt: options.menus.dashboard.stats.enabled, title: 'Enabled', type: 'boolean' }), Option({ @@ -58,6 +60,15 @@ export const DashboardMenuSettings = (): Scrollable => { subtitle: "NOTE: This is currently only available for NVidia GPUs and requires 'python-gpustat'.", type: 'boolean', }), + Option({ + opt: options.menus.dashboard.stats.interval, + title: 'Update Interval', + subtitle: 'The frequency at which to poll system metrics.', + type: 'number', + min: 100, + increment: 500, + }), + Header('Shortcuts'), Option({ opt: options.menus.dashboard.shortcuts.enabled, title: 'Enabled', type: 'boolean' }), Option({ From 2d1e2304057eca200d5fa132ed09422f59fd94e7 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Fri, 25 Oct 2024 01:40:18 -0700 Subject: [PATCH 5/7] Updated the margins for the dashboard menu to auto-adjust based on configuration. (#369) --- scss/style/menus/dashboard.scss | 950 +++++++++++++++++++------------- 1 file changed, 578 insertions(+), 372 deletions(-) diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index d292038..01eb8e3 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -1,386 +1,592 @@ .dashboard-menu-content * { - font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01; + font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01; } .dashboard-content-items { - margin-left: 0.50em; - min-width: 28.5em; - background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); - border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); - border-radius: $bar-menus-border-radius; - opacity: $bar-menus-opacity * 0.01; - - button { - border-radius: 0.4em; - } - - .dashboard-card { - background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); - margin: 1.3em; - border-radius: $bar-menus-card_radius; - padding: 1.5em; - } - - .profile-picture-container { - margin-right: 0.65em; - margin-bottom: 0.65em; - - .profile-picture { - min-width: $bar-menus-menu-dashboard-profile-size; - min-height: $bar-menus-menu-dashboard-profile-size; - border-radius: $bar-menus-menu-dashboard-profile-radius; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } - - .profile-name { - font-size: 1.5em; - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name); - margin-top: 0.75em; - } - } - - .power-menu-container { - margin-left: 0em; - margin-bottom: 0.65em; - - .dashboard-button { - min-width: 3em; - min-height: 2.5em; - - &:not(:last-child) { - margin-bottom: 0.75em; - } - - label { - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); - font-size: 1.7em; - } - - &.shutdown { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown); - - label { - font-size: 1.9em; - } - } - - &.restart { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart); - - label { - font-size: 1.9em; - } - } - - &.lock { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout); - } - - &.sleep { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep); - } - - &:hover { - &.shutdown { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5); - } - - &.restart { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5); - } - - &.lock { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5); - } - - &.sleep { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5); - } - } - - - } - } - - .shortcuts-container { - font-size: 1em; - - .dashboard-card { - padding: 1.5em; - - button { - min-height: 2.5em; - min-width: 2.5em; - } - } - - .card-button-section-container.visible { - margin-right: 1.5em; - } - - .top-button.paired { - margin-bottom: 1.5em; - } - - .container { - margin-top: 0em; - margin-bottom: 0.65em; - - &.most-used { - margin-right: 0.65em; - } - - &.utilities.paired { - margin-left: 0em; - } - - button { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background); - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); - min-height: 3em; - - label { - font-size: 1.5em; - } - - &.record.active { - background: $red; - - &:hover { - background: transparentize($red, 0.5); - } - } - - &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5); - } - } - } - } - - .controls-container { - margin-bottom: 0.65em; - - &.dashboard-card { - margin-top: 0em; - } + margin-left: 0.5em; + min-width: 28.5em; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); + border: $bar-menus-border-size solid + if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); + border-radius: $bar-menus-border-radius; + opacity: $bar-menus-opacity * 0.01; button { - padding: 0em; - min-height: 3em; - min-width: 3.8em; - - label { - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text); - font-size: 1.6em; - } - - &:not(:last-child) { - margin-right: 1em; - } - - &.wifi { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background); - } - - &.bluetooth { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background); - } - - &.notifications { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background); - } - - &.playback { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background); - } - - &.input { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background); - } - - &.wifi:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); - } - - &.bluetooth:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); - } - - &.notifications:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); - } - - &.playback:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); - } - - &.input:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); - } - - &.disabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled); - - &.wifi:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); - } - - &.bluetooth:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); - } - - &.notifications:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); - } - - &.playback:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); - } - - &.input:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); - } - } - } - } - - .directories-container { - &.dashboard-card { - margin-top: 0em; - margin-bottom: 0.65em; - padding-left: 1.5em; - padding-right: 0em; + border-radius: 0.4em; } - .directory-link { - padding: 0.5em 0em; - min-width: 9em; - - &:last-child { - margin-bottom: 0em; - } - - label { - font-size: 1.3em; - } - - &.right.top { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color); - } - - &.right.middle { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color); - } - - &.right.bottom { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color); - } - - &.left.top { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color); - } - - &.left.middle { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color); - } - - &.left.bottom { - color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color); - } - - &:hover { - opacity: 0.5; - } - } - } - - .stats-container { - margin-top: 0em; - - .stat { - label { - margin-right: 0.75em; - font-size: 1.3em; - min-width: 1.65em; - } - - &.cpu label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon); - } - - &.ram label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon); - } - - &.gpu label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon); - } - - &.storage label { - color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon); - } - - .stats-bar { - levelbar * { - transition: 200ms; - } - - trough { - min-height: 1.05em; - } - - block { - border-radius: 0.4em; - - &.empty { - background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background); - } - - &.filled { - padding-left: 0.85em; - } - } - } - - &.cpu .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar); - } - - &.ram .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar); - } - - &.gpu .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar); - } - - &.storage .stats-bar block.filled { - background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar); - } + .dashboard-card { + background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); + margin: 0em 1.3em; + border-radius: $bar-menus-card_radius; + padding: 1.5em; } - .stat-value { - margin-bottom: 0.75em; - font-size: 0.9em; + .profile-picture-container { + margin-right: 0.65em; - &.cpu { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label); - } + .profile-picture { + min-width: $bar-menus-menu-dashboard-profile-size; + min-height: $bar-menus-menu-dashboard-profile-size; + border-radius: $bar-menus-menu-dashboard-profile-radius; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } - &.ram { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label); - } - - &.gpu { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label); - } - - &.storage { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label); - } + .profile-name { + font-size: 1.5em; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name); + margin-top: 0.75em; + } + } + + .power-menu-container { + margin-left: 0em; + + .dashboard-button { + min-width: 3em; + min-height: 2.5em; + + &:not(:last-child) { + margin-bottom: 0.75em; + } + + label { + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); + font-size: 1.7em; + } + + &.shutdown { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-shutdown + ); + + label { + font-size: 1.9em; + } + } + + &.restart { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-restart + ); + + label { + font-size: 1.9em; + } + } + + &.lock { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-logout + ); + } + + &.sleep { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-sleep + ); + } + + &:hover { + &.shutdown { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-shutdown + ), + 0.5 + ); + } + + &.restart { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-restart + ), + 0.5 + ); + } + + &.lock { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-logout + ), + 0.5 + ); + } + + &.sleep { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-powermenu-sleep + ), + 0.5 + ); + } + } + } + } + + .shortcuts-container { + font-size: 1em; + + .dashboard-card { + padding: 1.5em; + + button { + min-height: 2.5em; + min-width: 2.5em; + } + } + + .card-button-section-container.visible { + margin-right: 1.5em; + } + + .top-button.paired { + margin-bottom: 1.5em; + } + + .container { + margin-top: 0em; + + &.most-used { + margin-right: 0.65em; + } + + &.utilities.paired { + margin-left: 0em; + } + + button { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-shortcuts-background + ); + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); + min-height: 3em; + + label { + font-size: 1.5em; + } + + &.record.active { + background: $red; + + &:hover { + background: transparentize($red, 0.5); + } + } + + &:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-shortcuts-background + ), + 0.5 + ); + } + } + } + } + + .controls-container { + &.dashboard-card { + margin-top: 0em; + } + + button { + padding: 0em; + min-height: 3em; + min-width: 3.8em; + + label { + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text); + font-size: 1.6em; + } + + &:not(:last-child) { + margin-right: 1em; + } + + &.wifi { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ); + } + + &.bluetooth { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ); + } + + &.notifications { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ); + } + + &.playback { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ); + } + + &.input { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ); + } + + &.wifi:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ), + 0.5 + ); + } + + &.bluetooth:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ), + 0.5 + ); + } + + &.notifications:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ), + 0.5 + ); + } + + &.playback:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ), + 0.5 + ); + } + + &.input:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ), + 0.5 + ); + } + + &.disabled { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-disabled, + $bar-menus-menu-dashboard-controls-disabled + ); + + &.wifi:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-wifi-background + ), + 0.5 + ); + } + + &.bluetooth:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-bluetooth-background + ), + 0.5 + ); + } + + &.notifications:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-notifications-background + ), + 0.5 + ); + } + + &.playback:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-volume-background + ), + 0.5 + ); + } + + &.input:hover { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-controls-input-background + ), + 0.5 + ); + } + } + } + } + + .directories-container { + &.dashboard-card { + margin-top: 0em; + padding-left: 1.5em; + padding-right: 0em; + } + + .directory-link { + padding: 0.5em 0em; + min-width: 9em; + + &:last-child { + margin-bottom: 0em; + } + + label { + font-size: 1.3em; + } + + &.right.top { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-top-color + ); + } + + &.right.middle { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-middle-color + ); + } + + &.right.bottom { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-right-bottom-color + ); + } + + &.left.top { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-top-color + ); + } + + &.left.middle { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-middle-color + ); + } + + &.left.bottom { + color: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-dashboard-directories-left-bottom-color + ); + } + + &:hover { + opacity: 0.5; + } + } + } + + .stats-container { + margin-top: 0em; + + .stat { + label { + margin-right: 0.75em; + font-size: 1.3em; + min-width: 1.65em; + } + + &.cpu label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon); + } + + &.ram label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon); + } + + &.gpu label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon); + } + + &.storage label { + color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon); + } + + .stats-bar { + levelbar * { + transition: 200ms; + } + + trough { + min-height: 1.05em; + } + + block { + border-radius: 0.4em; + + &.empty { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-background, + $bar-menus-menu-dashboard-monitors-bar_background + ); + } + + &.filled { + padding-left: 0.85em; + } + } + } + + &.cpu .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-cpu-bar + ); + } + + &.ram .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-ram-bar + ); + } + + &.gpu .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-gpu-bar + ); + } + + &.storage .stats-bar block.filled { + background: if( + $bar-menus-monochrome, + $bar-menus-progressbar-foreground, + $bar-menus-menu-dashboard-monitors-disk-bar + ); + } + } + + .stat-value { + margin-bottom: 0.5em; + font-size: 0.9em; + + &.cpu { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label); + } + + &.ram { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label); + } + + &.gpu { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label); + } + + &.storage { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label); + } + } } - } +} + +.dashboard-content-items > :not(:first-child):not(:last-child) { + margin-top: 0; + margin-bottom: 0.65em; +} + +.dashboard-content-items > :first-child { + margin-top: 1.3em; + margin-bottom: 0.65em; +} + +.dashboard-content-items > :last-child { + margin-top: 0; + margin-bottom: 1.3em; +} + +.dashboard-content-items > :only-child { + margin-top: 1.3em; + margin-bottom: 1.3em; } From 37ab13a829da1805aa9a44c25ecea2dc2e732389 Mon Sep 17 00:00:00 2001 From: Rubin Bhandari Date: Sat, 26 Oct 2024 11:57:33 +0545 Subject: [PATCH 6/7] fix: dont hardcode file manager and make use of $TERM (#361) * feat: make executables dynamic * feat: make executables dynamic * Update modules/menus/dashboard/stats/index.ts Co-authored-by: Jas Singh * Update widget/settings/pages/config/general/index.ts Co-authored-by: Jas Singh * Update options.ts Co-authored-by: Jas Singh * Update modules/menus/dashboard/stats/index.ts Co-authored-by: Jas Singh * fix: var to term --------- Co-authored-by: Jas Singh --- modules/menus/dashboard/stats/index.ts | 93 ++++++++------------------ options.ts | 15 ++--- 2 files changed, 36 insertions(+), 72 deletions(-) diff --git a/modules/menus/dashboard/stats/index.ts b/modules/menus/dashboard/stats/index.ts index f10e0cc..542a23f 100644 --- a/modules/menus/dashboard/stats/index.ts +++ b/modules/menus/dashboard/stats/index.ts @@ -23,6 +23,11 @@ interval.connect('changed', () => { storageService.updateTimer(interval.value); }); +const handleClick = (): void => { + App.closeWindow('dashboardmenu'); + Utils.execAsync(`bash -c "${terminal} -e btop"`).catch((err) => `Failed to open btop: ${err}`); +}; + const Stats = (): BoxWidget => { const divide = ([total, free]: number[]): number => free / total; @@ -82,28 +87,18 @@ const Stats = (): BoxWidget => { return (self.children = [ Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return (): void => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.Label({ class_name: 'txt-icon', label: '󰢮', }), }), Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return (): void => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.LevelBar({ class_name: 'stats-bar', hexpand: true, @@ -150,28 +145,18 @@ const Stats = (): BoxWidget => { vpack: 'center', children: [ Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.Label({ class_name: 'txt-icon', label: '', }), }), Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.LevelBar({ class_name: 'stats-bar', hexpand: true, @@ -199,28 +184,18 @@ const Stats = (): BoxWidget => { hexpand: true, children: [ Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.Label({ class_name: 'txt-icon', label: '', }), }), Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.LevelBar({ class_name: 'stats-bar', hexpand: true, @@ -251,28 +226,18 @@ const Stats = (): BoxWidget => { vpack: 'center', children: [ Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.Label({ class_name: 'txt-icon', label: '󰋊', }), }), Widget.Button({ - on_primary_click: terminal.bind('value').as((term) => { - return () => { - App.closeWindow('dashboardmenu'); - Utils.execAsync(`bash -c "${term} -e btop"`).catch( - (err) => `Failed to open btop: ${err}`, - ); - }; - }), + on_primary_click: () => { + handleClick(); + }, child: Widget.LevelBar({ class_name: 'stats-bar', hexpand: true, diff --git a/options.ts b/options.ts index 1e8dce8..a4f8a2a 100644 --- a/options.ts +++ b/options.ts @@ -1114,29 +1114,29 @@ const options = mkOptions(OPTIONS, { left: { directory1: { label: opt('󰉍 Downloads'), - command: opt('bash -c "dolphin $HOME/Downloads/"'), + command: opt('bash -c "xdg-open $HOME/Downloads/"'), }, directory2: { label: opt('󰉏 Videos'), - command: opt('bash -c "dolphin $HOME/Videos/"'), + command: opt('bash -c "xdg-open $HOME/Videos/"'), }, directory3: { label: opt('󰚝 Projects'), - command: opt('bash -c "dolphin $HOME/Projects/"'), + command: opt('bash -c "xdg-open $HOME/Projects/"'), }, }, right: { directory1: { label: opt('󱧶 Documents'), - command: opt('bash -c "dolphin $HOME/Documents/"'), + command: opt('bash -c "xdg-open $HOME/Documents/"'), }, directory2: { label: opt('󰉏 Pictures'), - command: opt('bash -c "dolphin $HOME/Pictures/"'), + command: opt('bash -c "xdg-open $HOME/Pictures/"'), }, directory3: { label: opt('󱂵 Home'), - command: opt('bash -c "dolphin $HOME/"'), + command: opt('bash -c "xdg-open $HOME/"'), }, }, }, @@ -1160,8 +1160,7 @@ const options = mkOptions(OPTIONS, { scalingPriority: opt('gdk'), - terminal: opt('kitty'), - + terminal: opt('$TERM'), tear: opt(false), wallpaper: { From bf6fc3dbea49235aad11de3fd87335f1436981cd Mon Sep 17 00:00:00 2001 From: Rubin Bhandari Date: Sat, 26 Oct 2024 12:50:42 +0545 Subject: [PATCH 7/7] feat: add switch and slider radius (#367) * feat: add switch radius * feat: add slider radius * Update slider radii * Update widget/settings/pages/theme/menus/index.ts Co-authored-by: Jas Singh * Update widget/settings/pages/theme/menus/index.ts Co-authored-by: Jas Singh * Update widget/settings/pages/theme/menus/index.ts Co-authored-by: Jas Singh * Update widget/settings/pages/theme/menus/index.ts Co-authored-by: Jas Singh --------- Co-authored-by: Jas Singh --- options.ts | 4 + scss/style/menus/media.scss | 245 +++++++++++---------- scss/style/menus/menu.scss | 12 +- widget/settings/pages/theme/menus/index.ts | 16 ++ 4 files changed, 158 insertions(+), 119 deletions(-) diff --git a/options.ts b/options.ts index a4f8a2a..6a72f82 100644 --- a/options.ts +++ b/options.ts @@ -387,6 +387,8 @@ const options = mkOptions(OPTIONS, { enabled: opt(colors.lavender), disabled: opt(tertiary_colors.surface0), puck: opt(secondary_colors.surface1), + radius: opt('0.2em'), + slider_radius: opt('0.2em'), }, check_radio_button: { background: opt(colors.surface1), @@ -411,6 +413,8 @@ const options = mkOptions(OPTIONS, { background: opt(tertiary_colors.surface2), backgroundhover: opt(colors.surface1), puck: opt(colors.overlay0), + slider_radius: opt('0.3rem'), + progress_radius: opt('0.3rem'), }, dropdownmenu: { background: opt(colors.crust), diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss index 7c6205c..ea861d2 100644 --- a/scss/style/menus/media.scss +++ b/scss/style/menus/media.scss @@ -1,126 +1,145 @@ .menu-items.media { - background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color); - border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color); - opacity: $bar-menus-opacity * 0.01; - + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color); + opacity: $bar-menus-opacity * 0.01; } .menu-items-container.media { - * { - font-size: $font-size * $bar-menus-menu-media-scaling * 0.01; - } - - min-width: 23em * $bar-menus-menu-media-scaling * 0.01; - min-height: 10em * $bar-menus-menu-media-scaling * 0.01; - - .menu-section-container { - margin: 1em 0em; - } - - .menu-items-section { - border-radius: $bar-menus-card_radius; - padding: 0em; - } - - .menu-content { - border-radius: 0.4em; - background-size: cover; - background-position: center; - } - - .media-content { - margin: 1em; - } - - .media-indicator-current-song-name { - margin-bottom: 0.75rem; - } - - .media-indicator-current-song-author { - margin-bottom: 0.75rem; - } - - .media-indicator-current-song-name-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song); - font-size: 1.35em; - } - - .media-indicator-current-song-author-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist); - font-size: 1em; - } - - .media-indicator-current-song-album-label { - color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album); - font-size: 1em; - } - - .media-indicator-current-controls { - margin-top: 1.5rem; - margin-bottom: 0.5rem; - } - - .media-indicator-control-button { - margin: 0rem 0.5rem; - } - - .media-indicator-control-button { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); - color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text); - min-height: 1.8em; - min-width: 2.5em; - border-radius: 0.2rem; - - &.disabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); + * { + font-size: $font-size * $bar-menus-menu-media-scaling * 0.01; } - &.enabled { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + min-width: 23em * $bar-menus-menu-media-scaling * 0.01; + min-height: 10em * $bar-menus-menu-media-scaling * 0.01; - &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5); - } + .menu-section-container { + margin: 1em 0em; + } - &.active { - background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled); + .menu-items-section { + border-radius: $bar-menus-card_radius; + padding: 0em; + } + + .menu-content { + border-radius: 0.4em; + background-size: cover; + background-position: center; + } + + .media-content { + margin: 1em; + } + + .media-indicator-current-song-name { + margin-bottom: 0.75rem; + } + + .media-indicator-current-song-author { + margin-bottom: 0.75rem; + } + + .media-indicator-current-song-name-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song); + font-size: 1.35em; + } + + .media-indicator-current-song-author-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist); + font-size: 1em; + } + + .media-indicator-current-song-album-label { + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album); + font-size: 1em; + } + + .media-indicator-current-controls { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + + .media-indicator-control-button { + margin: 0rem 0.5rem; + } + + .media-indicator-control-button { + background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text); + min-height: 1.8em; + min-width: 2.5em; + border-radius: 0.2rem; + + &.disabled { + background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive); + } + + &.enabled { + background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background); + + &:hover { + background: transparentize( + if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), + 0.5 + ); + } + + &.active { + background: if( + $bar-menus-monochrome, + $bar-menus-buttons-default, + $bar-menus-menu-media-buttons-enabled + ); + + &:hover { + background: transparentize( + if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), + 0.5 + ); + } + } + } + } + + image { + font-size: 1.1em; + } + + .menu-slider.media.progress { + margin-top: 1em; + margin-bottom: 1em; + + trough { + background: if( + $bar-menus-monochrome, + $bar-menus-slider-background, + $bar-menus-menu-media-slider-background + ); + border-radius: $bar-menus-slider-progress-radius; + + highlight, + progress { + border-radius: $bar-menus-slider-progress-radius; + min-height: 0.85em; + background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); + } + } + + slider { + background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck); + } &:hover { - background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5); + trough { + background: transparentize( + if( + $bar-menus-monochrome, + $bar-menus-slider-backgroundhover, + $bar-menus-menu-media-slider-backgroundhover + ), + 0.3 + ); + } } - } } - - } - - image { - font-size: 1.1em; - } - - .menu-slider.media.progress { - margin-top: 1em; - margin-bottom: 1em; - - trough { - background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background); - border-radius: 0.2em; - - highlight, - progress { - border-radius: 0.2em; - min-height: .85em; - background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); - } - } - - slider { - background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck); - } - - &:hover { - trough { - background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3); - } - } - } } diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 349169a..1232b03 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -1,12 +1,12 @@ .menu-slider { trough { - border-radius: 0.3rem; + border-radius: $bar-menus-slider-progress-radius; background: $surface0; highlight, progress { background: $peach; - border-radius: 0.3rem; + border-radius: $bar-menus-slider-progress-radius; } } @@ -16,7 +16,7 @@ min-height: 0.6rem; min-width: 0.6rem; border: 0rem solid transparent; - border-radius: 0.3rem; + border-radius: $bar-menus-slider-slider-radius; } &:hover { @@ -34,7 +34,7 @@ .menu-switch { font-size: 1.3em; background-color: $surface0; - border-radius: 0.2em; + border-radius: $bar-menus-switch-radius; &:checked { background: $sky; @@ -44,7 +44,7 @@ highlight, progress { background-color: $peach; - border-radius: 0.3em; + border-radius: $bar-menus-switch-radius; } } @@ -54,7 +54,7 @@ min-height: 1em; min-width: 1em; border: 0em solid transparent; - border-radius: 0.2em; + border-radius: $bar-menus-switch-slider-radius; margin: 0.1em 0.15em; } diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index 333fe96..447d6a3 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/widget/settings/pages/theme/menus/index.ts @@ -91,6 +91,12 @@ export const MenuTheme = (): Scrollable => { Header('Switch'), Option({ opt: options.theme.bar.menus.switch.enabled, title: 'Enabled', type: 'color' }), Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }), + Option({ opt: options.theme.bar.menus.switch.radius, title: 'Switch Radius', type: 'string' }), + Option({ + opt: options.theme.bar.menus.switch.slider_radius, + title: 'Switch Puck Radius', + type: 'string', + }), Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }), Header('Check/Radio Buttons'), @@ -123,6 +129,16 @@ export const MenuTheme = (): Scrollable => { title: 'Background (Hover)', type: 'color', }), + Option({ + opt: options.theme.bar.menus.slider.slider_radius, + title: 'Slider Puck Radius', + type: 'string', + }), + Option({ + opt: options.theme.bar.menus.slider.progress_radius, + title: 'Slider/Progress Bar Radius', + type: 'string', + }), Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }), Header('Dropdown Menu'),