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:
parent
8b95248c75
commit
7391f760db
@ -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);
|
||||||
|
@ -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> • ' +
|
'<a href="javascript:{}" bind="extractLink">extract</a> • ' +
|
||||||
'<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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user