Start adding ide colors, includes adding custom theme to openscad

Resolves #365
2021-06-16 21:20:27 +10:00
parent 51589f6c0a
commit 142bf2c890
16 changed files with 209 additions and 95 deletions
--- a/app/web/src/components/EditorMenu/EditorMenu.tsx
+++ b/app/web/src/components/EditorMenu/EditorMenu.tsx
@@ -18,9 +18,9 @@ const EditorMenu = () => {
  const isOpenScad = state.ideType === 'openScad'
  const isCadQuery = state.ideType === 'cadQuery'
  return (
-    <div className="flex justify-between bg-gray-500 text-gray-100">
+    <div className="flex justify-between bg-ch-gray-760 text-gray-100">
      <div className="flex items-center h-9 w-full cursor-grab">
-        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
          <Svg name="drag-grid" className="w-4 p-px" />
        </div>
        <div className="flex gap-6 px-5">
@@ -31,10 +31,12 @@ const EditorMenu = () => {
          <button className="cursor-not-allowed" disabled>
            Edit
          </button>
-          <ViewDropdown handleLayoutReset={() => thunkDispatch({type: 'resetLayout'})} />
+          <ViewDropdown
+            handleLayoutReset={() => thunkDispatch({ type: 'resetLayout' })}
+          />
        </div>
        <button
-          className="text-gray-300  h-full cursor-not-allowed"
+          className="text-ch-gray-300  h-full cursor-not-allowed"
          aria-label="editor settings"
          disabled
        >
@@ -112,12 +114,18 @@ function ViewDropdown({ handleLayoutReset }) {
  )
 }

-function Dropdown({ name, children }: {name: string, children: React.ReactNode}) {
+function Dropdown({
+  name,
+  children,
+}: {
+  name: string
+  children: React.ReactNode
+}) {
  return (
    <div className="relative">
      <Menu>
        <Menu.Button className="text-gray-100">{name}</Menu.Button>
-        <Menu.Items className="absolute flex flex-col mt-4 bg-gray-500 rounded shadow-md text-gray-100 overflow-hidden whitespace-nowrap">
+        <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
          {children}
        </Menu.Items>
      </Menu>
--- a/app/web/src/components/IdeConsole/IdeConsole.js
+++ b/app/web/src/components/IdeConsole/IdeConsole.js
@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'

 const IdeConsole = () => {
  const { state } = useIdeContext()
@@ -12,21 +11,14 @@ const IdeConsole = () => {
  }, [state.consoleMessages])

  return (
-    <div
-      className="p-2 px-8 pt-14 min-h-full"
-      style={matchEditorVsDarkTheme.Bg}
-    >
+    <div className="p-2 px-8 pt-4 min-h-full bg-ch-gray-800">
      <div>
        {state.consoleMessages?.map(({ type, message, time }, index) => (
          <pre
-            className="font-mono text-sm"
-            style={matchEditorVsDarkTheme.Text}
+            className="font-mono text-sm text-gray-300"
            key={`${message} ${index}`}
          >
-            <div
-              className="text-xs font-bold pt-2"
-              style={matchEditorVsDarkTheme.TextBrown}
-            >
+            <div className="text-xs font-bold pt-2 text-ch-blue-600">
              {time?.toLocaleString()}
            </div>
            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
--- a/app/web/src/components/IdeContainer/IdeContainer.js
+++ b/app/web/src/components/IdeContainer/IdeContainer.js
@@ -1,17 +1,43 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, Suspense, lazy } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-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'
 import EditorMenu from 'src/components/EditorMenu/EditorMenu'
 import PanelToolbar from 'src/components/PanelToolbar'

+const IdeEditor = lazy(() => import('src/components/IdeEditor/IdeEditor'))
+const IdeViewer = lazy(() => import('src/components/IdeViewer/IdeViewer'))
+
+const SmallLoadingPing = (
+  <div className="bg-ch-gray-800 text-gray-200 font-ropa-sans relative w-full h-full flex justify-center items-center">
+    <div className="relative">
+      <div className="absolute inset-0 flex justify-center items-center">
+        <div className="h-4 w-4 bg-purple-600 rounded-full animate-ping"></div>
+      </div>
+      <div className="relative">. . . loading</div>
+    </div>
+  </div>
+)
+
+const BigLoadingPing = () => (
+  <div className="inset-0 absolute flex items-center justify-center">
+    <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+  </div>
+)
+
 const ELEMENT_MAP = {
-  Editor: <IdeEditor />,
-  Viewer: <IdeViewer />,
+  Editor: (
+    <Suspense fallback={SmallLoadingPing}>
+      <IdeEditor Loading={SmallLoadingPing} />
+    </Suspense>
+  ),
+  Viewer: (
+    <Suspense fallback={BigLoadingPing}>
+      <IdeViewer Loading={BigLoadingPing} />
+    </Suspense>
+  ),
  Console: <IdeConsole />,
 }

@@ -78,7 +104,10 @@ const IdeContainer = () => {
  }, [])

  return (
-    <div id="cadhub-ide" className="mosaic-toolbar-overrides flex-auto h-full">
+    <div
+      id="cadhub-ide"
+      className="mosaic-toolbar-overrides flex-auto h-full bg-red-500"
+    >
      <Mosaic
        renderTile={(id, path) => {
          return (
--- a/app/web/src/components/IdeEditor/IdeEditor.js
+++ b/app/web/src/components/IdeEditor/IdeEditor.js
@@ -1,22 +1,43 @@
-import { Suspense, lazy } from 'react'
+import { useEffect, useState } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-const Editor = lazy(() => import('@monaco-editor/react'))
+import Editor, { useMonaco } from '@monaco-editor/react'
+import { theme } from 'src/../tailwind.config'

-export const matchEditorVsDarkTheme = {
-  // Some colors to roughly match the vs-dark editor theme
-  Bg: { backgroundColor: 'rgb(30,30,30)' },
-  Text: { color: 'rgb(212,212,212)' },
-  TextBrown: { color: 'rgb(206,144,120)' },
-}
+const colors = theme.extend.colors

-const IdeEditor = () => {
+const IdeEditor = ({ Loading }) => {
  const { state, thunkDispatch } = useIdeContext()
+  const [theme, setTheme] = useState('vs-dark')
  const ideTypeToLanguageMap = {
    cadQuery: 'python',
    openScad: 'cpp',
  }
+  const monaco = useMonaco()
+  useEffect(() => {
+    if (monaco) {
+      const themeName = 'cadhub'
+      monaco.editor.defineTheme(themeName, {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+          { background: colors['ch-gray'][750] },
+          {
+            token: 'comment',
+            foreground: colors['ch-blue'][600],
+            fontStyle: 'italic',
+          },
+          { token: 'keyword', foreground: colors['ch-purple'][600] },
+          { token: 'string', foreground: colors['ch-pink'][300] },
+        ],
+        colors: {
+          'editor.background': colors['ch-gray'][800],
+        },
+      })
+      setTheme(themeName)
+    }
+  }, [monaco])

  function handleCodeChange(value, _event) {
    thunkDispatch({ type: 'updateCode', payload: value })
@@ -40,33 +61,22 @@ const IdeEditor = () => {
      localStorage.setItem(makeCodeStoreKey(state.ideType), state.code)
    }
  }
-  const loading = (
-    <div
-      className="text-gray-700 font-ropa-sans relative"
-      style={{ backgroundColor: 'red' }}
-    >
-      <div className="absolute inset-0 text-center flex items-center w-32">
-        . . . loading
-      </div>
-    </div>
-  )
+
  return (
    <div // eslint-disable-line jsx-a11y/no-static-element-interactions
      className="h-full"
      onKeyDown={handleSaveHotkey}
    >
-      <Suspense fallback={loading}>
-        <Editor
-          defaultValue={state.code}
-          value={state.code}
-          theme="vs-dark"
-          loading={loading}
-          // TODO #247 cpp seems better than js for the time being
-          defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
-          language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
-          onChange={handleCodeChange}
-        />
-      </Suspense>
+      <Editor
+        defaultValue={state.code}
+        value={state.code}
+        theme={theme}
+        loading={Loading}
+        // TODO #247 cpp seems better than js for the time being
+        defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+        language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+        onChange={handleCodeChange}
+      />
    </div>
  )
 }
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -2,38 +2,39 @@ import { Popover } from '@headlessui/react'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import FullScriptEncoding from 'src/components/EncodedUrl/FullScriptEncoding'
 import ExternalScript from 'src/components/EncodedUrl/ExternalScript'
+import Svg from 'src/components/Svg/Svg'

 const TopButton = ({
  onClick,
  children,
  className,
-  iconColor,
+  name,
 }: {
  onClick?: () => void
  children: React.ReactNode
  className?: string
-  iconColor: string
+  name: string
 }) => (
  <button
    onClick={onClick}
    className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}
  >
-    <div className={`rounded-full h-6 w-6 mr-4 ${iconColor}`} />
    {children}
+    {name}
  </button>
 )

 const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
  return (
-    <div className="h-16 w-full bg-gray-900 flex justify-between items-center">
-      <div className="bg-gray-700 pr-48 h-full"></div>
+    <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center">
+      <div className="bg-ch-gray-700 pr-48 h-full"></div>
      <div className="text-gray-200 flex gap-4 mr-4">
        <TopButton
-          className="bg-gray-600 text-gray-200"
-          iconColor="bg-gray-300"
+          className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
          onClick={handleRender}
+          name="Preview"
        >
-          Render
+          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500 mr-2" />
        </TopButton>

        <Popover className="relative outline-none w-full h-full">
@@ -41,8 +42,14 @@ const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
            return (
              <>
                <Popover.Button className="h-full w-full outline-none">
-                  <TopButton iconColor="bg-gray-600" className="text-gray-700">
-                    Share
+                  <TopButton
+                    name="Share"
+                    className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+                  >
+                    <Svg
+                      name="share"
+                      className="w-6 h-6 text-ch-purple-500 mr-2 mt-1"
+                    />
                  </TopButton>
                </Popover.Button>
                {open && (
--- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx
+++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx
@@ -4,7 +4,7 @@ import Svg from 'src/components/Svg/Svg'
 const IdeSideBar = () => {
  return (
    <div className="h-full flex flex-col justify-between">
-      <div className="w-16 h-16 flex items-center justify-center bg-gray-900">
+      <div className="w-16 h-16 flex items-center justify-center bg-ch-gray-900">
        <Link to={routes.home()}>
          <Svg className="w-12" name="favicon" />
        </Link>
--- a/app/web/src/components/IdeViewer/IdeViewer.js
+++ b/app/web/src/components/IdeViewer/IdeViewer.js
@@ -136,7 +136,7 @@ function Sphere(props) {
    </mesh>
  )
 }
-const IdeViewer = () => {
+const IdeViewer = ({ Loading }) => {
  const { state, thunkDispatch } = useIdeContext()
  const [isDragging, setIsDragging] = useState(false)
  const [image, setImage] = useState()
@@ -146,21 +146,13 @@ const IdeViewer = () => {
    setIsDragging(false)
  }, [state.objectData?.type, state.objectData?.data])

-  const openSCADDeepOceanThemeBackground = '#323232'
  // the following are tailwind colors in hex, can't use these classes to color three.js meshes.
  const pink400 = '#F472B6'
  const indigo300 = '#A5B4FC'
  const indigo900 = '#312E81'
  return (
-    <div
-      className="relative h-full"
-      style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
-    >
-      {state.isLoading && (
-        <div className="inset-0 absolute flex items-center justify-center">
-          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-        </div>
-      )}
+    <div className="relative h-full bg-ch-gray-800">
+      {state.isLoading && <Loading />}
      {image && (
        <div
          className={`absolute inset-0 transition-opacity duration-500 ${
--- a/app/web/src/components/IdeWrapper/IdeWrapper.tsx
+++ b/app/web/src/components/IdeWrapper/IdeWrapper.tsx
@@ -15,7 +15,7 @@ const IdeToolbarNew = ({ cadPackage }) => {

  return (
    <div className="h-full flex">
-      <div className="w-16 bg-gray-700 flex-shrink-0">
+      <div className="w-16 bg-ch-gray-700 flex-shrink-0">
        <IdeSideBar />
      </div>
      <div className="h-full flex flex-grow flex-col">
--- a/app/web/src/components/PanelToolbar/PanelToolbar.tsx
+++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
@@ -7,14 +7,14 @@ const PanelToolbar = ({ panelName }: { panelName: string }) => {
  return (
    <div className="absolute top-0 right-0 flex items-center h-9">
      <button
-        className="bg-gray-500 text-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
+        className="bg-ch-gray-760 text-ch-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
        aria-label={`${panelName} settings`}
        disabled
      >
        <Svg name="gear" className="w-7 p-px" />
      </button>
      {mosaicWindowActions.connectDragSource(
-        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
          <Svg name="drag-grid" className="w-4 p-px" />
        </div>
      )}
--- a/app/web/src/components/Svg/Svg.tsx
+++ b/app/web/src/components/Svg/Svg.tsx
@@ -17,10 +17,12 @@ type SvgNames =
  | 'logout'
  | 'mac-cmd-key'
  | 'pencil'
+  | 'photograph'
  | 'plus'
  | 'plus-circle'
  | 'refresh'
  | 'save'
+  | 'share'
  | 'terminal'
  | 'trash'
  | 'x'
@@ -345,6 +347,22 @@ const Svg = ({
        />
      </svg>
    ),
+    photograph: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+    ),
    plus: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
@@ -400,6 +418,14 @@ const Svg = ({
        />
      </svg>
    ),
+    share: (
+      <svg viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M14.4224 0.355957L21.9999 7.44407L14.4224 14.4997V10.1184C-0.365345 10.1184 0.407131 17.6436 0.407131 17.6436C0.407131 17.6436 -3.73829 4.71837 14.4224 4.71837L14.4224 0.355957Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
    terminal: (
      <svg
        xmlns="http://www.w3.org/2000/svg"