mongo3 0.0.9 → 0.1.0

data/lib/public/javascripts/themes/mongo3/style.css

@@ -0,0 +1,39 @@
+.tree li {
+  width: 875px;
+  float: left;
+}
+
+/* BACKGROUND */
+.tree-mongo3 .ltr, .tree-mongo3 .rtl { background:transparent; min-width:100%; _width:100%; margin-left:0; margin-right:0; display:table; }
+.tree-mongo3 .ltr > li.leaf, .tree-mongo3 .rtl > li.leaf { background-image:none; }
+
+/* LOCKED */
+.tree-mongo3 .locked li a { color:gray; }
+/* DOTS */
+.tree-mongo3 ul { background-position:6px 1px; background-repeat:repeat-y; background-image:url(data:image/gif;base64,R0lGODlhAgACAIAAAB4dGf///yH5BAEAAAEALAAAAAACAAIAAAICRF4AOw==); _background-image:url("dot_for_ie.gif"); *background-image:url("dot_for_ie.gif"); }
+.tree-mongo3 li { background-position:-64px -16px; background-repeat:no-repeat; background-image:url("icons.png"); }
+/* NO DOTS */
+.tree-mongo3 .no_dots, .tree-mongo3 .no_dots ul { background:transparent; }
+.tree-mongo3 .no_dots li.leaf { background-image:none; background-color:transparent; }
+/* OPEN or CLOSED */
+.tree-mongo3 li.open { background:url("icons.png") -32px -48px no-repeat; }
+.tree-mongo3 li.closed, #jstree-dragged.tree-mongo3 li li.open { background:url("icons.png") -48px -32px no-repeat; }
+#jstree-marker { background-image:url("icons.png"); }
+/* DEFAULT, HOVER, CLICKED, LOADING STATES */
+.tree-mongo3 li a, .tree-mongo3 li span { color:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
+.tree-mongo3 li a:hover, .tree-mongo3 li a.hover, .tree-mongo3 li span:hover { color: #92b948; }
+.tree-mongo3 li a.clicked, .tree-mongo3 li a.clicked:hover, .tree-mongo3 li span.clicked { background: #beebff; border:1px solid #99defd; padding:0px 3px 0px 3px; }
+/* ICONS */
+.tree-mongo3 ins { vertical-align:text-bottom; background-image:url("icons.png"); background-position:0 0; background-repeat:no-repeat; }
+.tree-mongo3 ul li a.loading ins { background-image:url("throbber.gif") !important; background-position:0 0 !important; } /* UL is added to make selector stronger */
+.tree-mongo3 li a ins.forbidden { background-position:-16px -16px; }
+.tree-mongo3 .locked li a ins { background-position:0 -48px; }
+.tree-mongo3 li span ins { background-position:-16px 0; }
+#jstree-dragged.tree-mongo3 ins { background:url("icons.png") -16px -32px no-repeat; }
+#jstree-dragged.tree-mongo3 ins.forbidden { background:url("icons.png") -16px -16px no-repeat; }
+
+/* CONTEXT MENU */
+.tree-mongo3-context a ins { background-image:url("icons.png"); background-repeat:no-repeat; background-position:-64px -64px; }
+.tree-mongo3-context a ins.create { background-position:0 -16px; }
+.tree-mongo3-context a ins.rename { background-position:-16px 0px; }
+.tree-mongo3-context a ins.remove { background-position:0 -32px; }

data/lib/public/stylesheets/mongo3.css

@@ -20,13 +20,6 @@ body {
   margin:           0;
 }
 
-span#version {
-  color:          #4d7bff;
-  font-size:      .4em;
-  vertical-align: bottom;
-  margin:         88px 0px 0px -57px;
-}
-
 img {
   border:         none;
   vertical-align: text-top;
@@ -34,17 +27,18 @@ img {
 
 /* Flash */
 div.flash {
-  display:                        none;
-  width:                          95%;
-  padding:                        10px;
-  margin:                         20px 0 0px 300px;
-  font-size:                      .5em;
-  color:                          #fff;
-  border:                         1px #92b948 solid;
-  -moz-border-radius-bottomleft:  20px;
-  -moz-border-radius-topleft:     0px;
-  -moz-border-radius-bottomright: 0px;
-  -moz-border-radius-topright:    20px;  
+  display:                            none;
+  width:                              95%;
+  padding:                            10px;
+  margin:                             20px 0 0px 300px;
+  font-size:                          .5em;
+  color:                              #fff;
+  border:                             1px #92b948 solid;
+  -moz-border-radius:                 20px 0px 20px 0px;
+  -webkit-border-top-right-radius:    20px;  
+  -webkit-border-top-left-radius:     0px;  
+  -webkit-border-bottom-left-radius:  20px;
+  -webkit-border-bottom-right-radius: 0px;
 }
 div.flash_error {
   color:  #f00;  
@@ -67,13 +61,25 @@ div#logo {
   margin:        10px 0px 25px 20px;
 }
 
+div#version {
+  color:          #4d7bff;
+  font-size:      .4em;
+  margin:         64px 0px 0px 255px;
+}
+
+img#logo {
+  display: inline;
+  float:  left;
+}
+
+
 #main {
   clear:    left;
   margin:   20px 10px 10px 20px;
   overflow: none;
 }
 
-ul {
+ul.list {
   list-style-image:    none;
   list-style-position: outside;
   list-style-type:     none;
@@ -221,15 +227,9 @@ div.scrollable div.items {
 
 /* Commons */
 div.borders {
-  -moz-border-radius-bottomleft:      7px;
-  -moz-border-radius-topleft:         7px;
-  -moz-border-radius-bottomright:     7px;
-  -moz-border-radius-topright:        7px;  
-  -webkit-border-top-left-radius:     7px;
-  -webkit-border-top-right-radius:    7px;
-  -webkit-border-bottom-right-radius: 7px;
-  -webkit-border-bottom-left-radius:  7px;
-  border:                             1px #92b948 solid;  
+  -moz-border-radius:    7px;
+  -webkit-border-radius: 7px;
+  border:                1px #92b948 solid;  
 }
 
 /* Explorer css */
@@ -291,10 +291,8 @@ div#fields {
   margin:                         20px 10px;
   padding:                        10px 10px;
   overflow:                       hidden;
-  -moz-border-radius-bottomleft:  7px;
-  -moz-border-radius-topleft:     7px;
-  -moz-border-radius-bottomright: 7px;
-  -moz-border-radius-topright:    7px;  
+  -moz-border-radius:             7px;
+  -webkit-border-radius:          7px;
   border:                         1px #92b948 solid;    
 }
 div.title {
@@ -311,7 +309,7 @@ fieldset {
 }
 fieldset.check {
   float:  left;
-  width:  20%;
+  width:  25%;
 }
 
 p.ctx {
@@ -335,10 +333,13 @@ table.cltn {
 table.cltn thead {
   font-weight:   bold;
   border-bottom: 1px #c1c1c1 solid;
-  color:         #c1c1c1;
+  color:         #ff8f00;
+}
+table.cltn tbody td {
+  padding: 0px 5px 0px 0px;
 }
-table.cltn tr {
-  color: #fff;
+table.cltn tbody tr {
+  color: #c1c1c1;
 }
 table.cltn tr.highlight {
   color:  #92b948;
@@ -375,31 +376,28 @@ img.del_index {
 }
 
 input.search {
-  background:                     transparent url(/images/search.png) no-repeat 2px 6px;  
-  width:                          96%;
-  border:                         2px #434343 solid;
-  -moz-border-radius-bottomleft:  0px;
-  -moz-border-radius-bottomright: 10px;
-  -moz-border-radius-topleft:     10px;
-  -moz-border-radius-topright:    0px;
-  height:                         25px;
-  font-size:                      1.2em;
-  color:                          #92b948;
-  padding:                        5px 0px 0px 20px;
-  margin:                         5px 5px;
+  background:            transparent url(/images/search.png) no-repeat 2px 6px;  
+  width:                 96%;
+  border:                2px #434343 solid;
+  -moz-border-radius:    40px/10px;
+  -webkit-border-radius: 40px 10px;
+  height:                25px;
+  font-size:             1.2em;
+  color:                 #92b948;
+  padding:               5px 0px 0px 20px;
+  margin:                5px 5px;
 }
 
 button {
-  -moz-border-radius-bottomleft:  14px;
-  -moz-border-radius-bottomright: 14px;
-  -moz-border-radius-topleft:     14px;
-  -moz-border-radius-topright:    14px;
-  -moz-box-shadow:                2px 2px 6px #232323;
-  background:                     transparent url(/images/button.png) repeat-x center bottom;
-  height:                         20px;
-  width:                          100px;
-  margin-right:                   10px;
-  color:                          #c1c1c1;
+  -moz-border-radius:    14px;  
+  -moz-box-shadow:       2px 2px 6px #232323;
+  -webkit-border-radius: 14px;  
+  -webkit-box-shadow:    2px 2px 6px #232323;  
+  background:            transparent url(/images/button.png) repeat-x center bottom;
+  height:                20px;
+  width:                 100px;
+  margin-right:          10px;
+  color:                 #c1c1c1;
 }
 
 button.show:hover {
@@ -445,7 +443,7 @@ button.drop:hover {
 img.delete {
   cursor: pointer;
   border: 0;
-  display:none;
+/*  display:none;*/
 }
 img.wait {
   width:          16px;
@@ -464,8 +462,8 @@ img.wait {
 	border:                2px solid #333;
 	opacity:               0.8;
 	-moz-border-radius:    6px;
+	-moz-box-shadow:       0 0 20px #92b948;	
 	-webkit-border-radius: 6px;
-	-moz-box-shadow:       0 0 20px #92b948;
 	-webkit-box-shadow:    0 0 20px #92b948;
 }
 
@@ -485,13 +483,25 @@ div#info {
 }
 
 /* Node information */
-div.item img {
+div.item img.drop {
   z-index:      100;
   display:      none;
   float:        left;
   margin-right: 10px;
 }
 
+p.info {
+  float:left;
+}
+
+p.show {
+  float: left;
+}
+img.info {
+  display: block;
+  float: right;
+}
+
 div#legend {
   border-bottom: 1px #434343 solid;
   font-size:     0.5em;
@@ -525,10 +535,8 @@ div.selected {
 
 /* Users */
 input.field_border {
-  -moz-border-radius-bottomleft:  0px;
-  -moz-border-radius-bottomright: 10px;
-  -moz-border-radius-topleft:     10px;
-  -moz-border-radius-topright:    0px;  
+  -moz-border-radius:       40px/10px;
+  -webkit-border-radius:    40px 10px;  
 }
 
 input.user {
@@ -545,3 +553,131 @@ input.user {
 button.user:hover {
   background-color: #ad1ecb;
 }
+
+/* ------------------------------------------------------------------------- */
+/* Tooltips */
+#tiptip_holder {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 99999;
+}
+
+#tiptip_holder.tip_top {
+	padding-bottom: 5px;
+}
+
+#tiptip_holder.tip_bottom {
+	padding-top: 5px;
+}
+
+#tiptip_holder.tip_right {
+	padding-left: 5px;
+}
+
+#tiptip_holder.tip_left {
+	padding-right: 5px;
+}
+
+#tiptip_content {
+	font-size: 11px;
+	color: #fff;
+	text-shadow: 0 0 2px #000;
+	padding: 4px 8px;
+	border: 1px solid rgba(255,255,255,0.25);
+	background-color: rgb(45,45,45);
+	background-color: rgba(45,45,45,0.92);
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	box-shadow: 0 0 3px #555;
+	-webkit-box-shadow: 0 0 3px #555;
+	-moz-box-shadow: 0 0 3px #555;
+}
+
+#tiptip_arrow, #tiptip_arrow_inner {
+	position: absolute;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 6px;
+	height: 0;
+	width: 0;
+}
+
+#tiptip_holder.tip_top #tiptip_arrow {
+	border-top-color: #fff;
+	border-top-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow {
+	border-bottom-color: #fff;
+	border-bottom-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_right #tiptip_arrow {
+	border-right-color: #fff;
+	border-right-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_left #tiptip_arrow {
+	border-left-color: #fff;
+	border-left-color: rgba(255,255,255,0.35);
+}
+
+#tiptip_holder.tip_top #tiptip_arrow_inner {
+	margin-top: -7px;
+	margin-left: -6px;
+	border-top-color: rgb(45,45,45);
+	border-top-color: rgba(45,45,45,0.92);
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow_inner {
+	margin-top: -5px;
+	margin-left: -6px;
+	border-bottom-color: rgb(45,45,45);
+	border-bottom-color: rgba(45,45,45,0.92);
+}
+
+#tiptip_holder.tip_right #tiptip_arrow_inner {
+	margin-top: -6px;
+	margin-left: -5px;
+	border-right-color: rgb(45,45,45);
+	border-right-color: rgba(45,45,45,0.92);
+}
+
+#tiptip_holder.tip_left #tiptip_arrow_inner {
+	margin-top: -6px;
+	margin-left: -7px;
+	border-left-color: rgb(45,45,45);
+	border-left-color: rgba(45,45,45,0.92);
+}
+
+/* Webkit Hacks  */
+@media screen and (-webkit-min-device-pixel-ratio:0) {	
+	#tiptip_content {
+		padding: 4px 8px 5px 8px;
+		background-color: rgba(45,45,45,0.88);
+	}
+	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
+		border-bottom-color: rgba(45,45,45,0.88);
+	}
+	#tiptip_holder.tip_top #tiptip_arrow_inner { 
+		border-top-color: rgba(20,20,20,0.92);
+	}
+}
+
+/* ------------------------------------------------------------------------- */
+/* Document Tree */
+span span.meta {
+  font-style: italic;
+  color:      #c1c1c1;   
+}
+
+div.delete {
+  display: inline;
+  float:   right;
+  width:   5%;
+}
+

data/lib/views/collections/_fields_form.erb

@@ -9,7 +9,7 @@
   </div>
   <fieldset style="float:right;">
     <button type="submit" id="submit_button" class="button show">show</button>
-    <img id="show_load" src="/images/loading.gif" style="width:20px;height:20px;vertical-align:top;display:none"></img>
+    <img id="show_load" src="/images/loading.gif" style="width:20px;height:20px;vertical-align:top;display:none"/>
   </fieldset>  
 </form>
 

data/lib/views/collections/_index_form.erb

@@ -4,7 +4,7 @@
   <fieldset>
     <input id="index" type="text" name="index" class="search" value=""/>
     <button type="submit" id="submit_button" class="button search" style="display:none">create</button>
-    <img id="create_load" src="/images/loading.gif" style="width:25px;height:25px;vertical-align:sub;display:none"></img>
+    <img id="create_load" src="/images/loading.gif" style="width:25px;height:25px;vertical-align:sub;display:none"/>
   </fieldset>  
 </form>
 

data/lib/views/collections/_index_rows.erb

@@ -3,16 +3,18 @@
 <div class="borders" style="padding:10px">
   <table id="indexes" class="cltn" border="0" cellpadding="10" cellspacing="20">
     <thead>
-      <th width="2%">&nbsp;</td>
-      <th>Name</th>
-      <th>Settings</th>      
+      <tr>
+        <th width="3%">&nbsp;</th>
+        <th>Name</th>
+        <th>Settings</th>
+      </tr>
     </thead>
     <tbody>
       <% @indexes.keys.sort.each do |name| %>
         <tr id="<%=name%>" valign="top">
           <td id="<%=name%>">
-            <img class="del_index" id="<%=name%>" src="/images/delete.png" title="delete this index"/>
-            <img class="wait" id="wait_<%=name%>" src="/images/loading.gif"></img>
+            <img rel="div#confirm_drop" class="drop" style="display:none" id="<%=name%>" src="/images/delete.png" title="delete this index"/>
+            <img class="wait" id="wait_<%=name%>" src="/images/loading.gif"/>
           </td>
           <td><%=name%></td>
           <% buff = [];@indexes[name].each do |pair| %>
@@ -25,30 +27,53 @@
   </table>
 </div>
 
+<div class="modal" id="confirm_drop" style="font-size:1em">
+   <p>Dropping index. Are you sure?</p>
+   <p style="margin:10px">
+     <button class="close yes">Yes</button>
+     <button class="close">No</button>
+   </p>
+</div>
+
 <script>
   $( function() {
-    $("table#indexes tr" ).hover( 
+    $("table#indexes tbody tr" ).hover( 
       function() { 
         $(this).addClass( 'highlight' );
-        $("td#" + $(this).attr('id') + " img.del_index" ).show();
+        $("td#" + $(this).attr('id') + " img.drop" ).show();
       }, 
       function() { 
         $(this).removeClass( 'highlight' );      
-        $("td#" + $(this).attr('id') + " img.del_index" ).hide();
+        $("td#" + $(this).attr('id') + " img.drop" ).hide();
       });
-    $( "img.del_index" ).click( function() {
-      var id = $(this).attr('id');
+      
+    $('img.drop' ).overlay( {
+      expose: {
+         color:     '#212021',
+         loadSpeed: 200,
+         opacity:   0.9 
+      },
+      onBeforeLoad: function() {
+        $("button.yes").attr( 'id', this.getTrigger().attr('id') );
+      },
+      closeOnClick: false
+    });
+        
+    $( 'button.yes' ).click( function() {
+      var self = $(this);
       $.ajax({
-        data:     {id: id},
+        data:     {id:self.attr('id')},
         dataType: 'script',
         type:     'post',
         url:      '/collections/drop_index/',
-        beforeSend: function() { $('img#_wait_' + id ).show(); },
+        beforeSend: function() { 
+          $('img#_wait_' + self.attr('id') ).show(); 
+        },
         complete:   function() { 
-          $('img#_wait_' + id ).hide(); 
-          $('tr#' + id ).fadeOut();
+          $('img#_wait_' + self.attr('id') ).hide(); 
+          $('tr#' + self.attr('id') ).fadeOut();
         }
       }); 
-    });    
+    });          
   });
 </script>

data/lib/views/collections/_results.erb

@@ -1,10 +1,10 @@
 <% unless @cltn.empty? %>
-  <div id="fields">
-    <%= partial :'collections/fields_form' %>
-  </div>
+  <!-- <div id="fields">
+    <= partial :'collections/fields_form' %>
+  </div> -->
   
   <div class="table">
-    <%= partial :'collections/rows' %>
+    <%= partial :'collections/rows_tree' %>
   </div>
 <% else %>
   <div class="no_items">Oh snap! No items found...</span>

data/lib/views/collections/{_rows.erb → _rows_table.erb}

@@ -5,23 +5,25 @@
 <%= partial :'collections/search_form' %>
 
 <div class="borders" style="padding:10px;">
-  <table id="cltn" class="cltn" border="0" cellpadding="10" cellspacing="20">
+  <table id="cltn" class="cltn" border="0" cellspacing="10">
     <thead>
-      <th width="2%">&nbsp;</td>
-      <% @selected_cols.each do |col| %>
-        <th><%=col%></th>
-      <% end %>
+      <tr>
+        <th width="5%">&nbsp;</td>
+        <% @selected_cols.each do |col| %>
+          <th width="20%" align="<%=align_for( @cltn[0][col] )%>"><%=col%></th>
+        <% end %>
+      </tr>
     </thead>
     <tbody>
       <% @cltn.each do |cltn| %>
         <% id = cltn['_id'] %>
         <tr id="<%=id%>" valign="top">
-          <td id="<%=id%>">
+          <td id="<%=id%>" style="margin:0px;padding:0px">
             <img class="delete" id="<%=id%>" src="/images/delete.png" title="delete this record"/>
             <img class="wait" id="wait_<%=id%>" src="/images/loading.gif"></img>          
           </td>
           <% @selected_cols.each do |k| %>
-            <td><%= format_value(cltn[k]) %></td>
+            <td align="<%=align_for( cltn[k] ) %>"><%= format_value(cltn[k]) %></td>
           <% end %>
         </tr>
       <% end %>
@@ -35,7 +37,7 @@
 
 <script>
   $( function() {
-    $("table#cltn tr" ).hover( 
+    $("table#cltn tbody tr" ).hover( 
       function() { 
         $(this).addClass( 'highlight' );
         $("td#" + $(this).attr('id') + " img.delete" ).show();
@@ -53,7 +55,7 @@
         url:      '/collections/delete/',
         beforeSend: function() { $('img#_wait_' + id ).show(); },
         complete:   function() { $('img#_wait_' + id ).hide(); }
-      }); 
+      });
     });    
   });
 </script>

data/lib/views/collections/_rows_tree.erb

@@ -0,0 +1,81 @@
+<div id="summary" style="clear:both">
+  <%= page_entries_info @cltn, :entry_name => 'item' %>
+</div>
+
+<%= partial :'collections/search_form' %>
+
+<div class="borders" style="padding:10px;">
+  <div id="tree">
+    <ul>
+      <% count=0;@cltn.each do |cltn| %>
+        <% id = cltn['_id'] %>
+        <li><span><ins></ins><%=id%></span>
+          <div class="delete">
+            <img rel="div#confirm_drop" class="delete" style="float:left;" id="<%=id%>" src="/images/delete.png" title="delete this record"/>
+            <img class="wait" id="wait_<%=id%>" src="/images/loading.gif"/>
+          </div>
+          <ul>
+            <% cltn.keys.sort.each do |k| %>
+              <% next if k == '_id' %>
+              <%= format_nodes( cltn[k], k ) %>
+            <% count+=1;end %>
+          </ul>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>
+
+<div id="links">
+  <%= will_paginate @cltn, :params => { :url => '/collections' } %>
+</div>      
+
+<div class="modal" id="confirm_drop" style="font-size:1em">
+   <p>Dropping document. Are you sure?</p>
+   <p style="margin:10px">
+     <button class="close yes">Yes</button>
+     <button class="close">No</button>
+   </p>
+</div>
+
+<script>
+  $( function() {    
+  	$('div#tree').tree( { 
+  	  ui: { theme_name: 'mongo3', theme_path: '/javascripts/themes/mongo3/style.css'},
+  	  "default" : {
+  	    renameable: false,
+  	    deletable:  false,
+  	    draggable:  false,
+  	    creatable:  false  	    
+  	  }
+  	});
+  	  	
+    $('img.delete' ).overlay( {
+      expose: {
+         color:     '#212021',
+         loadSpeed: 200,
+         opacity:   0.9 
+      },
+      onBeforeLoad: function() {
+        $("button.yes").attr( 'id', this.getTrigger().attr('id') );
+      },
+      closeOnClick: false
+    });
+        
+    $( 'button.yes' ).click( function() {
+      var self = $(this);
+      $.ajax({
+        data:     {id:self.attr('id')},
+        dataType: 'script',
+        type:     'post',
+        url:      '/collections/delete/',
+        beforeSend: function() { 
+          $('img#wait_' + self.attr('id') ).show(); 
+        },
+        complete:   function() {
+          $('img#wait_' + self.attr('id') ).hide();
+        }
+      });
+    });
+  });
+</script>