[grid,ui][s]: switch to bootstrap dropdowns for grid menus.
This commit is contained in:
Rufus Pollock
parent
7cc23dfaf7
commit
4b5c647ab4
@ -93,40 +93,14 @@
|
||||
* Data Table Menus
|
||||
*********************************************************/
|
||||
|
||||
a.column-header-menu, a.root-header-menu {
|
||||
.column-header-menu, a.root-header-menu {
|
||||
float: right;
|
||||
display: block;
|
||||
margin: 0 4px 0 0;
|
||||
width: 17px;
|
||||
height: 19px;
|
||||
background-image: url(images/menu-dropdown.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
a.row-header-menu:hover, a.root-header-menu:hover {
|
||||
background-position: -17px 0px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.row-header-menu {
|
||||
float: left;
|
||||
display: block;
|
||||
margin: -2px 0 -4px 0;
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url(images/menu-dropdown.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.read-only a.row-header-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.column-header-menu:hover {
|
||||
background-position: -17px 0px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.column-header-recon-stats-bar {
|
||||
margin-top: 10px;
|
||||
height: 4px;
|
||||
@ -192,45 +166,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.data-table-menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul.data-table-menu {
|
||||
display: none;
|
||||
outline-style: none;
|
||||
background: white;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
width: 120px;
|
||||
z-index: 666;
|
||||
border: 1px solid #CCC;
|
||||
border-right: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
margin: 0; padding: 0; }
|
||||
ul.data-table-menu * {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
ul.data-table-menu a {
|
||||
line-height: 14px;
|
||||
color: black;
|
||||
display: block;
|
||||
padding: 5px 7px;
|
||||
text-decoration: none; }
|
||||
ul.data-table-menu li {
|
||||
height: 24px; }
|
||||
ul.data-table-menu li:hover {
|
||||
background-color: #DBE8F8 }
|
||||
|
||||
/* TODO: not sure the rest of this is needed */
|
||||
.data-table-cell-editor, .data-table-topic-popup {
|
||||
overflow: auto;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
12
src/util.js
12
src/util.js
@ -1,18 +1,6 @@
|
||||
var util = function() {
|
||||
var templates = {
|
||||
transformActions: '<li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>'
|
||||
, columnActions: ' \
|
||||
<li class="write-op"><a data-action="bulkEdit" class="menuAction" href="JavaScript:void(0);">Transform...</a></li> \
|
||||
<li class="write-op"><a data-action="deleteColumn" class="menuAction" href="JavaScript:void(0);">Delete this column</a></li> \
|
||||
<li><a data-action="sortAsc" class="menuAction" href="JavaScript:void(0);">Sort ascending</a></li> \
|
||||
<li><a data-action="sortDesc" class="menuAction" href="JavaScript:void(0);">Sort descending</a></li> \
|
||||
<li><a data-action="hideColumn" class="menuAction" href="JavaScript:void(0);">Hide this column</a></li> \
|
||||
'
|
||||
, rowActions: '<li><a data-action="deleteRow" class="menuAction write-op" href="JavaScript:void(0);">Delete this row</a></li>'
|
||||
, rootActions: ' \
|
||||
{{#columns}} \
|
||||
<li><a data-action="showColumn" data-column="{{.}}" class="menuAction" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
|
||||
{{/columns}}'
|
||||
, cellEditor: ' \
|
||||
<div class="menu-container data-table-cell-editor"> \
|
||||
<textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \
|
||||
|
||||
@ -51,19 +51,19 @@ my.DataGrid = Backbone.View.extend({
|
||||
|
||||
onColumnHeaderClick: function(e) {
|
||||
this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
|
||||
util.position('data-table-menu', e);
|
||||
util.render('columnActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRowHeaderClick: function(e) {
|
||||
this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rowActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRootHeaderClick: function(e) {
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rootActions', 'data-table-menu', {'columns': this.hiddenFields});
|
||||
var tmpl = ' \
|
||||
{{#columns}} \
|
||||
<li><a data-action="showColumn" data-column="{{.}}" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
|
||||
{{/columns}}';
|
||||
var tmp = $.mustache(tmpl, {'columns': this.hiddenFields});
|
||||
this.el.find('.root-header-menu .dropdown-menu').html(tmp);
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
@ -105,7 +105,6 @@ my.DataGrid = Backbone.View.extend({
|
||||
})
|
||||
}
|
||||
}
|
||||
util.hide('data-table-menu');
|
||||
actions[$(e.target).attr('data-action')]();
|
||||
},
|
||||
|
||||
@ -158,26 +157,32 @@ my.DataGrid = Backbone.View.extend({
|
||||
// ======================================================
|
||||
// #### Templating
|
||||
template: ' \
|
||||
<div class="data-table-menu-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
<ul class="data-table-menu"></ul> \
|
||||
<table class="data-table table-striped" cellspacing="0"> \
|
||||
<thead> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
<th class="column-header"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="root-header-menu"></a> \
|
||||
<span class="column-header-name"></span> \
|
||||
<div class="btn-group root-header-menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu"> \
|
||||
</ul> \
|
||||
</div> \
|
||||
<span class="column-header-name"></span> \
|
||||
</th> \
|
||||
{{/notEmpty}} \
|
||||
{{#fields}} \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="column-header-menu"></a> \
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</div> \
|
||||
<div class="btn-group column-header-menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu"> \
|
||||
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
|
||||
<li class="write-op"><a data-action="deleteColumn" href="JavaScript:void(0);">Delete this column</a></li> \
|
||||
<li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
|
||||
<li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
|
||||
<li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</th> \
|
||||
{{/fields}} \
|
||||
</tr> \
|
||||
@ -259,7 +264,14 @@ my.DataGridRow = Backbone.View.extend({
|
||||
},
|
||||
|
||||
template: ' \
|
||||
<td><a class="row-header-menu"></a></td> \
|
||||
<td> \
|
||||
<div class="btn-group row-header-menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu"> \
|
||||
<li class="write-op"><a data-action="deleteRow" href="JavaScript:void(0);">Delete this row</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
</td> \
|
||||
{{#cells}} \
|
||||
<td data-field="{{field}}"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user