mod: align the workflow icon to the workflow name text

Odaimoko · Dec 28, 2024 · 1f914fe · 1f914fe
1 parent 242fec2
commit 1f914fe
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/src/ui/react-view/obsidian-icon-view.tsx b/src/ui/react-view/obsidian-icon-view.tsx
@@ -6,16 +6,25 @@ import {I_InteractableId} from "../pure-react/props-typing/i-interactable-id";
 import {GeneralMouseEventHandler} from "../pure-react/view-template/event-handling/general-mouse-event-handler";
 import {I_Stylable} from "../pure-react/props-typing/i-stylable";
 import {ClickableView, I_IconClickable} from "../pure-react/view-template/clickable-view";
+// Obsidian's icon will offset by 4px upwards, so we drive it down.
+const clickableIconTransform = {transform: `translateY(4px)`};
 
 // const taskLinkHtmlString = getIcon("link")?.outerHTML;
 /**
  * https://lucide.dev/icons/
  * @param iconName
  * @constructor
  */
-export function ObsidianIconView({iconName, style}: { iconName: string } & I_Stylable) {
-    const htmlString = getIcon(iconName)?.outerHTML
-    return <HtmlStringComponent style={style} htmlString={htmlString}/>;
+export function ObsidianIconView({iconName, style, yOffset}: { iconName: string, yOffset?: boolean } & I_Stylable) {
+    const icon: SVGSVGElement | null = getIcon(iconName);
+    yOffset = yOffset ?? true; // default to true
+    if (icon) {
+        icon.setCssStyles(style as CSSStyleDeclaration)
+        if (yOffset)
+            icon.setCssStyles(clickableIconTransform); // do not override th e
+    }
+    const htmlString = icon?.outerHTML
+    return <HtmlStringComponent style={clickableIconTransform} htmlString={htmlString}/>;
 }
 
 /**
@@ -33,18 +42,19 @@ export function InternalLinkView({content, onIconClicked, onContentClicked, styl
     />
 }
 
+
 /**
  * Can also be used as non-clickable
  */
 export function ClickableObsidianIconView({
-                                      content,
-                                      onIconClicked,
-                                      onContentClicked,
-                                      iconName,
-                                      style,
-                                      clickable,
-                                      interactableId
-                                  }: {
+                                              content,
+                                              onIconClicked,
+                                              onContentClicked,
+                                              iconName,
+                                              style,
+                                              clickable,
+                                              interactableId
+                                          }: {
     iconName: string,
 } & I_IconClickable & I_Stylable & I_InteractableId) {
     return <ClickableView clickable={clickable} icon={<ObsidianIconView iconName={iconName}/>} content={content}

diff --git a/src/ui/react-view/tag-project-style.tsx b/src/ui/react-view/tag-project-style.tsx
@@ -18,7 +18,8 @@ function getIconNameByWorkflowType(type: WorkflowType) {
 }
 
 export function getIconViewByWorkflowType(type: WorkflowType) {
-    return <ObsidianIconView iconName={getIconNameByWorkflowType(type)}/>;
+    // We do not offset here, the icon will center without yOffset
+    return <ObsidianIconView iconName={getIconNameByWorkflowType(type)} yOffset={false}/>;
 }
 
 export function getIconByWorkflow(workflow: I_OdaPmWorkflow) {