[UI/UX] Studio Update - Tailwind components for studio (#10075)

* add ovverride to checkbox story * file browser, texture, image and image preview, input group partial * remove type errors with override * audio, folder, material , model and prefab * add default props * progress bar * transform node editor * correct checkbox and extend its props * remove editor tsconfig changes * match boolean input checkbox with foundation design * light node editors, partial * remove override usage * added the color input * added colorinput to ambient light editor * added colorinput and corrected checkbox alignment * interaction node editors and fixes * added media node editor and array input group * rename color input to color and remove from input folder * fix string input to match design * load dark theme by default * match select input with design * misc node editors * remove document styles and add wekbit slider and moz range classes to slider * fix and simplify numeric input * fix boolean input border * gallery node editor * fix string input height * fix string input alignment * revert link editor inputs * image grid and volumetric node editor * particle node editor * fix gallery and image grid for heading positioning * added the collider and trigger editors * added license * added the textbox editor * simplify the styles for input group and make it more adherent to the design * simplify property group and node editor * fix css in editors * properties panel * properties panel , replace old properties with new ones in ComponentEditorsState * add comments * comment out portal path to prevent errors * viewport panel partial * add viewport panel title * icons for component editors * finished viewport panel * add License * scene panel partial * add License * add panel titles * fix title content * designs for new scene panel, partial functionality * heirachy panel partial * added editor 2 route as `/studio2` * added editor2container * heirachy panel * get page showing * remove comments from node editors * remove comments from panels * fix scene panel index * make tool bar partial * minor adjustment to dock designs * make the toolbar more adherent * fixed the panel fonts * introduce project page before studio * fix scenes panel * engine canvas in viewport * added the tools inside viewport fix panel styles, numeric input * fixed the viewport fallback * make the rc-dock pixel perfect * fix rename in scene panel * add delete scene functionality * add clickaway listener * partiallly function components and heirarchy panel * polish heirarchy panel * fix viewport resize * fix the hierarchy panel styles * correct the scenes panel * context menu for heirarchy panel * add selection border for heirarchy node * resolve merge conflict * fix panel z-index * fix margins between scene thumbnails * use tailwind buttons on context menu * added ground plane,collider,rigibbody editors * added geometry and mesh editors * fix vector3 input and scrubber * fixes in collider component * fix select styles * minor translation and input fixes * partial file browser * add License * remove material dialog * correct ts errors in schema * added save and save as dialogs in new toolbar * added import settings panel * completed the toolbar and functionalites * remove material ui references * toolbar main menu * text align left for file table * component element list * revert changes to toolbar * make pointer anchor to canvas space from window space * center text in element list * update folder * fix import errors * revert changes in editor container * add missing css in editor2container * revert unwanted changes in editor package * highlight file view mode * refactor file view mode for scalability * constrain LoadingView size * fix hierarchy panel styling regressions * remove unnecessary functionalities and files * remove accidently added gltf file * text no wrap on nodename * dont wrap text * cleanup with hierarchy menu * reposition ContextMenu when necessary to avoid bottom overflow * make the menu scrollable if it is too tall for the parent component * show cursor-pointer on PanelDragContainer * update PanelDragContainer * refactor * add unique keys to prevent studio warnings * assets panel new design * fix imports * assets categories * remove comments * revert tailwind select * clean up file browse menus * material panel partial * fix margin in assets panel * update FilesPanel text colors * add overflow to material panel * `currentValue` in select * remove unwanted added storybook files * revert unwanted ui primitives * stuff * file browser grid styling + update state onClick * rm extra left margin * cleanup * style dock-tab variants * add padding to scene overflow * edit upload assets btn * style FileBrowserContentPanel * make the studio and files loading spinner smaller * correct file browser list view rendering * revert input and confirmdialog * add cursor in file browser items * loader size correction in editor router * fix trigger component editor * material editor * revert changes * text styling for component list and default transform for all components * use h-full & w-full * update breadcrumb cursor + refactor tooltip * adjust file browser text colors * Update ContextMenu.tsx * update scene item dimensions * style search input * make viewport pointer realtive to panel * change studio2 to `studio` and studio to `studio-old` * remove useAllComponents usages * remove simple advanced toggle for now * added render mode tools * minor styling improvements * improve render panel * Move studio registries to a more appropriate directory * license * fix import * remove editor tailwind config * use tooltips instead of button titles * implement assets category tree view * adjust slider to correct dynamic styling * revert tailwind select * revert tooltip * fix all lint errors * fix dev lint errors * automated prettier format * fix slider * fix incorrect component editor * fix miscellaneous bugs for the new studio (#10280) * do not activate files panel when deleting scene * fix scenes vanishing after renaming * correct rename scene modal to have the full renamed url * fix asset search to display results * fix Settings --------- Co-authored-by: Daniel Belmes <[email protected]> * fix model component stalling studio * add comp style, fix old pop over --------- Co-authored-by: sybiote <[email protected]> Co-authored-by: Andy Chen <[email protected]> Co-authored-by: dtlehrer <[email protected]> Co-authored-by: HexaField <[email protected]> Co-authored-by: Daniel Belmes <[email protected]> Co-authored-by: Daniel Belmes <[email protected]>
EtherealEngine · May 30, 2024 · d36c9c6 · d36c9c6
1 parent 46e0fd6
commit d36c9c6
Show file tree

Hide file tree

Showing 222 changed files with 20,158 additions and 204 deletions.
diff --git a/packages/client-core/i18n/en/common.json b/packages/client-core/i18n/en/common.json
@@ -33,6 +33,7 @@
     "loadingProjects": "Loading projects...",
     "loadingEngine": "Loading engine...",
     "loadingEditor": "Loading editor...",
+    "loadingStudio": "Loading studio...",
     "loadingRoutes": "Loading routes...",
     "loadingRoute": "Loading route...",
     "loadingAuth": "Loading auth routes...",

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -6,7 +6,7 @@
   "error": "Error",
   "errorMsg": "There was an unknown error.",
   "generateScreenshot": "Generating Project Screenshot",
-  "newScene": "Create Scene",
+  "newScene": "Add Scene",
   "saving": "Saving Project",
   "savingError": "Error Saving Project",
   "savingErrorMsg": "There was an error when saving the project.",
@@ -100,6 +100,8 @@
   "toolbar": {
     "lbl-publish": "Publish",
     "lbl-published": "Published",
+    "lbl-simple": "Simple",
+    "lbl-advanced": "Advanced",
     "gizmo": {
       "description": "Transform Gizmo",
       "translate": "[T] Translate",
@@ -190,7 +192,7 @@
   },
   "properties": {
     "title": "Properties",
-    "info": "Propeties let you access and edit detailed information about objects in the scene.",
+    "info": "Properties let you access and edit detailed information about objects in the scene.",
     "lbl-visible": "Visible",
     "lbl-preventBake": "Prevent Bake",
     "lbl-dynamicLoad": "Load Children Dynamically",
@@ -206,7 +208,13 @@
     },
     "envmap": {
       "name": "Environment Map",
-      "description": "environment map properties"
+      "description": "environment map properties",
+      "lbl-source": "Envmap Source",
+      "lbl-color": "Envmap Color",
+      "lbl-bake": "Envmap Bake",
+      "lbl-textureType": "Texture Type",
+      "lbl-textureUrl": "Texture URL",
+      "lbl-intensity": "Envmap Intensity"
     },
     "trigger": {
       "name": "Trigger",
@@ -268,6 +276,7 @@
     "media": {
       "name": "Media",
       "description": "Audio and video playback",
+      "path": "Path",
       "paths": "Source Paths",
       "playmode": "Play Mode",
       "playtitle": "Play",
@@ -293,6 +302,12 @@
       "description": "A mesh is a collection of vertices, edges, and faces that describe the shape of a 3D object.",
       "geometryEditor": "Geometry Editor",
       "materialEditor": "Material Editor",
+      "geometry": {
+        "name": "Name:",
+        "count": "Count:",
+        "itemSize": "Item Size:",
+        "recalculateNormals": "Recalculate Normals"
+      },
       "material": {
         "name": "Name",
         "source": "Source",
@@ -341,7 +356,8 @@
       "lbl-friction":"Friction",
       "lbl-restitution":"Restitution",
       "lbl-collisionLayer":"Collision Layer",
-      "lbl-collisionMask":"Collision Mask"
+      "lbl-collisionMask":"Collision Mask",
+      "lbl-removeMesh": "Remove Mesh"
     },
     "camera": {
       "name": "Camera",
@@ -382,7 +398,8 @@
       "title": "Loop Animation",
       "description": "Looped animation associated with your 3d model, loaded from a GLTF URL or file.",
       "lbl-loopAnimation": "Loop Animation",
-      "lbl-timeScale": "Time Scale"
+      "lbl-timeScale": "Time Scale",
+      "lbl-animationPack": "Animation Pack (via Mixamo Rig)"
     },
     "variant": {
       "name": "Variant",
@@ -820,7 +837,10 @@
       "lbl-useGlobalTransform": "Use Global Transform"
     },
     "triggerVolume": {
+      "name": "Trigger",
       "description": "Sets a property on the target object on enter and leave.",
+      "lbl-addTrigger": "Add Trigger",
+      "lbl-removeTrigger": "Remove Trigger",
       "lbl-target": "Object",
       "lbl-onenter": "On Enter",
       "lbl-onexit": "On Exit",
@@ -958,7 +978,30 @@
       "clippingMax": "clip.max",
       "glyphResolution": "glyph.resolution",
       "glyphDetail": "glyph.detail",
-      "gpuAccelerated": "GPU Accelerated"
+      "gpuAccelerated": "GPU Accelerated" 
+    },
+    "textBox": {
+      "name": "Textbox Component",
+      "description": "An XRUI text box component",
+      "lbl-text": "Text",
+      "lbl-family": "Family",
+      "lbl-size": "Size",
+      "lbl-fontStroke": "Font Stroke",
+      "lbl-fontColor": "Font Color",
+      "lbl-cornerRadius": "Corner Radius",
+      "lbl-backgroundColor": "Background Color",
+      "lbl-opacity": "Opacity",
+      "lbl-padding": "Padding"
+    },
+    "gallery": {
+      "name": "Gallery Component",
+      "description": "XRUI Gallery Component",
+      "lbl-imageGrid": "ImageGrid Component",
+      "lbl-thumbnail": "Thumbnail",
+      "lbl-outfitURL": "Outfit URL",
+      "lbl-performerURL": "Performer URL",
+      "lbl-asset": "Asset",
+      "assets": "Assets"
     }
   },
   "projects": {
@@ -1095,8 +1138,8 @@
       "compress": "Compress",
       "convert": "Convert",
       "downloadProject": "Download Project",
-      "uploadAsset": "Upload Asset",
-      "search-placeholder": "Search files and folders ...",
+      "uploadAssets": "Upload Assets",
+      "search-placeholder": "Search folders",
       "fileProperties": {
         "name": "Name:",
         "type": "Type:",
@@ -1138,11 +1181,13 @@
     "lbl": "Hierarchy",
     "info": "The scene Hierarchy contains all element currently in your scene (assets, lighting, items from the tool menu, etc).",
     "lbl-rename": "Rename",
+    "lbl-renameScene": "Rename Scene",
     "lbl-duplicate": "Duplicate",
     "lbl-group": "Group",
     "lbl-copy": "Copy",
     "lbl-paste": "Paste",
     "lbl-delete": "Delete",
+    "lbl-deleteScene": "Are you sure you want to delete this scene?",
     "lbl-expandAll": "Expand All",
     "lbl-collapseAll": "Collapse All",
     "lbl-explode": "Explode Objects",
@@ -1214,7 +1259,8 @@
     "saveScene": {
       "title": "Save",
       "lbl-thumbnail": "Generate thumbnail & envmap",
-      "lbl-confirm": "Save Scene"
+      "lbl-confirm": "Save Scene",
+      "info-confirm": "Are you sure you want to save the scene?"
     },
     "saveNewScene": {
       "title": "Save As",

diff --git a/packages/client-core/src/common/services/ThemeService.tsx b/packages/client-core/src/common/services/ThemeService.tsx
@@ -86,7 +86,7 @@ const themes = {
 export const ThemeState = defineState({
   name: 'ThemeState',
   initial: {
-    theme: 'light' as 'light' | 'dark' | 'custom'
+    theme: 'dark' as 'light' | 'dark' | 'custom'
   },
 
   setTheme: (theme: 'light' | 'dark' | 'custom') => {

diff --git a/packages/client/src/main.tsx b/packages/client/src/main.tsx
@@ -68,17 +68,6 @@ const App = () => {
               </Suspense>
             }
           />
-          <Route
-            key="studio"
-            path="/studio/*"
-            element={
-              <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
-                <Engine>
-                  <AppPage route={'studio'} />
-                </Engine>
-              </Suspense>
-            }
-          />
           <Route
             key="offline"
             path="/offline/*"

diff --git a/packages/client/src/pages/editor2/index.tsx b/packages/client/src/pages/editor2/index.tsx
@@ -0,0 +1,75 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { t } from 'i18next'
+import React, { Suspense, useEffect } from 'react'
+
+import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
+
+import { RouterState } from '@etherealengine/client-core/src/common/services/RouterService'
+import { PopupMenuInline } from '@etherealengine/client-core/src/user/components/UserMenu/PopupMenuInline'
+import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
+import { userHasAccess } from '@etherealengine/client-core/src/user/userHasAccess'
+import { EditorPage, useStudioEditor } from '@etherealengine/editor/src/pages/Editor2Page'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { Route, Routes, useLocation } from 'react-router-dom'
+
+const EditorRouter = () => {
+  const ready = useStudioEditor()
+
+  if (!ready) return <LoadingView fullScreen className="h-8 w-8" title={t('common:loader.loadingStudio')} />
+
+  return (
+    <Suspense fallback={<LoadingView fullScreen className="h-8 w-8" title={t('common:loader.loadingStudio')} />}>
+      <PopupMenuInline />
+      <Routes>
+        <Route path="*" element={<EditorPage />} />
+      </Routes>
+    </Suspense>
+  )
+}
+
+const EditorProtectedRoutes = () => {
+  const location = useLocation()
+  const authState = useHookstate(getMutableState(AuthState))
+  const user = authState.user
+  const isAuthorized = useHookstate<boolean | null>(null)
+
+  useEffect(() => {
+    if (user.scopes.value) {
+      const hasAccess = userHasAccess('editor:write')
+      if (!hasAccess) {
+        RouterState.navigate('/', { redirectUrl: location.pathname })
+        isAuthorized.set(false)
+      } else isAuthorized.set(true)
+    }
+  }, [user.scopes])
+
+  if (!isAuthorized.value) return <LoadingView fullScreen className="h-8 w-8" title={t('common:loader.auth')} />
+
+  return <EditorRouter />
+}
+
+export default EditorProtectedRoutes
diff --git a/packages/editor/src/components/Editor2Container.css b/packages/editor/src/components/Editor2Container.css
@@ -0,0 +1,55 @@
+/** references https://github.com/ticlo/rc-dock/blob/master/dist/rc-dock.css */
+
+.dock-top .dock-bar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  background: transparent;
+}
+
+.dock-panel {
+  border: none;
+}
+
+.dock.dock-top {
+  background: var(--bg-primary);
+}
+
+.dock-nav-list {
+  justify-content: center;
+  align-items: center;
+}
+
+.dock-top .dock-bar {
+  border-bottom: none !important;
+}
+
+.dock-tab {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: transparent;
+  margin: 0;
+  border-bottom: none !important;
+}
+
+.dock-tab.dock-tab-active {
+  background: var(--bg-surface-main);
+}
+
+.dock-tab:not(.dock-tab-active):hover {
+  background: var(--bg-surface-input);
+}
+
+.dock-tab > div {
+  padding: 0 !important;
+}
+
+.dock-ink-bar {
+  display: none;  
+}
+
+.dock-tab-close-btn{
+  display: none;
+}
+
+.dock-bar.drag-initiator{
+  padding: 0;
+}