Moved history widget and facet panel into tabs on the left according to James' new design. More polishing is needed.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@455 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project.js

@@ -16,22 +16,27 @@ function resize() {
     
     ui.menuBarContainer.css("top", header.outerHeight() + "px");
 
-    var facetPanelWidth = 250;
+    var leftPanelWidth = 300;
+    var leftPanelMargin = 5;
     var width = $(window).width();
     var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
     var height = footer.offset().top - top;
     
     ui.viewPanel
         .css("top", top + "px")
+        .css("left", leftPanelWidth + "px")
         .css("height", height + "px")
-        .css("left", "0px")
+        .css("width", (width - leftPanelWidth) + "px");
-        .css("width", (width - facetPanelWidth) + "px");
     
-    ui.facetPanel
+    ui.leftPanel
-        .css("top", top + "px")
+        .css("top", (top + leftPanelMargin) + "px")
-        .css("height", height + "px")
+        .css("left", leftPanelMargin + "px")
-        .css("left", (width - facetPanelWidth) + "px")
+        .css("height", (height - 2 * leftPanelMargin) + "px")
-        .css("width", facetPanelWidth + "px");
+        .css("width", (leftPanelWidth - 2 * leftPanelMargin) + "px");
+        
+    var leftPanelTabsPaddings = ui.leftPanelTabs.outerHeight(true) - ui.leftPanelTabs.innerHeight();
+    ui.leftPanelTabs
+        .height(ui.leftPanel.height() - leftPanelTabsPaddings);
         
     var processPanelWidth = 400;
     ui.processPanel
@@ -39,8 +44,18 @@ function resize() {
         .css("left", Math.floor((width - processPanelWidth) / 2) + "px");
 }
 
+function resizeTabs() {
+    var totalHeight = ui.leftPanelTabs.innerHeight();
+    var headerHeight = ui.leftPanelTabs.find(".ui-tabs-nav").outerHeight(true);
+    var tabPanels = ui.leftPanelTabs.find(".ui-tabs-panel")
+    var paddings = tabPanels.outerHeight(true) - tabPanels.innerHeight();
+    
+    tabPanels.height(totalHeight - headerHeight - paddings);
+}
+
 function resizeAll() {
     resize();
+    resizeTabs();
     
     ui.menuBar.resize();
     ui.browsingEngine.resize();
@@ -66,9 +81,17 @@ function initializeUI(uiState) {
     
     var body = $("#body").empty().html(
         '<div bind="viewPanel" class="view-panel"></div>' +
-        '<div bind="facetPanel" class="facet-panel"></div>' +
-        '<div bind="historyPanel" class="history-panel"></div>' +
         '<div bind="processPanel" class="process-panel"></div>' +
+        '<div bind="leftPanel" class="left-panel">' +
+            '<div bind="leftPanelTabs">' +
+                '<ul>' +
+                    '<li><a href="#gridworks-tabs-facets">Facet/Filter</a></li>' +
+                    '<li><a href="#gridworks-tabs-history" bind="historyTabHeader">Undo/Redo</a></li>' +
+                '</ul>' +
+                '<div id="gridworks-tabs-facets" bind="facetPanel" class="facet-panel"></div>' +
+                '<div id="gridworks-tabs-history" bind="historyPanel" class="history-panel"></div>' +
+            '</div>' +
+        '</div>' +
         '<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
     );
     ui = DOM.bind(body);
@@ -76,11 +99,13 @@ function initializeUI(uiState) {
     ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
     ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
     
+    ui.leftPanelTabs.tabs();
     resize();
+    resizeTabs();
     
     ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
     ui.processWidget = new ProcessWidget(ui.processPanel);
-    ui.historyWidget = new HistoryWidget(ui.historyPanel);
+    ui.historyWidget = new HistoryWidget(ui.historyPanel, ui.historyTabHeader);
     ui.dataTableView = new DataTableView(ui.viewPanel);
     
     $(window).bind("resize", resizeAll);

src/main/webapp/scripts/widgets/history-widget.js

@@ -1,5 +1,6 @@
-function HistoryWidget(div) {
+function HistoryWidget(div, tabHeader) {
     this._div = div;
+    this._tabHeader = tabHeader;
     this.update();
 }
 
@@ -24,20 +25,17 @@ HistoryWidget.prototype.update = function(onDone) {
 HistoryWidget.prototype._render = function() {
     var self = this;
     
+    this._tabHeader.html("Undo/Redo " + this._data.past.length);
+    
     this._div
         .empty()
         .unbind()
         .html(
-            '<h3>Undo/Redo History</h3>' +
-            '<div class="history-panel-body-collapsed" bind="bodyCollapsedDiv">' +
-                '<a href="javascript:{}" bind="expandLink"></a>' +
-            '</div>' +
             '<div class="history-panel-body" bind="bodyDiv">' +
                 '<div class="history-past" bind="pastDiv"></div>' +
                 '<div class="history-now" bind="nowDiv">done upto here</div>' +
                 '<div class="history-future" bind="futureDiv"></div>' +
             '</div>' +
-            '<div class="history-panel-body-controls" bind="bodyControlsDiv"><a href="javascript:{}" bind="rollUpLink">roll up</a></div>' +
             '<div class="history-panel-footer">' +
                 '<a href="javascript:{}" bind="extractLink">extract</a> &bull; ' +
                 '<a href="javascript:{}" bind="applyLink">apply</a>' +
@@ -46,16 +44,6 @@ HistoryWidget.prototype._render = function() {
     
     var elmts = DOM.bind(this._div);
     
-    if (!this._data.past.length) {
-        if (!this._data.future.length) {
-            elmts.expandLink.text("No change");
-        } else {
-            elmts.expandLink.text(this._data.future.length === 1 ? "1 change to redo" : (this._data.future.length + " changes to redo"));
-        }
-    } else {
-        elmts.expandLink.text(this._data.past.length === 1 ? "1 change" : (this._data.past.length + " changes done"));
-    }
-    
     var renderEntry = function(container, entry, lastDoneID, title) {
         var a = $('<a href="javascript:{}"></a>').appendTo(container);
         a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
@@ -84,17 +72,6 @@ HistoryWidget.prototype._render = function() {
     
     elmts.extractLink.click(function() { self._extractOperations(); });
     elmts.applyLink.click(function() { self._showApplyOperationsDialog(); });
-    elmts.expandLink.click(function() {
-        elmts.bodyCollapsedDiv.hide();
-        elmts.bodyDiv.show();
-        elmts.bodyControlsDiv.show();
-    });
-    elmts.rollUpLink.click(function(evt) {
-        elmts.bodyCollapsedDiv.show();
-        elmts.bodyDiv.hide();
-        elmts.bodyControlsDiv.hide();
-    });
-    
     elmts.bodyDiv[0].scrollTop = elmts.nowDiv[0].offsetTop + elmts.nowDiv[0].offsetHeight - elmts.bodyDiv[0].offsetHeight;
 };
 

src/main/webapp/styles/project.css

@@ -45,9 +45,20 @@ body {
     background: white;
     overflow: hidden;
 }
-
+.left-panel {
-.facet-panel {
     position: fixed;
     background: white;
+    overflow: visible;
+    padding: 0px;
+}
+.left-panel .ui-tabs .ui-tabs-panel {
+    margin: 5px;
+    padding: 0px;
+}
+
+.facet-panel {
+    overflow: auto;
+}
+.history-panel {
     overflow: auto;
 }

src/main/webapp/styles/project/browsing.css

@@ -1,6 +1,4 @@
 .browsing-panel-header {
-    margin: 0 1em;
-    margin-top: 50px;
     height: 5em;
     text-align: center;
 }
@@ -13,7 +11,8 @@
 }
 
 ul.facets-container {
-    padding: 0 1em;
+    padding: 0;
+    padding-right: 5px;
 }
 
 li.facet-container {
@@ -21,21 +20,22 @@ li.facet-container {
     clear: both;
     margin: 0;
     padding: 0;
-    margin-top: 1em;
+    margin-top: 10px;
     background: white;
+    border: 1px solid #ccc;
+    border-bottom-left-radius: 5px 5px;
+    border-bottom-right-radius: 5px 5px;
+    border-top-left-radius: 5px 5px;
+    border-top-right-radius: 5px 5px;
 }
 
 .facet-title {
-    border: 1px solid #ccc;
-    border-bottom: 0px;
     padding: 3px 5px;
     padding-right: 2px;
-    background: #eee;
     font-weight: bold;
     cursor: move;
 }
 .facet-body {
-    border: 1px solid #ccc;
     padding: 1px;
 }
 .facet-body-message {
@@ -115,7 +115,6 @@ img.facet-choice-link {
 }
 
 .facet-range-body {
-    border: 1px solid #ccc;
     padding: 15px;
 }
 .facet-range-message {

src/main/webapp/styles/widgets/history.css

@@ -1,32 +1,4 @@
-.history-panel {
-    position: absolute;
-    top: -1px;
-    right: 20px;
-    width: 300px;
-    z-index: 10;
-}
-.history-panel h3 {
-    margin: 0;
-    padding: 3px;
-    background: #aaa;
-    color: #fff;
-    border-bottom: 1px solid #b8b8b8;
-    font-size: 100%;
-    text-align: center;
-    border: 1px solid #666;
-}
-
-.history-panel-body-collapsed {
-    border-left: 1px solid #888;
-    border-right: 1px solid #888;
-    background: #eee;
-    padding: 0.5em;
-    text-align: center;
-}
 .history-panel-body {
-    display: none;
-    border-left: 1px solid #888;
-    border-right: 1px solid #888;
     background: #fff;
     height: 400px;
     overflow: auto;