first round of UI improvements:

- new front page
- new header
- improved about and preference pages
- new project tabs and header
- new buttons
- new logos



git-svn-id: http://google-refine.googlecode.com/svn/trunk@1533 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-14 17:39:41 +00:00
parent 4ccdbc8716
commit d6015f783c
31 changed files with 737 additions and 964 deletions

View File

@ -152,7 +152,7 @@ function init() {
[ [
"externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css", "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
"styles/common.less", "styles/common.less",
"styles/freebase.less", "styles/pure.css",
"styles/index.less", "styles/index.less",
"styles/jquery-ui-overrides.less" "styles/jquery-ui-overrides.less"
] ]
@ -227,6 +227,7 @@ function init() {
"externals/imgareaselect/css/imgareaselect-default.css", "externals/imgareaselect/css/imgareaselect-default.css",
"styles/common.less", "styles/common.less",
"styles/pure.css",
"styles/jquery-ui-overrides.less", "styles/jquery-ui-overrides.less",
"styles/util/menu.less", "styles/util/menu.less",
@ -236,8 +237,6 @@ function init() {
"styles/project.less", "styles/project.less",
"styles/project/browsing.less", "styles/project/browsing.less",
"styles/project/process.less", "styles/project/process.less",
"styles/project/extension-bar.less",
"styles/project/summary-widget.less",
"styles/widgets/history.less", "styles/widgets/history.less",
"styles/widgets/histogram-widget.less", "styles/widgets/histogram-widget.less",
@ -274,10 +273,9 @@ function init() {
[ [
"externals/suggest/css/suggest-1.2.min.css", "externals/suggest/css/suggest-1.2.min.css",
"externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css", "externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
"styles/common.less", "styles/common.less",
"styles/pure.css",
"styles/jquery-ui-overrides.less", "styles/jquery-ui-overrides.less",
"styles/preferences.less"
] ]
); );
} }

View File

@ -1,92 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>About Google Refine</title> <title>About - Google Refine</title>
<link rel="icon" type="image/png" href="images/favicon.png"> <link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" href="/styles/common.less" /> <link rel="stylesheet" href="/styles/common.less" />
<link rel="stylesheet" href="/styles/index.less" />
<script type="text/javascript" src="scripts/version.js"></script> <script type="text/javascript" src="scripts/version.js"></script>
<script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
<script> <script>
$(function() { $(function() {
if (GoogleRefineVersion && GoogleRefineVersion.version) { if (GoogleRefineVersion && GoogleRefineVersion.version) {
if (GoogleRefineVersion.version != "$VERSION") { if (GoogleRefineVersion.version != "$VERSION") {
$("#version").text("Version " + GoogleRefineVersion.version + " [" + GoogleRefineVersion.revision + "]").show(); $("#version").text("Version " + GoogleRefineVersion.version + " [" + GoogleRefineVersion.revision + "]").show();
}
} }
else {
$("#version").text("Version <trunk>").show();
}
}
}); });
</script> </script>
<style> </head>
#body { <body>
margin: 0em;
padding: 40px;
}
h1 {
font-family: helvetica;
font-weight: normal;
letter-spacing: -0.04em;
}
h1 + h2 {
font-family: myriad pro, tahoma;
font-weight: normal;
position: relative;
bottom: 1em;
letter-spacing: 0.3em;
font-size: 130%;
margin: 0em;
padding: 0em;
color: #888;
}
#about p {
width: 40em;
}
.license {
font-family: monospace;
font-size: 12px;
white-space: pre;
border: 1px solid #ddd;
background: #eee;
padding: 20px;
width: 60em;
}
h2 {
margin-top: 2em;
color: #888;
}
ul.credit-entries {
margin: 0;
padding: 0;
}
ul.credit-entries li {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="header"> <div id="header">
<a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a> <a id="app-home-button" href="./"><img alt="Google Refine" src="images/logo-googlerefine-30.png" width="129" height="29" /></a>
<div id="path"><span class="app-path-section">About</span></div>
</div> </div>
<div id="body"> <div id="body-info">
<h1>About Google Refine</h1> <h1>About Google Refine</h1>
<h2 id="version" style="display: none"></h2> <h2 id="version" style="display: none"></h2>
<div id="about"> <p>
Google Refine is a power tool for working with messy data. Use it to improve data consistency, link it to data registries like Freebase, augment it with data from other sources, transform it into different formats for other tools to consume, and contribute it to back to the original sources. Google Refine is not a web service but a desktop app that runs on your own computer, so you can process sensitive data with privacy.
</p>
<p> <p>
Google Refine is a power tool that allows you to load data, Google Refine was originally developed as Gridworks by <a href="http://www.metaweb.com/">Metaweb, Inc.</a>. Metaweb was acquired by <a href="http://www.google.com/">Google</a> in July 2010.
understand it, clean it up, reconcile it internally, and augment it </p>
with data coming from Freebase and other web sources. All with the comfort and privacy of
your own computer.</p>
<p> <h2>Google Refine License</h2>
It was originally developed by <a href="http://www.metaweb.com/">Metaweb Technologies, Inc.</a>.
Metaweb was acquired by <a href="http://www.google.com/">Google, Inc.</a>, in July 2010.
</p>
<h2>License</h2>
<pre class="license">/* <pre class="license">/*
* Copyright (c) 2010, Google, Inc. All rights reserved. * Copyright (c) 2010, Google, Inc. All rights reserved.
@ -118,7 +68,7 @@
* *
*/</pre> */</pre>
<h2>Dependencies Licenses</h2> <h2>Dependencies Licenses</h2>
<pre class="license">Apache License 2.0 <pre class="license">Apache License 2.0
------------------ ------------------
@ -149,7 +99,6 @@ LGPL
licenses/marj4j.LICENSE.txt licenses/marj4j.LICENSE.txt
marc4j marc4j
BSD BSD
--- ---
@ -204,24 +153,23 @@ Flag icon
http://pixel-mixer.com/category/free-icons/ http://pixel-mixer.com/category/free-icons/
</pre> </pre>
<h2>Credits</h2> <h2>Credits</h2>
<ul class="credit-entries"> <ul>
<li><a href="http://www.freebase.com/view/en/david_francois_huynh">David Huynh</a></li> <li><a href="http://www.freebase.com/view/en/david_francois_huynh">David Huynh</a></li>
<li><a href="http://www.freebase.com/view/en/stefano_mazzocchi">Stefano Mazzocchi</a></li> <li><a href="http://www.freebase.com/view/en/stefano_mazzocchi">Stefano Mazzocchi</a></li>
<li><a href="http://www.freebase.com/view/en/vishal_talwar">Vishal Talwar</a></li> <li><a href="http://www.freebase.com/view/en/vishal_talwar">Vishal Talwar</a></li>
<li><a href="http://www.freebase.com/view/en/will_moffat">Will Moffat</a></li> <li><a href="http://www.freebase.com/view/en/will_moffat">Will Moffat</a></li>
<li><a href="http://www.freebase.com/view/en/jeff_fry">Jeff Fry</a></li> <li><a href="http://www.freebase.com/view/en/jeff_fry">Jeff Fry</a></li>
<li><a href="http://www.freebase.com/view/en/james_home">James Home</a></li> <li><a href="http://www.freebase.com/view/en/james_home">James Home</a></li>
<li><a href="http://www.freebase.com/view/m/046vz5k">Iain Sproat</a></li> <li><a href="http://www.freebase.com/view/m/046vz5k">Iain Sproat</a></li>
<li><a href="http://www.freebase.com/view/user/tfmorris">Tom Morris</a></li> <li><a href="http://www.freebase.com/view/user/tfmorris">Tom Morris</a></li>
<li><a href="http://www.freebase.com/view/user/heathercampbell">Heather Campbell</a></li> <li><a href="http://www.freebase.com/view/user/heathercampbell">Heather Campbell</a></li>
</ul> </ul>
<h2>Special Thanks</h2> <h2>Special Thanks</h2>
<ul class="credit-entries"> <ul>
<li><a href="http://www.paolociccarese.info/">Paolo Ciccarese</a></li> <li><a href="http://www.paolociccarese.info/">Paolo Ciccarese</a></li>
</ul> </ul>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,45 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Error - Google Refine</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" href="styles/common.less" />
<link rel="stylesheet" href="styles/error.less" />
<script type="text/javascript" src="externals/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/util/url.js"></script>
<script>
$(function() {
var params = URL.getParameters();
$("#message").text(params.msg.replace(/\+/g, ' '));
window.setTimeout(function() {
document.location.href = params.redirect;
}, 20000);
});
</script>
</head>
<body>
<div id="header">
<a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a>
<div id="path"><span class="app-path-section">Error</span></div>
</div>
<div id="body">
<h1>Oops, something went wrong!</h1>
<p id="message"></p>
<p>Redirecting you back to <a href="/">Google Refine' home page</a> in 20 seconds ...</p>
</div>
<div id="footer">
<a href="about.html">About Google Refine</a>
&bull;
&copy; 2010 <a href="http://www.google.com/">Google, Inc.</a>
</div>
</body>
</html>

View File

@ -1,25 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
<title>Error - Google Refine</title> <title>Error - Google Refine</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="stylesheet" href="/styles/common.less" /> <link rel="stylesheet" href="/styles/common.less" />
<link rel="stylesheet" href="/styles/error.less" /> </head>
</head> <body>
<body>
<div id="header"> <div id="header">
<a id="app-home-button" href="/"><img alt="Google Refine" src="/images/google-refine-home-button.png" /></a> <a id="app-home-button" href="/"><img alt="Google Refine" src="/images/logo-googlerefine-30.png" width="129" height="29" /></a>
<div id="path"><span class="app-path-section">Error</span></div>
</div> </div>
<div id="body-info">
<div id="body"> <h1>Something went wrong!</h1>
<h1>Oops, something went wrong!</h1> <h2>$message:</h2>
<p id="message">$message</p> <pre class="errorstack">$stack</pre>
<pre>$stack</pre>
</div> </div>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,125 +1,131 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!doctype html>
<html> <html lang="en">
<head> <head>
<title>Google Refine</title> <meta charset="utf-8">
<title>Google Refine</title>
<link rel="icon" type="image/png" href="images/favicon.png"> <link rel="icon" type="image/png" href="images/favicon.png">
$scriptInjection
$scriptInjection $styleInjection
$styleInjection
</head> </head>
<body> <body>
<div id="header"> <div id="container">
<span id="google-refine-version"></span> <div id="header-home">
<a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a> <img alt="Google Refine" src="images/logo-googlerefine-40.png" />
<div id="path">&nbsp;</div> <h1>A power tool for working with messy data.</h1>
</div> </div>
<div id="content-home">
<div id="body"> <div id="project-open">
<div class="grid-layout layout-loose"><table> <h1>Open a Project</h1>
<tr> <div id="projects-container"></div>
<td id="welcome-panel"> </div>
<h1>Welcome to Google Refine</h1> <div id="project-create">
<p>Google Refine is a power tool that allows you to load data, understand it, <form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/core/create-project-from-upload" accept-charset="UTF-8">
clean it up, reconcile it internally, augment it with data coming from <h1>Create a New Project</h1>
<a href="http://www.freebase.com/" class="quiet-link">Freebase</a>, and optionally <h2 id="project-toggle">
contribute your data to Freebase for others to use. <a class="secondary" href="javascript:showHide('file-upload-form', 'project-upload-form')">or Import an Existing Project</a>
</p> </h2>
<p><a href="about.html" class="quiet-link">Credits and Licenses &raquo;</a> <div class="project-create-basic">
</p> <table class="form-table">
</td> <tr>
<th><label for="project-file">Data file:</label></th>
<td id="projects-panel"> <td><input type="file" id="project-file-input" name="project-file" /></td>
<div class="island"> </tr>
<div id="projects" class="round-corners"> <tr>
<h1>Open a Project</h1> <th><label for="project-url">or data file URL:</label></th>
<div id="projects-container"></div> <td><input type="text" id="project-url-input" name="project-url" size="40" /></td>
</tr>
<tr>
<th><label for="project-name">Project name:</label></th>
<td><input type="text" size="25" id="project-name-input" name="project-name" /></td></tr>
<tr>
<td></td>
<td><input type="submit" value="Create Project" id="upload-file-button" class="button button-primary" /></td>
</tr>
</table>
</div>
<div class="project-create-advanced">
<h2>Advanced Options</h2>
<div class="project-create-option">
Limit load to:
<div class="project-create-suboption">
<input type="text" id="limit-input" name="limit" size="5" /> rows (blank for all)
</div> </div>
</div> </div>
</td> <div class="project-create-option">
Ignore:
<td id="forms"> <div class="project-create-suboption">
<div class="island"> <input type="text" id="ignore-input" name="ignore" size="5" value="0" /> initial non-blank lines
<form id="file-upload-form" method="post" enctype="multipart/form-data" action="/command/core/create-project-from-upload" accept-charset="UTF-8"> </div>
<div id="form-tabs-create-project" class="round-corners">
<a class="form-tab-link" href="javascript:showHide('file-upload-form', 'project-upload-form')">or Import an Existing Project</a>
<h1>Create a New Project</h1>
<div class="grid-layout layout-tight layout-full"><table>
<tr><td><span class="field-label">Data File</span>:</td>
<td><input type="file" id="project-file-input" name="project-file" /></td>
</tr>
<tr><td><span class="field-label">Or Data File URL</span>:</td>
<td><input id="project-url-input" name="project-url" size="50" /></td>
</tr>
<tr><td><span class="field-label">Project Name</span>:</td>
<td><input type="text" size="30" id="project-name-input" name="project-name" /></td></tr>
<tr><td></td>
<td><input type="submit" value="Create Project" id="upload-file-button" class="button-primary" /></td></tr>
</table></div>
</div>
<div id="form-create-project-more-options">
<h2>Advanced Options</h2>
<table><tr>
<td>
<div class="field-label">Limit load to:</div>
<div class="field-body"><input id="limit-input" name="limit" size="5" /> rows (blank for all)</div>
<div class="field-label">Ignore:</div>
<div class="field-body"><input id="ignore-input" name="ignore" size="5" value="0" /> initial non-blank lines</div>
<div class="field-label">Skip:</div>
<div class="field-body"><input id="skip-input" name="skip" size="5" value="0" /> initial data rows</div>
</td>
<td>
<div class="field-label">When parsing text files:</div>
<div class="field-group">
<div><input id="split-into-columns-input" type="checkbox" checked="true" name="split-into-columns" /> Split into columns</div>
<div>Column separator:
<input id="separator-input" name="separator" size="2" /></div>
<div class="field-hint">leave blank to guess comma or tab</div>
</div>
<div class="field-group">
<div><input id="guess-value-type-input" name="guess-value-type" type="checkbox" checked="true" /> Guess cells' value types</div>
<div class="field-hint">try to parse numbers, dates, etc.</div>
</div>
<div class="field-group">
<div>Header lines:
<input id="header-lines-input" name="header-lines" size="5" value="1" /></div>
<div class="field-hint">use 0 if there is no header line</div>
</div>
<div class="field-group">
<div><input id="ignore-quotes-input" name="ignore-quotes" type="checkbox" />Ignore Quotation Marks </div>
<div class="field-hint">Ignore quotation marks,<br/>using all newlines and separators</div>
</div>
</td>
</tr></table>
</div>
</form>
<form id="project-upload-form" method="post" enctype="multipart/form-data" action="/command/core/import-project" accept-charset="UTF-8" style="display:none;">
<div id="form-tabs-import-project" class="round-corners">
<a class="form-tab-link" href="javascript:showHide('project-upload-form', 'file-upload-form')">or Create a New Project</a>
<h1>Import an Existing Project</h1>
<p>Import an existing Google Refine .tar or .tar.gz file:</p>
<div class="grid-layout layout-tight"><table>
<tr><td class="field-label">Project File:</td><td><input type="file" id="project-tar-file-input" name="project-file" /></td></tr>
<tr><td class="field-label">Rename (optional):</td><td><input type="text" size="30" id="project-name-input" name="project-name" /></td></tr>
<tr><td></td><td><input type="submit" value="Import Project" id="import-project-button" class="button-primary" /></td></tr>
</table></div>
</div>
</form>
</div> </div>
</td> <div class="project-create-option">
</tr> Skip:
</table></div> <div class="project-create-suboption">
<input type="text" id="skip-input" name="ignore" size="5" value="0" /> initial data rows
</div>
</div>
<div id="project-create-parsetext">
<div class="project-create-option">
When parsing text files:
<div class="project-create-suboption">
<input id="split-into-columns-input" type="checkbox" checked="true" name="split-into-columns" />
Split into columns
</div>
<div class="project-create-suboption">
Column separator:
<input type="text" id="separator-input" name="separator" size="2" /><br />
(leave blank to auto-detect)
</div>
<div class="project-create-suboption">
<input type="checkbox" id="guess-value-type-input" name="guess-value-type" checked="true" />
Auto-detect value types<br />
(numbers, dates, etc)
</div>
<div class="project-create-suboption">
Header lines: <input type="text" id="header-lines-input" name="header-lines" size="5" value="1" /><br />
(use 0 if your data has no header)
</div>
<div class="project-create-suboption">
<input type="checkbox" id="ignore-quotes-input" name="ignore-quotes" />
Ignore quotation marks
</div>
</div>
</div>
</div>
</form>
<form id="project-upload-form" method="post" enctype="multipart/form-data" action="/command/core/import-project" accept-charset="UTF-8" style="display:none;">
<h1>Import an Existing Project</h1>
<h2 id="project-toggle">
<a class="secondary" href="javascript:showHide('project-upload-form', 'file-upload-form')">or Create a New Project</a>
</h2>
<div class="project-create-basic">
<p>Import an existing Google Refine .tar or .tar.gz project file:</p>
<table class="form-table">
<tr>
<th><label for="project-file">Project file:</label></th>
<td><input type="file" id="project-tar-file-input" name="project-file" /></td>
</tr>
<tr>
<th><label for="project-name">Project name (optional):</label></th>
<td><input type="text" size="25" id="project-name-input" name="project-name" /></td></tr>
<tr>
<td></td>
<td><input type="submit" value="Import Project" id="import-project-button" class="button button-primary" /></td>
</tr>
</table>
</div>
</form>
</div>
<div id="project-links">
<ul>
<li><a href="/about.html">About Google Refine</a></li>
<li><a href="https://code.google.com/p/google-refine/">Project Home Page</a></li>
<li><a href="http://vimeo.com/groups/gridworks/videos">Screencasts</a></li>
</ul>
<div id="google-refine-version"></div>
</div>
</div> </div>
</div>
</body> </body>
</html> </html>

View File

@ -1,24 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
<title>Google Refine - Preferences</title> <title>Preferences - Google Refine</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<script type="text/javascript" src="wirings.js"></script> <script type="text/javascript" src="wirings.js"></script>
$scriptInjection $scriptInjection
$styleInjection
<link rel="icon" type="image/png" href="images/favicon.png" />
$styleInjection
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a> <a id="app-home-button" href="./"><img alt="Google Refine" src="images/logo-googlerefine-30.png" width="129" height="29" /></a>
<div id="path"><span class="app-path-section">Preferences</span></div> </div>
</div>
<div id="body"> <div id="body-info">
<div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> <div id="loading-message"><img src="images/large-spinner.gif" /> Loading...</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,55 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
<title>Google Refine</title> <title>Google Refine</title>
<script type="text/javascript">var theProject = { id : $projectID };</script> <script type="text/javascript">var theProject = { id : $projectID };</script>
<script type="text/javascript" src="wirings.js"></script> <script type="text/javascript" src="wirings.js"></script>
<link rel="icon" type="image/png" href="images/favicon.png">
$scriptInjection $scriptInjection
<link rel="icon" type="image/png" href="images/favicon.png" />
$styleInjection $styleInjection
</head>
</head> <body>
<body>
<div id="header"> <div id="header">
<a id="app-home-button" href="./"><img alt="Google Refine" src="images/google-refine-home-button.png" /></a> <a id="app-home-button" href="./"><img alt="Google Refine" src="images/logo-googlerefine-30.png" width="129" height="29" /></a>
<div id="path"><table id="header-layout"><tr> <div id="project-title">
<td id="header-layout-left"> <span id="project-name-button" class="app-path-section" title="Click to rename project"></span>
<span id="project-name-button" class="app-path-section" title="Click to rename project"></span> <a id="project-permalink-button" href="javascript:{}" class="secondary">Permalink</a>
<a id="project-permalink-button" href="javascript:{}" class="permalink">Permalink</a></td> </div>
<td id="header-layout-right"> <div id="project-controls"><a class="button button-primary" bind="exportButton" id="export-button" href="#export">Export</a></div>
<a class="app-menu-button" bind="exportButton" id="export-button" href="#export">Export</a>
</td></tr>
</table></div>
</div> </div>
<div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> <div id="loading-message"><img src="images/large-spinner.gif" /> Starting up...</div>
<div id="body"> <div id="body">
<div bind="leftPanel" id="left-panel"> <div bind="leftPanel" id="left-panel">
<div bind="leftPanelTabs" class="refine-tabs"> <div bind="leftPanelTabs" class="refine-tabs">
<ul> <ul>
<li><a href="#refine-tabs-facets">Facet/Filter</a></li> <li><a href="#refine-tabs-facets">Facet / Filter</a></li>
<li><a href="#refine-tabs-history" bind="historyTabHeader">Undo/Redo</a></li> <li><a href="#refine-tabs-history" bind="historyTabHeader">Undo / Redo</a></li>
</ul> </ul>
<div id="refine-tabs-facets" bind="facetPanel" id="facet-panel"></div> <div id="refine-tabs-facets" bind="facetPanel" id="facet-panel"></div>
<div id="refine-tabs-history" bind="historyPanel" id="history-panel"></div> <div id="refine-tabs-history" bind="historyPanel" id="history-panel"></div>
</div> </div>
</div> </div>
<div bind="rightPanel" id="right-panel"> <div bind="rightPanel" id="right-panel">
<div bind="toolPanel" id="tool-panel"><table id="tool-panel-layout"><tr> <div bind="toolPanel" id="tool-panel">
<td id="summary-bar-container"><div bind="summaryBar" id="summary-bar"> <div bind="summaryBar" id="summary-bar">
<!-- row/record counts displayed here--> <!-- row/record counts -->
</div></td> </div>
<td id="extension-bar-container"><div bind="extensionBar" id="extension-bar">Extensions:&nbsp;<span bind="menuContainer" id="extension-bar-menu-container"></span>&nbsp;<a>Customize...</a></div></td> <div bind="extensionBar" id="extension-bar">
</tr></table></div> Extensions: <span bind="menuContainer" id="extension-bar-menu-container"></span> <a href="" class="secondary">Customize...</a>
</div>
</div>
<div bind="viewPanel" id="view-panel"></div> <div bind="viewPanel" id="view-panel"></div>
</div> </div>
<div bind="processPanel" id="process-panel"></div> <div bind="processPanel" id="process-panel"></div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -97,11 +97,11 @@ function renderProjects(data) {
if (!projects.length) { if (!projects.length) {
$('<div>') $('<div>')
.addClass("message") .addClass("message")
.text("No existing project. Use form on right to create.") .text("You don't have any projects yet. Create one now!")
.appendTo(container); .appendTo(container);
} else { } else {
var table = $( var table = $(
'<table><tr>' + '<table class="list-table"><tr>' +
'<th>Name</th>' + '<th>Name</th>' +
'<th></th>' + '<th></th>' +
'<th align="right">Last Modified</th>' + '<th align="right">Last Modified</th>' +
@ -114,6 +114,7 @@ function renderProjects(data) {
tr.className = "project"; tr.className = "project";
var nameLink = $('<a></a>') var nameLink = $('<a></a>')
.addClass("list-table-itemname")
.text(project.name) .text(project.name)
.attr("href", "/project?project=" + project.id) .attr("href", "/project?project=" + project.id)
.appendTo(tr.insertCell(tr.cells.length)); .appendTo(tr.insertCell(tr.cells.length));
@ -123,7 +124,7 @@ function renderProjects(data) {
.attr("href", "javascript:{}") .attr("href", "javascript:{}")
.css("visibility", "hidden") .css("visibility", "hidden")
.click(function() { .click(function() {
var name = window.prompt("Rename Project", project.name); var name = window.prompt("New project name:", project.name);
if (name == null) { if (name == null) {
return; return;
} }

View File

@ -12,11 +12,11 @@ function onLoad() {
$(onLoad); $(onLoad);
function populatePreferences(prefs) { function populatePreferences(prefs) {
var body = $("#body").empty(); var body = $("#body-info").empty();
$('<h1>').text("Preferences").appendTo(body); $('<h1>').text("Preferences").appendTo(body);
var table = $('<table>').addClass("preferences").html('<tr><th>Key</th><th>Value</th><td></td></tr>').appendTo(body)[0]; var table = $('<table>').addClass("list-table").addClass("preferences").html('<tr><th>Key</th><th>Value</th><th></th></tr>').appendTo(body)[0];
for (var k in prefs) { for (var k in prefs) {
var tr = table.insertRow(table.rows.length); var tr = table.insertRow(table.rows.length);
preferenceUIs.push(new PreferenceUI(tr, k, prefs[k])); preferenceUIs.push(new PreferenceUI(tr, k, prefs[k]));
@ -24,10 +24,12 @@ function populatePreferences(prefs) {
var trLast = table.insertRow(table.rows.length); var trLast = table.insertRow(table.rows.length);
var tdLast0 = trLast.insertCell(0); var tdLast0 = trLast.insertCell(0);
trLast.insertCell(1);
trLast.insertCell(2);
$('<button>').text("Add Preference").appendTo(tdLast0).click(function() { $('<button>').text("Add Preference").appendTo(tdLast0).click(function() {
var key = window.prompt("Preference Key"); var key = window.prompt("Preference key:");
if (key) { if (key) {
var value = window.prompt("Preference Value"); var value = window.prompt("Preference key value:");
if (value != null) { if (value != null) {
var tr = table.insertRow(table.rows.length - 1); var tr = table.insertRow(table.rows.length - 1);
preferenceUIs.push(new PreferenceUI(tr, key, value)); preferenceUIs.push(new PreferenceUI(tr, key, value));
@ -62,7 +64,7 @@ function PreferenceUI(tr, key, value) {
var td2 = tr.insertCell(2); var td2 = tr.insertCell(2);
$('<button>').text("Edit").appendTo(td2).click(function() { $('<button>').text("Edit").appendTo(td2).click(function() {
var newValue = window.prompt("Value of preference key " + key, value); var newValue = window.prompt("Change value of preference key " + key, value);
if (newValue != null) { if (newValue != null) {
$(td1).text(newValue); $(td1).text(newValue);
$.post( $.post(

View File

@ -70,7 +70,8 @@ function resizeAll() {
function initializeUI(uiState) { function initializeUI(uiState) {
$("#loading-message").hide(); $("#loading-message").hide();
$("#header-layout").show(); $("#project-title").show();
$("#project-controls").show();
$("#body").show(); $("#body").show();
$('#project-name-button').click(Refine._renameProject); $('#project-name-button').click(Refine._renameProject);
@ -139,7 +140,7 @@ Refine.reinitializeProjectData = function(f) {
}; };
Refine._renameProject = function() { Refine._renameProject = function() {
var name = window.prompt("Rename Project", theProject.metadata.name); var name = window.prompt("New project name:", theProject.metadata.name);
if (name == null) { if (name == null) {
return; return;
} }

View File

@ -37,7 +37,7 @@ ExtensionBar.prototype._initializeUI = function() {
ExtensionBar.prototype._createMenuButton = function(label, submenu) { ExtensionBar.prototype._createMenuButton = function(label, submenu) {
var self = this; var self = this;
var menuItem = $("<a>").addClass("app-menu-button").text(label); var menuItem = $("<a>").addClass("button").text(label);
menuItem.click(function(evt) { menuItem.click(function(evt) {
MenuSystem.createAndShowStandardMenu( MenuSystem.createAndShowStandardMenu(

View File

@ -11,10 +11,9 @@ SummaryWidget.prototype.updateResultCount = function() {
var summaryText; var summaryText;
var units = theProject.rowModel.mode == "row-based" ? "rows" : "records"; var units = theProject.rowModel.mode == "row-based" ? "rows" : "records";
if (theProject.rowModel.filtered == theProject.rowModel.total) { if (theProject.rowModel.filtered == theProject.rowModel.total) {
summaryText = '<span class="summaryWidget-rowCount">' + (theProject.rowModel.total) + ' ' + units + '</span>'; summaryText = (theProject.rowModel.total) + ' ' + units;
} else { } else {
summaryText = '<span class="summaryWidget-rowCount">' + summaryText = (theProject.rowModel.filtered) + ' matching ' + units + ' <span id="summary-total">(' + (theProject.rowModel.total) + ' total)</span>';
(theProject.rowModel.filtered) + ' matching ' + units + '</span>' + ' (' + (theProject.rowModel.total) + ' total)';
} }
$('<span>').html(summaryText).appendTo(this._div.empty()); $('<span>').html(summaryText).appendTo(this._div.empty());

View File

@ -33,19 +33,17 @@ DataTableView.prototype.render = function() {
var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0; var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
var html = $( var html = $(
'<table class="viewPanel-header">' + '<div id="viewPanel-header">' +
'<tr>' + '<div bind="rowRecordControls">Show as ' +
'<td bind="rowRecordControls">Show as ' + '<span bind="modeSelectors" class="viewPanel-browsingmodes">' +
'<span bind="modeSelectors" class="viewPanel-browsingModes">' + '<input type="radio" id="viewPanel-browsingMode-row-based" name="viewPanel-browsingMode" value="row-based" /><label for="viewPanel-browsingMode-row-based">rows</label>' +
'<input type="radio" id="viewPanel-browsingMode-row-based" name="viewPanel-browsingMode" value="row-based" /><label for="viewPanel-browsingMode-row-based">rows</label>' + '<input type="radio" id="viewPanel-browsingMode-record-based" name="viewPanel-browsingMode" value="record-based" /><label for="viewPanel-browsingMode-record-based">records</label>' +
'<input type="radio" id="viewPanel-browsingMode-record-based" name="viewPanel-browsingMode" value="record-based" /><label for="viewPanel-browsingMode-record-based">records</label>' + '</span>' +
'</span>' + '</div>' +
'</td>' + '<div bind="pageSizeControls"></div>' +
'<td bind="pageSizeControls"></td>' + '<div bind="sortingControls" align="center"></div>' +
'<td bind="sortingControls" align="center"></td>' + '<div bind="pagingControls" align="right"></div>' +
'<td bind="pagingControls" align="right"></td>' + '</div>' +
'</tr>' +
'</table>' +
'<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>' '<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
); );
var elmts = DOM.bind(html); var elmts = DOM.bind(html);
@ -79,7 +77,7 @@ DataTableView.prototype._renderSortingControls = function(sortingControls) {
$('<a href="javascript:{}"></a>') $('<a href="javascript:{}"></a>')
.addClass("action") .addClass("action")
.text("Sorted") .text("Sort")
.append($('<img>').attr("src", "/images/down-arrow.png")) .append($('<img>').attr("src", "/images/down-arrow.png"))
.appendTo(sortingControls) .appendTo(sortingControls)
.click(function() { .click(function() {

View File

@ -30,7 +30,7 @@ HistoryWidget.prototype.update = function(onDone) {
HistoryWidget.prototype._render = function() { HistoryWidget.prototype._render = function() {
var self = this; var self = this;
this._tabHeader.html('Undo/Redo <span class="count">' + this._data.past.length + '</span>'); this._tabHeader.html('Undo / Redo <span class="count">' + this._data.past.length + '</span>');
this._div this._div
.empty() .empty()

View File

@ -1,23 +1,230 @@
@import-less url("theme.less"); @import-less url("theme.less");
html { html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
font-size: 62.5%; article, aside, figure, footer, header, hgroup, nav, section { display: block; }
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; ul { list-style-position: inside; }
} a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: middle; }
body { body {
font-size: 11px; font-size: 62.5%;
margin: 0; font-family: Arial, sans-serif;
padding: 0; background: #fff;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
font-weight: bold;
} }
table { input[type=text] {
font-size: inherit; padding: @padding_tighter;
font-size: 1em;
font-family: inherit;
border: #ccc 1px solid;
border-top: #888 1px solid;
}
a {
color: @link_primary;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.secondary {
color: @link_secondary;
}
a img {
border: 0;
}
.button, a.button {
display: inline-block;
overflow: visible;
font-size: 1em;
line-height: 1.4;
color: #000;
text-decoration: none;
padding: 1px 6px;
border: 1px solid #bbb;
cursor: pointer;
background: #eee;
font-family: Arial, Helvetica, sans-serif;
.rounded_corners(3px);
}
.button:hover, a.button:hover {
border: 1px solid #666;
}
.button:active, a.button:active {
border: 1px solid #000;
}
.button-primary, a.button-primary {
font-weight: bold;
padding: 1px 15px;
}
.button-disabled {
color: #666;
border: 1px solid #ddd;
background: #f3f3f3;
cursor: default;
}
.button-disabled:hover {
color: #666;
border: 1px solid #ddd;
background: #f3f3f3;
cursor: default;
}
.form-table th, .form-table td {
vertical-align: top;
font-size: 1.3em;
padding: 2px;
}
.form-table th {
text-align: left;
padding-top: 8px;
font-weight: bold;
}
.list-table {
width: 100%;
}
.list-table th, .list-table td {
padding-top: @padding_tight;
text-align: left;
vertical-align: baseline;
padding: @padding_tight;
font-size: 1.1em;
color: @metadata_grey;
border-bottom: dotted 1px @faint_grey;
}
.list-table th {
font-weight: bold;
color: #444;
background: #f2f2f2;
}
.list-table-itemname {
font-size: 1.2em;
}
#loading-message {
text-align: center;
font-size: 300%;
color: @light_grey;
padding: 4em;
} }
tr, td { #loading-message img {
position: relative;
top: -4px;
}
#header {
height: 40px;
margin: 10px;
position: relative;
overflow: hidden;
}
#app-home-button {
position: absolute;
top: 0;
left: 0;
}
#body-info {
margin: 0 40px;
}
#body-info p {
font-size: 1.3em;
margin: 1.3em;
width: 50em;
line-height: 1.3;
}
#body-info h1 {
font-size: 3.0em;
font-weight: normal;
color: @metadata_grey;
}
#body-info h2 {
margin: 1.6em 0 .5em 0;
}
#body-info .license, #body-info .errorstack {
font-family: monospace;
font-size: 1.3em;
white-space: pre;
border: 1px solid #ddd;
background: #eee;
padding: @padding_looser;
width: 60em;
overflow: auto;
}
#body-info ul {
font-size: 1.3em;
margin: .5em 0 2em;
}
#body-info li {
margin: 0.4em;
}
input[type="checkbox"], input[type="radio"] {
vertical-align: baseline; vertical-align: baseline;
} }
input.inline {
vertical-align: middle;
}
a.action,
a.quiet-link {
text-decoration: none;
color: #448;
}
a.action {
margin: 0 3px;
}
a.action:hover,
a.quiet-link:hover {
color: #88f;
}
a.inaction {
margin: 0 3px;
text-decoration: none;
color: #ccc;
}
div.grid-layout > table { div.grid-layout > table {
border-collapse: separate; border-collapse: separate;
@ -79,12 +286,6 @@ div.grid-layout.layout-looser > table {
border-spacing: 20px; border-spacing: 20px;
} }
input[type="checkbox"], input[type="radio"] {
vertical-align: baseline;
}
input.inline {
vertical-align: middle;
}
div.input-container { div.input-container {
padding: 3px; padding: 3px;
@ -103,28 +304,6 @@ input.code, textarea.code {
font-family: monospace; font-family: monospace;
} }
a.action,
a.quiet-link {
text-decoration: none;
color: #448;
}
a.action {
margin: 0 3px;
}
a.action:hover,
a.quiet-link:hover {
color: #88f;
}
a.inaction {
margin: 0 3px;
text-decoration: none;
color: #ccc;
}
a img {
border: none;
}
img { img {
vertical-align: middle; vertical-align: middle;
@ -146,55 +325,3 @@ img {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
#header {
height: 40px;
position: relative;
overflow: hidden;
background: white;
padding-left: 125px;
}
#app-home-button {
position: absolute;
top: 50%;
margin-top: -16px;
left: 0px;
}
#path {
position: absolute;
height: 40px;
top: 50%;
margin-top: -0.5em;
left: 125px;
right: 10px;
line-height: 1em;
}
#path .app-path-section {
font-size: 150%;
margin: 0 0.5em;
padding: 0 0.5em;
}
#path a {
text-decoration: none;
}
#path a:hover {
text-decoration: underline;
}
#body {
}
a.app-menu-button, #path a.app-menu-button {
text-decoration: none;
font-weight: bold;
padding: 4px 8px;
color: black;
background: #eee;
border: 1px solid #aaa;
border-radius: 5px;
cursor: pointer;
}
a.app-menu-button:hover, #path a.app-menu-button:hover {
text-decoration: none;
background: #white;
}

View File

@ -1,5 +0,0 @@
@import-less url("theme.less");
#body {
padding: 5em;
}

View File

@ -1,93 +0,0 @@
@import-less url("theme.less");
/*
-----------------------------------------
Buttons
-----------------------------------------
*/
/*
Active button currently is used to for buttons which are the primary call to action.
This should be updated so that .active represents the state of a button, not it's
relative importance in a workflow. Suggested class name would be .primary, which
may or may not be .active
*/
button, a.button-link {
font-size: 1.2em;
line-height: 1.5;
background: #e6e6e6 url(/images/freebase-sprite-vertical.png) repeat-x 0 -3380px;
color: #666;
font-weight:bold;
margin: 2px;
padding: 3px 6px;
border: 1px solid #c5c5c5;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: inline-block;
overflow: visible;
cursor: pointer;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.button-primary,
input[type=submit].button-primary,
button.active {
color: #fff;
border: 1px solid #dc5800;
font-weight: bold;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: inline-block;
overflow: visible;
cursor: pointer;
margin: 2px;
padding: 3px 6px;
font-size: 1.2em;
line-height: 1.5;
background: #fa7c0a url(/images/freebase-sprite-vertical.png) repeat-x 0 -3450px;
}
button[disabled],
button.disabled,
button.primary.disabled,
a.button-link.disabled,
a.button-link-primary.disabled {
background: #e6e6e6 url(/images/freebase-sprite-vertical.png) repeat-x 0 -3380px;
color: #b3b3b3;
border: 1px solid #d6d6d6;
cursor: default;
}
button[disabled]:hover,
button.disabled:hover {
cursor: default;
border: 1px solid #d6d6d6;
}
a.button-link-primary {
font-size: 12px;
line-height: 1.5;
background: #fa7c0a url(/images/freebase-sprite-vertical.png) repeat-x 0 -3450px;
margin: 2px;
color: #fff;
padding: 3px 6px;
border: 1px solid #dc5800;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: inline-block;
overflow: visible;
cursor: pointer;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
button:hover,
.button-link:hover,
a.button-link-primary:hover {
border: 1px solid #61d7f7;
text-decoration: none;
}

View File

@ -1,178 +1,114 @@
body { @import-less url("theme.less");
background-color: #f4f7fa;
background-repeat: no-repeat;
background-position: left top;
}
#body {
padding: 40px;
}
#body > div.grid-layout > table > tbody > tr > th,
#body > div.grid-layout > table > tbody > tr > td {
vertical-align: top;
}
#google-refine-version { #container {
float: right; width: 980px;
color: #aaa; height: 600px;
margin: 5px; margin: 10px auto;
} padding: 0 10px;
background: url(../images/logo-gem-150.png) no-repeat 20px right;
}
#welcome-panel { #header-home img {
width: 230px; padding: 6px 0;
min-width: 230px !important; }
font-size: 10pt;
line-height: 150%;
color: #666;
}
#welcome-panel h1 {
font-size: 15pt;
margin: 0;
padding: 0;
font-weight: bold;
color: #848C8E;
}
div.island { #content-home {
background: #dbe8eb; position: relative;
padding: 4px; margin: 20px 0;
-moz-border-radius: 7px; }
-webkit-border-radius: 7px;
}
div.round-corners {
border: 1px solid #c5d1d4;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
#projects-panel { #project-open, #project-create, #project-links {
width: 320px; position: absolute;
min-width: 320px !important; top: 0;
} }
#projects {
background: white;
}
#projects h1 { #project-open {
margin: 0; left: 0;
padding: 7px 10px; width: 330px;
font-size: 13pt; }
font-weight: bold;
}
#projects-container { #projects-container {
height: 40em; border-top: 1px solid @line_accent;
overflow: auto; background: #fff;
} overflow: auto;
height: 400px;
}
#projects-container .message { #projects-container .message {
padding: 15px; padding: @padding_loose;
color: #aaa; font-size: 1.3em;
font-size: 150%; color: @near_black;
} }
#projects-container table {
border-collapse: collapse;
width: 100%;
}
#projects-container td, #projects-container th {
padding: 3px;
text-align: left;
vertical-align: middle;
}
#projects-container td:first-child, #projects-container th:first-child {
padding-left: 7px;
}
#projects-container td:last-child, #projects-container th:last-child {
padding-right: 7px;
}
#projects-container th {
font-weight: normal;
background: #f4f7fa;
border-bottom: 1px solid #eee;
}
.project a {
text-decoration: none;
font-weight: normal;
color: #1170a3;
}
.project a:hover {
text-decoration: underline;
}
.last-modified {
white-space: pre;
text-align: right;
color: #aaa;
}
#forms { #project-create {
color: #666; left: 350px;
} width: 430px;
}
a.form-tab-link { #project-links {
display: block; top: 110px;
float: right; left: 810px;
text-decoration: none; width: 150px;
font-size: 10pt; font-size: 1.3em;
font-weight: bold; }
color: #1170a3;
margin-left: 1em;
}
#form-tabs-create-project, #form-tabs-import-project, #form-create-project-more-options { #project-links li {
padding: 7px 10px; padding: @padding_tight 0;
} }
#form-tabs-create-project, #form-tabs-import-project {
background: white;
width: 400px;
}
#form-tabs-create-project h1, #form-tabs-import-project h1 {
margin: 0;
padding: 0px 0px 15px 0px;
font-size: 13pt;
font-weight: bold;
color: black;
}
#form-create-project-more-options h2 {
font-size: 100%;
color: black;
margin: 0;
}
#form-create-project-more-options > table {
border-collapse: collapse;
}
#form-create-project-more-options > table > tbody > tr > td {
padding: 1em;
}
div.field-group { #google-refine-version {
margin-top: 0.7em; margin: 30px 0 0 0;
margin-bottom: 1.5em; color: @metadata_grey;
} }
.field-label {
font-weight: bold;
white-space: pre;
}
div.field-label {
margin-top: 0.5em;
margin-bottom: 0.25em;
}
td.field-label {
text-align: right;
}
div.field-body { #project-open, #project-create {
white-space: pre; background: @fill_primary;
} border: 1px solid @chrome_primary;
div.field-hint { .rounded_corners;
font-size: 90%; }
white-space: pre;
} #project-open h1, #project-create h1 {
padding: @padding_loose;
}
.project-create-basic {
border-top: 1px solid @line_accent;
padding: @padding_loose;
background: #fff;
}
.project-create-basic p {
font-size: 1.3em;
padding: 0 0 @padding_normal 0;
}
.project-create-advanced {
position: relative;
padding: @padding_loose 200px 48px @padding_loose;
background: @fill_secondary;
color: @metadata_grey;
}
#project-create-parsetext {
position: absolute;
width: 200px;
top: 25px;
left: 210px;
}
.project-create-option {
padding: @padding_normal;
font-size: 1.3em;
}
.project-create-suboption {
padding: @padding_tight 0;
font-size: 0.85em;
}
#project-toggle {
position: absolute;
top: 12px;
right: 10px;
}
#version-message {
padding: 20px;
border: 1px solid #aaa;
background: #ffddaa;
position: absolute;
top: -1px;
left: 40%;
width: 20%;
z-index: 1000;
}

View File

@ -1,73 +1,65 @@
@import-less url("theme.less"); @import-less url("theme.less");
.refine-tabs.ui-tabs { .ui-tabs {
padding: 0; padding: 0;
} }
.refine-tabs.ui-corner-all {
}
.refine-tabs.ui-widget-content {
border: none;
background: none;
color: inherit;
}
.refine-tabs.ui-tabs .ui-tabs-nav {
padding: 0 @padding_normal;
}
.refine-tabs.ui-tabs .ui-widget-header {
background: none;
border: none;
}
.refine-tabs.ui-tabs .ui-tabs-nav li a {
padding: 4px 10px;
}
.refine-tabs.ui-tabs .ui-tabs-nav li a span.count {
color: #666;
font-weight: normal;
font-size: 80%;
}
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default, .ui-widget-content, .ui-tabs .ui-widget-header {
.refine-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default { border: none;
background: none; background: none;
border: none; color: inherit;
} }
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a, .ui-tabs .ui-tabs-nav {
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:link, padding: 0 @padding_normal;
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-default a:visited { }
color: @link_color;
font-weight: normal;
}
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active, .ui-tabs .ui-tabs-nav li a {
.refine-tabs.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active { padding: 4px 10px;
margin-top: 1px; }
border: 1px solid @line_accent;
border-bottom: none;
background: white;
color: black;
font-weight: bold;
}
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-default,
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:link, .ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default {
.refine-tabs.ui-tabs .ui-tabs-nav .ui-state-active a:visited { background: none;
color: black; border: 1px solid transparent;
font-weight: bold; border-bottom: 0;
} }
.refine-tabs.ui-tabs .ui-corner-top { .ui-tabs .ui-tabs-nav .ui-state-default a,
.ui-tabs .ui-tabs-nav .ui-state-default a:link,
.ui-tabs .ui-tabs-nav .ui-state-default a:visited {
color: @link_primary;
font-weight: normal;
}
.ui-tabs .ui-tabs-nav li a span.count {
color: #666;
font-weight: normal;
font-size: 80%;
}
.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-bottom: none;
background: white;
}
.ui-tabs .ui-tabs-nav .ui-state-active a,
.ui-tabs .ui-tabs-nav .ui-state-active a:link,
.ui-tabs .ui-tabs-nav .ui-state-active a:visited {
color: black;
font-weight: bold;
}
.ui-tabs .ui-corner-top, .ui-tabs .ui-corner-top {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.refine-tabs.ui-tabs .ui-corner-bottom {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.refine-tabs.ui-tabs .ui-tabs-panel { .ui-tabs .ui-tabs-panel {
margin: 0px; margin: 0px;
padding: 15px; padding: 15px;
border: 1px solid @line_accent; border: 1px solid @chrome_primary;
background: white; background: white;
} }

View File

@ -1,24 +0,0 @@
@import-less url("theme.less");
#body {
padding: 5em;
margin: 0;
}
#loading-message {
text-align: center;
font-size: 300%;
color: #aaa;
padding: 1in;
font-style: italic;
}
table.preferences th, table.preferences td {
padding: 3px;
}
table.preferences th {
background: #ddd;
}
table.preferences td {
background: #eee;
}

View File

@ -1,65 +0,0 @@
body {
background: white;
}
#body {
padding: 0;
margin: 0;
}
#loading-message {
text-align: center;
font-size: 300%;
color: #aaa;
padding: 1in;
font-style: italic;
}
#footer {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1000;
padding: 0.4em 0em 0.5em 0em;
width: 100%;
background: #E8E8E8;
color: #666;
}
#footer a {
font-weight: bold;
color: #333;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.menu-bar-container {
position: fixed;
left: 0px;
width: 100%;
}
.view-panel {
position: fixed;
background: white;
overflow: hidden;
}
.left-panel {
position: fixed;
background: white;
overflow: hidden;
padding: 0px;
font-size: 11px;
}
.left-panel .refine-tabs.ui-tabs .ui-tabs-panel {
padding: 7px;
overflow: hidden;
}
.facet-panel {
overflow: auto;
}
.history-panel {
overflow: auto;
}

View File

@ -1,90 +1,97 @@
@import-less url("theme.less"); @import-less url("theme.less");
body {
background: white;
}
#body { #body {
padding: 0; display: none;
margin: 0; }
display: none;
}
#header-layout { #project-title, #project-controls {
display: none; position: absolute;
width: 100%; top: 0;
border-collapse: collapse; display: none;
border: none; }
}
#header-layout > tbody > tr > td { #project-title {
padding: 0; left: 140px;
} height: 40px;
#header-layout-right { padding: 4px 0 0 0;
text-align: right; font-size: 1.6em;
} }
#project-controls {
right: 0;
height: 40px;
font-size: 1.3em;
}
#project-name-button { #project-name-button {
:hover { padding: 3px;
background: #fffee0; border: 1px solid transparent;
}
#project-name-button:hover {
background: #ffffd6;
border: 1px solid #ccc;
border-top: 1px solid #aaa;
} }
}
#project-permalink-button { #project-permalink-button {
} padding: 0 4px;
font-size: 0.7em;
#loading-message { }
text-align: center;
font-size: 300%;
color: #aaa;
padding: 1in;
font-style: italic;
}
#left-panel { #left-panel {
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
padding-top: @padding_tight; padding-top: @padding_tight;
font-size: 11px; font-size: 1.3em;
background: @fill_normal; background: @fill_normal;
} }
#right-panel { #right-panel {
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
padding-left: @padding_tight; padding-left: @padding_tight;
font-size: 11px; background: @chrome_primary;
background: @fill_accent; }
}
#tool-panel { #tool-panel {
padding: @padding_tight @padding_tight @padding_tight 0; position: relative;
} height: 32px;
}
#tool-panel-layout { #summary-bar {
width: 100%; position: absolute;
border-collapse: collapse; top: @padding_normal;
} left: @padding_normal;
#tool-panel-layout > tbody > tr >td { font-size: 1.8em;
padding: 0px; font-weight: bold;
} }
#summary-bar-container { #summary-total {
padding: @padding_tight 0; font-size: 0.8em;
} font-weight: normal;
}
#extension-bar-container {
text-align: right;
}
#extension-bar { #extension-bar {
padding: @padding_tight 0; position: absolute;
} top: 0px;
right: @padding_normal;
white-space: nowrap;
font-size: 1.3em;
padding: @padding_tight 0;
}
#extension-bar .secondary {
font-size: 0.85em;
}
#view-panel { #view-panel {
background: white; background: white;
overflow: hidden; overflow: hidden;
} }
#left-panel .refine-tabs.ui-tabs .ui-tabs-panel { #left-panel .refine-tabs.ui-tabs .ui-tabs-panel {
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
@ -93,9 +100,6 @@ body {
overflow: hidden; overflow: hidden;
} }
#facet-panel { #facet-panel, #history-panel {
overflow: auto;
}
#history-panel {
overflow: auto; overflow: auto;
} }

View File

@ -1,7 +0,0 @@
@import-less url("../theme.less");
#extension-bar {
}
#extension-bar-menu-container {
}

View File

@ -1,9 +0,0 @@
@import-less url("../theme.less");
#summary-bar {
}
.summaryWidget-rowCount {
font-size: 150%;
font-weight: bold;
}

View File

@ -0,0 +1,11 @@
.button, a.button {
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
background: -moz-linear-gradient(top, #f9f9f9, #e3e3e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e3e3e3');
}
.button:active, a.button:active {
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f9f9f9));
background: -moz-linear-gradient(top, #e3e3e3, #f9f9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#f9f9f9');
}

View File

@ -1,12 +1,27 @@
@fill_normal: #e3e9ff; @fill_normal: #e3e9ff;
@fill_accent: #bbccff; @fill_accent: #bbccff;
@line_accent: #bbccff; @line_accent: #bbccff;
@padding_normal: 7px; @link_primary: #11c;
@padding_tight: 5px; @link_secondary: #4272db;
@chrome_primary: #bcf;
@chrome_secondary: #e3e9ff;
@fill_primary: #ebeef8;
@fill_secondary: #f2f2f2;
@faint_grey: #ddd;
@light_grey: #999;
@metadata_grey: #777;
@near_black: #444;
@padding_tighter: 3px; @padding_tighter: 3px;
@padding_tight: 5px;
@padding_normal: 7px;
@padding_loose: 10px; @padding_loose: 10px;
@padding_looser: 15px; @padding_looser: 15px;
@link_color: blue; .rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

View File

@ -1,5 +1,11 @@
@import-less url("../theme.less"); @import-less url("../theme.less");
#viewPanel-header {
background: @chrome_secondary;
font-size: 1.3em;
padding: @padding_normal;
}
.viewPanel-browsingModes .ui-button .ui-button-text { .viewPanel-browsingModes .ui-button .ui-button-text {
line-height: 1.0; line-height: 1.0;
text-decoration: line-through; text-decoration: line-through;
@ -112,13 +118,6 @@ a.column-header-menu:hover {
background: #6d6; background: #6d6;
} }
table.viewPanel-header {
border-collapse: collapse;
width: 100%;
}
table.viewPanel-header td {
padding: 1em 1em 1em 0;
}
div.data-table-cell-content { div.data-table-cell-content {
position: relative; position: relative;