[UI/UX] Studio Update - Tailwind components for studio

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...",

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.",
@@ -99,6 +99,8 @@
   "toolbar": {
     "lbl-publish": "Publish",
     "lbl-published": "Published",
+    "lbl-simple": "Simple",
+    "lbl-advanced": "Advanced",
     "gizmo": {
       "description": "Transform Gizmo",
       "translate": "[T] Translate",
@@ -205,7 +207,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",
@@ -267,6 +275,7 @@
     "media": {
       "name": "Media",
       "description": "Audio and video playback",
+      "path": "Path",
       "paths": "Source Paths",
       "playmode": "Play Mode",
       "playtitle": "Play",
@@ -292,6 +301,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",
@@ -340,7 +355,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",
@@ -381,7 +397,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",
@@ -819,6 +836,7 @@
       "lbl-useGlobalTransform": "Use Global Transform"
     },
     "triggerVolume": {
+      "name": "Trigger",
       "description": "Sets a property on the target object on enter and leave.",
       "lbl-target": "Object",
       "lbl-onenter": "On Enter",
@@ -957,7 +975,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": {
@@ -1137,11 +1178,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": "Delete Scene",
     "lbl-expandAll": "Expand All",
     "lbl-collapseAll": "Collapse All",
     "lbl-explode": "Explode Objects",
@@ -1213,7 +1256,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",

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') => {

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 spinnerOnly message={t('common:loader.loadingStudio')} />
+
+  return (
+    <Suspense fallback={<LoadingView spinnerOnly message={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

packages/editor/src/components/Editor2Container.css

@@ -0,0 +1,46 @@
+/** 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 {
+  background: var(--bg-surface-main);
+  justify-content: center;
+  align-items: center;
+}
+
+.dock-top .dock-bar {
+  border-bottom: none !important;
+}
+
+.dock-tab {
+  background: transparent;
+  margin: 0;
+  border-bottom: none !important;
+}
+
+.dock-tab > div {
+  padding: 0 !important;
+}
+
+.dock-ink-bar {
+  display: none;  
+}
+
+.dock-tab-close-btn{
+  display: none;
+}
+
+.dock-bar.drag-initiator{
+  padding: 0;
+}