fixed work screen 'code' design

mkubera · Dec 30, 2020 · f07f1f9 · f07f1f9
1 parent 090e7b6
commit f07f1f9
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 258 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,4 @@
 {
-    "git.ignoreLimitWarning": true,
-    "workbench.colorCustomizations": {
-      "activityBar.background": "#1C331B",
-      "titleBar.activeBackground": "#274726",
-      "titleBar.activeForeground": "#F9FCF9"
-    }
+  "git.ignoreLimitWarning": true,
+
 }
diff --git a/figma/package.json b/figma/package.json
@@ -19,9 +19,9 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.2",
     "@reflect.bridged.xyz/core": "0.0.1",
-    "@reflect.bridged.xyz/ui-generator": "0.0.1",
     "@reflect.bridged.xyz/detection": "0.1.0",
     "@reflect.bridged.xyz/linter": "0.0.3",
+    "@reflect.bridged.xyz/ui-generator": "0.0.1",
     "@reflect.bridged.xyz/uiutils": "0.0.1",
     "copy-to-clipboard": "^3.3.1",
     "css-loader": "^3.1.0",

diff --git a/figma/src/app/components/assets/preview-unselected.svg b/figma/src/app/components/assets/preview-unselected.svg
diff --git a/figma/src/app/components/highlight.css b/figma/src/app/components/highlight.css
@@ -3,17 +3,37 @@ code {
   height: auto;
 }
 
-
 pre {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin: 0 -8px;
   padding: 8px;
   overflow: scroll;
+  width: 100%;
+  height: 408px;
+}
+
+.code-info-wrapper {
+  margin: 0 -8px;
+  padding: 10px 10px 0 10px;
+}
+
+.code-info-wrapper button {
+  border: 1px solid #151617;
+  padding: 10px 15px;
+}
+
+.btn-copy-code {
+  width: calc(50% - 5px);
+  /* for unused .MuiButton-root margin: 0  */
+  margin-right: 5px !important;
+  font-weight: bold;
 }
 
-.sticky-actions {
-  position: sticky;
-  right: 4px;
-  margin-right: 16px;
-  top: 4px;
+.btn-quick-look {
+  width: calc(50% - 5px);
+  /* for unused .MuiButton-root margin: 0  */
+  margin-left: 5px !important;
+  background-color: #151617 !important;
+  color: #fff !important;
+  font-weight: bold;
+
 }
diff --git a/figma/src/app/components/highlight.tsx b/figma/src/app/components/highlight.tsx
@@ -67,46 +67,41 @@ export default class Highlight extends React.Component<Props, State> {
 
   render() {
     return (
-      <code>
-        <div>
-          <div style={{ height: "24px" }} />
-          <Button
-            variant="outlined"
-            size="medium"
-            className="sticky-actions"
-            onClick={this.onCopyClicked}
+      <>
+        <code>
+          <PrismHighlight
+            {...defaultProps}
+            Prism={Prism}
+            code={this.props.code}
+            language={this.props.language}
           >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre className={className} style={style}>
+                {tokens.map((line, i) => (
+                  <div {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
+                ))}
+              </pre>
+            )}
+          </PrismHighlight>
+        </code>
+
+        <div className="code-info-wrapper">
+          <Button className="btn-copy-code" onClick={this.onCopyClicked}>
             copy code
           </Button>
           <Button
-            variant="outlined"
-            size="medium"
-            className="sticky-actions"
+            className="btn-quick-look"
             disabled={this.state.isLaunchingConsole}
             onClick={this.onQuickLookClicked}
           >
             {this.state.isLaunchingConsole ? "launching.." : "quick look"}
           </Button>
         </div>
-        <PrismHighlight
-          {...defaultProps}
-          Prism={Prism}
-          code={this.props.code}
-          language={this.props.language}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-          )}
-        </PrismHighlight>
-      </code>
+      </>
     );
   }
 }
diff --git a/figma/src/app/components/preview.css b/figma/src/app/components/preview.css
@@ -1,7 +1,8 @@
 .preview {
-  margin: -16px;
+  margin: 0 -8px;
   padding: 12px;
-  background: #D9D9D9;
+  background: #F1F1F1;
+  height: 200px;
 }
 
 .preview-loading {
@@ -10,10 +11,22 @@
 }
 
 .render {
+  /* .render height equal .preview height */
+  width: 100%;
+  height: 200px;
   text-align: center;
   object-fit: contain;
+  display: table;
+}
+
+.inner-render {
+  margin: 0 auto;
+  display: table-cell;
+  vertical-align: middle;
 }
 
 .rendering-notify {
-  margin: '1rem'
+  color: #ADAEB2;
+  font-size: 18px;
+
 }
diff --git a/figma/src/app/components/preview.tsx b/figma/src/app/components/preview.tsx
@@ -1,7 +1,6 @@
 import { Typography, CircularProgress, Fade } from "@material-ui/core";
 import * as React from "react";
 import "./preview.css";
-import { setInterval } from "timers";
 
 interface Props {
   data: Uint8Array;
@@ -11,14 +10,12 @@ interface Props {
 
 interface State {
   url: string;
-  isLoading: boolean;
 }
 export class Preview extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
       url: null,
-      isLoading: false,
     };
   }
 
@@ -32,13 +29,9 @@ export class Preview extends React.Component<Props, State> {
     }
   }
 
-  loadingBox = () => {
-    const t = setInterval(() => <div>jhihi</div>, 1000);
-
-    return t;
-  };
-
   render() {
+    const unselectedLogo = require("./assets/preview-unselected.svg") as string;
+
     let render = this.url ? (
       <img
         className="render"
@@ -49,24 +42,18 @@ export class Preview extends React.Component<Props, State> {
       />
     ) : (
       <div className="render">
-        <Typography variant="h4" className="rendering-notify">
-          select anything
-        </Typography>
+        <div className="inner-render">
+          <img src={unselectedLogo} alt="unSelected-logo" />
+          <Typography className="rendering-notify">
+            Nothing is selected
+          </Typography>
+        </div>
       </div>
     );
-    let t = this.url ? (
-      <div className="preview-loading">
-        <CircularProgress />
-      </div>
-    ) : (
-      ""
-    );
 
     return (
       <div className="preview">
         <Typography variant="caption">{this.props.type}</Typography>
-
-        <div className="preview-loading">{this.loadingBox}</div>
         {render}
       </div>
     );

diff --git a/figma/src/app/screens/code-screen.tsx b/figma/src/app/screens/code-screen.tsx
@@ -6,76 +6,87 @@ import { ImageHostingRepository } from "../../assets-repository/hosting";
 import { format } from "../../utils/dart-format";
 import Highlight from "../components/highlight";
 import { Preview } from "../components/preview";
-import { EK_GENERATED_CODE_PLAIN, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_PREVIEW_SOURCE } from "../constants/ek.constant";
-
+import {
+  EK_GENERATED_CODE_PLAIN,
+  EK_IMAGE_ASSET_REPOSITORY_MAP,
+  EK_PREVIEW_SOURCE,
+} from "../constants/ek.constant";
 
 interface State {
-    app: string,
-    code: string,
-    widget: Widget,
-    previewImage: string,
-    name: string
+  app: string;
+  code: string;
+  widget: Widget;
+  previewImage: string;
+  name: string;
 }
 
-
 export class CodeScreen extends React.Component<any, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "not selected",
+      code: "",
+      previewImage: null,
+      widget: null,
+      app: null,
+    };
+  }
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            name: 'not selected',
-            code: "//\n//\n//\n// there is no selected node\n//\n//\n//",
-            previewImage: null,
-            widget: null,
-            app: null
-        };
-    }
+  componentDidMount() {
+    window.addEventListener("message", this.onMessage);
+  }
 
-    componentDidMount() {
-        window.addEventListener("message", this.onMessage);
+  onMessage = (ev: MessageEvent) => {
+    const msg = ev.data.pluginMessage;
+    switch (msg.type) {
+      case EK_GENERATED_CODE_PLAIN:
+        const app = format(msg.data.app);
+        const code = format(msg.data.code);
+        const widget = msg.data.widget;
+        this.setState((state, props) => {
+          return { code: code, widget: widget, app: app };
+        });
+        break;
+      case EK_PREVIEW_SOURCE:
+        this.setState((state, props) => {
+          return { previewImage: msg.data.source, name: msg.data.name };
+        });
+        break;
+      case EK_IMAGE_ASSET_REPOSITORY_MAP:
+        const imageRepo = msg.data as TransportableImageRepository;
+        ImageHostingRepository.setRepository(imageRepo);
+        break;
     }
+  };
 
-    onMessage = (ev: MessageEvent) => {
-        const msg = ev.data.pluginMessage;
-        switch (msg.type) {
-            case EK_GENERATED_CODE_PLAIN:
-                const app = format(msg.data.app);
-                const code = format(msg.data.code);
-                const widget = msg.data.widget
-                this.setState((state, props) => {
-                    return { code: code, widget: widget, app: app };
-                });
-                break;
-            case EK_PREVIEW_SOURCE:
-                this.setState((state, props) => {
-                    return { previewImage: msg.data.source, name: msg.data.name };
-                });
-                break;
-            case EK_IMAGE_ASSET_REPOSITORY_MAP:
-                const imageRepo = msg.data as TransportableImageRepository
-                ImageHostingRepository.setRepository(imageRepo)
-                break
-        }
-    }
+  componentWillUnmount() {
+    window.removeEventListener("message", this.onMessage);
+  }
 
-    componentWillUnmount() {
-        window.removeEventListener("message", this.onMessage)
-    }
+  onClickReportIssue(e) {
+    open("https://github.com/bridgedxyz/assistant/issues/new/choose");
+  }
 
-    onClickReportIssue(e) {
-        open("https://github.com/bridgedxyz/assistant/issues/new/choose");
-    }
-
-    onClickVisitWebsite(e) {
-        open("https://bridged.xyz/");
-    }
+  onClickVisitWebsite(e) {
+    open("https://bridged.xyz/");
+  }
 
-    render() {
-        return <div>
-            <Preview data={(this.state as any).previewImage} name={(this.state as any).name}></Preview>
-            <Highlight language="dart" app={this.state.app} code={(this.state).code} widget={(this.state).widget} ></Highlight>
-            <Button onClick={this.onClickReportIssue}>report issue</Button>
-            <Button onClick={this.onClickVisitWebsite}>visit website</Button>
-        </div>
-    }
+  render() {
+    return (
+      <div>
+        <Preview
+          data={(this.state as any).previewImage}
+          name={(this.state as any).name}
+        ></Preview>
+        <Highlight
+          language="dart"
+          app={this.state.app}
+          code={this.state.code}
+          widget={this.state.widget}
+        ></Highlight>
+        {/* <Button onClick={this.onClickReportIssue}>report issue</Button>
+        <Button onClick={this.onClickVisitWebsite}>visit website</Button> */}
+      </div>
+    );
+  }
 }