Update title pane UI

Cloud-CV · Dec 18, 2017 · 35b4875 · 35b4875
1 parent 02735fc
commit 35b4875
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/ide/static/css/style.css b/ide/static/css/style.css
@@ -86,23 +86,31 @@ body {
 }
 
 input#netName {
-  width: 100%;
   border: none;
   position: absolute;
-  top: 1.5rem;
+  top: 0;
   left: 0;
+  right: 0;
+  width: 100%;
+  max-width: 20rem;
+  margin: auto;
   text-align: center;
   font-size: 2rem;
-  padding: 0 10px;
+  padding: 1.5rem 10px;
   outline: none;
   z-index: 100;
   background: transparent;
-  text-decoration: underline;
-  text-decoration-color: #eee;
+  border-bottom: 2px solid;
+  border-color: #eee;
 }
 
 input#netName:focus {
-  text-decoration-color: #ccc;
+  border-color: #ccc;
+}
+
+input#netName.hidden {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .canvas-icon{

diff --git a/ide/static/js/canvas.js b/ide/static/js/canvas.js
@@ -11,6 +11,7 @@ class Canvas extends React.Component {
     super(props);
     this.allowDrop = this.allowDrop.bind(this);
     this.drop = this.drop.bind(this);
+    this.scrollCanvas = this.scrollCanvas.bind(this);
     this.clickCanvas = this.clickCanvas.bind(this);
     this.clickLayerEvent = this.clickLayerEvent.bind(this);
     this.hoverLayerEvent = this.hoverLayerEvent.bind(this);
@@ -109,6 +110,9 @@ class Canvas extends React.Component {
     }
     event.stopPropagation();
   }
+  scrollCanvas(event) {
+    $('#netName').css('top', '-' + $('#panZoomContainer').scrollTop() + 'px');
+  }
   clickCanvas(event) {
     this.placeholder = false;
     event.preventDefault();
@@ -289,6 +293,7 @@ class Canvas extends React.Component {
         onDragOver={this.allowDrop}
         onDrop={this.drop}
         onClick={this.clickCanvas}
+        onScroll={this.scrollCanvas}
       >
         {errors}
         {placeholder}

diff --git a/ide/static/js/content.js b/ide/static/js/content.js
@@ -790,7 +790,14 @@ class Content extends React.Component {
           </div>
         </div>
       <div id="main">
-          <input type="text" id="netName" placeholder="Net name" value={this.state.net_name} onChange={this.changeNetName} spellCheck="false"/>
+          <input type="text" 
+            className={$.isEmptyObject(this.state.net) ? "hidden": ""}
+            id="netName" 
+            placeholder="Net name" 
+            value={this.state.net_name} 
+            onChange={this.changeNetName} 
+            spellCheck="false"
+          />
           {loader}
           <Canvas
             net={this.state.net}