Resizable content frame.

masamitsu-murase · Mar 25, 2012 · 8857ce3 · 8857ce3
1 parent 32b7ab5
commit 8857ce3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 56 deletions.
diff --git a/extension/repository_view/repository_view.css b/extension/repository_view/repository_view.css
@@ -7,9 +7,20 @@
     background-image: url(images/ajax_loader.gif) !important;
     background-size: 100%;
 }
+.ui-resize-helper{
+    border: 2px dotted #00F;
+}
 
 /*********************************************/
 /* Main frame and splitter */
+#content_widget{
+    overflow: hidden;
+}
+#content_header, #log_header{
+    margin: 0px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
 #content_frame{
     width: 100%;
     height: 500px;
@@ -110,10 +121,12 @@ table.file_list_view tbody td.name > .dir_link:hover{
 
 /*********************************************/
 /* LogView */
-#log{
+#log_view{
     overflow: auto;
 }
 dl.log_view{
+    margin: 0px;
+    padding: 0px;
 }
 dl.log_view > dt{
     font-size: larger;

diff --git a/extension/repository_view/repository_view.html b/extension/repository_view/repository_view.html
@@ -23,24 +23,24 @@ <h1>Browse Subversion</h1>
     <button id="change_revision">Change Revision</button>
   </p>
 
-  <div id="basic_info"></div>
   <div id="main">
-    <h2>Contents</h2>
+    <div id="content_widget" class="ui-widget-content">
-    <div class="ui-widget-content">
+      <h2 id="content_header" class="ui-widget-header">Contents</h2>
       <div id="content_frame">
         <div id="dir_tree"></div>
         <div id="file_list"></div>
       </div>
     </div>
 
-    <h2>Logs</h2>
+    <hr />
-    <div id="log_frame">
+
-      <div id="log_view"></div>
+    <div class="ui-widget-content">
+      <h2 id="log_header" class="ui-widget-header">Logs</h2>
+      <div id="log_frame">
+        <div id="log_view"></div>
+      </div>
     </div>
   </div>
-  <div id="log"></div>
-  <hr style="clear: both;" />
-  <div id="tree"></div>
 </body>
 </html>
 
diff --git a/extension/repository_view/repository_view.js b/extension/repository_view/repository_view.js
@@ -526,11 +526,6 @@ $(function(){
         },
 
         updateLogList: function(url, logs){
-            // remove current logs
-            while(this.m_view_elem.firstChild){
-                this.m_view_elem.removeChild(this.m_view_elem.firstChild);
-            }
-
             // add
             var elem = document.createElement("dl");
             this.m_view_elem.appendChild(elem);
@@ -547,6 +542,14 @@ $(function(){
             logs.forEach(function(log){
                 this.createLog(logs_root, log);
             }, this);
+
+            // then remove current logs to keep scroll position.
+            var removed_children = Array.prototype.filter.call(this.m_view_elem.childNodes, function(item){
+                return item != elem;
+            });
+            removed_children.forEach(function(item){
+                this.m_view_elem.removeChild(item);
+            }, this);
         },
 
         createLog: function(logs_root, log){
@@ -617,43 +620,6 @@ $(function(){
     LogView.COMMENT_LENGTH = 40;
 
 
-    var BasicInfoView = function(elem, model){
-        this.m_model = model;
-
-        while(elem.firstChild){
-            elem.removeChild(elem.firstChild);
-        }
-
-        var dl = document.createElement("dl");
-        elem.appendChild(dl);
-        var dt = document.createElement("dt");
-        dl.appendChild(dt);
-        dt.appendChild(document.createTextNode("Path"));
-        var dd = document.createElement("dd");
-        dl.appendChild(dd);
-        this.m_path_elem = dd;
-
-        dt = document.createElement("dt");
-        dl.appendChild(dt);
-        dt.appendChild(document.createTextNode("Revision"));
-        dd = document.createElement("dd");
-        dl.appendChild(dd);
-        this.m_revision_elem = dd;
-    };
-    BasicInfoView.prototype = {
-        update: function(){
-            if (this.m_path_elem.firstChild){
-                this.m_path_elem.removeChild(this.m_path_elem.firstChild);
-            }
-            this.m_path_elem.appendChild(document.createTextNode(this.m_model.repositoryInfo().root_url + this.m_model.path()));
-
-            if (this.m_revision_elem.firstChild){
-                this.m_revision_elem.removeChild(this.m_revision_elem.firstChild);
-            }
-            this.m_revision_elem.appendChild(document.createTextNode(this.m_model.operationRevision()));
-        }
-    };
-
     var load = function(){
         // splitter
         $("#content_frame").splitter({
@@ -666,7 +632,7 @@ $(function(){
         elem = document.getElementById("dir_tree");
 
         // log view
-        var log_view = new LogView(document.getElementById("log"), "", model.pegRevision());
+        var log_view = new LogView(document.getElementById("log_view"), "", model.pegRevision());
 
         // file list
         var file_list_view = new FileListView(document.getElementById("file_list"), model, log_view);
@@ -676,9 +642,21 @@ $(function(){
         var dv = new DirectoryView(elem, model, log_view);
         model.addListener(dv);
 
-        // basic info
+        // resizable content_widget
-        var basic_info_view = new BasicInfoView(document.getElementById("basic_info"), model);
+        $("#content_widget").resizable({
-        model.addListener(basic_info_view);
+            handles: "s",
+            helper: "ui-resize-helper",
+            stop: function(event, ui){
+                var height = $("#content_widget").innerHeight() - $("#content_header").outerHeight();
+                if (height < 0){
+                    height = 10;
+                }
+                $("#dir_tree").css("height", height + "px");
+                $("#file_list").css("height", height + "px");
+                $("#content_frame").css("height", height + "px").trigger("resize");
+            }
+        });
+
 
         document.getElementById("change_revision").addEventListener("click", function(){
             var rev = document.getElementById("revision").value;