INT-505 add static background image while window loads

rueckstiess · kangas · commit 05c890699674 · 2016-03-18T18:28:55.000-04:00
The "background image" is merely the sidebar, per iOS HIG recommendations
diff --git a/src/app/index.html b/src/app/index.html
@@ -4,11 +4,23 @@
     <title>MongoDB Compass</title>
     <meta name="viewport" content="initial-scale=1">
     <link rel="stylesheet/less" type="text/css" href="index.less" charset="UTF-8">
+    <style>
+      div#static-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 250px;
+        height: 100%;
+        background-color: #4c5259; /* @slate1 */
+      }
+    </style>
   </head>
   <body>
     <div id="application">
       <div data-hook="statusbar"></div>
-      <div data-hook="layout-container"></div>
+      <div data-hook="layout-container">
+        <div id="static-sidebar" class="sidebar"></div>
+      </div>
     </div>
     <script src="index.js" charset="UTF-8" async></script>
     <script>
diff --git a/src/app/index.js b/src/app/index.js
@@ -371,7 +371,8 @@ app.extend({
 
     handleIntercomLinks();
     app.statusbar.show({
-      message: 'Retrieving connection details...'
+      message: 'Retrieving connection details...',
+      staticSidebar: true
     });
 
     state.connection = new Connection({
diff --git a/src/app/statusbar/index.jade b/src/app/statusbar/index.jade
@@ -1,6 +1,7 @@
 #statusbar
   .progress(data-hook='outer-bar')
     .progress-bar.progress-bar-striped.active(data-hook='inner-bar')
+  .sidebar(data-hook='static-sidebar')
   ul.message-background.with-sidebar.centered(data-hook='message-container')
     li
       p(data-hook='message')
diff --git a/src/app/statusbar/index.js b/src/app/statusbar/index.js
@@ -20,6 +20,10 @@ var StatusbarView = View.extend({
     message: {
       type: 'string'
     },
+    staticSidebar: {
+      type: 'boolean',
+      default: false
+    },
     animation: {
       type: 'boolean',
       default: false
@@ -52,6 +56,10 @@ var StatusbarView = View.extend({
   },
   template: indexTemplate,
   bindings: {
+    staticSidebar: {
+      type: 'toggle',
+      hook: 'static-sidebar'
+    },
     animation: {
       type: 'toggle',
       hook: 'animation',
@@ -151,6 +159,7 @@ var StatusbarView = View.extend({
   hide: function(completed) {
     this.message = '';
     this.animation = false;
+    this.staticSidebar = false;
     if (this.subview) {
       this.subview.remove();
     }
