An attempt to redesign the index page.
git-svn-id: http://google-refine.googlecode.com/svn/trunk@500 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh
parent
3a780b9a2d
commit
6bb9fde037
BIN
src/graphics/icon/gridworks-watermark.psd
Normal file
BIN
src/graphics/icon/gridworks-watermark.psd
Normal file
Binary file not shown.
BIN
src/main/webapp/images/gridworks-watermark.png
Normal file
BIN
src/main/webapp/images/gridworks-watermark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -58,26 +58,37 @@ function renderProjects(data) {
|
||||
projects.push(project);
|
||||
}
|
||||
}
|
||||
projects.sort(function(a, b) { return b.date.getTime() - a.date.getTime(); });
|
||||
|
||||
var container = $("#projects-container").empty();
|
||||
if (!projects.length) {
|
||||
$('#body-empty').show();
|
||||
$('#create-project-panel').remove().appendTo($('#body-empty-create-project-panel-container'));
|
||||
$('<div>')
|
||||
.addClass("message")
|
||||
.text("No existing project. Use form on left to create.")
|
||||
.appendTo(container);
|
||||
} else {
|
||||
$('#body-nonempty').show();
|
||||
$('#create-project-panel').remove().appendTo($('#body-nonempty-create-project-panel-container'));
|
||||
|
||||
projects.sort(function(a, b) { return b.date.getTime() - a.date.getTime(); });
|
||||
if (projects.length > 10) {
|
||||
$('#body-nonempty-logo-container').css("vertical-align", "top");
|
||||
$('#body-nonempty-create-project-panel-container').css("vertical-align", "top");
|
||||
}
|
||||
|
||||
var container = $("#projects").empty().show();
|
||||
$('<h1>').text("Projects").appendTo(container);
|
||||
var table = $(
|
||||
'<table><tr>' +
|
||||
'<th>Project Name</th>' +
|
||||
'<th>Last Modified</th>' +
|
||||
'<th></th>' +
|
||||
'</tr></table>'
|
||||
).appendTo(container)[0];
|
||||
|
||||
var renderProject = function(project) {
|
||||
var div = $('<div>').addClass("project").appendTo(container);
|
||||
|
||||
var tr = table.insertRow(table.rows.length);
|
||||
tr.className = "project " + (table.rows.length % 2 ? "even" : "odd");
|
||||
|
||||
$('<a></a>')
|
||||
.text(project.name)
|
||||
.attr("href", "/project.html?project=" + project.id)
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
$('<span></span>')
|
||||
.text(formatDate(project.date))
|
||||
.addClass("last-modified")
|
||||
.appendTo(tr.insertCell(tr.cells.length));
|
||||
|
||||
$('<a></a>')
|
||||
.addClass("delete-project")
|
||||
.attr("title","Delete this project")
|
||||
@ -92,35 +103,41 @@ function renderProjects(data) {
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
if (data && typeof data.code != 'undefined' && data.code == "ok") {
|
||||
window.location.reload();
|
||||
fetchProjects();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return false;
|
||||
}).appendTo(div);
|
||||
|
||||
$('<a></a>').text(project.name).attr("href", "/project.html?project=" + project.id).appendTo(div);
|
||||
$('<span></span>').text(formatDate(project.date)).addClass("last-modified").appendTo(div);
|
||||
}).appendTo(tr.insertCell(tr.cells.length));
|
||||
};
|
||||
|
||||
|
||||
for (var i = 0; i < projects.length; i++) {
|
||||
renderProject(projects[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
function fetchProjects() {
|
||||
$.getJSON(
|
||||
"/command/get-all-project-metadata",
|
||||
null,
|
||||
function(data) {
|
||||
renderProjects(data);
|
||||
$("#upload-file-button").click(onClickUploadFileButton);
|
||||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
fetchProjects();
|
||||
|
||||
$("#form-tabs").tabs();
|
||||
$("#upload-file-button").click(onClickUploadFileButton);
|
||||
|
||||
$("#gridworks-version").text(
|
||||
GridworksVersion.version + "-" + GridworksVersion.revision
|
||||
);
|
||||
if (isThereNewRelease()) {
|
||||
$('<div id="version-message">' +
|
||||
'New version "' + GridworksReleases.releases[0].description + '" <a href="' + GridworksReleases.homepage + '">available for download here</a>.' +
|
||||
|
||||
@ -85,7 +85,7 @@ function initializeUI(uiState) {
|
||||
'<div bind="viewPanel" class="view-panel"></div>' +
|
||||
'<div bind="processPanel" class="process-panel"></div>' +
|
||||
'<div bind="leftPanel" class="left-panel">' +
|
||||
'<div bind="leftPanelTabs">' +
|
||||
'<div bind="leftPanelTabs" class="gridworks-tabs">' +
|
||||
'<ul>' +
|
||||
'<li><a href="#gridworks-tabs-facets">Facet/Filter</a></li>' +
|
||||
'<li><a href="#gridworks-tabs-history" bind="historyTabHeader">Undo/Redo</a></li>' +
|
||||
|
||||
@ -7,7 +7,6 @@ body {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
table {
|
||||
@ -21,14 +20,14 @@ tr, td {
|
||||
div.grid-layout > table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
div.grid-layout.layout-full table {
|
||||
div.grid-layout.layout-full > table {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
div.grid-layout > table > tbody > tr > th, div.grid-layout > table > tbody > tr > td {
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
div.grid-layout.layout-normal {
|
||||
margin: -10px;
|
||||
@ -92,12 +91,14 @@ div.input-container > input, div.input-container > textarea {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a.action {
|
||||
a.action,
|
||||
a.quiet-link {
|
||||
margin: 0 3px;
|
||||
text-decoration: none;
|
||||
color: #448;
|
||||
}
|
||||
a.action:hover {
|
||||
a.action:hover,
|
||||
a.quiet-link:hover {
|
||||
color: #88f;
|
||||
}
|
||||
|
||||
@ -201,6 +202,5 @@ img {
|
||||
}
|
||||
|
||||
#body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
@ -1,80 +1,80 @@
|
||||
#body-empty, #body-nonempty {
|
||||
display: none;
|
||||
#body {
|
||||
padding: 50px;
|
||||
background: url("/images/gridworks-watermark.png") no-repeat -70px -70px;
|
||||
}
|
||||
#body > div.grid-layout > table > tbody > tr > th,
|
||||
#body > div.grid-layout > table > tbody > tr > td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#body-template {
|
||||
display: none;
|
||||
#top-panel {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#body-empty, #body-nonempty {
|
||||
width: 800px;
|
||||
padding: 100px 0;
|
||||
margin: auto;
|
||||
#top-panel h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
#body-empty > table, #body-nonempty > table {
|
||||
width: 100%;
|
||||
border-collapse: collapse:
|
||||
}
|
||||
#body-empty > table > tbody > tr > td, #body-nonempty > table > tbody > tr > td {
|
||||
padding: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#body-empty-logo-container, #body-nonempty-logo-container {
|
||||
width: 1%;
|
||||
white-space: pre;
|
||||
font-size: 400%;
|
||||
}
|
||||
#body-empty-create-project-panel-container, #body-nonempty-create-project-panel-container {
|
||||
border-left: 3px solid #eee;
|
||||
}
|
||||
|
||||
#body-nonempty {
|
||||
width: 1000px;
|
||||
}
|
||||
#body-nonempty-logo-container {
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
#body-nonempty-projects-container {
|
||||
border-left: 3px solid #eee;
|
||||
#gridworks-info {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#create-project-panel h1 {
|
||||
font-size: 120%;
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
|
||||
table.import-project-panel-layout {
|
||||
white-space: pre;
|
||||
#projects-panel {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#projects {
|
||||
white-space: pre;
|
||||
background: #DBE8EB;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
padding: 15px;
|
||||
}
|
||||
#projects h1 {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0;
|
||||
font-size: 120%;
|
||||
color: #aaa
|
||||
}
|
||||
#projects a {
|
||||
|
||||
#projects-container {
|
||||
border: 1px solid #C5D1D4;
|
||||
background: white;
|
||||
padding: 1px;
|
||||
height: 30em;
|
||||
overflow: auto;
|
||||
}
|
||||
#projects-container .message {
|
||||
padding: 15px;
|
||||
color: #aaa;
|
||||
font-size: 150%;
|
||||
}
|
||||
#projects-container table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
#projects-container td, #projects-container th {
|
||||
padding: 5px;
|
||||
border-right: 1px solid white;
|
||||
text-align: left;
|
||||
}
|
||||
#projects-container th {
|
||||
background: #C5D1D4;
|
||||
}
|
||||
#projects-container tr.project.even {
|
||||
background: #DBE8EB;
|
||||
}
|
||||
.project a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #004;
|
||||
}
|
||||
#projects a:hover {
|
||||
.project a:hover {
|
||||
text-decoration: underline;
|
||||
color: #008;
|
||||
}
|
||||
.project {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.delete-project {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.last-modified {
|
||||
margin: 0 0.25em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#version-message {
|
||||
padding: 20px;
|
||||
|
||||
60
src/main/webapp/styles/jquery-ui-overrides.css
Normal file
60
src/main/webapp/styles/jquery-ui-overrides.css
Normal file
@ -0,0 +1,60 @@
|
||||
.gridworks-tabs.ui-tabs {
|
||||
padding: 0;
|
||||
}
|
||||
.gridworks-tabs.ui-corner-all {
|
||||
}
|
||||
.gridworks-tabs.ui-widget-content {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav {
|
||||
padding: 0;
|
||||
}
|
||||
.gridworks-tabs.ui-tabs .ui-widget-header {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav li a {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav li a span.count {
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-default,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default {
|
||||
background: #C5D1D4;
|
||||
}
|
||||
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-default a,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:link,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-active,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active {
|
||||
background: #DBE8EB;
|
||||
border: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-active a,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:link,
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.gridworks-tabs.ui-tabs .ui-tabs-panel {
|
||||
margin: 0px;
|
||||
padding: 15px;
|
||||
border: 1px solid #DBE8EB;
|
||||
background: #DBE8EB;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius-topleft: 0px;
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
}
|
||||
@ -52,65 +52,12 @@ body {
|
||||
padding: 0px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.left-panel .ui-tabs {
|
||||
padding: 0;
|
||||
}
|
||||
.left-panel .ui-corner-all {
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
.left-panel .ui-widget-content {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
.left-panel .ui-tabs .ui-tabs-nav {
|
||||
padding: 0;
|
||||
}
|
||||
.left-panel .ui-tabs .ui-widget-header {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.left-panel .ui-tabs .ui-tabs-nav li a {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.left-panel .ui-tabs .ui-tabs-nav li a span.count {
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-default,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default {
|
||||
background: #C5D1D4;
|
||||
}
|
||||
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a:link,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-default a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-active,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active {
|
||||
background: #DBE8EB;
|
||||
border: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a:link,
|
||||
.left-panel .ui-tabs .ui-tabs-nav .ui-state-active a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.left-panel .ui-tabs .ui-tabs-panel {
|
||||
margin: 0px;
|
||||
.left-panel .gridworks-tabs.ui-tabs .ui-tabs-panel {
|
||||
padding: 7px;
|
||||
border: 1px solid #DBE8EB;
|
||||
background: #DBE8EB;
|
||||
-moz-border-radius-bottomleft: 7px;
|
||||
-webkit-border-bottom-left-radius: 7px;
|
||||
-moz-border-radius-topright: 0px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user