Enhance UI components: add active state to ZoneItem, refactor EditWidgetOption and RealTimeVisualization styles, and implement RenameTooltip for dynamic renaming functionality.

This commit is contained in:
Vishnu 2025-05-03 10:41:34 +05:30
parent 10a6060891
commit 1bfa004dc6
8 changed files with 70 additions and 29 deletions
app/src
components/ui
modules
simulation/roboticArm/instances/ikInstance
visualization
styles

View File

@ -0,0 +1,52 @@
import React, { useState } from "react";
import { RenameIcon } from "../../icons/ContextMenuIcons";
import {
useLeftData,
useTopData,
} from "../../../store/visualization/useZone3DWidgetStore";
type RenameTooltipProps = {
name: string;
onSubmit: (newName: string) => void;
};
const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
const [value, setValue] = useState(name);
const { top } = useTopData();
const { left } = useLeftData();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
onSubmit(value.trim());
};
return (
<div
className="rename-tool-tip"
style={{
position: "absolute",
top: `${top}px`,
left: `${left}px`,
zIndex: 100,
}}
>
<div className="header">
<div className="icon">
<RenameIcon />
</div>
<div className="name">Name</div>
</div>
<form className="input" onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
autoFocus
/>
</form>
</div>
);
};
export default RenameTooltip;

View File

@ -27,6 +27,7 @@ interface ZoneItem {
id: string; id: string;
name: string; name: string;
assets?: Asset[]; assets?: Asset[];
active?: boolean;
} }
interface ListProps { interface ListProps {
@ -157,7 +158,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
{items?.map((item) => ( {items?.map((item) => (
<React.Fragment key={`zone-${item.id}`}> <React.Fragment key={`zone-${item.id}`}>
<li className="list-container"> <li className="list-container">
<div className="list-item"> <div className={`list-item ${item.active ? "active" : ""}`}>
<div className="zone-header"> <div className="zone-header">
<button <button
className="value" className="value"

View File

@ -16,21 +16,17 @@ const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
const { top } = useTopData(); const { top } = useTopData();
const { left } = useLeftData(); const { left } = useLeftData();
useEffect(() => {
}, [top, left]);
return ( return (
<div <div
className="editWidgetOptions-wrapper" className="context-menu-options-wrapper"
style={{ style={{
position: "absolute", position: "absolute",
top: `${top}px`, top: `${top}px`,
left: `${left}px`, left: `${left}px`,
zIndex: 10000, zIndex: 100,
}} }}
> >
<div className="editWidgetOptions"> <div className="context-menu-options">
{options.map((option, index) => ( {options.map((option, index) => (
<div <div
className="option" className="option"

View File

@ -67,13 +67,12 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
setIkSolver(solver); setIkSolver(solver);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05) const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
// groupRef.current.add(helper);
setSelectedArm(OOI.Target_Bone); setSelectedArm(OOI.Target_Bone);
scene.add(helper) // scene.add(helper)
}, [gltf]); }, [cloned, gltf, setIkSolver]);
return ( return (
<> <>

View File

@ -249,7 +249,7 @@ const RealTimeVisulization: React.FC = () => {
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector( const editWidgetOptions = document.querySelector(
".editWidgetOptions-wrapper" ".context-menu-options-wrapper"
); );
if ( if (
editWidgetOptions && editWidgetOptions &&

View File

@ -2,8 +2,6 @@
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
.dropdown-list-container { .dropdown-list-container {
border-bottom: 1px solid var(--border-color);
.lists-container { .lists-container {
margin-bottom: 6px; margin-bottom: 6px;
} }
@ -62,12 +60,6 @@
cursor: pointer; cursor: pointer;
} }
} }
&:first-child{
background: var(--highlight-accent-color);
.input-value{
color: var(--highlight-text-color);
}
}
} }
.active { .active {
background: var(--highlight-accent-color); background: var(--highlight-accent-color);

View File

@ -738,10 +738,10 @@
outline-color: #ffe3e0; outline-color: #ffe3e0;
} }
.editWidgetOptions { .context-menu-options {
position: absolute; position: absolute;
background: var(--background-color); background: var(--background-color);
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
z-index: 3; z-index: 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -749,6 +749,7 @@
overflow: hidden; overflow: hidden;
padding: 4px; padding: 4px;
min-width: 150px; min-width: 150px;
outline: 1px solid var(--border-color);
.option { .option {
padding: 4px 10px; padding: 4px 10px;

View File

@ -48,16 +48,16 @@
max-width: 350px; max-width: 350px;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid var(--accent-color); border: 1px solid var(--highlight-text-color);
border-radius: #{$border-radius-extra-large}; border-radius: #{$border-radius-extra-large};
background: transparent; background: transparent;
color: var(--accent-color); color: var(--highlight-text-color);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
.google-icon { .google-icon {
color: var(--accent-color); color: var(--highlight-text-color);
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-right: 10px; margin-right: 10px;
@ -120,7 +120,7 @@
.continue-button { .continue-button {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background: var(--accent-gradient-color); background: var(--background-color-button);
color: var(--background-color); color: var(--background-color);
font-size: 14px; font-size: 14px;
border: none; border: none;
@ -158,7 +158,7 @@
text-align: center; text-align: center;
.link { .link {
color: var(--accent-color); color: var(--highlight-text-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;