Dyn 5267 static splash screen (#2)

* Loading time info * Static screen * Static screen design * design and inputs * comments and utf8 * remove react command * reverting package.json * import settings tooltip * tooltip fix flickering * adding comments
DynamoDS · Oct 3, 2022 · 82f41e2 · 82f41e2
1 parent 1b3c21e
commit 82f41e2
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -38,4 +38,4 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,7 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+
 <body>
+  <script>
+    document.querySelector('body').style.overflow='hidden'
+  </script>
   <div id="root"></div>
 </body>
 
+
+
 </html>
diff --git a/src/App.css b/src/App.css
@@ -4,7 +4,7 @@
   font-size: 13px;
 }
 .dynamoLogo{
-  width: 85%;
+  width: 153px;
 }
 
 .bottomMenu{
@@ -17,5 +17,5 @@
 
 .screenBackground{
   height: 377px;
-  width: 377px;
+  width: 320px;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,7 @@
 import './App.css';
 import React from 'react';
 import Dynamic from './Dynamic';
+import Static from './Static';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -12,10 +13,15 @@ class App extends React.Component {
   constructor() {
     super();
     this.setBackgroundImage();
-    this.state = { welcomeToDynamoTitle: "Welcome to Dynamo!" };
+    this.state = {
+      welcomeToDynamoTitle: "Welcome to Dynamo!",
+      loadingDone: false
+    };
 
     //This is a reference to the DOM of the project that will be called in Dynamo to set the title of the splash screen (Defined by 'Welcome to Dynamo!' by default)
-    window.setWelcomeDynamoTitle = this.setWelcomeDynamoTitle.bind(this);
+    window.setLabels = this.setLabels.bind(this);
+
+    window.setLoadingDone = this.setLoadingDone.bind(this);
   }
 
   setBackgroundImage() {
@@ -26,14 +32,14 @@ class App extends React.Component {
 
   render() {
     return (
-      <Container className='fill' fluid="md">
+      <Container className='fill'>
         <Row>
-          <Col className='menuOptions' >
+          <Col className='menuOptions px-4' >
             <Row className='bottomMenu'>
               <Col>
                 <Row>
                   <div>
-                    <img className='dynamoLogo' src={base64DynamoLogo}></img>
+                    <img className='dynamoLogo' alt='' src={base64DynamoLogo}></img>
                   </div>
                 </Row>
                 <Row className='welcomeRow'>
@@ -45,20 +51,41 @@ class App extends React.Component {
             </Row>
             <Row className='bottomMenu'>
               <Col>
-                <Dynamic />
+                {
+                  this.state.loadingDone ?
+                    <Static
+                      signInTitle={this.state.signInTitle}
+                      welcomeToDynamoTitle={this.state.welcomeToDynamoTitle}
+                      launchTitle={this.state.launchTitle}
+                      showScreenAgainLabel={this.state.showScreenAgainLabel}
+                    /> : <Dynamic />
+                }
               </Col>
             </Row>
           </Col>
           <Col className='p-0' >
-            <img className='screenBackground' src={base64DynamoBackground}></img>
+            <img className='screenBackground' alt='' src={base64DynamoBackground}></img>
           </Col>
         </Row>
       </Container>
     )
   }
 
-  setWelcomeDynamoTitle(title) {
-    this.setState({ welcomeToDynamoTitle: title })
+  //This method sets the labels of the splash screen as an option of localization
+  setLabels(labels) {
+    this.setState({
+      welcomeToDynamoTitle: labels.welcomeToDynamoTitle,
+      signInTitle: labels.signInTitle,
+      launchTitle: labels.launchTitle,
+      showScreenAgainLabel: labels.showScreenAgainLabel
+    })
+  }
+
+  //This methos is called when the loading is done from Dynamo side
+  setLoadingDone() {
+    this.setState({
+      loadingDone: true
+    })
   }
 }
 

diff --git a/src/Dynamic.css b/src/Dynamic.css
@@ -24,4 +24,7 @@
 
   .dynamicOptions{
     margin-top: 50px;
+  }
+  .loadingTimeFooter{
+    font-size: 9px;
   }
diff --git a/src/Dynamic.js b/src/Dynamic.js
@@ -8,7 +8,8 @@ class Dynamic extends React.Component {
         this.state = {
             barSize: "0%",
             dynamoVersion: "",
-            loadDescription: ""
+            loadDescription: "",
+            loadingTime: "Loading time: "
         }
 
         //This is a reference to the DOM of the project that will be called in Dynamo to fill the loading properties
@@ -29,15 +30,21 @@ class Dynamic extends React.Component {
                 <div >
                     {this.state.loadDescription}
                 </div>
+                <br/>
+                <br/>
+                <div className='loadingTimeFooter' >
+                    {this.state.loadingTime}
+                </div>                
             </div>
         );
     }
 
-    setBarProperties(dynamoVersion, loadDescription, barSize) {
+    setBarProperties(dynamoVersion, loadDescription, barSize, loadingTime) {
         this.setState({ 
             barSize: barSize,
             dynamoVersion: dynamoVersion,
-            loadDescription: loadDescription
+            loadDescription: loadDescription,
+            loadingTime: loadingTime
         })
     }
 }

diff --git a/src/Static.css b/src/Static.css
@@ -0,0 +1,65 @@
+.checkboxShowScreenAgain {
+    vertical-align: middle;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.5);
+    display: grid;
+    grid-template-columns: 1.2em auto;
+    gap: 0.5em;
+}
+
+.primaryButton {
+    color: white;
+    border-color: white;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 2px;
+    background-color: #363636;
+    cursor: pointer;
+    height: 24px;
+}
+
+.secondaryButton {
+    color: white;
+    border-radius: 2px;
+    border: 2px solid #38ABDF;
+    box-shadow: none;
+    background-color: #38ABDF;
+    padding: 1px 0px !important;
+    font-size: 12px;
+}
+
+.buttonLabel {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.importSettingsText {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}
+
+input[type="file"] {
+    display: none;
+}
+
+.tooltip>div.tooltip-inner {
+    text-align: left;
+    background-color: white !important;
+    color: black !important;
+    font-size: 11px;
+    pointer-events: none !important;
+}
+
+.tooltip.show {
+    opacity: 1 !important;
+}
+
+.tooltip-arrow {
+    color: white !important;
+    --bs-tooltip-bg: white !important;
+}
+
+.tooltip{
+    --bs-tooltip-border-radius: 2px !important;
+}
diff --git a/src/Static.js b/src/Static.js
@@ -0,0 +1,121 @@
+
+import React from 'react';
+import PropTypes from "prop-types";
+import './Static.css'
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import { warningIcon, checkMarkIcon } from './encodedImages';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+/*global chrome*/
+
+const importStatusEnum = {
+    none: 1,
+    error: 2,
+    success: 3
+}
+
+let checked = false;
+
+class Static extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            importStatus: importStatusEnum.none,
+            importSettingsTitle: "Import settings",
+            errorDescription: "Something went wrong when importing your custom setting file. Please try again or proceed with default settings."
+        }
+
+        window.setImportStatus = this.setImportStatus.bind(this)
+    }
+
+    render() {
+        return (
+            <Container className='pr-3'>
+                <Row className='mt-3'>
+                    <button className='primaryButton' onClick={this.signIn}>{this.props.signInTitle}</button>
+                </Row>
+                <Row className='mt-3'>
+                    <button className='secondaryButton' onClick={this.launchDynamo}>{this.props.launchTitle}</button>
+                </Row>
+                <Row className='mt-3'>
+                    <OverlayTrigger
+                        placement={'right'}
+                        overlay={
+                            <Tooltip hidden={this.state.importStatus !== importStatusEnum.error} id='button-tooltip'>
+                                {this.state.errorDescription}
+                            </Tooltip>
+                        }>
+                        <label className='primaryButton px-1'>
+                            <input type="file" className='primaryButton' onChange={(e) => this.readFile(e)} />
+                            <div className='buttonLabel'>
+                                <img src={warningIcon} alt='' hidden={this.state.importStatus !== importStatusEnum.error}></img>
+                                <img src={checkMarkIcon} alt='' hidden={this.state.importStatus !== importStatusEnum.success}></img>
+                                <div className='importSettingsText'><span >{this.state.importSettingsTitle}</span></div>
+                            </div>
+                        </label>
+                    </OverlayTrigger>
+                </Row>
+                <Row className='mt-3'>
+                    <label className='p-0 checkboxShowScreenAgain '>
+                        <input type="checkbox" onChange={this.handleChange} className='checkBoxStyle' />
+                        <span className="checkmark"> {this.props.showScreenAgainLabel}  </span>
+                    </label>
+                </Row>
+            </Container>
+        )
+    }
+
+    //Opens a page to signin
+    signIn() {
+        window.open("https://accounts.autodesk.com/", "_blank");
+    }
+
+    //This method calls another method from Dynamo to actually launch it
+    launchDynamo() {
+        if (chrome.webview !== undefined) {
+            //The 'checked' is a boolean that represents if the user don't want to show the Static screen again
+            chrome.webview.hostObjects.scriptObject.LaunchDynamo(checked);
+        }
+    }
+
+    //Reads the file and send the string to a method inside Dynamo called 'ImportSettings'
+    readFile(event) {
+        let file = event.target.files[0];
+        if (file) {
+            if (chrome.webview !== undefined) {
+                chrome.webview.hostObjects.scriptObject.ImportSettings(file);
+            }
+        }
+    }
+
+    //Set the result of the file that was imported by Dynamo
+    setImportStatus(importStatus) {
+        this.setState({
+            importStatus: importStatus.status,
+            importSettingsTitle: importStatus.importSettingsTitle,
+            errorDescription: importStatus.errorDescription
+        });
+    }
+
+    //Every time the checkbox is clicked, this method is called
+    handleChange() {
+        checked = !checked;
+    }
+}
+
+Static.defaultProps = {
+    signInTitle: "Sign in",
+    launchTitle: "Launch Dynamo",
+    showScreenAgainLabel: "Don’t show this screen again"
+}
+
+Static.propTypes = {
+    signInTitle: PropTypes.string,
+    launchTitle: PropTypes.string,
+    showScreenAgainLabel: PropTypes.string
+};
+
+export default Static;
diff --git a/src/encodedImages.js b/src/encodedImages.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,4 +38,4 @@ @@
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0"
       }
-    }
+    }