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
parent
8b95248c75
commit
7391f760db
@ -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 - facetPanelWidth) + "px");
|
||||
.css("width", (width - leftPanelWidth) + "px");
|
||||
|
||||
ui.facetPanel
|
||||
.css("top", top + "px")
|
||||
.css("height", height + "px")
|
||||
.css("left", (width - facetPanelWidth) + "px")
|
||||
.css("width", facetPanelWidth + "px");
|
||||
ui.leftPanel
|
||||
.css("top", (top + leftPanelMargin) + "px")
|
||||
.css("left", leftPanelMargin + "px")
|
||||
.css("height", (height - 2 * leftPanelMargin) + "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);
|
||||
|
||||
@ -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> • ' +
|
||||
'<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;
|
||||
};
|
||||
|
||||
|
||||
@ -45,9 +45,20 @@ body {
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.facet-panel {
|
||||
.left-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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user