diff --git a/manifest.json b/manifest.json index 12af82b..717d892 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "cmdr", "name": "Commander", - "version": "0.0.2", + "version": "0.0.3", "minAppVersion": "0.12.0", "description": "Customize your workspace by adding commands /everywhere/.", "author": "jsmorabito & phibr0", diff --git a/package.json b/package.json index e0743f3..05819c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cmdr", - "version": "0.0.2", + "version": "0.0.3", "description": "Customize your workspace by adding commands /everywhere/.", "main": "main.js", "scripts": { diff --git a/src/styles.scss b/src/styles.scss index 43a0d8e..3b8764e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -43,7 +43,7 @@ display: flex; place-items: center; flex-flow: column; - height: 80%; + margin: 3rem 0px; place-content: center; svg { @@ -143,7 +143,7 @@ flex-direction: column; align-items: flex-start; border: none; - background-color: var(--background-secondary-alt); + background-color: var(--background-modifier-border); padding: 6px 12px; border-radius: 12px; diff --git a/src/ui/components/commandViewerComponent.tsx b/src/ui/components/commandViewerComponent.tsx index 92ea199..700938e 100644 --- a/src/ui/components/commandViewerComponent.tsx +++ b/src/ui/components/commandViewerComponent.tsx @@ -52,9 +52,9 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps): await manager.addCommand(pair); this.forceUpdate(); }} + aria-label="Add new" >
- Add new
diff --git a/src/ui/components/macroBuilderComponent.tsx b/src/ui/components/macroBuilderComponent.tsx index 9f46403..a44ff09 100644 --- a/src/ui/components/macroBuilderComponent.tsx +++ b/src/ui/components/macroBuilderComponent.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useState, } from "preact/hooks"; import ReactFlow, { useEdgesState, useNodesState, Background, Edge, ReactFlowProvider, addEdge } from 'react-flow-renderer/nocss'; import chroma from "chroma-js"; import { ReactFlowInstance } from "react-flow-renderer"; +import { ObsidianIcon } from "src/util"; interface BaseComponentProps { color: string; @@ -112,14 +113,3 @@ export default function MacroBuilder(): h.JSX.Element { ); } - -function ObsidianIcon({ icon, size }: { icon: string, size?: number }): h.JSX.Element { - const iconEl = useRef(null); - - useEffect(() => { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - setIcon(iconEl.current!, icon, size); - }, [icon, size]); - - return
; -} diff --git a/src/util.ts b/src/util.tsx similarity index 71% rename from src/util.ts rename to src/util.tsx index 2a424f1..bbd7736 100644 --- a/src/util.ts +++ b/src/util.tsx @@ -2,8 +2,10 @@ import { CommandIconPair } from './types'; import CommanderPlugin from "./main"; import AddCommandModal from "./ui/addCommandModal"; import ChooseIconModal from './ui/chooseIconModal'; -import { Command } from 'obsidian'; +import { Command, setIcon } from 'obsidian'; import ChooseCustomNameModal from './ui/chooseCustomNameModal'; +import { h } from 'preact'; +import { useRef, useEffect } from 'preact/hooks'; /** * It creates a modal, waits for the user to select a command, and then creates another modal to wait @@ -34,3 +36,14 @@ export async function chooseNewCommand(plugin: CommanderPlugin): Promise(null); + + useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + setIcon(iconEl.current!, icon, size); + }, [icon, size]); + + return
; +}