studio: polish existing prop components (#10348)

* polish transform component * update select width * polish image component * set width container within select components * fix input text color * polish camera component * polish volumetric component * pr cleanup * wrap transform prop * revert rounded-md on primitive select component * move text to translation.json * revert overflow-hidden in input primitive * revert changes to primitives --------- Co-authored-by: aditya-mitra <[email protected]>
EtherealEngine · Jun 12, 2024 · fef09ab · fef09ab
1 parent d4e5ae4
commit fef09ab
Show file tree

Hide file tree

Showing 23 changed files with 166 additions and 127 deletions.
diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -556,7 +556,7 @@
       "name": "Image",
       "description": "Dynamically loads an image.",
       "lbl-imgURL": "Image URL",
-      "lbl-transparency": "Transparency Mode",
+      "lbl-transparency": "Transparency",
       "lbl-alphaCutoff": "Alpha Cutoff",
       "lbl-projection": "Projection",
       "lbl-side": "Side",
@@ -875,7 +875,7 @@
     "spline": {
       "name": "Spline",
       "description": "Create and customize curves.",
-      "lbl-addNode": "Add node to curve"
+      "lbl-addNode": "Nodes"
     },
     "splinetrack": {
       "name": "Spline Track",

diff --git a/packages/client/i18n/en/translation.json b/packages/client/i18n/en/translation.json
@@ -45,7 +45,8 @@
       "userInviteCode": "User's Invite Code or User ID",
       "editProjectPermissions": "Manage User Permissions on Project",
       "addUser": "Add User",
-      "permissions": "Project Permissions"
+      "permissions": "Project Permissions",
+      "bake": "Bake"
     }
   },
   "error": {

diff --git a/packages/ui/src/components/editor/input/Array/index.tsx b/packages/ui/src/components/editor/input/Array/index.tsx
@@ -60,9 +60,13 @@ export default function ArrayInputGroup({
 
   return (
     <div aria-label={name} className={containerClassName}>
-      <div className="mb-3 flex justify-between">
+      <div className="mb-3 flex items-center justify-between">
         <Text className="ml-5">{label}</Text>
-        <HiPlus className="mr-5 cursor-pointer bg-[#1A1A1A] text-white" onClick={() => handleChange('', 0, 'add')} />
+        <HiPlus
+          className="mr-5 cursor-pointer rounded-md bg-[#1A1A1A] text-white"
+          size="20px"
+          onClick={() => handleChange('', 0, 'add')}
+        />
       </div>
       <div className="flex flex-col space-y-1 bg-[#1A1A1A] py-1.5">
         {values.map((value, idx) => (

diff --git a/packages/ui/src/components/editor/input/Group/index.tsx b/packages/ui/src/components/editor/input/Group/index.tsx
@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import React from 'react'
 
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
-import { CiCircleInfo } from 'react-icons/ci'
+import { LuInfo } from 'react-icons/lu'
 import { twMerge } from 'tailwind-merge'
 import Label from '../../../../primitives/tailwind/Label'
 import Tooltip from '../../../../primitives/tailwind/Tooltip'
@@ -130,12 +130,14 @@ export interface InputGroupProps {
 export function InputGroup({ children, info, label, className, labelClassName, infoClassName }: InputGroupProps) {
   return (
     <div className={twMerge('my-1 mr-6 flex items-center justify-end', className)}>
-      <Label className={twMerge('mr-2.5 text-xs text-[#A0A1A2]', labelClassName)}>{label}</Label>
-      {info && (
-        <Tooltip title={info}>
-          <CiCircleInfo className={twMerge('-ml-0.5 mr-2.5 h-3.5 w-3.5 text-[#A0A1A2]', infoClassName)} />
-        </Tooltip>
-      )}
+      <div className="flex">
+        <Label className={twMerge('mr-2.5 text-wrap text-xs text-[#A0A1A2]', labelClassName)}>{label}</Label>
+        {info && (
+          <Tooltip title={info}>
+            <LuInfo className={twMerge('-ml-0.5 mr-2.5 h-5 w-5 text-[#A0A1A2]', infoClassName)} />
+          </Tooltip>
+        )}
+      </div>
       {children}
     </div>
   )

diff --git a/packages/ui/src/components/editor/input/Image/Preview/index.tsx b/packages/ui/src/components/editor/input/Image/Preview/index.tsx
@@ -30,7 +30,7 @@ import InputGroup from '../../Group'
 import { StringInputProps } from '../../String'
 
 export const ImageContainer = ({ children }) => {
-  return <div className="flex h-auto w-[60%] flex-col items-end justify-start gap-2">{children}</div>
+  return <div className="flex h-auto flex-col items-center justify-start gap-2">{children}</div>
 }
 
 export default function ImagePreviewInput({
@@ -45,17 +45,22 @@ export default function ImagePreviewInput({
       {label && (
         <div className="self-stretch font-['Figtree'] text-[8px] font-normal leading-3 text-neutral-200">{label}</div>
       )}
-      <div className="flex w-[70%] flex-col items-start justify-start gap-1 rounded bg-neutral-800 p-1 ">
+      <div className="flex flex-col items-start justify-start gap-0 gap-1 rounded-t-md bg-[#1A1A1A] p-1">
         <div className="h-[274px] w-[305px]">
-          <div className="flex h-[274px] w-[305px] justify-center rounded bg-zinc-900">
-            <div className="h-auto w-auto rounded bg-neutral-900">
-              <img src={value} crossOrigin="anonymous" className="h-full w-full rounded object-contain" />
+          <div className="flex h-[274px] w-[305px] justify-center rounded-t-md">
+            <div className="h-auto w-auto rounded">
+              <img
+                src={value}
+                alt="No Image"
+                crossOrigin="anonymous"
+                className="h-full w-full rounded object-contain text-white"
+              />
             </div>
           </div>
         </div>
         {(previewOnly === undefined || previewOnly === false) && (
-          <div className="inline-flex items-center justify-center gap-2.5 self-stretch rounded bg-neutral-900 px-2 py-1">
-            <ImageInput value={value} onRelease={onRelease} />
+          <div className="inline-flex w-[305px] items-center justify-center gap-2.5 self-stretch rounded-b-md bg-[#1A1A1A] px-2 py-1">
+            <ImageInput className="bg-[#242424]" containerClassname="w-full" value={value} onRelease={onRelease} />
           </div>
         )}
       </div>

diff --git a/packages/ui/src/components/editor/input/Numeric/index.tsx b/packages/ui/src/components/editor/input/Numeric/index.tsx
@@ -121,8 +121,8 @@ const NumericInput = ({
   return (
     <div
       className={twMerge(
-        prefix ? 'w-24 px-2 py-2' : 'w-52 px-5 py-2',
-        'flex h-8 items-center justify-between rounded bg-[#1A1A1A]',
+        prefix ? 'w-24 px-2 py-2' : 'w-1/2 px-5 py-2',
+        'flex h-10 items-center justify-between rounded-lg bg-[#1A1A1A]',
         className
       )}
     >

diff --git a/packages/ui/src/components/editor/input/Progress/index.tsx b/packages/ui/src/components/editor/input/Progress/index.tsx
@@ -35,7 +35,7 @@ export interface ProgressBarProps extends ProgressProps {
 
 export default function ProgressBar({ value, paused, totalTime, ...rest }: ProgressBarProps) {
   return (
-    <div className="flex h-10 w-[314px] flex-row place-items-center gap-2 rounded bg-zinc-900 px-2">
+    <div className="ml-auto mr-6 flex h-10 w-[314px] flex-row place-items-center gap-2 rounded bg-zinc-900 px-2">
       {paused ? <HiPlay className="text-white" /> : <HiPause className="text-white" />}
       <Progress value={value} className="w-[173px]" barClassName="bg-blue-800 " />
       <div className="w-[85px] truncate text-right font-['Figtree'] text-sm font-normal leading-normal text-neutral-400">

diff --git a/packages/ui/src/components/editor/input/Select/index.tsx b/packages/ui/src/components/editor/input/Select/index.tsx
@@ -35,8 +35,8 @@ const SelectInput = ({
   return (
     <Select
       currentValue={value}
-      className="h-10 w-72 bg-[#212226] text-theme-primary"
-      inputClassName="rounded-none text-xs p-1"
+      inputContainerClassName="rounded-lg overflow-hidden"
+      inputClassName="text-[#8B8B8D] text-xs bg-[#1A1A1A] border-none"
       {...rest}
     />
   )

diff --git a/packages/ui/src/components/editor/input/String/index.tsx b/packages/ui/src/components/editor/input/String/index.tsx
@@ -71,7 +71,7 @@ export default StringInput
 
 // do we really need a controlled string input? we could easily integrate this with string input itself
 export const ControlledStringInput = React.forwardRef<any, StringInputProps>((values, ref) => {
-  const { onChange, onRelease, value, placeholder, disabled, type, containerClassname, ...rest } = values
+  const { onChange, onRelease, value, placeholder, disabled, type, containerClassname, className, ...rest } = values
   const [tempValue, setTempValue] = useState(value)
 
   useEffect(() => {
@@ -90,8 +90,11 @@ export const ControlledStringInput = React.forwardRef<any, StringInputProps>((va
   return (
     <Input
       ref={ref}
-      containerClassname={twMerge('h-7 w-full rounded bg-[#1A1A1A]', containerClassname)}
-      className="h-full text-ellipsis rounded border-none bg-inherit px-5 py-2 text-xs font-normal text-[#8B8B8D]"
+      containerClassname={twMerge('overflow-hidden rounded-lg', containerClassname)}
+      className={twMerge(
+        'h-full text-ellipsis rounded border-none bg-inherit px-5 py-2 text-xs font-normal text-[#8B8B8D]',
+        className
+      )}
       value={tempValue ?? ''}
       onChange={(e) => {
         onChangeValue(e.target.value)

diff --git a/packages/ui/src/components/editor/input/Vector2/index.tsx b/packages/ui/src/components/editor/input/Vector2/index.tsx
@@ -87,7 +87,7 @@ export const Vector2Input = ({
   const vy = value.y
 
   return (
-    <div className="flex flex-auto flex-row justify-start gap-1.5">
+    <div className="flex flex-row justify-end gap-1.5">
       <NumericInput
         {...rest}
         value={vx}

diff --git a/packages/ui/src/components/editor/input/Vector3/index.tsx b/packages/ui/src/components/editor/input/Vector3/index.tsx
@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { useHookstate } from '@etherealengine/hyperflux'
 import { Vector3_Zero } from '@etherealengine/spatial/src/common/constants/MathConstants'
 import React from 'react'
-import { MdLink, MdLinkOff } from 'react-icons/md'
+import { LuLock, LuUnlock } from 'react-icons/lu'
 import { twMerge } from 'tailwind-merge'
 import { Vector3 } from 'three'
 import Button from '../../../../primitives/tailwind/Button'
@@ -124,13 +124,13 @@ export const Vector3Input = ({
   const vz = value.z
 
   return (
-    <div className="flex flex-wrap justify-start gap-1.5">
+    <div className="flex flex-row flex-wrap justify-start gap-1.5">
       {uniformScaling && (
         <Button
-          title="Uniform Scaling"
           variant="transparent"
-          startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />}
+          startIcon={uniformEnabled.value ? <LuLock /> : <LuUnlock />}
           onClick={onToggleUniform}
+          className="p-0"
         />
       )}
       <NumericInput

diff --git a/packages/ui/src/components/editor/properties/camera/index.tsx b/packages/ui/src/components/editor/properties/camera/index.tsx
@@ -126,23 +126,23 @@ export const CameraPropertiesNodeEditor: EditorComponentType = (props) => {
       description={t('editor:properties.cameraSettings.description')}
       icon={<HiOutlineCamera />}
     >
-      <InputGroup name="Projection Type" label={'Projection Type'}>
+      <InputGroup name="Projection type" label={'Projection type'}>
         <SelectInput
           // placeholder={projectionTypeSelect[0].label}
           value={cameraSettings.projectionType.value}
           onChange={commitProperty(CameraSettingsComponent, 'projectionType')}
           options={projectionTypeSelect}
         />
       </InputGroup>
-      <InputGroup name="Camera Mode" label={'Camera Mode'}>
+      <InputGroup name="Camera mode" label={'Camera mode'}>
         <SelectInput
           // placeholder={cameraModeSelect[0].label}
           value={cameraSettings.cameraMode.value}
           onChange={commitProperty(CameraSettingsComponent, 'cameraMode')}
           options={cameraModeSelect}
         />
       </InputGroup>
-      <InputGroup name="Field Of View" label={'FOV'}>
+      <InputGroup name="Field of view" label={'FOV'}>
         <NumericInput
           onChange={updateProperty(CameraSettingsComponent, 'fov')}
           onRelease={commitProperty(CameraSettingsComponent, 'fov')}
@@ -155,51 +155,51 @@ export const CameraPropertiesNodeEditor: EditorComponentType = (props) => {
         />
       </InputGroup>
       <Button onClick={calculateClippingPlanes}>Calculate Clipping Planes</Button>
-      <InputGroup name="cameraNearClip" label={'Min Projection Distance'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'cameraNearClip')}
-          onRelease={commitProperty(CameraSettingsComponent, 'cameraNearClip')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.cameraNearClip.value}
-        />
-      </InputGroup>
-      <InputGroup name="cameraFarClip" label={'Max Projection Distance'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'cameraFarClip')}
-          onRelease={commitProperty(CameraSettingsComponent, 'cameraFarClip')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.cameraFarClip.value}
-        />
-      </InputGroup>
-      <InputGroup name="minCameraDistance" label={'Min Camera Distance'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'minCameraDistance')}
-          onRelease={commitProperty(CameraSettingsComponent, 'minCameraDistance')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.minCameraDistance.value}
-        />
+      <InputGroup name="cameraNearClip" label={'Projection distance'} className="gap-2">
+        <div className="flex w-1/2 gap-2">
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'cameraNearClip')}
+            onRelease={commitProperty(CameraSettingsComponent, 'cameraNearClip')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.cameraNearClip.value}
+          />
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'cameraFarClip')}
+            onRelease={commitProperty(CameraSettingsComponent, 'cameraFarClip')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.cameraFarClip.value}
+          />
+        </div>
       </InputGroup>
-      <InputGroup name="maxCameraDistance" label={'Max Camera Distance'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'maxCameraDistance')}
-          onRelease={commitProperty(CameraSettingsComponent, 'maxCameraDistance')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.maxCameraDistance.value}
-        />
+      <InputGroup name="minCameraDistance" label={'Camera distance'} className="gap-2">
+        <div className="flex w-1/2 gap-2">
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'minCameraDistance')}
+            onRelease={commitProperty(CameraSettingsComponent, 'minCameraDistance')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.minCameraDistance.value}
+          />
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'maxCameraDistance')}
+            onRelease={commitProperty(CameraSettingsComponent, 'maxCameraDistance')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.maxCameraDistance.value}
+          />
+        </div>
       </InputGroup>
-      <InputGroup name="startCameraDistance" label={'Start Camera Distance'}>
+      <InputGroup name="startCameraDistance" label={'Start camera distance'}>
         <NumericInput
           onChange={updateProperty(CameraSettingsComponent, 'startCameraDistance')}
           onRelease={commitProperty(CameraSettingsComponent, 'startCameraDistance')}
@@ -210,28 +210,27 @@ export const CameraPropertiesNodeEditor: EditorComponentType = (props) => {
           value={cameraSettings.startCameraDistance.value}
         />
       </InputGroup>
-      <InputGroup name="minPhi" label={'Min Phi'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'minPhi')}
-          onRelease={commitProperty(CameraSettingsComponent, 'minPhi')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.minPhi.value}
-        />
-      </InputGroup>
-
-      <InputGroup name="maxPhi" label={'Max Phi'}>
-        <NumericInput
-          onChange={updateProperty(CameraSettingsComponent, 'maxPhi')}
-          onRelease={commitProperty(CameraSettingsComponent, 'maxPhi')}
-          min={0.001}
-          smallStep={0.001}
-          mediumStep={0.01}
-          largeStep={0.1}
-          value={cameraSettings.maxPhi.value}
-        />
+      <InputGroup name="minPhi" label={'Phi'} className="gap-2">
+        <div className="flex w-1/2 gap-2">
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'minPhi')}
+            onRelease={commitProperty(CameraSettingsComponent, 'minPhi')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.minPhi.value}
+          />
+          <NumericInput
+            onChange={updateProperty(CameraSettingsComponent, 'maxPhi')}
+            onRelease={commitProperty(CameraSettingsComponent, 'maxPhi')}
+            min={0.001}
+            smallStep={0.001}
+            mediumStep={0.01}
+            largeStep={0.1}
+            value={cameraSettings.maxPhi.value}
+          />
+        </div>
       </InputGroup>
     </PropertyGroup>
   )