From 2e39671e683f2fdf5a94dafe8d49c4c5befa38c8 Mon Sep 17 00:00:00 2001 From: Sam Nystrom Date: Wed, 13 Mar 2024 05:14:56 +0000 Subject: refactor: finish removing CSS modules --- src/NodeEditor.css | 18 ++++++ src/NodeEditor.module.css | 16 ----- src/NodeEditor.tsx | 12 ++-- src/Toolbar.css | 78 ++++++++++++++++++++++++ src/Toolbar.module.css | 76 ----------------------- src/Toolbar.tsx | 6 +- src/node.css | 149 ++++++++++++++++++++++++++++++++++++++++++++++ src/node.module.css | 148 --------------------------------------------- src/node.tsx | 18 +++--- 9 files changed, 261 insertions(+), 260 deletions(-) create mode 100644 src/NodeEditor.css delete mode 100644 src/NodeEditor.module.css create mode 100644 src/Toolbar.css delete mode 100644 src/Toolbar.module.css create mode 100644 src/node.css delete mode 100644 src/node.module.css (limited to 'src') diff --git a/src/NodeEditor.css b/src/NodeEditor.css new file mode 100644 index 0000000..449286e --- /dev/null +++ b/src/NodeEditor.css @@ -0,0 +1,18 @@ +@scope (.__NodeEditor) { + :scope { + --base: #122236; + --surface: #242424; + --overlay: #484848; + --primary: #1c4c87; + + --data-any: #36c965; + --data-float: #a0a0a0; + --data-vector: #5e29d9; + } + + .link { + fill: none; + stroke: var(--data-float); + stroke-width: 2; + } +} \ No newline at end of file diff --git a/src/NodeEditor.module.css b/src/NodeEditor.module.css deleted file mode 100644 index 10cedc3..0000000 --- a/src/NodeEditor.module.css +++ /dev/null @@ -1,16 +0,0 @@ -:global(:root) { - --base: #122236; - --surface: #242424; - --overlay: #484848; - --primary: #1c4c87; - - --data-any: #36c965; - --data-float: #a0a0a0; - --data-vector: #5e29d9; -} - -.link { - fill: none; - stroke: var(--data-float); - stroke-width: 2; -} \ No newline at end of file diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx index 0c0f106..fcfee2d 100644 --- a/src/NodeEditor.tsx +++ b/src/NodeEditor.tsx @@ -5,7 +5,7 @@ import { nodeRegistry } from './nodes'; import { SocketHandlers, SocketHandler, NodeInfo } from './node.tsx'; import { InputSocket } from './dataflow.ts'; import { Toolbar } from './Toolbar.tsx'; -import styles from './NodeEditor.module.css'; +import './NodeEditor.css'; export const nodeFactory = () => { let nextNodeId = 0; @@ -234,11 +234,8 @@ const NodeEditor = ({ user, project }) => { }; return ( - <> -
- -
-
+
+ { -
- + ); }; diff --git a/src/Toolbar.css b/src/Toolbar.css new file mode 100644 index 0000000..b96e40c --- /dev/null +++ b/src/Toolbar.css @@ -0,0 +1,78 @@ +@scope (.__Toolbar) { + .toolbar { + background-color: var(--surface); + border-bottom: 1px solid var(--overlay); + width: 100%; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + > * { + flex-grow: 1; + display: flex; + justify-content: center; + } + :first-child, :last-child { flex-basis: 0 } + :first-child { justify-content: flex-start } + :last-child { justify-content: flex-end } + + > menu { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: row; + } + + h1 { + font-size: 1.5rem; + font-weight: normal; + margin: 0; + } + + button { + background-color: transparent; + border: none; + outline: none; + padding: 1rem; + color: var(--text); + font-size: 1em; + :hover { background-color: var(--overlay) } + } + + path { + fill: var(--text); + } + } + + .addMenu:popover-open { + background-color: var(--surface); + list-style: none; + border: none; + position: absolute; + inset: unset; + width: auto; + height: auto; + left: 140px; + top: 52px; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + --shadow-color: 0deg 0% 0%; + box-shadow: + 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04), + 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15), + 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27); + + button { + padding: 4px; + width: 100%; + text-align: left; + &:hover { background-color: var(--overlay) } + } + } +} \ No newline at end of file diff --git a/src/Toolbar.module.css b/src/Toolbar.module.css deleted file mode 100644 index edea713..0000000 --- a/src/Toolbar.module.css +++ /dev/null @@ -1,76 +0,0 @@ -.toolbar { - background-color: var(--surface); - border-bottom: 1px solid var(--overlay); - width: 100%; - margin: 0; - padding: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - - > * { - flex-grow: 1; - display: flex; - justify-content: center; - } - :first-child, :last-child { flex-basis: 0 } - :first-child { justify-content: flex-start } - :last-child { justify-content: flex-end } - - > menu { - margin: 0; - padding: 0; - list-style: none; - display: flex; - flex-direction: row; - } - - h1 { - font-size: 1.5rem; - font-weight: normal; - margin: 0; - } - - button { - background-color: transparent; - border: none; - outline: none; - padding: 1rem; - color: var(--text); - font-size: 1em; - :hover { background-color: var(--overlay) } - } - - path { - fill: var(--text); - } -} - -.addMenu:popover-open { - background-color: var(--surface); - list-style: none; - border: none; - position: absolute; - inset: unset; - width: auto; - height: auto; - left: 140px; - top: 52px; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - --shadow-color: 0deg 0% 0%; - box-shadow: - 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04), - 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15), - 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27); - - button { - padding: 4px; - width: 100%; - text-align: left; - &:hover { background-color: var(--overlay) } - } -} \ No newline at end of file diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx index dded98d..32f53ab 100644 --- a/src/Toolbar.tsx +++ b/src/Toolbar.tsx @@ -1,6 +1,6 @@ import { useId } from 'preact/hooks'; import { NodeInfo } from './node.tsx'; -import styles from './Toolbar.module.css'; +import './Toolbar.css'; export interface ToolbarProps { nodes: Record; @@ -10,12 +10,12 @@ export interface ToolbarProps { export const Toolbar = ({ nodes, onNodeAdded = _ => {} }: ToolbarProps) => { const id = useId(); return ( -
+
  • - + {Object.entries(nodes).map(([name, node]) => (
    • ))} diff --git a/src/node.css b/src/node.css new file mode 100644 index 0000000..4ec7243 --- /dev/null +++ b/src/node.css @@ -0,0 +1,149 @@ + +.foreignObject { + width: 0; + height: 0; + overflow: visible; +} + +.node { + background-color: var(--surface); + min-width: 180px; + width: fit-content; + font-size: 0.9rem; + margin: 4px; + padding-bottom: 8px; + display: flex; + flex-direction: column; + border-radius: 6px; + user-select: none; + --shadow-color: 0deg 0% 0%; + box-shadow: + 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04), + 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15), + 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27); + + &:focus-within { + outline: 1px white solid; + } + + input[type="number"] { + background-color: var(--overlay); + border: none; + border-radius: 4px; + outline: none; + color: var(--text); + font-size: 1em; + text-align: right; + width: 100%; + max-width: 200px; + margin-right: 12px; + padding-top: 3px; + padding-bottom: 2px; + } + + summary { + background-color: var(--primary); + padding: 3px; + padding-left: 6px; + margin-bottom: 4px; + border-radius: 6px 6px 0 0; + list-style-image: url('icons/chevron-down.svg'); + } + &:not([open]) summary { + list-style-image: url('icons/chevron-right.svg'); + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + ul li { + display: flex; + flex-direction: row; + align-items: center; + padding: 4px 0; + + circle { + fill: var(--data-float); + .number & { fill: var(--data-float) } + .vector & { fill: var(--data-vector) } + .select & { fill: var(--data-float) } + } + + &.out + &.in { + padding-top: 8px; + } + + &.out { + justify-content: flex-end; + + svg { + position: relative; + left: 4px; + } + } + + &.in { + justify-content: flex-start; + + svg { + position: relative; + right: 4px; + } + + &.number { + + .number { padding-top: 0 } + &.linked input { display: none } + + span { + position: relative; + left: 8px; + width: 0; + white-space: nowrap; + padding-bottom: 2px; + } + } + + &.vector { + flex-direction: column; + align-items: flex-start; + gap: 1px; + + & :first-child { + display: flex; + flex-direction: row; + align-items: center; + gap: 2px; + margin-bottom: 4px; + .linked & { margin-bottom: 0 } + } + + input { + width: 89%; + margin-left: 8px; + margin-right: 16px; + + &:nth-child(2) { border-radius: 4px 4px 0 0 } + &:nth-child(3) { border-radius: 0 } + &:nth-child(4) { border-radius: 0 0 4px 4px } + + .linked & { display: none } + } + } + + &.select select { + background-color: color-mix(in srgb, var(--base) 50%, var(--surface)); + color: var(--text); + border: 1px solid color-mix(in srgb, var(--overlay) 50%, var(--surface)); + border-radius: 4px; + width: 100%; + margin-right: 12px; + padding: 3px 1px; + + .linked & { display: none } + } + } + } +} \ No newline at end of file diff --git a/src/node.module.css b/src/node.module.css deleted file mode 100644 index 2a65c56..0000000 --- a/src/node.module.css +++ /dev/null @@ -1,148 +0,0 @@ -.foreignObject { - width: 0; - height: 0; - overflow: visible; -} - -.node { - background-color: var(--surface); - min-width: 180px; - width: fit-content; - font-size: 0.9rem; - margin: 4px; - padding-bottom: 8px; - display: flex; - flex-direction: column; - border-radius: 6px; - user-select: none; - --shadow-color: 0deg 0% 0%; - box-shadow: - 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04), - 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15), - 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27); - - &:focus-within { - outline: 1px white solid; - } - - input[type="number"] { - background-color: var(--overlay); - border: none; - border-radius: 4px; - outline: none; - color: var(--text); - font-size: 1em; - text-align: right; - width: 100%; - max-width: 200px; - margin-right: 12px; - padding-top: 3px; - padding-bottom: 2px; - } - - summary { - background-color: var(--primary); - padding: 3px; - padding-left: 6px; - margin-bottom: 4px; - border-radius: 6px 6px 0 0; - list-style-image: url('icons/chevron-down.svg'); - } - &:not([open]) summary { - list-style-image: url('icons/chevron-right.svg'); - } - - ul { - list-style: none; - padding: 0; - margin: 0; - } - - ul li { - display: flex; - flex-direction: row; - align-items: center; - padding: 4px 0; - - circle { - fill: var(--data-float); - .number & { fill: var(--data-float) } - .vector & { fill: var(--data-vector) } - .select & { fill: var(--data-float) } - } - - &.out + &.in { - padding-top: 8px; - } - - &.out { - justify-content: flex-end; - - svg { - position: relative; - left: 4px; - } - } - - &.in { - justify-content: flex-start; - - svg { - position: relative; - right: 4px; - } - - &.number { - + .number { padding-top: 0 } - &.linked input { display: none } - - span { - position: relative; - left: 8px; - width: 0; - white-space: nowrap; - padding-bottom: 2px; - } - } - - &.vector { - flex-direction: column; - align-items: flex-start; - gap: 1px; - - & :first-child { - display: flex; - flex-direction: row; - align-items: center; - gap: 2px; - margin-bottom: 4px; - .linked & { margin-bottom: 0 } - } - - input { - width: 89%; - margin-left: 8px; - margin-right: 16px; - - &:nth-child(2) { border-radius: 4px 4px 0 0 } - &:nth-child(3) { border-radius: 0 } - &:nth-child(4) { border-radius: 0 0 4px 4px } - - .linked & { display: none } - } - } - - &.select select { - background-color: color-mix(in srgb, var(--base) 50%, var(--surface)); - color: var(--text); - border: 1px solid color-mix(in srgb, var(--overlay) 50%, var(--surface)); - border-radius: 4px; - width: 100%; - margin-right: 12px; - padding: 3px 1px; - - .linked & { display: none } - } - } - } -} \ No newline at end of file diff --git a/src/node.tsx b/src/node.tsx index 211398e..cb72734 100644 --- a/src/node.tsx +++ b/src/node.tsx @@ -3,7 +3,7 @@ import { useContext } from 'preact/hooks'; import { batch, Signal } from '@preact/signals'; import { InputSocket } from './dataflow.ts'; import { cls } from './util.ts'; -import styles from './node.module.css'; +import './node.css'; export type SocketHandler = (nodeId: number, socket: string, event: MouseEvent) => void; export interface SocketHandlers { @@ -74,7 +74,7 @@ export interface InputProps { export const InputAny = ({ name, label }: Omit, 'value'>) => { return ( -
  • +
  • {label}
    • @@ -83,7 +83,7 @@ export const InputAny = ({ name, label }: Omit, 'value'>) => { export const InputArray = ({ name, label }: Omit, 'value'>) => { return ( -
  • +
  • {label}
    • @@ -95,7 +95,7 @@ const InputNum = (parseFunc: (string) => number) => ({ name, label, value }: Inp value.value = parseFunc((event.target as HTMLInputElement).value); } return ( -
  • +
  • {label} @@ -113,7 +113,7 @@ export const InputVector = ({ name, label, value }: InputProps<[number, number, value.value = newValue; }; return ( -
  • +
  • {label} @@ -134,7 +134,7 @@ export const InputSelect = ({ name, label, value, options }: InputSelectProps) = value.value = (event.target as HTMLSelectElement).value; } return ( -
  • +