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

dialog styles, first round of improvements to facets, data table, menus

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@1552 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
James Home 2010-10-15 02:23:22 +00:00
parent 9e35ea3775
commit fdc6fee052
17 changed files with 343 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
main/webapp/modules/core/MOD-INF/controller.js
View File

@ -151,10 +151,10 @@ function init() {
module,
[
"externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
"styles/jquery-ui-overrides.less",
"styles/common.less",
"styles/pure.css",
"styles/index.less",
"styles/jquery-ui-overrides.less"
"styles/index.less"
]
);
@ -226,9 +226,9 @@ function init() {
"externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
"externals/imgareaselect/css/imgareaselect-default.css",
"styles/jquery-ui-overrides.less",
"styles/common.less",
"styles/pure.css",
"styles/jquery-ui-overrides.less",
"styles/util/menu.less",
"styles/util/dialog.less",
@ -273,9 +273,9 @@ function init() {
[
"externals/suggest/css/suggest-1.2.min.css",
"externals/jquery-ui/css/ui-lightness/jquery-ui-1.8.custom.css",
"styles/common.less",
"styles/pure.css",
"styles/jquery-ui-overrides.less",
"styles/common.less",
"styles/pure.css"
]
);
}

BIN
main/webapp/modules/core/images/right-arrow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 215 B

After

Width:  |  Height:  |  Size: 974 B

24
main/webapp/modules/core/scripts/project/browsing-engine.js
View File

@ -65,25 +65,19 @@ BrowsingEngine.prototype._initializeUI = function() {
'<div class="browsing-panel-help" bind="help">' +
'<h1>Using facets and filters</h1>' +
'<p>Use facets and filters to select subsets of your data to act on. Choose facet and filter methods from the menus at the top of each data column.</p>' +
'<p>Not sure how to get started?<br /><a href="http://vimeo.com/groups/gridworks/videos" target="_blank"><b>Watch these screencasts!</b></a>.</p>' +
'<p>Not sure how to get started?<br /><a href="http://vimeo.com/groups/gridworks/videos" target="_blank"><b>Watch these screencasts!</b></a></p>' +
'</div>' +
'<div class="browsing-panel-header" bind="header">' +
'<div class="browsing-panel-indicator" bind="indicator">' +
'<img src="images/small-spinner.gif" /> refreshing facets ...' +
'<img src="images/small-spinner.gif" /> Refreshing facets...' +
'</div>' +
'<div class="browsing-panel-controls" bind="controls">' +
'<div class="browsing-panel-controls-refresh">' +
'<a href="javascript:{}" bind="refreshLink" class="button" title="Update all facets">Refresh</a>' +
'</div>' +
'<a href="javascript:{}" bind="resetLink" class="button button-pill-left" title="Clear selection in all facets">Reset All</a>' +
'<a href="javascript:{}" bind="removeLink" class="button button-pill-right" title="Remove all facets">Remove All</a>' +
'</div>' +
'<div class="browsing-panel-controls" bind="controls"><div class="grid-layout layout-tightest layout-full"><table>' +
'<tr>' +
'<td>' +
'<a href="javascript:{}" bind="refreshLink" class="action" title="Make sure all facets are up-to-date">Refresh</a>' +
'</td>' +
'<td width="1%">' +
'<a href="javascript:{}" bind="resetLink" class="action" title="Clear selection in all facets">Reset&nbsp;All</a>' +
'</td>' +
'<td width="1%">' +
'<a href="javascript:{}" bind="removeLink" class="action" title="Remove all facets">Remove&nbsp;All</a>' +
'</td>' +
'</tr>' +
'</table></div></div>' +
'</div>' +
'<ul bind="facets" class="facets-container"></ul>'
);

2
main/webapp/modules/core/scripts/views/data-table/add-column-by-fetching-urls-dialog.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 700px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table cols="2">
@ -23,3 +24,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

2
main/webapp/modules/core/scripts/views/data-table/add-column-dialog.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 700px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table cols="2">
@ -18,3 +19,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

2
main/webapp/modules/core/scripts/views/data-table/cell-recon-search-for-match.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 400px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader">Search for Match</div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full"><table>
@ -14,3 +15,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

2
main/webapp/modules/core/scripts/views/data-table/sorting-criterion-dialog.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 400px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full "><table>
@ -44,3 +45,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

2
main/webapp/modules/core/scripts/views/data-table/split-column-dialog.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 600px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-looser layout-full"><table><tr>
@ -53,3 +54,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

2
main/webapp/modules/core/scripts/views/data-table/text-transform-dialog.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 700px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-tight layout-full"><table>
@ -11,6 +12,7 @@
</tr>
</table>
</div>
</div>
<div class="dialog-footer" bind="dialogFooter">
<button bind="okButton">&nbsp;&nbsp;OK&nbsp;&nbsp;</button>
<button bind="cancelButton">Cancel</button>

2
main/webapp/modules/core/scripts/views/data-table/transpose-columns-into-rows.html
View File

@ -1,4 +1,5 @@
<div class="dialog-frame" style="width: 600px;">
<div class="dialog-border">
<div class="dialog-header" bind="dialogHeader"></div>
<div class="dialog-body" bind="dialogBody">
<div class="grid-layout layout-normal layout-full grid-layout-for-ui"><table>
@ -36,3 +37,4 @@
<button bind="cancelButton">Cancel</button>
</div>
</div>
</div>

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

@ -54,7 +54,7 @@ a.selected {
}
a.inaction {
color: #ccc;
color: @chrome_primary;
}
a.selected:hover, a.inaction:hover {
@ -77,6 +77,7 @@ a img {
border: 1px solid #bbb;
cursor: pointer;
background: #eee;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
.rounded_corners(3px);
}
@ -94,6 +95,16 @@ a img {
padding: 1px 15px;
}
.button-pill-left, a.button-pill-left {
border-right: 1px solid #bbb;
.sharp_corners_left();
}
.button-pill-right, a.button-pill-right {
border-left: 1px solid #fff;
.sharp_corners_right();
}
.button-disabled, a.button-disabled {
color: #666;
border: 1px solid #ddd;

8
main/webapp/modules/core/styles/project/facets.less
View File

@ -66,14 +66,10 @@ a.facet-title-remove:hover {
.facet-controls-sortControls a {
margin: 0 2px;
padding: 2px 4px 3px 4px;
font-weight: bold;
}
.facet-controls-sortControls a.inaction {
background: #f8f8f8;
color: #777;
border: 1px solid #ff6a00;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #000;
font-weight: bold;
}
.facet-body {

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

@ -26,7 +26,16 @@
}
.browsing-panel-controls {
position: relative;
padding: @padding_normal;
visibility: hidden;
text-align: right;
}
.browsing-panel-controls-refresh {
position: absolute;
top: @padding_normal;
left: @padding_normal;
}
.browsing-panel-help, .history-panel-help {
@ -48,6 +57,7 @@
.browsing-panel-help p, .history-panel-help p {
padding: 7px 20px;
line-height: 1.3;
}
.history-panel-body {

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

@ -12,6 +12,10 @@
@light_grey: #999;
@metadata_grey: #777;
@near_black: #444;
@dialog_frame: #3a5774;
@dialog_border: #c1d9ff;
@dialog_header: #e0edfe;
@dialog_footer: #eee;
@padding_tighter: 3px;
@padding_tight: 5px;
@ -25,3 +29,20 @@
border-radius: @radius;
}
.sharp_corners_left () {
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.sharp_corners_right () {
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

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

@ -2,21 +2,17 @@
.dialog-overlay {
position: fixed;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.4;
background: #666;
opacity: 0.5;
}
.dialog-container {
position: fixed;
padding: 0px;
margin: 0px;
left: 0px;
left: 0;
width: 100%;
text-align: center;
}
@ -25,26 +21,31 @@
margin: 0 auto;
text-align: left;
background: white;
border: 1px solid #aaa;
padding: 2px;
border: 1px solid @dialog_frame;
}
.dialog-border {
border: 4px solid @dialog_border;
}
.dialog-header {
background: #404859;
padding: 5px 10px;
background: @dialog_header;
padding: @padding_loose;
font-weight: bold;
color: white;
font-size: 1.6em;
color: #000;
cursor: move;
}
.dialog-body {
padding: 10px;
font-size: 1.3em;
padding: @padding_looser;
}
.dialog-footer {
background: #ddd;
padding: 5px 10px;
text-align: right;
font-size: 1.3em;
background: @dialog_footer;
padding: @padding_loose;
}
.dialog-footer button {

29
main/webapp/modules/core/styles/util/menu.less
View File

@ -1,13 +1,9 @@
@import-less url("../theme.less");
.menu-overlay {
background: black;
opacity: 0.15;
position: fixed;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
@ -18,33 +14,30 @@
width: 250px;
background: white;
padding: 1px;
border: 1px solid #ddd;
font-size: 12px;
border: 1px solid #ccc;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-size: 1.2em;
}
.menu-container hr {
margin: 2px 0;
padding: 0;
height: 1px;
border: none;
border-top: 1px solid #ccc;
padding: 0px;
margin: 2px 0px;
}
a.menu-item {
display: block;
padding: 5px 7px;
text-decoration: none;
color: black;
color: #000;
white-space: pre;
}
a.menu-item:hover {
color: #44a;
background: #eee;
}
a.menu-item.menu-expanded {
background: #ddd;
a.menu-item:hover, a.menu-item.menu-expanded {
background: #dbe8f8;
}
a.menu-item img {

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

@ -60,9 +60,6 @@ table.data-table > tbody > tr.contextual > td > div {
opacity: 0.3;
}
table.data-table > tbody > tr.record.contextual > td {
}
table.data-table td.column-header {
background: #e8e8e8;
cursor: pointer;
@ -118,10 +115,12 @@ a.column-header-menu:hover {
background: #6d6;
}
div.data-table-cell-content {
line-height: 1.2;
color: #222;
position: relative;
}
div.data-table-cell-content-numeric {
text-align: right;
}