s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved/simplified notifications, improved undo/redo

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1609 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-19 05:46:48 +00:00
parent b10614579c
commit 19878490f1
16 changed files with 214 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main/webapp/modules/core/index.vt
View File

@ -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">

2
main/webapp/modules/core/project.vt
View File

@ -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>

12
main/webapp/modules/core/scripts/index.js
View File

@ -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);

1
main/webapp/modules/core/scripts/project.js
View File

@ -68,6 +68,7 @@ function resizeAll() {
function initializeUI(uiState) {
$("#loading-message").hide();
$("#notification-container").hide();
$("#project-title").show();
$("#project-controls").show();
$("#body").show();

11
main/webapp/modules/core/scripts/project/history-panel.html
View File

@ -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 &raquo;</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&hellip;</a><a class="button button-pill-right" href="javascript:{}" bind="applyLink">Apply&hellip;</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">

72
main/webapp/modules/core/scripts/project/process-panel.js
View File

@ -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) {

4
main/webapp/modules/core/scripts/util/dialog.js
View File

@ -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);

47
main/webapp/modules/core/styles/common.less
View File

@ -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;
}
@ -237,6 +271,7 @@ input.inline {

25
main/webapp/modules/core/styles/index.less
View File

@ -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;
}
@ -128,16 +131,4 @@
position: absolute;
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);
}

2
main/webapp/modules/core/styles/jquery-ui-overrides.less
View File

@ -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;
}

2
main/webapp/modules/core/styles/project.less
View File

@ -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;

5
main/webapp/modules/core/styles/project/process.less
View File

@ -28,8 +28,3 @@
padding: 10px;
}
.process-panel-undo {
max-height: 50px;
overflow: auto;
padding: 10px;
}

170
main/webapp/modules/core/styles/project/sidebar.less
View File

@ -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;

17
main/webapp/modules/core/styles/theme.less
View File

@ -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;
@ -30,7 +28,7 @@
-webkit-border-radius: @radius;
border-radius: @radius;
}
.sharp_corners_left () {
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
@ -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;
}

55
main/webapp/modules/core/styles/util/dialog.less
View File

@ -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();
}

4
main/webapp/modules/core/styles/views/data-table-view.less
View File

@ -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%;
}