studio: polish file asset toolbar (#10808)

* fix properties spacing * style add component button * updarte placeholder and breadcrumbs * fix files bread crumb style * update toolbar height * fixed breadcrumb width * update search input style * fix toolbar margins and bg color * use consistant icons * cleanup * remove comments * remove button transpanret
EtherealEngine · Aug 2, 2024 · ef63e70 · ef63e70
1 parent da754a1
commit ef63e70
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 101 deletions.
diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -1212,7 +1212,7 @@
       "uploadAssets": "Upload Assets",
       "uploadFiles": "Upload Files",
       "uploadFolder": "Upload Folder",
-      "search-placeholder": "Search folders",
+      "search-placeholder": "Search",
       "generatingThumbnails": "Generating Thumbnails ({{count}} remaining)",
       "file": "File",
       "directory": "Directory",
@@ -1261,7 +1261,7 @@
     },
     "scene-assets": {
       "no-category": "No category selected",
-      "search-placeholder": "Search for an asset ...",
+      "search-placeholder": "Search",
       "preview": "Preview",
       "info-drag-drop": "Drag and Drop these items into the scene",
       "settings": "Settings",

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -46,15 +46,11 @@ import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoad
 import { NO_PROXY, State, getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { useDrag } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
+import { FiRefreshCcw } from 'react-icons/fi'
 import { HiDotsVertical } from 'react-icons/hi'
-import {
-  HiMagnifyingGlass,
-  HiMiniArrowLeft,
-  HiMiniArrowPath,
-  HiOutlineFolder,
-  HiOutlinePlusCircle
-} from 'react-icons/hi2'
+import { HiMagnifyingGlass, HiOutlineFolder, HiOutlinePlusCircle } from 'react-icons/hi2'
 import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'
+import { IoArrowBack } from 'react-icons/io5'
 import { twMerge } from 'tailwind-merge'
 import Button from '../../../../../primitives/tailwind/Button'
 import Input from '../../../../../primitives/tailwind/Input'
@@ -354,7 +350,7 @@ export function AssetsBreadcrumb({
   onSelectCategory: (c: Category) => void
 }) {
   return (
-    <div className="flex h-[28px] items-center gap-2 rounded-[4px] border border-theme-input bg-[#141619] px-2 ">
+    <div className="flex h-[28px] w-96 items-center gap-2 rounded-lg border border-theme-input bg-[#141619] px-2 ">
       <HiOutlineFolder className="text-xs text-[#A3A3A3]" />
       {parentCategories.map((category) => (
         <span
@@ -587,58 +583,54 @@ const AssetPanel = () => {
 
   return (
     <>
-      <div className="mb-1 flex h-8 items-center bg-theme-surface-main">
-        <div className="mr-20 flex gap-2">
-          <div className="pointer-events-auto flex items-center">
-            <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
-              <Button variant="transparent" startIcon={<HiMiniArrowLeft />} className="p-0" onClick={handleBack} />
-            </Tooltip>
-          </div>
-
-          <div className="flex items-center">
-            <Tooltip title={t('editor:layout.filebrowser.refresh')}>
-              <Button variant="transparent" startIcon={<HiMiniArrowPath />} className="p-0" onClick={handleRefresh} />
-            </Tooltip>
-          </div>
+      <div className="mb-1 flex h-9 items-center gap-2 bg-theme-surface-main">
+        <div className="ml-2"></div>
+        <div className="flex h-7 w-7 items-center rounded-lg bg-[#2F3137]">
+          <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
+            <Button variant="transparent" startIcon={<IoArrowBack />} className="p-0" onClick={handleBack} />
+          </Tooltip>
+        </div>
 
-          {/* <div className="flex items-center">
-            <Tooltip title={t('editor:layout.scene-assets.settings')}>
-              <Button
-                variant="transparent"
-                startIcon={<HiOutlineCog6Tooth />}
-                className="p-0"
-                onClick={handleSettings}
-              />
-            </Tooltip>
-          </div> */}
+        <div className="flex h-7 w-7 items-center rounded-lg bg-[#2F3137]">
+          <Tooltip title={t('editor:layout.filebrowser.refresh')}>
+            <Button variant="transparent" startIcon={<FiRefreshCcw />} className="p-0" onClick={handleRefresh} />
+          </Tooltip>
         </div>
 
-        <div className="align-center flex h-7 flex-1 justify-center gap-2 pr-2">
-          <div className="h-full flex-1">
-            <AssetsBreadcrumb
-              parentCategories={parentCategories.get(NO_PROXY) as Category[]}
-              selectedCategory={selectedCategory.value}
-              onSelectCategory={handleSelectCategory}
+        {/* <div className="flex items-center">
+          <Tooltip title={t('editor:layout.scene-assets.settings')}>
+            <Button
+              variant="transparent"
+              startIcon={<HiOutlineCog6Tooth />}
+              className="p-0"
+              onClick={handleSettings}
             />
-          </div>
+          </Tooltip>
+        </div> */}
+
+        <div className="align-center flex h-7 w-full justify-center gap-2 sm:px-2 md:px-4 lg:px-6 xl:px-10">
+          <AssetsBreadcrumb
+            parentCategories={parentCategories.get(NO_PROXY) as Category[]}
+            selectedCategory={selectedCategory.value}
+            onSelectCategory={handleSelectCategory}
+          />
           <Input
             placeholder={t('editor:layout.scene-assets.search-placeholder')}
             value={searchText.value}
             onChange={(e) => {
               searchText.set(e.target.value)
             }}
             labelClassname="text-sm text-red-500"
-            containerClassname="flex h-full bg-theme-primary rounded w-auto"
-            className="h-7 rounded-[4px] bg-theme-primary py-0 text-xs text-[#A3A3A3] placeholder:text-[#A3A3A3] focus-visible:ring-0"
+            containerClassname="flex h-full w-auto"
+            className="h-7 rounded-lg border border-theme-input bg-[#141619] px-2 py-0 text-xs text-[#A3A3A3] placeholder:text-[#A3A3A3] focus-visible:ring-0"
             startComponent={<HiMagnifyingGlass className="h-[14px] w-[14px] text-[#A3A3A3]" />}
           />
         </div>
 
         <Button
           startIcon={<HiOutlinePlusCircle className="text-lg" />}
-          variant="transparent"
           rounded="none"
-          className="h-full whitespace-nowrap bg-[#375DAF] px-2"
+          className="h-full whitespace-nowrap bg-theme-highlight px-2"
           size="small"
           onClick={() =>
             inputFileWithAddToScene({

diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -68,7 +68,7 @@ import { useDrop } from 'react-dnd'
 import { useTranslation } from 'react-i18next'
 import { FaList } from 'react-icons/fa'
 import { FiDownload, FiGrid, FiRefreshCcw } from 'react-icons/fi'
-import { HiOutlinePlusCircle } from 'react-icons/hi'
+import { HiOutlineFolder, HiOutlinePlusCircle } from 'react-icons/hi'
 import { HiMagnifyingGlass } from 'react-icons/hi2'
 import { IoArrowBack, IoSettingsSharp } from 'react-icons/io5'
 import { PiFolderPlusBold } from 'react-icons/pi'
@@ -466,36 +466,28 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
     breadcrumbDirectoryFiles = breadcrumbDirectoryFiles.filter((_, idx) => idx >= nestedIndex)
 
     return (
-      <nav
-        className="flex h-full w-full rounded-[4px] border border-theme-primary bg-theme-primary text-xs text-[#A3A3A3]"
-        aria-label="Breadcrumb"
-      >
-        <span className="flex h-full w-full items-center justify-center space-x-2 overflow-x-auto whitespace-nowrap px-4">
-          {breadcrumbDirectoryFiles.map((file, index, arr) => (
-            <Fragment key={index}>
-              {index !== 0 && ( // Add separator for all but the first item
-                <span className="cursor-default align-middle text-xs">{'>'}</span>
-              )}
-              {index === arr.length - 1 || (orgName && index === 0) ? (
-                <span className="overflow-hidden">
-                  <span className="inline-block w-full cursor-default overflow-hidden overflow-ellipsis whitespace-nowrap text-right align-middle">
-                    {file}
-                  </span>
+      <div className="flex h-[28px] w-96 items-center gap-1 rounded-lg border border-theme-input bg-[#141619] px-2 ">
+        <HiOutlineFolder className="text-sm text-[#A3A3A3]" />
+        {breadcrumbDirectoryFiles.map((file, index, arr) => (
+          <Fragment key={index}>
+            {index !== 0 && <span className="cursor-default items-center text-sm text-[#A3A3A3]"> {'>'} </span>}
+            {index === arr.length - 1 || (orgName && index === 0) ? (
+              <span className="cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap text-xs text-[#A3A3A3] hover:underline">
+                {file}
+              </span>
+            ) : (
+              <a
+                className="inline-flex cursor-pointer items-center overflow-hidden text-sm text-[#A3A3A3] hover:text-theme-highlight hover:underline focus:text-theme-highlight"
+                onClick={() => handleBreadcrumbDirectoryClick(file)}
+              >
+                <span className="cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap text-xs text-[#A3A3A3] hover:underline">
+                  {file}
                 </span>
-              ) : (
-                <a
-                  className="cursor-pointer overflow-hidden align-middle text-xs text-[#A3A3A3] hover:text-theme-highlight hover:underline focus:text-theme-highlight"
-                  onClick={() => handleBreadcrumbDirectoryClick(file)}
-                >
-                  <span className="inline-block w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-right align-middle">
-                    {file}
-                  </span>
-                </a>
-              )}
-            </Fragment>
-          ))}
-        </span>
-      </nav>
+              </a>
+            )}
+          </Fragment>
+        ))}
+      </div>
     )
   }
 
@@ -652,7 +644,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         position={'bottom left'}
         trigger={
           <Tooltip title={t('editor:layout.filebrowser.view-mode.settings.name')}>
-            <Button variant="transparent" startIcon={<IoSettingsSharp />} className="p-0" />
+            <Button startIcon={<IoSettingsSharp />} className="h-7 w-7 rounded-lg bg-[#2F3137] p-0" />
           </Tooltip>
         }
       >
@@ -703,27 +695,25 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
 
   return (
     <>
-      <div className="mb-1 flex h-8 items-center gap-2 bg-theme-surface-main">
-        <div
-          id="backDir"
-          className={`flex items-center ${
-            showBackButton ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
-          }`}
-        >
-          <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
-            <Button variant="transparent" startIcon={<IoArrowBack />} className={`p-0`} onClick={onBackDirectory} />
-          </Tooltip>
-        </div>
+      <div className="mb-1 flex h-9 items-center gap-2 bg-theme-surface-main">
+        <div className="ml-2"></div>
+        {showBackButton && (
+          <div id="backDir" className={`pointer-events-auto flex h-7 w-7 items-center rounded-lg bg-[#2F3137]`}>
+            <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
+              <Button variant="transparent" startIcon={<IoArrowBack />} className={`p-0`} onClick={onBackDirectory} />
+            </Tooltip>
+          </div>
+        )}
 
-        <div id="refreshDir" className="flex items-center">
+        <div id="refreshDir" className="flex h-7 w-7 items-center rounded-lg bg-[#2F3137]">
           <Tooltip title={t('editor:layout.filebrowser.refresh')}>
             <Button variant="transparent" startIcon={<FiRefreshCcw />} className="p-0" onClick={refreshDirectory} />
           </Tooltip>
         </div>
 
         <ViewModeSettings />
 
-        <div className="w-30 flex h-7 flex-row items-center gap-1 rounded bg-theme-surfaceInput px-2 py-1">
+        <div className="w-30 flex h-7 flex-row items-center gap-1 rounded rounded-lg bg-[#2F3137] px-2 py-1 ">
           {viewModes.map(({ mode, icon }) => (
             <Button
               key={mode}
@@ -736,23 +726,21 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         </div>
 
         <div className="align-center flex h-7 w-full justify-center gap-2 sm:px-2 md:px-4 lg:px-6 xl:px-10">
-          <div className="hidden h-full lg:block lg:w-1/2 xl:w-[400px]">
-            <BreadcrumbItems />
-          </div>
+          <BreadcrumbItems />
           <Input
             placeholder={t('editor:layout.filebrowser.search-placeholder')}
             value={searchText.value}
             onChange={(e) => {
               searchText.set(e.target.value)
             }}
             labelClassname="text-sm text-red-500"
-            containerClassname="flex h-full bg-theme-primary rounded-[4px] w-full"
-            className="h-7 w-full rounded-[4px] bg-theme-primary py-0 text-xs text-[#A3A3A3] placeholder:text-[#A3A3A3] focus-visible:ring-0"
+            containerClassname="flex h-full w-auto"
+            className="h-7 rounded-lg border border-theme-input bg-[#141619] px-2 py-0 text-xs text-[#A3A3A3] placeholder:text-[#A3A3A3] focus-visible:ring-0"
             startComponent={<HiMagnifyingGlass className="h-[14px] w-[14px] text-[#A3A3A3]" />}
           />
         </div>
 
-        <div id="downloadProject" className="flex items-center">
+        <div id="downloadProject" className="flex h-7 w-7 items-center rounded-lg bg-[#2F3137]">
           <Tooltip title={t('editor:layout.filebrowser.downloadProject')}>
             <Button
               variant="transparent"
@@ -764,7 +752,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
           </Tooltip>
         </div>
 
-        <div id="newFolder" className="flex items-center">
+        <div id="newFolder" className="flex h-7 w-7 items-center rounded-lg bg-[#2F3137]">
           <Tooltip title={t('editor:layout.filebrowser.addNewFolder')}>
             <Button variant="transparent" startIcon={<PiFolderPlusBold />} className="p-0" onClick={createNewFolder} />
           </Tooltip>
@@ -773,7 +761,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         <Button
           id="uploadFiles"
           startIcon={<HiOutlinePlusCircle />}
-          variant="transparent"
           disabled={!showUploadButtons}
           rounded="none"
           className="h-full whitespace-nowrap bg-theme-highlight px-2"
@@ -791,7 +778,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         <Button
           id="uploadFiles"
           startIcon={<HiOutlinePlusCircle />}
-          variant="transparent"
           disabled={!showUploadButtons}
           rounded="none"
           className="h-full whitespace-nowrap bg-theme-highlight px-2"

diff --git a/packages/ui/src/components/editor/panels/Properties/container/index.tsx b/packages/ui/src/components/editor/panels/Properties/container/index.tsx
@@ -110,7 +110,7 @@ const EntityEditor = (props: { entityUUID: EntityUUID; multiEdit: boolean }) =>
 
   return (
     <>
-      <div className="ml-auto mt-4 flex h-8 bg-zinc-900" id="add-component-popover">
+      <div className="flex w-full justify-end bg-theme-highlight" id="add-component-popover">
         <Popup
           keepInside
           position={'left center'}
@@ -121,7 +121,7 @@ const EntityEditor = (props: { entityUUID: EntityUUID; multiEdit: boolean }) =>
               startIcon={<HiOutlinePlusCircle />}
               variant="transparent"
               rounded="none"
-              className="ml-auto w-40 bg-theme-highlight px-2"
+              className="ml-auto w-40 bg-[#2F3137] px-2"
               size="small"
               onClick={() => setIsAddComponentMenuOpen(true)}
             >
@@ -167,7 +167,7 @@ export const PropertiesPanelContainer = () => {
   const materialUUID = useHookstate(getMutableState(MaterialSelectionState).selectedMaterial).value
 
   return (
-    <div className="flex h-full flex-col gap-2 overflow-y-auto rounded-[5px] bg-neutral-900 px-1">
+    <div className="flex h-full flex-col gap-0.5 overflow-y-auto rounded-[5px] bg-neutral-900 px-1">
       {materialUUID ? (
         <MaterialEditor materialUUID={materialUUID} />
       ) : uuid ? (

diff --git a/packages/ui/src/components/editor/panels/Scenes/container/index.tsx b/packages/ui/src/components/editor/panels/Scenes/container/index.tsx
@@ -78,7 +78,6 @@ export default function ScenesPanel() {
           startIcon={<HiOutlinePlusCircle />}
           endIcon={isCreatingScene.value && <LoadingView spinnerOnly className="h-4 w-4" />}
           disabled={isCreatingScene.value}
-          variant="transparent"
           rounded="none"
           className="ml-auto bg-theme-highlight px-2"
           size="small"