sidebar pinning

Changes

@@ -1,3 +1,9 @@
+0.4
+
+  [NEW FEATURES]
+
+  * Sidebar can be pinned in place to keep it visible when scrolling.
+
 0.3  2011-02-03
 
   [NEW FEATURES]

Netdisco/public/css/netdisco.css

@@ -175,6 +175,31 @@ form .clearfix.success input {
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* sidebar collapser */
 
+/* for placing the sidebar pin icon */
+#sidebar_pin_box {
+  float: right;
+  margin: 0px;
+  margin-top: -12px;
+  margin-right: -12px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.sidebar_pin_box_pressed {
+  background-color: #DCDCDC;
+}
+
+.sidebar_pinned {
+  position: fixed !important;
+  margin-top: 50px;
+}
+
+#sidebar_pin {
+  padding-top: 2px;
+  padding-left: 1px;
+  padding-right: 2px;
+}
+
 /* for placing the sidebar toggle icons */
 #sidebar_toggle_img_in {
   float: left;

Netdisco/public/javascripts/netdisco.js

@@ -136,30 +136,33 @@ $(document).ready(function() {
   };
   $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
 
+  // sidebar toggle - pinning
+  $('#sidebar_pin_box').click(function() {
+    $(this).toggleClass('sidebar_pin_box_pressed');
+    $('.sidebar').toggleClass('sidebar_pinned');
+  });
   // sidebar toggle - trigger in/out on image click()
-  $('#sidebar_toggle_img_in').click(
+  $('#sidebar_toggle_img_in').click(function() {
-    function() {
+    $('.sidebar').toggle(
-      $('.sidebar').toggle(
+      function() {
-        function() {
+        $('#sidebar_toggle_img_out').toggle();
-          $('#sidebar_toggle_img_out').toggle();
+        $('.content').animate({'margin-right': '10px !important'}, 50);
-          $('.content').animate({'margin-right': '10px !important'}, 50);
+      }
+    );
+    sidebar_hidden = 1;
+  });
+  $('#sidebar_toggle_img_out').click(function() {
+    $('#sidebar_toggle_img_out').toggle();
+    $('.content').animate({'margin-right': '220px !important'}, 100,
+      function() {
+        $('.sidebar').toggle(200);
+        if (! $('.sidebar').hasClass('sidebar_pinned')) {
+            $(window).scrollTop(0);
         }
-      );
+      }
-      sidebar_hidden = 1;
+    );
-    }
+    sidebar_hidden = 0;
-  );
+  });
-  $('#sidebar_toggle_img_out').click(
-    function() {
-      $('#sidebar_toggle_img_out').toggle();
-      $('.content').animate({'margin-right': '220px !important'}, 100,
-        function() {
-          $('.sidebar').toggle(200);
-          $(window).scrollTop(0);
-        }
-      );
-      sidebar_hidden = 0;
-    }
-  );
 
   // could not get twitter bootstrap tabs to behave, so implemented this
   // but warning! will probably not work for dropdowns in tabs

Netdisco/views/device.tt

@@ -7,6 +7,9 @@
       <img class="sidebar_toggle" id="sidebar_toggle_img_in"
         src="[% uri_base %]/images/splashyfish_right.png"
         rel="twipsy" data-placement="left" data-offset="5" title="Hide Sidebar"/>
+      <div id="sidebar_pin_box" class="well">
+        <img id="sidebar_pin" src="[% uri_base %]/images/matte_basic_pin.png"/>
+      </div>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">

Netdisco/views/search.tt

@@ -7,6 +7,9 @@
       <img class="sidebar_toggle" id="sidebar_toggle_img_in"
         src="[% uri_base %]/images/splashyfish_right.png"
         rel="twipsy" data-placement="left" data-offset="5" title="Hide Sidebar"/>
+      <div id="sidebar_pin_box" class="well">
+        <img id="sidebar_pin" src="[% uri_base %]/images/matte_basic_pin.png"/>
+      </div>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">