Move haml templates to individual files, Add global NOOP fn, prelimin…

…ary implementation of Modal windows, and Context(right-click) menus
thisismedium · Apr 2, 2010 · e603408 · e603408
1 parent bfa089b
commit e603408
Show file tree

Hide file tree

Showing 32 changed files with 961 additions and 293 deletions.
diff --git a/proj/c/message.css b/proj/c/message.css
@@ -4,6 +4,7 @@ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr
 
 
 html {
+  background:#666;
   width:100%; height:100%; }
 
 body {
@@ -175,6 +176,7 @@ body {
         background-image:url(../i/icn-browse.png); }
 
 #main {
+  background:#fff;
   position:absolute;
   top:30px; bottom:0px;
   left:200px; right:0px;
@@ -345,8 +347,10 @@ body {
         border:1px transparent solid; }
 
       .browser .grid li.selected {
-        border:1px #9022cb solid;
-        background:rgba(162,48,224,0.75); }
+        border:1px #432057 solid;
+/*        border:1px #9022cb solid;*/
+        background:rgba(103,55,127, 0.7); }
+/*        background:rgba(162,48,224,0.6); } */
 
         .browser .grid li .icon {
           position:absolute;
@@ -362,7 +366,20 @@ body {
           width:100%;
           text-align:center; }
 
+          .name input[type=text] {
+            width:96%;
+            padding:3px 0px;
+            margin:-2px auto;
+            background:rgba(255,255,255,0.9);
+            border:1px #9022cb solid;
+            -webkit-border-radius:3px;
+            -moz-border-radius:3px;
+            border-radius:3px;
+            text-align:center;
+            outline:none; }
+
         .browser .grid li.selected .name {
+          text-shadow:0px -1px 0px #5D3A70;
           color:#fff; }
 
   .edit-toolbar {
@@ -548,26 +565,136 @@ body {
     -moz-border-radius:3px;
     z-index:9000; }
 
+  .dropdown.absolute {
+    padding-bottom:14px; }
+
     .dropdown li {
       padding:0px 8px;
       color:#ccc;
       width:auto;
       background:transparent;
       cursor:default; }
+
+    .dropdown.absolute li {
+      padding:0px 16px; }
+
+    .dropdown li.header {
+      color:#999; }
+
+    .dropdown li.break {
+      height:1px;
+      line-height:1px;
+      margin:2px 0px;
+      border-top:1px #555 solid; }
 
-    .dropdown li:hover, .dropdown li.hover {
+    .dropdown li.hover {
       color:#fff;
       background:rgba(255,255,255,0.3); }
 
     .dropdown li:active {
       color:#fff;
       background:#664378; }
 
-
-
-
 
+.modal {
+  position:absolute;
+  top:10%; left:400px;
+  width:500px; height:400px;
+
+  background: rgba(17,17,17,0.9);
+  border-radius:3px;
+  -moz-border-radius:3px;
+  -webkit-border-radius:3px;
+  box-shadow:0px 10px 50px rgba(0,0,0,0.65);
+  -moz-box-shadow:0px 10px 50px rgba(0,0,0,0.65);
+  -webkit-box-shadow:0px 10px 50px rgba(0,0,0,0.65);
+  z-index:30000; }
 
+.modal.headless.mac {
+  -webkit-border-top-left-radius: 0;
+  border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0; }
+
+.modal.headless.pc {
+  -webkit-border-top-right-radius: 0;
+  border-top-right-radius: 0;
+  -moz-border-radius-topright: 0; }
+
+  .modal .modal-close {
+    position:absolute;
+    top:0px; left:0px;
+    background:transparent;
+    border:none;
+    color:#a0a0a0;
+    font-size:18px;
+    font-family:arial;
+    line-height:16px;
+    box-shadow:none;
+    -webkit-box-shadow:none;
+    -moz-box-shadow:none;
+    text-shadow:0px -1px 0px #000;
+    -webkit-text-shadow:0px -1px 0px #000;
+    -moz-text-shadow:0px -1px 0px #000;
+    cursor:pointer; }
+
+  .modal .modal-close:hover {
+    color:#eee; }
+
+  .modal.pc .modal-close {
+    padding:5px 7px;
+    left:auto; right:0px; }
+
+  .modal.mac.headless .modal-close {
+    left:-27px;
+    background:rgba(17,17,17,0.9);
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-topright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0;
+    -moz-border-radius-bottomright: 0; }
+
+  .modal.pc.headless .modal-close {
+    left:auto; right:-23px;
+    background:rgba(17,17,17,0.9);
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomleft: 0; }
+
+
+  .modal .inner {
+    position:absolute;
+    top:24px; bottom:35px;
+    left:6px; right:6px; }
+
+  .modal.headless .inner {
+    top:6px; }
+
+  .modal .toolbar {
+    position:absolute;
+    bottom:6px; left:6px; right:6px;
+    height:35px; }
+
+  .modal .titlebar {
+    position:absolute;
+    top:6px; right:32px; left:32px;
+    font-size:12px;
+    color:#aaa;
+    text-align:center;
+    text-shadow:0px -1px 0px #000;
+    -webkit-text-shadow:0px -1px 0px #000;
+    -moz-text-shadow:0px -1px 0px #000;
+    cursor:default; }
+
+  .modal .modal-resize {
+    position:absolute;
+    bottom:2px; right:2px;
+    width:11px; height:11px;
+    background:url(../i/modal-resize-grip.png) no-repeat;
+    text-indent:-9999px; }
 
 
 

diff --git a/proj/i/modal-resize-grip.png b/proj/i/modal-resize-grip.png
diff --git a/proj/index.html b/proj/index.html
@@ -11,6 +11,7 @@
     <script src='j/underscore-min.js' type='text/javascript'></script>
     <script src='j/strophe.js' type='text/javascript'></script>
     <script src='j/haml.js' type='text/javascript'></script>
+    <script src='j/raphael-1.2.8.js' type='text/javascript'></script>
     <script src='j/util.js' type='text/javascript'></script>
     <script src='j/json2.js' type='text/javascript'></script>
 
@@ -21,135 +22,16 @@
     <script src='j/message.db.js' type='text/javascript'></script>
     <script src='j/message.db.schema.js' type='text/javascript'></script>
     <script src='j/message.ui.js' type='text/javascript'></script>
+    <script src='j/message.ui.context.js' type='text/javascript'></script>
     <script src='j/message.ui.widgets.js' type='text/javascript'></script>
     <script src='j/message.ui.buttons-toolbars.js' type='text/javascript'></script>
+    <script src='j/message.ui.modal.js' type='text/javascript'></script>
     <script src='j/message.ui.location.js' type='text/javascript'></script>
     <script src='j/message.ui.browse.js' type='text/javascript'></script>
     <script src='j/message.ui.edit.js' type='text/javascript'></script>
     <script src='j/message.ui.history.js' type='text/javascript'></script>
     <script src='j/message.console.js' type='text/javascript'></script>
 
   </head>
-  <body>
-
-    <script id='main' type='haml'>
-      #container
-        #topbar
-          %a#logo{ href: '#' } Message
-
-          #location
-            #placemark
-            %input{ type: 'text', value: '/message/blah/foo/kuso/' }
-            #refresh
-
-          #top-buttons
-            %a#publish{ href: '#'} Publish
-            %a#preview{ href: '#'} Preview
-            %a#logout{ href: '#'} Logout
-
-        #bubbles
-
-        #sidebar
-          #tree
-          #extra
-
-        #main= ''
-    </script>
-
-    <script id='console' type='haml'>
-      #console
-        %ul.history
-
-        .input
-          .caret >
-          %input{ type: 'text' }
-
-        #console-scrollbar
-          .handle=''
-
-        #console-resize=''
-    </script>
-
-
-
-    <script id='bubble' type='haml'>
-      .bubble
-        %a.close{ href:'#' }= '&times;'
-        .text= text || '&hellip;'
-    </script>
-
-    <script id='command' type='haml'>
-      %li.command
-        .entry
-          %span.caret >
-          %span.command= command
-        .result= result
-    </script>
-
-    <script id='tree' type='haml'>
-
-    </script>
-
-    <script id='tabs' type='haml'>
-      %ul.tabs= ''
-    </script>
-
-    <script id='tab' type='haml'>
-      %li.tab{ 'class': 'tab-' + kind.toLowerCase() + ( selected ? ' selected' : '' ), 'id': 'tab-' + guid }
-        .point
-        .icon
-        .text= text
-    </script>
-
-    <script id='panel' type='haml'>
-      .panel{ id: 'panel-' + guid }= ''
-    </script>
-
-    <script id='browser' type='haml'>
-      .browser
-        .toolbar
-        .grid
-          %ul
-
-        .list
-          %table
-            %tr.header
-              %th Name
-              %th Kind
-              %th Last Modified
-    </script>
-
-    <script id='browser-row' type='haml'>
-      %tr.list-item{ 'class': is_folder ? 'folder' : '' }
-        %td.icon
-          %img{ src: icon }
-        %td.name= name
-        %th.kind= kind
-        %th.modified= modified
-    </script>
-
-    <script id='browser-icon' type='haml'>
-      %li.icon-item{ 'class': 'kind-' + kind.toLowerCase() + (is_folder ? ' folder' : '') }
-        .icon
-          %img{ src: icon }
-        .name= name
-    </script>
-
-    <script id='editor' type='haml'>
-      .editor
-        .title
-          %h1= (typeof title !== 'undefined') ? title : ''
-        %ul.properties
-      .edit-toolbar=''
-    </script>
-
-    <script id='editor-property' type='haml'>
-      %li.property{ 'class': 'kind-' + kind + ' property-' + name }
-        .widget
-        .info
-          %h3= name
-          %p= description
-    </script>
-
-  </body>
+  <body></body>
 </html>
diff --git a/proj/j/haml/browser-icon.haml b/proj/j/haml/browser-icon.haml
@@ -0,0 +1,4 @@
+%li.icon-item{ 'class': 'kind-' + kind.toLowerCase() + (is_folder ? ' folder' : '') }
+  .icon
+    %img{ src: icon }
+  .name= name
diff --git a/proj/j/haml/browser-row.haml b/proj/j/haml/browser-row.haml
@@ -0,0 +1,6 @@
+%tr.list-item{ 'class': is_folder ? 'folder' : '' }
+  %td.icon
+    %img{ src: icon }
+  %td.name= name
+  %th.kind= kind
+  %th.modified= modified
diff --git a/proj/j/haml/browser.haml b/proj/j/haml/browser.haml
@@ -0,0 +1,11 @@
+.browser
+  .toolbar
+  .grid
+    %ul
+
+  .list
+    %table
+      %tr.header
+        %th Name
+        %th Kind
+        %th Last Modified
diff --git a/proj/j/haml/bubble.haml b/proj/j/haml/bubble.haml
@@ -0,0 +1,3 @@
+.bubble
+  %a.close{ href:'#' }= '&times;'
+  .text= text || '&hellip;'
diff --git a/proj/j/haml/command.haml b/proj/j/haml/command.haml
@@ -0,0 +1,5 @@
+%li.command
+  .entry
+    %span.caret >
+    %span.command= command
+  .result= result
diff --git a/proj/j/haml/console.haml b/proj/j/haml/console.haml
@@ -0,0 +1,11 @@
+#console
+  %ul.history
+
+  .input
+    .caret >
+    %input{ type: 'text' }
+
+  #console-scrollbar
+    .handle=''
+
+  #console-resize=''
diff --git a/proj/j/haml/editor-property.haml b/proj/j/haml/editor-property.haml
@@ -0,0 +1,5 @@
+%li.property{ 'class': 'kind-' + kind + ' property-' + name }
+  .widget
+  .info
+    %h3= name
+    %p= description