feat: Replace the sheet panel inside the inspector

- It displays when nothing is selected.
miyanokomiya · Nov 29, 2024 · 5ad32c0 · 5ad32c0
1 parent eabd3ab
commit 5ad32c0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/components/AppRightPanel.tsx b/src/components/AppRightPanel.tsx
@@ -2,7 +2,6 @@ import { TabPanelV } from "./atoms/TabPanelV";
 import { ShapeTreeInspectorPanel } from "./shapeInspectorPanel/ShapeTreeInspectorPanel";
 import { ShapeLibraryPanel } from "./ShapeLibraryPanel";
 import { ShapeTemplatePanel } from "./ShapeTemplatePanel";
-import { SheetConfigPanel } from "./SheetConfigPanel";
 import { UserSettingPanel } from "./UserSettingPanel";
 
 interface Props {
@@ -13,7 +12,6 @@ interface Props {
 export const AppRightPanel: React.FC<Props> = ({ selected, onSelect }) => {
   const items: [{ name: string }, React.ReactNode, noPadding?: boolean][] = [
     [{ name: "Inspector" }, <ShapeTreeInspectorPanel />, true],
-    [{ name: "Sheet" }, <SheetConfigPanel />],
     [{ name: "Icons" }, <ShapeLibraryPanel />],
     [{ name: "Templates" }, <ShapeTemplatePanel />],
     [{ name: "Settings" }, <UserSettingPanel />],

diff --git a/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx b/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
@@ -16,6 +16,7 @@ import { AlphaField } from "./AlphaField";
 import { HighlightShapeMeta } from "../../composables/states/appCanvas/core";
 import { AttachmentInspector } from "./AttachmentInspector";
 import { patchByPartialProperties } from "../../utils/entities";
+import { SheetInspectorPanel } from "./SheetInspectorPanel";
 
 export const ShapeInspectorPanel: React.FC = () => {
   const targetShape = useSelectedShape();
@@ -24,7 +25,7 @@ export const ShapeInspectorPanel: React.FC = () => {
   return targetShape && targetTmpShape ? (
     <ShapeInspectorPanelWithShape targetShape={targetShape} targetTmpShape={targetTmpShape} />
   ) : (
-    <div>No shape selected</div>
+    <SheetInspectorPanel />
   );
 };
 

diff --git a/src/components/SheetConfigPanel.tsx → ...apeInspectorPanel/SheetInspectorPanel.tsx b/src/components/SheetConfigPanel.tsx → ...apeInspectorPanel/SheetInspectorPanel.tsx
@@ -1,14 +1,15 @@
 import { useCallback, useContext, useMemo, useState } from "react";
-import { AppCanvasContext } from "../contexts/AppCanvasContext";
-import { PopupButton } from "./atoms/PopupButton";
-import { ColorPickerPanel } from "./molecules/ColorPickerPanel";
-import { COLORS, rednerRGBA } from "../utils/color";
-import { Color } from "../models";
-import { useSelectedSheet, useSelectedTmpSheet } from "../hooks/storeHooks";
-import { SliderInput } from "./atoms/inputs/SliderInput";
-import { OutsideObserver } from "./atoms/OutsideObserver";
+import { AppCanvasContext } from "../../contexts/AppCanvasContext";
+import { PopupButton } from "../atoms/PopupButton";
+import { ColorPickerPanel } from "../molecules/ColorPickerPanel";
+import { COLORS, rednerRGBA } from "../../utils/color";
+import { Color } from "../../models";
+import { useSelectedSheet, useSelectedTmpSheet } from "../../hooks/storeHooks";
+import { SliderInput } from "../atoms/inputs/SliderInput";
+import { OutsideObserver } from "../atoms/OutsideObserver";
+import { InlineField } from "../atoms/InlineField";
 
-export const SheetConfigPanel: React.FC = () => {
+export const SheetInspectorPanel: React.FC = () => {
   const { sheetStore } = useContext(AppCanvasContext);
   const sheet = useSelectedSheet();
   const tmpSheet = useSelectedTmpSheet();
@@ -76,10 +77,14 @@ export const SheetConfigPanel: React.FC = () => {
     );
   }, [bgColor, sheet, onAlphaChanged, onColorClick]);
 
+  if (!sheet) return undefined;
+
   return (
     <div>
-      <div className="flex justify-between items-center">
-        <p className="text-lg">Background color</p>
+      <InlineField label="Sheet name">
+        <span>{sheet.name}</span>
+      </InlineField>
+      <InlineField label="Background color">
         <OutsideObserver onClick={onClickOutside}>
           <PopupButton
             name="bgColor"
@@ -88,10 +93,10 @@ export const SheetConfigPanel: React.FC = () => {
             onClick={onClickPopupButton}
             popupPosition="left"
           >
-            <div className="w-8 h-8 border-2 rounded-full" style={{ backgroundColor: rednerRGBA(bgColor) }}></div>
+            <div className="w-6 h-6 border-2 rounded-full" style={{ backgroundColor: rednerRGBA(bgColor) }}></div>
           </PopupButton>
         </OutsideObserver>
-      </div>
+      </InlineField>
     </div>
   );
 };