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
This commit is contained in:
David Huynh 2010-04-12 23:48:48 +00:00
parent 8b95248c75
commit 7391f760db
5 changed files with 62 additions and 78 deletions

View File

@ -16,22 +16,27 @@ function resize() {
ui.menuBarContainer.css("top", header.outerHeight() + "px"); ui.menuBarContainer.css("top", header.outerHeight() + "px");
var facetPanelWidth = 250; var leftPanelWidth = 300;
var leftPanelMargin = 5;
var width = $(window).width(); var width = $(window).width();
var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight(); var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
var height = footer.offset().top - top; var height = footer.offset().top - top;
ui.viewPanel ui.viewPanel
.css("top", top + "px") .css("top", top + "px")
.css("left", leftPanelWidth + "px")
.css("height", height + "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; var processPanelWidth = 400;
ui.processPanel ui.processPanel
@ -39,8 +44,18 @@ function resize() {
.css("left", Math.floor((width - processPanelWidth) / 2) + "px"); .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() { function resizeAll() {
resize(); resize();
resizeTabs();
ui.menuBar.resize(); ui.menuBar.resize();
ui.browsingEngine.resize(); ui.browsingEngine.resize();
@ -66,9 +81,17 @@ function initializeUI(uiState) {
var body = $("#body").empty().html( var body = $("#body").empty().html(
'<div bind="viewPanel" class="view-panel"></div>' + '<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="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>' '<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
); );
ui = DOM.bind(body); ui = DOM.bind(body);
@ -76,11 +99,13 @@ function initializeUI(uiState) {
ui.menuBarContainer.css("top", $("#header").outerHeight() + "px"); ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
ui.leftPanelTabs.tabs();
resize(); resize();
resizeTabs();
ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []); ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
ui.processWidget = new ProcessWidget(ui.processPanel); 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); ui.dataTableView = new DataTableView(ui.viewPanel);
$(window).bind("resize", resizeAll); $(window).bind("resize", resizeAll);

View File

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

View File

@ -45,9 +45,20 @@ body {
background: white; background: white;
overflow: hidden; overflow: hidden;
} }
.left-panel {
.facet-panel {
position: fixed; position: fixed;
background: white; 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; overflow: auto;
} }

View File

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

View File

@ -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 { .history-panel-body {
display: none;
border-left: 1px solid #888;
border-right: 1px solid #888;
background: #fff; background: #fff;
height: 400px; height: 400px;
overflow: auto; overflow: auto;