Add new viewer and console toolbar (handle + settings)

Related to #360
2021-06-08 18:40:17 +10:00
parent 927ba29e04
commit 02460544bf
7 changed files with 70 additions and 31 deletions
--- a/app/web/src/components/IdeConsole/IdeConsole.js
+++ b/app/web/src/components/IdeConsole/IdeConsole.js
@@ -1,6 +1,7 @@
 import { useContext, useEffect } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
+import PanelToolbar from 'src/components/PanelToolbar'

 const IdeConsole = () => {
  const { state } = useContext(IdeContext)
@@ -12,27 +13,28 @@ const IdeConsole = () => {
  }, [state.consoleMessages])

  return (
-    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkTheme.Bg}>
-      <div>
-        {state.consoleMessages?.map(({ type, message, time }, index) => (
-          <pre
-            className="font-mono text-sm"
-            style={matchEditorVsDarkTheme.Text}
-            key={message + index}
-          >
-            <div
-              className="text-xs font-bold pt-2"
-              style={matchEditorVsDarkTheme.TextBrown}
+      <div className="p-2 px-8 pt-14 min-h-full relative" style={matchEditorVsDarkTheme.Bg}>
+        <PanelToolbar panelName="console" />
+        <div>
+          {state.consoleMessages?.map(({ type, message, time }, index) => (
+            <pre
+              className="font-mono text-sm"
+              style={matchEditorVsDarkTheme.Text}
+              key={message + index}
            >
-              {time?.toLocaleString()}
-            </div>
-            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
-              {message}
-            </div>
-          </pre>
-        ))}
+              <div
+                className="text-xs font-bold pt-2"
+                style={matchEditorVsDarkTheme.TextBrown}
+              >
+                {time?.toLocaleString()}
+              </div>
+              <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
+                {message}
+              </div>
+            </pre>
+          ))}
+        </div>
      </div>
-    </div>
  )
 }

--- a/app/web/src/components/IdeContainer/IdeContainer.js
+++ b/app/web/src/components/IdeContainer/IdeContainer.js
@@ -2,7 +2,7 @@ import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import IdeEditor, { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
+import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
@@ -64,15 +64,7 @@ const IdeContainer = () => {
          return (
            <MosaicWindow
              path={path}
-              renderToolbar={() => (
-                <div
-                  className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
-                  style={matchEditorVsDarkTheme.lighterBg}
-                >
-                  {id}
-                  {id === 'Editor' && ` (${state.ideType})`}
-                </div>
-              )}
+              renderToolbar={() => <div/>} // needs an empty element, otherwise it adds it's own toolbar
              className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
            >
              {id === 'Viewer' ? (
--- a/app/web/src/components/IdeEditor/IdeEditor.js
+++ b/app/web/src/components/IdeEditor/IdeEditor.js
@@ -7,7 +7,6 @@ const Editor = lazy(() => import('@monaco-editor/react'))
 export const matchEditorVsDarkTheme = {
  // Some colors to roughly match the vs-dark editor theme
  Bg: { backgroundColor: 'rgb(30,30,30)' },
-  lighterBg: { backgroundColor: 'rgb(55,55,55)' },
  Text: { color: 'rgb(212,212,212)' },
  TextBrown: { color: 'rgb(206,144,120)' },
 }
--- a/app/web/src/components/IdeViewer/IdeViewer.js
+++ b/app/web/src/components/IdeViewer/IdeViewer.js
@@ -10,6 +10,7 @@ import {
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
+import PanelToolbar from 'src/components/PanelToolbar'

 extend({ OrbitControls })

@@ -227,6 +228,7 @@ const IdeViewer = () => {
          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
        </div>
      )}
+      <PanelToolbar panelName="3d-view" />
    </div>
  )
 }
--- a/app/web/src/components/PanelToolbar/PanelToolbar.tsx
+++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
@@ -0,0 +1,21 @@
+import { useContext } from 'react'
+import { MosaicWindowContext } from 'react-mosaic-component'
+import Svg from 'src/components/Svg/Svg'
+
+const PanelToolbar = ({ panelName }: { panelName : string }) => {
+  const {mosaicWindowActions} = useContext(MosaicWindowContext)
+  return (
+    <div className="absolute top-0 left-0 flex items-center h-9">
+      {mosaicWindowActions.connectDragSource(
+        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+          <Svg name='drag-grid' className="w-4 p-px" />
+        </div>
+      )}
+      <button className="bg-gray-500 text-gray-300 px-3 rounded-br-lg h-full" aria-label={`${panelName} settings`}>
+        <Svg name='gear' className="w-7 p-px" />
+      </button>
+    </div>
+  )
+}
+
+export default PanelToolbar
--- a/app/web/src/components/Svg/Svg.js
+++ b/app/web/src/components/Svg/Svg.js
@@ -1,4 +1,4 @@
-const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
+const Svg = ({ name, className: className2 = '', strokeWidth = 2 }) => {
  const svgs = {
    'arrow-down': (
      <svg
@@ -94,6 +94,16 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
        />
      </svg>
    ),
+    'drag-grid': (
+      <svg viewBox="0 0 11 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill="currentColor"
+          d="M2.22314 0C1.11858 0 0.223145 0.895431 0.223145 2C0.223145 3.10457 1.11858 4 2.22314 4C3.32771 4 4.22314 3.10457 4.22314 2C4.22314 0.895431 3.32771 0 2.22314 0ZM8.77686 0C7.67229 0 6.77686 0.895431 6.77686 2C6.77686 3.10457 7.67229 4 8.77686 4C9.88142 4 10.7769 3.10457 10.7769 2C10.7769 0.895431 9.88142 0 8.77686 0ZM0.223145 9C0.223145 7.89543 1.11858 7 2.22314 7C3.32771 7 4.22314 7.89543 4.22314 9C4.22314 10.1046 3.32771 11 2.22314 11C1.11858 11 0.223145 10.1046 0.223145 9ZM8.77686 7C7.67229 7 6.77686 7.89543 6.77686 9C6.77686 10.1046 7.67229 11 8.77686 11C9.88142 11 10.7769 10.1046 10.7769 9C10.7769 7.89543 9.88142 7 8.77686 7ZM0.223145 16C0.223145 14.8954 1.11858 14 2.22314 14C3.32771 14 4.22314 14.8954 4.22314 16C4.22314 17.1046 3.32771 18 2.22314 18C1.11858 18 0.223145 17.1046 0.223145 16ZM8.77686 14C7.67229 14 6.77686 14.8954 6.77686 16C6.77686 17.1046 7.67229 18 8.77686 18C9.88142 18 10.7769 17.1046 10.7769 16C10.7769 14.8954 9.88142 14 8.77686 14Z"
+        />
+      </svg>
+    ),
    'exclamation-circle': (
      <svg
        xmlns="http://www.w3.org/2000/svg"
@@ -236,6 +246,16 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
        />
      </svg>
    ),
+    gear: (
+      <svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill="currentColor"
+          d="M8.86193 0.104004H10.1383L10.964 2.58138L11.506 2.87613L13.2571 1.19177L14.3466 1.85664L13.761 4.40148L14.174 4.69029L16.7384 4.1958L17.3641 5.30824L15.4304 7.10054L15.5487 7.49835L18.0261 8.32463V9.601L15.5487 10.4267L15.4304 10.836L17.3641 12.617L16.7384 13.7294L14.174 13.2349L13.761 13.5237L14.3466 16.0686L13.2571 16.7335L11.506 15.1591L10.964 15.4188L10.1383 17.8962H8.86193L8.03564 15.4187L7.51868 15.1591L5.74267 16.7335L4.65315 16.0686L5.23879 13.5237L4.82575 13.2349L2.2614 13.7294L1.63562 12.617L3.57334 10.836L3.45101 10.4267L0.973633 9.601V8.32463L3.45107 7.49835L3.57334 7.10054L1.63562 5.30824L2.2614 4.1958L4.82575 4.69029L5.23879 4.40148L4.65315 1.85664L5.74267 1.19177L7.51868 2.87613L8.03564 2.58144L8.86193 0.104004ZM9.49979 11.7199C11.0019 11.7199 12.2195 10.5022 12.2195 9.00009C12.2195 7.49801 11.0019 6.28033 9.49979 6.28033C7.99771 6.28033 6.78003 7.49801 6.78003 9.00009C6.78003 10.5022 7.99771 11.7199 9.49979 11.7199Z"
+        />
+      </svg>
+    ),
    lightbulb: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
--- a/app/web/tailwind.config.js
+++ b/app/web/tailwind.config.js
@@ -10,6 +10,9 @@ module.exports = {
        'bounce-sm-slow': 'bounce-sm 5s linear infinite',
        'twist-sm-slow': 'twist-sm 10s infinite',
      },
+      cursor: {
+        grab: 'grab'
+      },
      keyframes: {
        'bounce-sm': {
          '0%, 100%': {