Skip to content
Snippets Groups Projects
Verified Commit 1738d188 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix(datatable): button-bar layout

parent cb44fba0
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
development/issues/closed/277.html
+ 2
− 2
View file @ 1738d188
......@@ -68,8 +68,8 @@
<div slot="bar" class="monster-button-group">
<div style="flex-grow:10">
<monster-button style="width:max-content" id="action-button-1">ACTION</monster-button>
<div class="row-action-buttons">
<monster-button data-monster-role="row-action-button" id="action-button-1">ACTION</monster-button>
</div>
<monster-embedded-pagination data-monster-datasource-selector="#ds277"></monster-embedded-pagination>
......
development/issues/closed/277.mjs
+ 6
− 6
View file @ 1738d188
......@@ -41,13 +41,13 @@ const datatable = document.getElementById("dt277");
const eventHandler = function () {
const selected = datatable.getSelectedRows();
if (selected.length === 0) {
actionButton.style.visibility = "hidden";
} else {
actionButton.style.visibility = "visible";
}
// if (selected.length === 0) {
// actionButton.style.visibility = "hidden";
// } else {
// actionButton.style.visibility = "visible";
// }
console.log(selected);
console.log("issue 227 selected: "+selected.join(", "));
}
datatable.addEventListener("monster-datatable-selection-changed", eventHandler);
......
flake.lock
+ 3
− 3
View file @ 1738d188
......@@ -168,11 +168,11 @@
},
"nixpkgs_3": {
"locked": {
"lastModified": 1736200483,
"narHash": "sha256-JO+lFN2HsCwSLMUWXHeOad6QUxOuwe9UOAF/iSl1J4I=",
"lastModified": 1737165118,
"narHash": "sha256-s40Kk/OulP3J/1JvC3VT16U4r/Xw6Qdi7SRw3LYkPWs=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "3f0a8ac25fb674611b98089ca3a5dd6480175751",
"rev": "6a3ae7a5a12fb8cac2d59d7df7cbd95f9b2f0566",
"type": "github"
},
"original": {
......
pnpm-lock.yaml
+ 18
− 18
View file @ 1738d188
......@@ -1250,8 +1250,8 @@ packages:
caniuse-api@3.0.0:
resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
caniuse-lite@1.0.30001692:
resolution: {integrity: sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==}
caniuse-lite@1.0.30001695:
resolution: {integrity: sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==}
chai-dom@1.12.1:
resolution: {integrity: sha512-tvz+D0PJue2VHXRec3udgP/OeeXBiePU3VH6JhEnHQJYzvNzR2nUvEykA9dXVS76JvaUENSOYH8Ufr0kZSnlCQ==}
......@@ -1696,8 +1696,8 @@ packages:
fd-slicer@1.1.0:
resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
fdir@6.4.2:
resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
fdir@6.4.3:
resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
peerDependencies:
picomatch: ^3 || ^4
peerDependenciesMeta:
......@@ -3119,11 +3119,11 @@ packages:
resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
engines: {node: '>=12.0.0'}
tldts-core@6.1.72:
resolution: {integrity: sha512-FW3H9aCaGTJ8l8RVCR3EX8GxsxDbQXuwetwwgXA2chYdsX+NY1ytCBl61narjjehWmCw92tc1AxlcY3668CU8g==}
tldts-core@6.1.73:
resolution: {integrity: sha512-k1g5eX87vxu3g//6XMn62y4qjayu4cYby/PF7Ksnh4F4uUK1Z1ze/mJ4a+y5OjdJ+cXRp+YTInZhH+FGdUWy1w==}
tldts@6.1.72:
resolution: {integrity: sha512-QNtgIqSUb9o2CoUjX9T5TwaIvUUJFU1+12PJkgt42DFV2yf9J6549yTF2uGloQsJ/JOC8X+gIB81ind97hRiIQ==}
tldts@6.1.73:
resolution: {integrity: sha512-/h4bVmuEMm57c2uCiAf1Q9mlQk7cA22m+1Bu0K92vUUtTVT9D4mOFWD9r4WQuTULcG9eeZtNKhLl0Il1LdKGog==}
hasBin: true
to-regex-range@5.0.1:
......@@ -4231,7 +4231,7 @@ snapshots:
autoprefixer@10.4.20(postcss@8.5.1):
dependencies:
browserslist: 4.24.4
caniuse-lite: 1.0.30001692
caniuse-lite: 1.0.30001695
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.1.1
......@@ -4298,7 +4298,7 @@ snapshots:
browserslist@4.24.4:
dependencies:
caniuse-lite: 1.0.30001692
caniuse-lite: 1.0.30001695
electron-to-chromium: 1.5.83
node-releases: 2.0.19
update-browserslist-db: 1.1.2(browserslist@4.24.4)
......@@ -4364,11 +4364,11 @@ snapshots:
caniuse-api@3.0.0:
dependencies:
browserslist: 4.24.4
caniuse-lite: 1.0.30001692
caniuse-lite: 1.0.30001695
lodash.memoize: 4.1.2
lodash.uniq: 4.5.0
caniuse-lite@1.0.30001692: {}
caniuse-lite@1.0.30001695: {}
chai-dom@1.12.1(chai@5.1.2):
dependencies:
......@@ -4884,7 +4884,7 @@ snapshots:
dependencies:
pend: 1.2.0
fdir@6.4.2(picomatch@4.0.2):
fdir@6.4.3(picomatch@4.0.2):
optionalDependencies:
picomatch: 4.0.2
......@@ -6357,14 +6357,14 @@ snapshots:
tinyglobby@0.2.10:
dependencies:
fdir: 6.4.2(picomatch@4.0.2)
fdir: 6.4.3(picomatch@4.0.2)
picomatch: 4.0.2
tldts-core@6.1.72: {}
tldts-core@6.1.73: {}
tldts@6.1.72:
tldts@6.1.73:
dependencies:
tldts-core: 6.1.72
tldts-core: 6.1.73
to-regex-range@5.0.1:
dependencies:
......@@ -6374,7 +6374,7 @@ snapshots:
tough-cookie@5.1.0:
dependencies:
tldts: 6.1.72
tldts: 6.1.73
tr46@0.0.3: {}
......
source/components/datatable/datatable.mjs
+ 34
− 1
View file @ 1738d188
......@@ -342,6 +342,18 @@ class DataTable extends CustomElement {
initControlReferences.call(this);
initEventHandler.call(this);
getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
if (e instanceof HTMLElement) {
e.style.visibility = "hidden";
e.style.width= "max-content";
const pN = e.parentNode;
if (pN instanceof HTMLElement) {
pN.style.flexGrow = "10";
}
}
})
getHostConfig
.call(this, getColumnVisibilityConfigKey)
.then((config) => {
......@@ -869,13 +881,19 @@ function initEventHandler() {
"select-row",
);
if (!element) {
if (!(element instanceof HTMLInputElement)) {
return;
}
const parentNode= element.parentNode
if (!(parentNode instanceof HTMLDivElement)) {
return;
}
const key = element.parentNode.getAttribute(
"data-monster-insert-reference",
);
const row = self.getGridElements(
`[data-monster-insert-reference="${key}"]`,
);
......@@ -909,6 +927,14 @@ function initEventHandler() {
`[data-monster-role="select-all"]`,
);
getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
const selected = self.getSelectedRows();
const mode = (selected.length === 0) ? "hidden" : "visible";
if (e instanceof HTMLElement) {
e.style.visibility = mode;
}
})
if (selectAll) {
selectAll.checked = allSelected;
}
......@@ -937,6 +963,13 @@ function initEventHandler() {
fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
}
getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
if (e instanceof HTMLElement) {
e.style.visibility = mode ? "visible" : "hidden";
}
})
fireCustomEvent(this, "monster-datatable-selection-changed", {});
}
};
......
source/components/datatable/style/datatable.pcss
+ 2
− 1
View file @ 1738d188
......@@ -66,7 +66,8 @@
::slotted(.monster-button-group) {
display: flex;
flex-direction: row !important;
align-items: flex-end;
align-items: center;
justify-content: flex-end;
}
[data-monster-role=datatable] {
......
source/components/datatable/stylesheet/datatable.mjs
+ 7
− 14
View file @ 1738d188
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment