From a7d112d9a3df456c4e1c05b27e3b4992e315db8c Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Mon, 26 Jul 2021 11:26:49 +0200
Subject: [PATCH] Change collapsing column icon
---
packages/file-handling/src/clipboard.js | 50 ++++++++++++++++++++++++-
packages/file-handling/src/styles.js | 7 +++-
2 files changed, 55 insertions(+), 2 deletions(-)
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index c305612d..e23e577b 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 ddd1a049..974a6067 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{
--
GitLab