From 4accdd0ac546f4e2978f98761a7d1afa0ce44ef3 Mon Sep 17 00:00:00 2001 From: Aruseli Date: Thu, 18 Jul 2024 15:16:18 +0000 Subject: [PATCH] added icons --- .vscode/settings.json | 26 ++++++++++++++++-- imports/icons/down.tsx | 51 ++++++++++++++++++++++++++++++++++ imports/icons/from.tsx | 27 ++++++++++++++++++ imports/icons/in.tsx | 37 +++++++++++++++++++++++++ imports/icons/out.tsx | 49 +++++++++++++++++++++++++++++++++ imports/icons/to.tsx | 25 +++++++++++++++++ imports/icons/type.tsx | 47 +++++++++++++++++++++++++++++++ imports/icons/typed.tsx | 29 ++++++++++++++++++++ imports/icons/up.tsx | 61 +++++++++++++++++++++++++++++++++++++++++ imports/tree.tsx | 34 +++++++++++++++++------ package-lock.json | 4 +-- 11 files changed, 378 insertions(+), 12 deletions(-) create mode 100644 imports/icons/down.tsx create mode 100644 imports/icons/from.tsx create mode 100644 imports/icons/in.tsx create mode 100644 imports/icons/out.tsx create mode 100644 imports/icons/to.tsx create mode 100644 imports/icons/type.tsx create mode 100644 imports/icons/typed.tsx create mode 100644 imports/icons/up.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 55712c19..222cc7d3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,25 @@ { - "typescript.tsdk": "node_modules/typescript/lib" -} \ No newline at end of file + "typescript.tsdk": "node_modules/typescript/lib", + "workbench.colorCustomizations": { + "activityBar.background": "#73b3e7", + "titleBar.activeBackground": "#97b8ed", + "titleBar.activeForeground": "#001a42", + "activityBar.inactiveForeground": "#005eff", //icon inactive + } +} + +// { +// "typescript.tsdk": "node_modules/typescript/lib", +// "workbench.colorCustomizations": { +// "activityBar.background": "#2af7dc", +// "titleBar.activeBackground": "#8bf125", +// "titleBar.activeForeground": "#f953b7", +// "activityBar.activeBorder": "#4f3be6", //icon border left active +// "activityBar.activeBackground": "#f6a0ef", //icon background active +// "activityBar.border": "#9dff00", //border left +// "activityBar.foreground": "#4f3be6", //icons active +// "activityBar.inactiveForeground": "#0004ff", //icon inactive +// "activityBarBadge.background": "#e63bbe", //icon's badge background +// "activityBarBadge.foreground": "#2e4a01", //icon's badge color +// } +// } \ No newline at end of file diff --git a/imports/icons/down.tsx b/imports/icons/down.tsx new file mode 100644 index 00000000..6f19df78 --- /dev/null +++ b/imports/icons/down.tsx @@ -0,0 +1,51 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function DownIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/from.tsx b/imports/icons/from.tsx new file mode 100644 index 00000000..2656bd9a --- /dev/null +++ b/imports/icons/from.tsx @@ -0,0 +1,27 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function FromIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/in.tsx b/imports/icons/in.tsx new file mode 100644 index 00000000..9cfa8224 --- /dev/null +++ b/imports/icons/in.tsx @@ -0,0 +1,37 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function InIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/out.tsx b/imports/icons/out.tsx new file mode 100644 index 00000000..0317c1f9 --- /dev/null +++ b/imports/icons/out.tsx @@ -0,0 +1,49 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function OutIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/to.tsx b/imports/icons/to.tsx new file mode 100644 index 00000000..1a794de6 --- /dev/null +++ b/imports/icons/to.tsx @@ -0,0 +1,25 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function ToIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/type.tsx b/imports/icons/type.tsx new file mode 100644 index 00000000..2a4c233d --- /dev/null +++ b/imports/icons/type.tsx @@ -0,0 +1,47 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function TypeIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/typed.tsx b/imports/icons/typed.tsx new file mode 100644 index 00000000..3ac5135d --- /dev/null +++ b/imports/icons/typed.tsx @@ -0,0 +1,29 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function TypedIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + ) +} \ No newline at end of file diff --git a/imports/icons/up.tsx b/imports/icons/up.tsx new file mode 100644 index 00000000..9e1a2796 --- /dev/null +++ b/imports/icons/up.tsx @@ -0,0 +1,61 @@ +import { useColorMode } from "@chakra-ui/react"; + +export function UpIcon({ + strokePath = '#000', + strokeCircle = '#000', +}:{ + strokePath?: string; + strokeCircle?: string; +}) { + const { colorMode } = useColorMode(); + return ( + + + + + + + + + + + + + + ) +} diff --git a/imports/tree.tsx b/imports/tree.tsx index 95c3d521..a538ad59 100644 --- a/imports/tree.tsx +++ b/imports/tree.tsx @@ -9,6 +9,7 @@ import { EditableInput, EditablePreview, EditableTextarea, + IconButton } from '@chakra-ui/react'; import { useDeep } from "@deep-foundation/deeplinks/imports/client"; import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks'; @@ -19,6 +20,14 @@ import { link } from 'fs'; import { MdEdit, MdSaveAlt } from "react-icons/md"; import { Editor } from './editor'; import isEqual from 'lodash/isEqual'; +import { TypedIcon } from './icons/typed'; +import { DownIcon } from './icons/down'; +import { UpIcon } from './icons/up'; +import { TypeIcon } from './icons/type'; +import { InIcon } from './icons/in'; +import { OutIcon } from './icons/out'; +import { FromIcon } from './icons/from'; +import { ToIcon } from './icons/to'; type NavDirection = 'current' | 'from' | 'type' | 'to' | 'out' | 'typed' | 'in' | 'up' | 'down' | 'promises' | 'rejects' | 'selectors' | 'selected' | 'prev' | 'next' | 'contains' | 'value' | 'results' | 'auto'; @@ -343,8 +352,9 @@ export const PathItem = memo(function PathItem({ variant={!link?.['from_id'] ? 'disabled' : p === 'from' ? 'active' : undefined} justifyContent='right' textAlign='right' onClick={() => go({ itemIndex: i, position: 'from', active: true })} disabled={!link?.from_id} + rightIcon={} > - from ⊢ + from {symbol(link?.from)} {!!link?.from && deep.nameLocal(link.from_id)} {link?.from_id} @@ -371,22 +383,26 @@ export const PathItem = memo(function PathItem({ ref={p === 'out' ? ref : undefined} variant={p === 'out' ? 'active' : undefined} justifyContent='left' textAlign='left' onClick={() => go({ itemIndex: i, position: 'out', active: true })} + leftIcon={} > - ⊨ out + out + {/* } /> */} @@ -394,15 +410,17 @@ export const PathItem = memo(function PathItem({ ref={p === 'up' ? ref : undefined} variant={p === 'up' ? 'active' : undefined} justifyContent='center' onClick={() => go({ itemIndex: i, position: 'up', active: true })} + leftIcon={} > - ≥ up + up