Dyn 5358 user friendly splash screen (#16)

* Increase screen size and close button * more friendly splashscreen * space localization fix * assigning comments
DynamoDS · Nov 7, 2022 · 176321b · 176321b
1 parent 62e14d1
commit 176321b
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 37 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,7 +3,8 @@
     "node": true,
     "browser": true,
     "es2021": true,
-    "jest": true
+    "jest": true,
+    "webextensions": true
   },
   "extends": [
     "eslint:recommended",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/splash-screen",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "Splash Screen maintained by Dynamo Team@Autodesk",
   "author": "Autodesk Inc.",
   "license": "MIT",

diff --git a/src/App.css b/src/App.css
@@ -17,6 +17,37 @@
 }
 
 .screenBackground {
-  height: 377px;
-  width: 320px;
+  height: 452px;
+  width: 404px;
+}
+
+.close {
+  position: absolute;
+  cursor: pointer;
+  right: 32px;
+  top: 15px;
+  width: 32px;
+  height: 32px;
+  opacity: 0.3;
+}
+
+.close:hover {
+  opacity: 1;
+}
+
+.close:before, .close:after {
+  position: absolute;
+  left: 25px;
+  content: ' ';
+  height: 33px;
+  width: 2px;
+  background-color: #333;
+}
+
+.close:before {
+  transform: rotate(45deg);
+}
+
+.close:after {
+  transform: rotate(-45deg);
 }
diff --git a/src/App.js b/src/App.js
@@ -36,7 +36,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <Container className='fill'>
+      <Container fluid>
         <Row>
           <Col className='menuOptions px-4' >
             <Row className='bottomMenu'>
@@ -56,20 +56,21 @@ class App extends React.Component {
             <Row className='bottomMenu'>
               <Col>
                 {
-                   this.state.loadingDone ?
-                   <Static
-                     signInStatus={this.state.signInStatus}
-                     signInTitle={this.state.signInTitle}
-                     welcomeToDynamoTitle={this.state.welcomeToDynamoTitle}
-                     launchTitle={this.state.launchTitle}
-                     showScreenAgainLabel={this.state.showScreenAgainLabel}
-                     importSettingsTitle={this.state.importSettingsTitle}
-                   /> : <Dynamic />
+                  this.state.loadingDone ?
+                    <Static
+                      signInStatus={this.state.signInStatus}
+                      signInTitle={this.state.signInTitle}
+                      welcomeToDynamoTitle={this.state.welcomeToDynamoTitle}
+                      launchTitle={this.state.launchTitle}
+                      showScreenAgainLabel={this.state.showScreenAgainLabel}
+                      importSettingsTitle={this.state.importSettingsTitle}
+                    /> : <Dynamic />
                 }
               </Col>
             </Row>
           </Col>
           <Col className='p-0' >
+            <span onClick={this.closeDynamo} className='close'/>
             <img className='screenBackground' alt='' src={base64DynamoBackground}></img>
           </Col>
         </Row>
@@ -91,7 +92,7 @@ class App extends React.Component {
   setSignInStatus(val) {
     this.setState({
       signInTitle: val.signInTitle,
-      signInStatus: val.signInStatus === "True",
+      signInStatus: val.signInStatus === 'True',
     });
   }
 
@@ -100,7 +101,12 @@ class App extends React.Component {
     this.setState({
       loadingDone: true
     });
+  };
+
+  closeDynamo(){
+    if (chrome.webview !== undefined) {
+      chrome.webview.hostObjects.scriptObject.CloseWindow();
+    }
   }
 }
-
 export default App;
diff --git a/src/Dynamic.css b/src/Dynamic.css
@@ -48,4 +48,9 @@
 
 .loadingTimeFooter {
   font-size: 9px;
+}
+
+.loadingDescription{  
+  height: 3.6em;
+  line-height: 1.8em;
 }
diff --git a/src/Dynamic.js b/src/Dynamic.js
@@ -27,7 +27,7 @@ class Dynamic extends React.Component {
             <div className='progress-bar-indicator' style={{ width: this.state.barSize }} ></div>
           </div>
         </div>
-        <div >
+        <div className='loadingDescription' >
           {this.state.loadDescription}
         </div>
         <br />

diff --git a/src/Static.css b/src/Static.css
@@ -17,18 +17,36 @@
     height: 24px;
 }
 
-.disableButton{
+.primaryButton:hover {
+    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.85);
+}
+
+.primaryButton:active {
+    box-shadow: 0px 0px 2px rgba(56, 171, 223, 0.65);
+}
+
+.disableButton {
     background-color: #6e6e6e;
 }
 
 .secondaryButton {
     color: white;
     border-radius: 2px;
-    border: 2px solid #0696D7;
-    box-shadow: none;
     background-color: #0696D7;
-    padding: 1px 0px !important;
+    border: 2px solid #0696D7;
     font-size: 12px;
+    height: 26px;
+    line-height: normal;
+    position: relative;
+    z-index: 10
+}
+
+.secondaryButton:hover {
+    box-shadow: 0px 0px 2px rgba(128, 128, 128, 0.85);
+}
+
+.secondaryButton:active {
+    box-shadow: 0px 0px 4px rgba(128, 128, 128, 0.75);
 }
 
 .buttonLabel {
@@ -64,6 +82,10 @@ input[type="file"] {
     --bs-tooltip-bg: white !important;
 }
 
-.tooltip{
+.tooltip {
     --bs-tooltip-border-radius: 2px !important;
+}
+
+.loadingTimeFooter {
+    font-size: 9px;
 }
diff --git a/src/Static.js b/src/Static.js
@@ -9,8 +9,6 @@ import { warningIcon, checkMarkIcon } from './encodedImages';
 
 import './Static.css';
 
-/*global chrome*/
-
 const importStatusEnum = {
   none: 1,
   error: 2,
@@ -28,11 +26,18 @@ class Static extends React.Component {
       errorDescription: 'Something went wrong when importing your custom setting file. Please try again or proceed with default settings.',
       signInTitle: this.props.signInTitle,
       signInStatus: this.props.signInStatus,
-      importSettingsTitle: this.props.importSettingsTitle,
+      loadingTime: 'Total loading time: ',
+      importSettingsTitle: this.props.importSettingsTitle
     };
 
     window.setImportStatus = this.setImportStatus.bind(this);
+    window.setTotalLoadingTime = this.setTotalLoadingTime.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
   }
+
   render() {
     return (
       <Container className='pr-3'>
@@ -43,7 +48,7 @@ class Static extends React.Component {
         </Row>
 
         <Row className='mt-3'>
-          <button id="btnSignIn" className='primaryButton' onClick={this.signIn}>
+          <button id='btnSignIn' className='primaryButton' onClick={this.signIn}>
             {this.state.signInTitle}
           </button>
         </Row>
@@ -62,7 +67,9 @@ class Static extends React.Component {
               <input
                 type='file'
                 className='primaryButton'
-                onChange={(e) => this.readFile(e)} />
+                accept='.xml'
+                onChange={(e) => this.readFile(e)}
+              />
               <div className='buttonLabel'>
                 <img
                   src={warningIcon}
@@ -91,6 +98,11 @@ class Static extends React.Component {
             </span>
           </label>
         </Row>
+        <Row className='mt-3'>
+          <div className='p-0 loadingTimeFooter' >
+            {this.state.loadingTime}
+          </div>
+        </Row>
       </Container>
     );
   }
@@ -103,29 +115,29 @@ class Static extends React.Component {
         var ret = await chrome.webview.hostObjects.scriptObject.SignOut();
         this.setState({
           signInStatus: !ret,
-          signInTitle: "Sign In"
-        })
+          signInTitle: 'Sign In'
+        });
       }
       else {
-        var btn = document.getElementById("btnSignIn");
+        var btn = document.getElementById('btnSignIn');
         btn.classList.add('disableButton');
         btn.disabled = true;
 
-        this.setState({ signInTitle: "Signing In" })
-        var ret = await chrome.webview.hostObjects.scriptObject.SignIn();
-        this.setState({ signInStatus: ret });
+        this.setState({ signInTitle: 'Signing In' });
+        var status = await chrome.webview.hostObjects.scriptObject.SignIn();
+        this.setState({ signInStatus: status });
 
         btn.classList.remove('disableButton');
         btn.disabled = false;
         if (ret) {
-          this.setState({ signInTitle: "Sign Out" })
+          this.setState({ signInTitle: 'Sign Out' });
         }
         else {
-          this.setState({ signInTitle: "Sign In" })
+          this.setState({ signInTitle: 'Sign In' });
         }
       }
     }
-  }
+  };
 
   //This method calls another method from Dynamo to actually launch it
   launchDynamo() {
@@ -159,10 +171,24 @@ class Static extends React.Component {
     });
   }
 
+
+  setTotalLoadingTime(loadingTime) {
+    this.setState({
+      loadingTime: loadingTime
+    });
+  }
+
   //Every time the checkbox is clicked, this method is called
   handleChange() {
     checked = !checked;
   }
+
+  handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      document.removeEventListener('keydown', this.handleKeyDown);
+      this.launchDynamo();
+    }
+  };
 }
 
 Static.defaultProps = {
@@ -175,7 +201,9 @@ Static.defaultProps = {
 Static.propTypes = {
   signInTitle: PropTypes.string,
   launchTitle: PropTypes.string,
-  showScreenAgainLabel: PropTypes.string
+  showScreenAgainLabel: PropTypes.string,
+  signInStatus: PropTypes.bool,
+  importSettingsTitle: PropTypes.string
 };
 
 export default Static;
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ class Dynamic extends React.Component { @@
                 <div className='progress-bar-indicator' style={{ width: this.state.barSize }} ></div>
               </div>
             </div>
-            <div >
+            <div className='loadingDescription' >
               {this.state.loadDescription}
             </div>
             <br />
@@ Expand Down @@