Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

use makeIconClass for widgets, add 'brands' support (#920)

Browse Source
This commit is contained in:
Mike Sawka 2024-10-01 09:51:22 -07:00 committed by GitHub
parent 9173db42e3
commit 538d4be8be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/app/workspace/workspace.tsx
View File

@ -80,20 +80,6 @@ async function handleWidgetSelect(blockDef: BlockDef) {
createBlock(blockDef); createBlock(blockDef);
} }
function isIconValid(icon: string): boolean {
if (util.isBlank(icon)) {
return false;
}
return icon.match(iconRegex) != null;
}
function getIconClass(icon: string): string {
if (!isIconValid(icon)) {
return "fa fa-regular fa-browser fa-fw";
}
return `fa fa-solid fa-${icon} fa-fw`;
}
const Widget = React.memo(({ widget }: { widget: WidgetConfigType }) => { const Widget = React.memo(({ widget }: { widget: WidgetConfigType }) => {
return ( return (
<div <div
@ -102,7 +88,7 @@ const Widget = React.memo(({ widget }: { widget: WidgetConfigType }) => {
title={widget.description || widget.label} title={widget.description || widget.label}
> >
<div className="widget-icon" style={{ color: widget.color }}> <div className="widget-icon" style={{ color: widget.color }}>
<i className={getIconClass(widget.icon)}></i> <i className={util.makeIconClass(widget.icon, true, { defaultIcon: "browser" })}></i>
</div> </div>
{!util.isBlank(widget.label) ? <div className="widget-label">{widget.label}</div> : null} {!util.isBlank(widget.label) ? <div className="widget-label">{widget.label}</div> : null}
</div> </div>

15
frontend/util/util.ts
View File

@ -81,8 +81,11 @@ function jsonDeepEqual(v1: any, v2: any): boolean {
return false; return false;
} }
function makeIconClass(icon: string, fw: boolean, opts?: { spin: boolean }): string { function makeIconClass(icon: string, fw: boolean, opts?: { spin?: boolean; defaultIcon?: string }): string {
if (icon == null) { if (isBlank(icon)) {
if (opts?.defaultIcon != null) {
return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
}
return null; return null;
} }
if (icon.match(/^(solid@)?[a-z0-9-]+$/)) { if (icon.match(/^(solid@)?[a-z0-9-]+$/)) {
@ -95,6 +98,14 @@ function makeIconClass(icon: string, fw: boolean, opts?: { spin: boolean }): str
icon = icon.replace(/^regular@/, ""); icon = icon.replace(/^regular@/, "");
return clsx(`fa fa-sharp fa-regular fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null); return clsx(`fa fa-sharp fa-regular fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
} }
if (icon.match(/^brands@[a-z0-9-]+$/)) {
// strip off the "brands@" prefix if it exists
icon = icon.replace(/^brands@/, "");
return clsx(`fa fa-brands fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
}
if (opts?.defaultIcon != null) {
return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
}
return null; return null;
} }