From a6d8ab20f71d33da7f5b64b3fec190e0e3b3beb3 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Thu, 4 Dec 2014 22:48:25 -0800 Subject: [PATCH] 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) --- .../widgets/table/assets/css/table.css | 59 +++++++++++++++++ .../assets/js/table.processor.dropdown.js | 34 ++++++---- .../widgets/table/assets/less/table.less | 66 +++++++++++++++++-- 3 files changed, 138 insertions(+), 21 deletions(-) diff --git a/modules/backend/widgets/table/assets/css/table.css b/modules/backend/widgets/table/assets/css/table.css index 372acce40..8f0a02deb 100644 --- a/modules/backend/widgets/table/assets/css/table.css +++ b/modules/backend/widgets/table/assets/css/table.css @@ -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; +} diff --git a/modules/backend/widgets/table/assets/js/table.processor.dropdown.js b/modules/backend/widgets/table/assets/js/table.processor.dropdown.js index 2b1fb624d..28f9aaecf 100644 --- a/modules/backend/widgets/table/assets/js/table.processor.dropdown.js +++ b/modules/backend/widgets/table/assets/js/table.processor.dropdown.js @@ -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) { diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less index a37e60db2..b2c59be52 100644 --- a/modules/backend/widgets/table/assets/less/table.less +++ b/modules/backend/widgets/table/assets/less/table.less @@ -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; } } \ No newline at end of file