improved/simplified notifications, improved undo/redo
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1609 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home
parent
b10614579c
commit
19878490f1
@ -18,7 +18,7 @@
|
||||
<div id="project-open">
|
||||
<h1>Open a Project</h1>
|
||||
<div id="projects-container"></div>
|
||||
<div class="content-block-footer"><a href="javascript:openWorkspaceDir()">Browse Workspace Directory</a></div>
|
||||
<div class="content-block-footer"><a href="javascript:openWorkspaceDir()" class="secondary">Browse workspace directory</a></div>
|
||||
</div>
|
||||
<div id="project-create">
|
||||
<form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/core/create-project-from-upload" accept-charset="UTF-8">
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
<div bind="viewPanelDiv" id="view-panel"></div>
|
||||
</div>
|
||||
<div bind="processPanelDiv" id="process-panel"></div>
|
||||
<div bind="processPanelDiv" id="notification-container"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -227,14 +227,16 @@ function showVersion() {
|
||||
var poll = function() {
|
||||
if ("releases" in window) {
|
||||
if (isThereNewRelease()) {
|
||||
var div = $('<div id="version-message">')
|
||||
.text('New version "' + releases.releases[0].description + '" ')
|
||||
var container = $('<div id="notification-container">')
|
||||
.appendTo(document.body)
|
||||
|
||||
var notification = $('<div id="notification">')
|
||||
.text('New version! ')
|
||||
.appendTo(container)
|
||||
$('<a>')
|
||||
.addClass('notification-action')
|
||||
.attr("href", releases.homepage)
|
||||
.text("available for download here")
|
||||
.appendTo(div);
|
||||
.text('Download ' + releases.releases[0].description + ' now.')
|
||||
.appendTo(notification);
|
||||
}
|
||||
} else {
|
||||
window.setTimeout(poll, 1000);
|
||||
|
||||
@ -68,6 +68,7 @@ function resizeAll() {
|
||||
|
||||
function initializeUI(uiState) {
|
||||
$("#loading-message").hide();
|
||||
$("#notification-container").hide();
|
||||
$("#project-title").show();
|
||||
$("#project-controls").show();
|
||||
$("#body").show();
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<div class="history-panel-controls" bind="controlsDiv">
|
||||
<a class="button" href="javascript:{}" bind="extractLink">extract...</a>
|
||||
<a class="button" href="javascript:{}" bind="applyLink">apply...</a>
|
||||
</div>
|
||||
<div class="history-panel-help" bind="helpDiv">
|
||||
<h1>Infinite undo history</h1>
|
||||
<p>Don't worry about making mistakes. Every change you make will be shown here, and you can undo your changes anytime.</p>
|
||||
<p><a href="http://code.google.com/p/google-refine/wiki/GettingStarted?tm=6" target="_blank"><b>Learn more »</b></a></p>
|
||||
</div>
|
||||
<div class="history-panel-body-controls" bind="bodyControlsDiv">Quick filter:
|
||||
<input bind="filterInput" />
|
||||
<div class="history-panel-controls" bind="controlsDiv">
|
||||
<a class="button button-pill-left" href="javascript:{}" bind="extractLink">Extract…</a><a class="button button-pill-right" href="javascript:{}" bind="applyLink">Apply…</a>
|
||||
</div>
|
||||
<div class="history-panel-filter" bind="bodyControlsDiv">
|
||||
Filter: <input type="text" size="30" bind="filterInput" />
|
||||
</div>
|
||||
<div class="history-panel-body" bind="bodyDiv">
|
||||
<div class="history-past" bind="pastDiv">
|
||||
|
||||
@ -58,16 +58,16 @@ ProcessPanel.prototype.showUndo = function(historyEntry) {
|
||||
|
||||
this._latestHistoryEntry = historyEntry;
|
||||
|
||||
this._div.stop(true,false).empty().html(
|
||||
'<div class="process-panel-inner"><div class="process-panel-undo">' +
|
||||
'<a href="javascript:{}" bind="undo">Undo</a> <span bind="description"></span>' +
|
||||
'</div><div style="text-align: right; padding-right: 1em;"><a href="javascript:{}" bind="close">close</a></div></div>'
|
||||
).slideDown(200).delay(5000).slideUp(150);
|
||||
this._div.stop(true,false)
|
||||
.empty()
|
||||
.html('<div id="notification"><span bind="description"></span> <span class="notification-action"><a href="javascript:{}" bind="undo">Undo</a></span></div>')
|
||||
.fadeIn(200)
|
||||
.delay(7500)
|
||||
.fadeOut(200);
|
||||
var elmts = DOM.bind(this._div);
|
||||
|
||||
elmts.description.text(historyEntry.description);
|
||||
elmts.undo.click(function() { self.undo(); });
|
||||
elmts.close.click(function() { $(".process-panel-inner").stop(true,false).slideUp(150); });
|
||||
};
|
||||
|
||||
ProcessPanel.prototype.undo = function() {
|
||||
@ -102,40 +102,34 @@ ProcessPanel.prototype._render = function(newData) {
|
||||
|
||||
if (!newData.processes.length) {
|
||||
Refine.setTitle();
|
||||
this._div.hide();
|
||||
this._div.fadeOut(200);
|
||||
} else {
|
||||
this._div.show();
|
||||
|
||||
var innerDiv = $('<div></div>').addClass("process-panel-inner").appendTo(this._div);
|
||||
|
||||
var headDiv = $('<div></div>').addClass("process-panel-head").appendTo(innerDiv);
|
||||
this._div.fadeIn(200);
|
||||
var cancelmessage = "Cancel"
|
||||
var noticeDiv = $('<div id="notification"></div>').appendTo(this._div);
|
||||
var descriptionSpan = $('<span></span>').appendTo(noticeDiv);
|
||||
var statusDiv = $('<div></div>').appendTo(noticeDiv);
|
||||
$('<img src="images/small-spinner.gif" />')
|
||||
.css("margin-right", "3px")
|
||||
.css("opacity", "0.3")
|
||||
.appendTo(headDiv);
|
||||
$('<a href="javascript:{}"></a>')
|
||||
.addClass("action")
|
||||
.text("cancel all")
|
||||
.click(function() {
|
||||
self._cancelAll();
|
||||
|
||||
$(this).text("canceling all processes...").unbind();
|
||||
})
|
||||
.appendTo(headDiv);
|
||||
|
||||
var bodyDiv = $('<div></div>').addClass("process-panel-body").appendTo(innerDiv);
|
||||
.addClass("notification-loader")
|
||||
.appendTo(statusDiv);
|
||||
var progressSpan = $('<span></span>').appendTo(statusDiv);
|
||||
var countSpan = $('<span></span>').appendTo(statusDiv);
|
||||
var renderProcess = function(process) {
|
||||
var div = $('<div></div>').addClass("process-panel-entry").appendTo(bodyDiv);
|
||||
|
||||
if (process.status == "pending") {
|
||||
div.text(process.description + " (pending)");
|
||||
} else {
|
||||
Refine.setTitle(process.progress + "%");
|
||||
div.text(process.description + " (" + process.progress + "%)");
|
||||
}
|
||||
if (process.status != "pending") {
|
||||
Refine.setTitle(process.progress + "% complete");
|
||||
descriptionSpan.text(process.description);
|
||||
progressSpan.text(process.progress + '% complete');
|
||||
}
|
||||
};
|
||||
var renderProcessCount = function(count) {
|
||||
var pendingcount = count - 1;
|
||||
countSpan.text(', ' + pendingcount + ' pending processes');
|
||||
};
|
||||
|
||||
var processes = newData.processes;
|
||||
if (processes.length >> 1) {
|
||||
cancelmessage = "Cancel All";
|
||||
renderProcessCount(processes.length);
|
||||
}
|
||||
for (var i = 0; i < processes.length; i++) {
|
||||
var process = processes[i];
|
||||
renderProcess(process);
|
||||
@ -143,6 +137,14 @@ ProcessPanel.prototype._render = function(newData) {
|
||||
newProcessMap[process.id] = process;
|
||||
}
|
||||
}
|
||||
$('<a href="javascript:{}"></a>')
|
||||
.addClass("notification-action")
|
||||
.text(cancelmessage)
|
||||
.click(function() {
|
||||
self._cancelAll();
|
||||
$(this).text("Canceling...").unbind();
|
||||
})
|
||||
.appendTo(statusDiv);
|
||||
}
|
||||
|
||||
if ((this._data) && this._data.processes.length > 0) {
|
||||
|
||||
@ -76,9 +76,9 @@ DialogSystem.createDialog = function() {
|
||||
|
||||
DialogSystem.showBusy = function(message) {
|
||||
var frame = DialogSystem.createDialog();
|
||||
frame.addClass("dialog-busy-frame");
|
||||
frame.addClass("dialog-busy");
|
||||
|
||||
var body = $('<div>').addClass("dialog-busy-body").appendTo(frame);
|
||||
var body = $('<div>').attr('id', 'loading-message').appendTo(frame);
|
||||
$('<img>').attr("src", "images/large-spinner.gif").appendTo(body);
|
||||
$('<span>').text(" " + (message || "Working...")).appendTo(body);
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ input[type=text] {
|
||||
font-family: inherit;
|
||||
border: #ccc 1px solid;
|
||||
border-top: #888 1px solid;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -54,7 +55,7 @@ a.selected {
|
||||
}
|
||||
|
||||
a.inaction {
|
||||
color: @chrome_primary;
|
||||
color: @light_grey;
|
||||
}
|
||||
|
||||
a.selected:hover, a.inaction:hover {
|
||||
@ -160,16 +161,48 @@ a img {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.list-table-itemname {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
text-align: center;
|
||||
font-size: 300%;
|
||||
color: @light_grey;
|
||||
padding: 4em;
|
||||
}
|
||||
text-align: center;
|
||||
font-size: 300%;
|
||||
color: @light_grey;
|
||||
padding: 3em .5em;
|
||||
}
|
||||
|
||||
#loading-message img {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
#notification-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#notification {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 5px 8px 4px;
|
||||
font-size: 1.3em;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
background: @notification_primary;
|
||||
.rounded_corners(2px);
|
||||
}
|
||||
|
||||
.notification-action {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.notification-loader {
|
||||
padding: 0 3px 0 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#header {
|
||||
@ -229,6 +262,7 @@ a img {
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input.inline {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -240,6 +274,7 @@ input.inline {
|
||||
|
||||
|
||||
|
||||
|
||||
div.grid-layout > table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
@ -37,10 +37,12 @@
|
||||
}
|
||||
|
||||
#projects-container {
|
||||
border-top: 1px solid @line_accent;
|
||||
border: 1px solid @chrome_primary;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
height: 400px;
|
||||
height: 378px;
|
||||
}
|
||||
|
||||
#projects-container .project .last-modified {
|
||||
@ -59,8 +61,9 @@
|
||||
}
|
||||
|
||||
.content-block-footer {
|
||||
padding: @padding_tighter;
|
||||
text-align: center;
|
||||
background: #f2f2f2;
|
||||
padding: @padding_tight;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#project-links {
|
||||
@ -90,7 +93,7 @@
|
||||
}
|
||||
|
||||
.project-create-basic {
|
||||
border-top: 1px solid @line_accent;
|
||||
border-top: 1px solid @chrome_primary;
|
||||
padding: @padding_loose;
|
||||
background: #fff;
|
||||
}
|
||||
@ -129,15 +132,3 @@
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#version-message {
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
padding: @padding_loose;
|
||||
left: 40%;
|
||||
width: 20%;
|
||||
background: @fill_primary;
|
||||
border: 1px solid @chrome_primary;
|
||||
|
||||
.rounded_corners_bottom(10px);
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
.ui-tabs .ui-tabs-nav .ui-state-active,
|
||||
.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active {
|
||||
border: 1px solid @line_accent;
|
||||
border: 1px solid @chrome_primary;
|
||||
border-bottom: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
padding: 0px;
|
||||
padding-top: @padding_tight;
|
||||
font-size: 1.3em;
|
||||
background: @fill_normal;
|
||||
background: @chrome_secondary;
|
||||
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
border-left: none;
|
||||
|
||||
@ -28,8 +28,3 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.process-panel-undo {
|
||||
max-height: 50px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
@ -60,104 +60,100 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@history_done_background: white;
|
||||
@history_undone_background: #f2f2ff; /* #a9e9fb; */
|
||||
@history_now_background: @chrome_primary;
|
||||
@history_entry_vpadding: 7px;
|
||||
@history_entry_hpadding: 5px;
|
||||
@history_done_background: #fff;
|
||||
@history_undone_background: @chrome_secondary;
|
||||
@history_entry_index_width: 30px;
|
||||
|
||||
.history-panel-controls {
|
||||
padding: @padding_normal;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.history-panel-message {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
padding: @padding_loose;
|
||||
}
|
||||
|
||||
.history-panel-body-controls {
|
||||
padding: @padding_tighter @padding_normal;
|
||||
|
||||
input {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.history-panel-body {
|
||||
background: @history_undone_background;
|
||||
overflow: auto;
|
||||
border-top: 1px solid @chrome_primary;
|
||||
}
|
||||
|
||||
.history-past {
|
||||
position: relative;
|
||||
background: @history_done_background;
|
||||
}
|
||||
.history-now {
|
||||
background: @history_now_background;
|
||||
}
|
||||
.history-future {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.history-highlight {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.history-past .history-highlight {
|
||||
background: @history_undone_background;
|
||||
bottom: 0px;
|
||||
}
|
||||
.history-future .history-highlight {
|
||||
background: @history_done_background;
|
||||
top: 0px;
|
||||
}
|
||||
a.history-entry {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: @padding_normal;
|
||||
padding-left: @padding_normal + @history_entry_index_width;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
}
|
||||
|
||||
.history-entry-index {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: @history_entry_index_width;
|
||||
text-align: right;
|
||||
font-size: 80%;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: @history_entry_index_width;
|
||||
text-align: right;
|
||||
font-size: 80%;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
|
||||
a.history-entry {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: @history_entry_vpadding @history_entry_hpadding;
|
||||
padding-left: @history_entry_hpadding + @history_entry_index_width;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border-top: 1px dotted #ddd;
|
||||
}
|
||||
a.history-entry.filtered-out {
|
||||
height: 1px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
height: 1px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
a.history-entry.filtered-out > * {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-panel-controls {
|
||||
padding: @padding_normal;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.history-panel-filter {
|
||||
padding: @padding_tighter @padding_normal;
|
||||
background: @chrome_secondary;
|
||||
border: 1px solid @chrome_primary;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.history-panel-body {
|
||||
background: @history_undone_background;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.history-past {
|
||||
position: relative;
|
||||
background: @history_done_background;
|
||||
}
|
||||
|
||||
.history-now {
|
||||
background: @selected_primary;
|
||||
}
|
||||
|
||||
.history-future {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.history-highlight {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-past .history-highlight {
|
||||
background: @history_undone_background;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.history-future .history-highlight {
|
||||
background: @history_done_background;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.history-future a.history-entry, .history-future a.history-entry-index {
|
||||
color: @light_grey;
|
||||
}
|
||||
color: @light_grey;
|
||||
}
|
||||
|
||||
.history-now a.history-entry, .history-now a.history-entry-index {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.history-past a.history-entry:hover, .history-future a.history-entry:hover {
|
||||
border-bottom: 2px solid @history_now_background;
|
||||
}
|
||||
border-bottom: 1px solid @selected_primary;
|
||||
}
|
||||
|
||||
|
||||
.extract-operation-dialog-entries {
|
||||
height: 400px;
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
@fill_normal: #e3e9ff;
|
||||
@fill_accent: #bbccff;
|
||||
@line_accent: #bbccff;
|
||||
|
||||
@link_primary: #11c;
|
||||
@link_secondary: #4272db;
|
||||
@chrome_primary: #bcf;
|
||||
@chrome_secondary: #e3e9ff;
|
||||
@fill_primary: #ebeef8;
|
||||
@fill_secondary: #f2f2f2;
|
||||
@selected_primary: #68e;
|
||||
@green_primary: #282;
|
||||
@green_secondary: #3d3;
|
||||
@notification_primary: #fe8;
|
||||
@faint_grey: #ddd;
|
||||
@light_grey: #999;
|
||||
@metadata_grey: #777;
|
||||
@ -48,12 +46,3 @@
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.rounded_corners_bottom (@radius: 10px) {
|
||||
-webkit-border-bottom-left-radius: @radius;
|
||||
-webkit-border-bottom-right-radius: @radius;
|
||||
-moz-border-radius-bottomleft: @radius;
|
||||
-moz-border-radius-bottomright: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
}
|
||||
@ -18,51 +18,38 @@
|
||||
}
|
||||
|
||||
.dialog-frame {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
background: white;
|
||||
border: 1px solid @dialog_frame;
|
||||
}
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
background: white;
|
||||
border: 1px solid @dialog_frame;
|
||||
}
|
||||
|
||||
.dialog-border {
|
||||
border: 4px solid @dialog_border;
|
||||
}
|
||||
border: 4px solid @dialog_border;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: @dialog_header;
|
||||
padding: @padding_loose;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
color: #000;
|
||||
cursor: move;
|
||||
}
|
||||
background: @dialog_header;
|
||||
padding: @padding_loose;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
color: #000;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
font-size: 1.3em;
|
||||
padding: @padding_looser;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
font-size: 1.3em;
|
||||
background: @dialog_footer;
|
||||
padding: @padding_loose;
|
||||
}
|
||||
|
||||
.dialog-footer button {
|
||||
}
|
||||
|
||||
.dialog-busy-frame {
|
||||
width: 300px;
|
||||
border: none;
|
||||
padding: @padding_loose;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
}
|
||||
.dialog-busy-body {
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-busy {
|
||||
width: 400px;
|
||||
border: none;
|
||||
.rounded_corners();
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.data-table-container {
|
||||
border-top: 1px solid @line_accent;
|
||||
border-top: 1px solid @chrome_primary;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@ a.column-header-menu:hover {
|
||||
height: 4px;
|
||||
max-height: 4px;
|
||||
background: #ddd;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user