lots of work on the console, css and layout

gibber-cc · May 27, 2014 · e8d832b · e8d832b
1 parent caf52b9
commit e8d832b
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 92 deletions.
diff --git a/css/main2.css b/css/main2.css
@@ -1,5 +1,5 @@
 body {
-  color: #ccc;
+  color: #bbb;
 	font-family: "Helvetica-Neue", "Helvetica", "sans-serif";
   background: -webkit-linear-gradient(top, rgb(0,0,0) 0%, rgb(60,60,60) 100%);
   background: linear-gradient(to bottom, rgb(0, 0, 0), rgb(60,60,60));
@@ -63,10 +63,12 @@ ul { list-style:none; padding:0; }
 
 button, input[type='submit'] { 
   color: #ccc; 
-  background-color: #333; 
+  background-color: #292929; 
   border:none; 
   outline:none; 
   cursor:pointer;
+  font-family:inherit;
+  font-size:.8em;
 }
 tfoot tr { display:block; width:100% }
 
@@ -75,6 +77,7 @@ tfoot tr { display:block; width:100% }
 #header ul {
   font-size: .9em;
   display: inline;
+  margin-left: 2em;
   -webkit-padding-start:0;
 }
 
@@ -141,28 +144,34 @@ tfoot, thead {
   display:block;
   padding:.5em;
   font-family: Courier, monospace;
+  white-space: nowrap;
 }
 
 #welcome {
-  padding: 0 1em 0 1em;
+  padding: 0 .5em 0 .5em;
   overflow-y:scroll;
   overflow-x:hidden;
  -moz-box-sizing: border-box !important;
   box-sizing: border-box !important;
+  font-size:.95em;
 }
 #welcome ul li {
   margin-bottom:1em;
   padding-left:0em;
 }
 
+#welcome a {
+  color:#bbb;
+}
+
 #welcome ul {
   list-style-position:inside !important;
   margin-left:0;
   padding-left:0em;
   list-style:disc;
 }
 #docs a, #help a, #credits a {
-  color:#ccc;  
+  color:#bbb;  
 }
 
 #docs a { text-decoration:none; }
@@ -179,7 +188,7 @@ tfoot, thead {
   font-size:1.25em;
   font-weight: normal;
   display:block;
-  color:#ccc;
+  color:#bbb;
   background:#333;
 }
 
@@ -208,7 +217,7 @@ tfoot, thead {
 }
 .console-normal {
   font-weight:normal;
-  color:#ccc;
+  color:#bbb;
 }
 
 .console-error {
@@ -219,9 +228,13 @@ tfoot, thead {
 .console-entry{
   display:block;
   padding-left:.5em;
-  margin-top: .5em;
+  margin-top: .25em;
   font-size: 1em;
-  font-family: Courier, monospace;
+  float:none !important;
+  clear:none !important;
+/*  font-family: Courier, monospace;*/
+  font-family: inherit;
+  font-size:.8em;
 }
 
 .editor {
@@ -244,8 +257,10 @@ tfoot, thead {
   line-height:2em;
   border-bottom: 1px solid #444;
   border-top: 1px solid #444;  
-  background: #222;
-  font-family: monospace;
+  background: #000;
+  font-family: inherit;
+  font-size:.75em;
+  color:#bbb;
 /*  padding-left: .35em;  */
   height:2em;
   -webkit-touch-callout: none;
@@ -258,15 +273,17 @@ tfoot, thead {
 
 .columnHeader select {
   background: #000;
-  color: #aaa;
+  color: #bbb;
   border-color: #666;
   -webkit-appearance: none;
   border-radius:0;
   padding: .15em .5em;
+  font-family:inherit;
 }
 
 .lineNumbersButton {
   padding: .15em .5em;
+  margin: 0 .25em;
   border: 1px solid #666;
   background:black;
 }
@@ -279,15 +296,16 @@ tfoot, thead {
   background-color:transparent;
   border-right: 1px solid #444;
   border-left: 1px solid #444;
-  border-top: 1px solid #444;    
+  border-top: 1px solid #444;
+  cursor: ew-resize; 
   float:right;
 }
 
 .CodeMirror { color: white !important; }
 .CodeMirror-scroll { overflow:scroll; }
 
 .login {
-  color:#ccc;
+  color:#bbb;
   right:0;
   top:0;
   float:right;
@@ -304,14 +322,14 @@ tfoot, thead {
   background:#000;
 }
 
-.login a { color: #ccc; }
+.login a { color: #bbb; }
 
 .closeButton {
   text-decoration:none;
-  color:#ccc;
+  color:#bbb;
   background:rgba(0,0,0,0);
   padding:0;
-  margin:0 0 0 .1em;
+  margin:0 .25em 0 .1em;
   border:0;
   font-size:1em;
   cursor:pointer;
@@ -324,7 +342,7 @@ tfoot, thead {
 
 /* DATABASE BROWSER STYLES */
 .browser {
-  color:#ccc;
+  color:#bbb;
 }
 
 .browser table { margin-top: 10px; width:97%; }
@@ -335,7 +353,7 @@ tfoot, thead {
 }
 
 .browser li {
-  color:#ccc;
+  color:#bbb;
   cursor:pointer;
 }
 
@@ -350,7 +368,7 @@ tfoot, thead {
 
 .browser input {
   background-color: #333;
-  color:#ccc;
+  color:#bbb;
   border: none;
   outline:none;
   height:1.75em;
@@ -368,7 +386,7 @@ tfoot, thead {
 }
 
 #browser_meta {
-  border-top:1px solid #ccc;
+  border-top:1px solid #bbb;
   display:block;
   overflow: scroll;
   height:29%;

diff --git a/index.htm b/index.htm
@@ -19,7 +19,7 @@
       <td id='header'>
         <canvas></canvas>
         <h1>gibber</h1>
-        <span class='addColumn'>add column :</span>
+        <!-- <span class='addColumn'>add column :</span> -->
         <ul>
           <li><button id='browseButton' title='browse examples and user-submitted giblets'>browse</button></li>
           <li><button id='publishButton' title='publish a giblet'>publish</button></li>

diff --git a/js/gibber/audio/drums.js b/js/gibber/audio/drums.js
@@ -275,8 +275,8 @@
         set: function(v) { obj.seq.offset = Gibber.Clock.time(v)}
       }
     })
-
-    console.log( 'Drums created.' )
+        
+    obj.toString = function() { return '> Drums : ' + obj.seq.seqs[0].values.join('') }
     return obj
   }
 
@@ -508,8 +508,9 @@
     }
 
     obj.seq.start()
-
-    console.log( 'XOX created.' ) 
+
+    obj.toString = function() { return '> EDrums : ' + obj.seq.seqs[0].values.join('') }
+
     return obj
   }
 

diff --git a/js/gibber/audio/fx.js b/js/gibber/audio/fx.js
@@ -234,7 +234,8 @@
 
         args.input = 0
 
-        console.log( name + ' is created.' )
+        obj.toString = function() { return '> ' + name }
+
         return obj
       }
     })()

diff --git a/js/gibber/audio/oscillators.js b/js/gibber/audio/oscillators.js
@@ -107,7 +107,8 @@
 
         Gibber.processArguments2( oscillator, args, name )
 
-        console.log( name + ' is created.' )
+        oscillator.toString = function() { return '> ' + name }
+
         return oscillator
       }
     })()
@@ -245,6 +246,7 @@
 
     Gibber.createProxyMethods( oscillator, ['note'] )
 
+    obj.toString = function() { return '> Wavetable' }
     return oscillator
   }
 
@@ -300,7 +302,7 @@
       set: function() {}
     })
 
-    console.log( 'Grains is created.' )
+    obj.toString = function() { return '> Grains' }
     return oscillator
   }
 

diff --git a/js/gibber/audio/synths.js b/js/gibber/audio/synths.js
@@ -145,7 +145,7 @@
 
         Gibber.processArguments2( obj, args, obj.name )
 
-        console.log( name + ' is created.' )
+        obj.toString = function() { return '> ' + name }
 
         var __scale;
         Object.defineProperty(obj, 'scale', {

diff --git a/js/gibber/column.js b/js/gibber/column.js
@@ -28,6 +28,8 @@
       modeIndex:      0,
       isCodeColumn:   isCodeColumn,
       isFullScreen:   false,
+      resizeHandleSize  : 8,
+
       // fullScreen:     this.makeFullScreenFunction(),
     })
 
@@ -68,7 +70,7 @@
 
       col.header
         .append( col.close )
-        .append( $( '<span>' ).html( '&nbsp;id #: ' + colNumber + '&nbsp;&nbsp;language:' ) )
+        .append( $( '<span>' ).html( '&nbsp;id #: ' + colNumber + '&nbsp;&nbsp;&nbsp;language:' ) )
         .append( col.modeSelect )
 
     }else{
@@ -154,6 +156,7 @@
 
     col.modeIndex = typeof mode === 'undefined' || mode === 'javascript' ? 0 : 1;
     col.modeSelect.eq( col.modeIndex )
+    col.modeSelect.addClass( 'modeSelectDropDown' )
 
     if( isCodeColumn )
       $( col.modeSelect ).find( 'option' )[ col.modeIndex ].selected = true;
@@ -265,6 +268,14 @@
       }
     },
 
+    setWidth: function( w ) {
+      var newWidthCandidate = w
+      this.width = newWidthCandidate > 300 ? newWidthCandidate : 300
+      this.element.width( this.width )
+
+      GE.Layout.resizeColumns()
+    },
+
     showFileInfo : function() {
       var html, table, col = this