diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js index c305612d78f594629def95c1892692ac3412d063..e23e577ba0e476ba0ff5a4c5dcddd30a43066c46 100644 --- a/packages/file-handling/src/clipboard.js +++ b/packages/file-handling/src/clipboard.js @@ -135,7 +135,55 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) { placeholder: i18n.t("clipboard.no-data"), columns: [ { - formatter:"responsiveCollapse", width:32, minWidth:32, align:"center", resizable:false, headerSort:false}, + width: 32, + minWidth: 32, + align: "center", + resizable: false, + headerSort: false, + formatter: (cell, formatterParams, onRendered) => { + let self = that, + open = false, + el = document.createElement("div"); + + function toggleList(isOpen){ + let collapse = cell.getRow().getElement().getElementsByClassName("tabulator-responsive-collapse")[0]; + + open = isOpen; + + if(open){ + el.classList.add("open"); + if(collapse){ + collapse.style.display = ''; + } + }else{ + el.classList.remove("open"); + if(collapse){ + collapse.style.display = 'none'; + } + } + } + + el.classList.add("tabulator-responsive-collapse-toggle"); + const icon_tag = that.getScopedTagName("dbp-icon"); + el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'><" + icon_tag + " class='icon' name='chevron-right'></" + icon_tag + "></span><span class='tabulator-responsive-collapse-toggle-close'><" + icon_tag + " class='icon' name='chevron-down'></" + icon_tag + "></span>"; + + cell.getElement().classList.add("tabulator-row-handle"); + + if(self.tabulatorTable.options.responsiveLayoutCollapseStartOpen){ + open = true; + } + + el.addEventListener("click", function(event){ + toggleList(!open); + event.preventDefault(); + event.stopImmediatePropagation(); + }); + + toggleList(open); + + return el; + } + }, { title: '<label class="button-container select-all-icon">' + '<input type="checkbox" id="select_all" name="select_all" value="select_all">' + diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js index ddd1a049d66b1c39b63c073a81b6608affdfe8f3..974a606785ecb53c9c9519bafee7a49724bde8a6 100644 --- a/packages/file-handling/src/styles.js +++ b/packages/file-handling/src/styles.js @@ -230,7 +230,12 @@ export function getFileHandlingCss() { .tabulator-responsive-collapse-toggle-open, .tabulator-responsive-collapse-toggle-close{ width: 100%; height: 100%; - line-height: 37px; + line-height: 55px; + } + + .tabulator-responsive-collapse-toggle-open .icon, .tabulator-responsive-collapse-toggle-close .icon { + font-size: 1rem; + top: -0.4em; } .tabulator-row-handle{