fix few ui issues (#28)

playcanvas · Nov 12, 2023 · 4271900 · 4271900
1 parent f3ee4b7
commit 4271900
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 97 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "super-splat",
-    "version": "0.10.1",
+    "version": "0.10.2",
     "author": "PlayCanvas<support@playcanvas.com>",
     "homepage": "https://playcanvas.com",
     "description": "All the splat things",

diff --git a/src/editor-ui.ts b/src/editor-ui.ts
@@ -1,4 +1,6 @@
 import { Container } from 'pcui';
+import { version as supersplatVersion } from '../package.json';
+import logo from './ui/playcanvas-logo.png';
 import { ControlPanel } from './ui/control-panel';
 
 class EditorUI {
@@ -16,9 +18,7 @@ class EditorUI {
         const leftContainer = new Container({
             id: 'left-container',
             resizable: 'right',
-            resizeMax: 1000,
-            flex: true,
-            flexDirection: 'column'
+            resizeMax: 1000
         });
 
         const canvasContainer = new Container({
@@ -32,8 +32,37 @@ class EditorUI {
         appContainer.append(canvasContainer);
         canvasContainer.dom.appendChild(canvas);
 
+        // title
+        const title = new Container({
+            id: 'title-container'
+        });
+
+        title.dom.addEventListener('click', () => {
+            window.open('https://github.com/playcanvas/super-splat');
+        });
+
+        const titleLogo = document.createElement('img');
+        titleLogo.id = 'title-logo';
+        titleLogo.src = logo.src;
+
+        const titleText = document.createElement('a');
+        titleText.id = 'title-text';
+        titleText.text =  `SUPER SPLAT v${supersplatVersion}`;
+
+        title.dom.appendChild(titleLogo);
+        title.dom.appendChild(titleText);
+
+        // control panel
         const controlPanel = new ControlPanel();
-        leftContainer.append(controlPanel);
+
+        // file select
+        const fileSelect = new Container({
+            id: 'file-selector-container'
+        });
+
+        leftContainer.append(title);
+        leftContainer.append(controlPanel); // Parent);
+        leftContainer.append(fileSelect);
 
         this.appContainer = appContainer;
         this.leftContainer = leftContainer;

diff --git a/src/main.ts b/src/main.ts
@@ -81,7 +81,7 @@ const initDropHandler = (canvas: HTMLCanvasElement, scene: Scene) => {
             scene.loadModel(URL.createObjectURL(file), file.name);
         }
     };
-    document.body.appendChild(selector);
+    document.getElementById('file-selector-container')?.appendChild(selector);
 
     // also support user dragging and dropping a local glb file onto the canvas
     CreateDropHandler(canvas, urls => {

diff --git a/src/spinner.ts b/src/spinner.ts
@@ -55,48 +55,6 @@ const css = `
         transform: translateY(-50%) rotate(360deg);
     }
 }
-
-.hand-prompt {
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 90px;
-    height: 90px;
-    pointer-events: none;
-    z-index: 9999999999999;
-
-    transform: translate(-50%, -50%);
-    -webkit-animation: prompt-animate 1s ease-in-out 0s infinite alternate;
-    animation: prompt-animate 1s ease-in-out 0s infinite alternate;
-
-    -webkit-filter: drop-shadow(5px 5px 5px #888);
-    filter: drop-shadow(5px 5px 5px #888);
-}
-
-@-webkit-keyframes prompt-animate {
-    0% {
-        -webkit-transform: translate(-125%, -50%);
-        transform: translate(-125%, -50%);
-    }
-
-    100% {
-        -webkit-transform: translate(25%, -50%);
-        transform: translate(25%, -50%);
-    }
-}
-
-@keyframes prompt-animate {
-    0% {
-        -webkit-transform: translate(-125%, -50%);
-        transform: translate(-125%, -50%);
-    }
-
-    100% {
-        -webkit-transform: translate(25%, -50%);
-        transform: translate(25%, -50%);
-    }
-}
 `;
 
 let container: HTMLElement;
@@ -110,7 +68,7 @@ const startSpinner = () => {
     spinner = document.createElement('div');
     spinner.className = 'static-spinner';
     container.appendChild(spinner);
-    document.getElementById('app-container').appendChild(container);
+    document.getElementById('canvas-container')?.appendChild(container);
 };
 
 const stopSpinner = () => {

diff --git a/src/style.scss b/src/style.scss
@@ -4,14 +4,16 @@
     font-size: 12px;
 }
 
-html, body {
+html {
     height: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: $bcg-primary;
 }
 
 body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    max-height: 100%;
+    background-color: $bcg-primary;
     overflow: hidden;
 }
 
@@ -29,14 +31,26 @@ body {
     height: 100%;
     border-right: 1px solid #20292b;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+}
+
+#title-container {
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
 }
 
 #control-container {
-    width: 100%;
+    flex-grow: 1;
     overflow-y: auto;
 }
 
+#file-selector-container {
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin: 5px;
+}
+
 #title-logo {
     width: 40px;
     height: 40px;
@@ -132,14 +146,15 @@ body {
     image-rendering: pixelated;
 }
 
-#file-selector {
-    position: absolute;
-    left: 0;
-    bottom: 0;
+#keyboard-heading {
+    margin: 40px 0px 0px 0px;
 }
 
-#keyboard-heading {
-    margin: 120px 0px 0px 0px;
+// placeholder
+.pcui-input-element[placeholder] {
+    &::after {
+        color: $text-darkest;
+    }
 }
 
 /* scrollbar styling */

diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts
@@ -1,7 +1,5 @@
 import { EventHandler } from 'playcanvas';
 import { BooleanInput, Button, Container, Label, NumericInput, Panel, RadioButton, SelectInput, SliderInput, VectorInput } from 'pcui';
-import { version as supersplatVersion } from '../../package.json';
-import logo from './playcanvas-logo.png';
 
 class BoxSelection {
     root: HTMLElement;
@@ -271,7 +269,6 @@ class BrushSelection {
     }
 }
 
-
 class ControlPanel extends Container {
     events = new EventHandler;
 
@@ -282,30 +279,10 @@ class ControlPanel extends Container {
 
         super(args);
 
-        // header
-        const title = new Container({
-            class: 'control-parent'
-        });
-
-        title.dom.addEventListener('click', () => {
-            window.open('https://github.com/playcanvas/super-splat');
-        });
-
-        const titleLogo = document.createElement('img');
-        titleLogo.id = 'title-logo';
-        titleLogo.src = logo.src;
-
-        const titleText = document.createElement('a');
-        titleText.id = 'title-text';
-        titleText.text =  `SUPER SPLAT v${supersplatVersion}`;
-
-        title.dom.appendChild(titleLogo);
-        title.dom.appendChild(titleText);
-
         // camera panel
         const cameraPanel = new Panel({
             class: 'control-panel',
-            headerText: 'Camera'
+            headerText: 'CAMERA'
         });
 
         const focusButton = new Button({
@@ -340,7 +317,7 @@ class ControlPanel extends Container {
         // selection panel
         const selectionPanel = new Panel({
             class: 'control-panel',
-            headerText: 'Selection'
+            headerText: 'SELECTION'
         });
 
         // select by size
@@ -410,6 +387,7 @@ class ControlPanel extends Container {
             precision: 4,
             dimensions: 4,
             value: [0, 0, 0, 0.5],
+            placeholder: ['X', 'Y', 'Z', 'R'],
             enabled: false
         });
 
@@ -538,7 +516,7 @@ class ControlPanel extends Container {
         // modify
         const modifyPanel = new Panel({
             class: 'control-panel',
-            headerText: 'Modify'
+            headerText: 'MODIFY'
         });
 
         const deleteSelectionButton = new Button({
@@ -557,7 +535,7 @@ class ControlPanel extends Container {
         // scene
         const scenePanel = new Panel({
             class: 'control-panel',
-            headerText: 'Scene'
+            headerText: 'SCENE'
         });
 
         const origin = new Container({
@@ -591,7 +569,8 @@ class ControlPanel extends Container {
             class: 'control-element-expand',
             precision: 4,
             dimensions: 3,
-            value: [0, 0, 0]
+            value: [0, 0, 0],
+            placeholder: ['X', 'Y', 'Z']
         });
 
         position.append(positionLabel);
@@ -611,7 +590,8 @@ class ControlPanel extends Container {
             class: 'control-element-expand',
             precision: 4,
             dimensions: 3,
-            value: [0, 0, 0]
+            value: [0, 0, 0],
+            placeholder: ['X', 'Y', 'Z']
         });
 
         rotation.append(rotationLabel);
@@ -624,7 +604,7 @@ class ControlPanel extends Container {
         // import
         const importPanel = new Panel({
             class: 'control-panel',
-            headerText: 'Import'
+            headerText: 'IMPORT'
         });
 
         const shData = new Container({
@@ -649,7 +629,7 @@ class ControlPanel extends Container {
         // export
         const exportPanel = new Panel({
             class: 'control-panel',
-            headerText: 'Export to'
+            headerText: 'EXPORT TO'
         });
 
         const exportPlyButton = new Button({
@@ -669,7 +649,7 @@ class ControlPanel extends Container {
         const keyboardPanel = new Panel({
             id: 'keyboard-heading',
             class: 'control-panel',
-            headerText: 'Keyboard'
+            headerText: 'KEYBOARD'
         });
 
         const shortcutsLabel = new Label({
@@ -694,7 +674,6 @@ class ControlPanel extends Container {
         keyboardPanel.append(shortcutsLabel);
 
         // append
-        this.append(title);
         this.append(cameraPanel);
         this.append(selectionPanel);
         this.append(modifyPanel);
@@ -867,7 +846,7 @@ class ControlPanel extends Container {
         });
 
         this.events.on('splat:count', (count: number) => {
-            selectionPanel.headerText = `Selection${count === 0 ? '' : ' (' + count.toString() + ')'}`;
+            selectionPanel.headerText = `SELECTION${count === 0 ? '' : ' (' + count.toString() + ')'}`;
         });
 
         let splatSizeSave = 1;