More styling for the drop-down processor. Not finished. TODO: investigate and fix the memory leaking in the drop-down cell processor (detached DOM tree)
This commit is contained in:
alekseybobkov
parent
e032fd682d
commit
a6d8ab20f7
|
|
@ -178,3 +178,62 @@
|
|||
.table-control td[data-column-type=dropdown] [data-view-container] select {
|
||||
display: none;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-container {
|
||||
display: block;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-choice {
|
||||
background: white;
|
||||
border: none;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
padding-left: 10px;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-choice .select2-chosen {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-arrow {
|
||||
background: transparent;
|
||||
-webkit-border-radius: 0 !important;
|
||||
-moz-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-left: none;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-arrow b {
|
||||
background: none;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-arrow b:after {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f107";
|
||||
font-size: 13px;
|
||||
line-height: 100%;
|
||||
color: #95a5a6;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
.table-control td[data-column-type=dropdown] .select2-dropdown-open .select2-arrow b:after {
|
||||
font-family: FontAwesome !important;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
text-decoration: inherit !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
*margin-right: .3em !important;
|
||||
content: "\f106" !important;
|
||||
}
|
||||
.table-widget-dropdown-container {
|
||||
margin-left: -1px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-widget-dropdown-container.select2-drop-above {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,6 @@
|
|||
BaseProto.dispose.call(this)
|
||||
}
|
||||
|
||||
/*
|
||||
* Determines if the processor's cell is focusable.
|
||||
*/
|
||||
DropdownProcessor.prototype.isCellFocusable = function() {
|
||||
return false
|
||||
}
|
||||
|
||||
/*
|
||||
* Renders the cell in the normal (no edit) mode
|
||||
*/
|
||||
|
|
@ -78,16 +71,20 @@
|
|||
|
||||
var select = this.activeCell.querySelector('select')
|
||||
if (select) {
|
||||
// Update the cell value and remove the select element
|
||||
$(select).select2('destroy')
|
||||
//Update the cell value and remove the select element
|
||||
var $select = $(select)
|
||||
$select.select2('destroy')
|
||||
$select.data('select2', null)
|
||||
$select = null
|
||||
|
||||
var value = select.options[select.selectedIndex].value,
|
||||
text = select.options[select.selectedIndex].text
|
||||
// var value = select.options[select.selectedIndex].value,
|
||||
// text = select.options[select.selectedIndex].text
|
||||
|
||||
this.tableObj.setCellValue(this.activeCell, value)
|
||||
this.setViewContainerValue(this.activeCell, text)
|
||||
// this.tableObj.setCellValue(this.activeCell, value)
|
||||
// this.setViewContainerValue(this.activeCell, text)
|
||||
|
||||
select.parentNode.removeChild(select)
|
||||
select = null
|
||||
}
|
||||
|
||||
this.showViewContainer(this.activeCell)
|
||||
|
|
@ -115,10 +112,19 @@
|
|||
}
|
||||
|
||||
cellContentContainer.appendChild(select)
|
||||
$(select).select2()
|
||||
$(select).select2({
|
||||
dropdownCssClass: 'table-widget-dropdown-container'
|
||||
})
|
||||
// .on('select2-open', function tableDropdownOpen(param){
|
||||
// var dropdown = $(this).data('select2').dropdown
|
||||
|
||||
// dropdown.width(dropdown.width()+2)
|
||||
// })
|
||||
|
||||
cellContentContainer = null
|
||||
select = null
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
DropdownProcessor.prototype.fetchOptions = function(onSuccess) {
|
||||
|
|
|
|||
|
|
@ -191,19 +191,24 @@
|
|||
|
||||
.table-control {
|
||||
td[data-column-type=dropdown] {
|
||||
|
||||
.dropdown-arrow() {
|
||||
.icon(@angle-down);
|
||||
font-size: 13px;
|
||||
line-height: 100%;
|
||||
color: #95a5a6;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
[data-view-container] {
|
||||
padding-right: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
.icon(@angle-down);
|
||||
font-size: 13px;
|
||||
line-height: 100%;
|
||||
color: #95a5a6;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
.dropdown-arrow();
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
|
|
@ -214,5 +219,52 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.select2-choice {
|
||||
background: white;
|
||||
border: none;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
.box-shadow(none)!important;
|
||||
padding-left: 10px;
|
||||
.border-radius(0);
|
||||
|
||||
.select2-chosen {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-arrow {
|
||||
background: transparent;
|
||||
.border-radius(0)!important;
|
||||
border-left: none;
|
||||
|
||||
b {
|
||||
background: none;
|
||||
|
||||
&:after {
|
||||
.dropdown-arrow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-dropdown-open {
|
||||
.select2-arrow b:after {
|
||||
.icon(@angle-up)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-widget-dropdown-container {
|
||||
margin-left: -1px;
|
||||
font-size: 13px;
|
||||
|
||||
&.select2-drop-above {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue