From d120665b53faa5c8bfee7b04b33f3214c5b9c852 Mon Sep 17 00:00:00 2001 From: neCo <50079394+neCo2@users.noreply.github.com> Date: Sat, 8 Jun 2024 17:34:08 +0200 Subject: [PATCH 1/6] changed all SVGs to reusable components --- mikupad.html | 233 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 207 insertions(+), 26 deletions(-) diff --git a/mikupad.html b/mikupad.html index 4634214..ae3101c 100644 --- a/mikupad.html +++ b/mikupad.html @@ -1804,8 +1804,8 @@ setContentHeight(contentArea.current.scrollHeight); }, [isCollapsed]); - const expandSvg = html``; - const collapseSvg = html``; + const expandSvg = html`<${SVG_ArrowDown}/>`; + const collapseSvg = html`<${SVG_ArrowUp}/>`; return html`
@@ -1927,11 +1927,11 @@ } } - const trashSvg = html``; - const renameSvg = html``; + const trashSvg = html`<${SVG_Trash}/>`; + const renameSvg = html`<${SVG_Rename}/>`; - const confirmSvg = html``; - const cancelSvg = html``; + const confirmSvg = html`<${SVG_Confirm}/>`; + const cancelSvg = html`<${SVG_Cancel}/>`; return html`
@@ -1994,7 +1994,189 @@
`; } - +const SVG = ({ + stroke="currentColor", + fill="currentColor", + strokeWidth="0", + children, + ...props + }) => { + return html` + + ${children} + +`}; +const SVG_Close = ({...props}) => { + return html` + <${SVG} + viewBox="-1 -1 10 10"> + + +`}; +const SVG_Ex = ({...props}) => { + return html` + <${SVG} + width="16" + height="16" + viewBox="0 0 128 128"> + + +`}; +const SVG_Confirm = ({...props}) => { + return html` + <${SVG} + width="16" + height="16" + viewBox="0 0 128 128"> + + +`}; +const SVG_Cancel = ({...props}) => { + return html` + <${SVG} + width="16" + height="16" + viewBox="0 0 128 128"> + + +`}; +const SVG_Trash = ({...props}) => { + return html` + <${SVG} + width="16" + height="16" + viewBox="0 0 490.646 490.646"> + + +`}; +const SVG_Rename = ({...props}) => { + return html` + <${SVG} + width="16" + height="16" + viewBox="0 0 512 448"> + + +`}; +const SVG_ArrowUp = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 0 330 330" + width="12" + height="12"> + + +`}; +const SVG_ArrowDown = ({...props}) => { + return html` + <${SVG_ArrowUp} + ...${props} + style=${{ 'transform':'rotate(180deg)' }}/> +`}; +const SVG_Settings = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="-1 -5 8 7"> + + +`}; +const SVG_MobileSidebar = ({...props}) => { + return html` + <${SVG} + ...${props} + transform="translate(0, 2)" + width="16" + height="16" + viewBox="0 0 512 512"> + + +`}; +const SVG_ShowKey = ({...props}) => { + return html` + <${SVG} + ...${props} + width="16" + height="16" + viewBox="0 0 24 24"> + + +`}; +const SVG_HideKey = ({...props}) => { + return html` + <${SVG} + ...${props} + width="16" + height="16" + viewBox="0 0 24 24"> + + +`}; +const SVG_SysPrompt = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 -10 10 10"> + + +`}; +const SVG_instTemplate = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 -10 5 10"> + + +`}; +const SVG_ChatMode = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 0 10 10"> + + +`}; +const SVG_CompletionMode = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="2 -1 34 28"> + + +`}; +const SVG_Regen = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 0 40.499 40.5" + width="12" + height="12"> + + +`}; +const SVG_Undo = ({...props}) => { + return html` + <${SVG} + ...${props} + viewBox="0 0 24 24" + width="12" + height="12"> + + +`}; +const SVG_Redo = ({...props}) => { + return html` + <${SVG_Undo} + ...${props} + style=${{ 'transform':'scaleX(-1)' }}/> +`}; function Modal({ isOpen, onClose, title, description, children, ...props }) { if (!isOpen) { @@ -2026,7 +2208,7 @@
@@ -2042,7 +2224,7 @@
${children}
- `; + `; } function MemoryModal({ isOpen, closeModal, memoryTokens, handleMemoryTokensChange, cancel }) { @@ -2289,13 +2471,13 @@
@@ -4965,8 +5147,7 @@