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

fix: update css styles

parent 29829e39
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 2858 additions and 2828 deletions
development/issues/closed/232.html
+ 44
− 30
View file @ f6ea3d15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>revision of the list design including filters #232</title>
<script src="./232.mjs" type="module"></script>
</head>
<body>
......@@ -25,8 +27,7 @@
<monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%"
data-monster-option-features-opendelay="500"
<monster-tabs style="width: 100%" data-monster-option-features-opendelay="500"
data-monster-option-classes-navigation="monster-theme-background-inherit"
data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs">
<div data-monster-button-label="Filter" data-monster-state="active" class="active">
......@@ -45,6 +46,20 @@
The label
<monster-filter-select data-monster-selected-template="selected">
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
<div>sdfsd</div>
</monster-filter-select>
</label>
<label data-monster-label="OID3" data-monster-template="${value | call:range:oid}"
......@@ -53,7 +68,8 @@
<monster-filter-input name="value3" type="search"></monster-filter-input>
</label>
<label data-monster-label="customerUID"
data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID
data-monster-template="${value | call:range:customerUID}"
id="customerUID">customerUID
3<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID5" data-monster-template="${value | call:range:oid}"
id="gd">OID !!
......@@ -80,8 +96,7 @@
<div slot="bar" class="monster-button-group">
<monster-datasource-status data-monster-option-datasource-selector="#data1"></monster-datasource-status>
<monster-embedded-pagination
data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<monster-embedded-pagination data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<!-- <monster-embedded-state-->
<!-- data-monster-datasource-selector="#data1"></monster-embedded-state>-->
......@@ -103,18 +118,16 @@
</ul>
</div>
<div data-monster-mode="fixed" data-monster-align="end" data-monster-head="i18n:key1"
data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | date"></div>
data-monster-grid-template="1fr"><input type="checkbox"></div>
<div data-monster-head="i18n:key2" data-monster-replace="path:t12-row.erpCreation | date"></div>
<div data-monster-mode="fixed" data-monster-head="customerUID"
data-monster-replace="path:t12-row.customerUID"></div>
<div data-monster-mode="fixed"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:t12-row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>">
</div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:t12-row.orderState | tostring | prefix:____"></div>
......@@ -137,4 +150,5 @@
</main>
</body>
</html>
source/components/datatable/columnbar.mjs
+ 27
− 16
View file @ f6ea3d15
......@@ -89,10 +89,7 @@ class ColumnBar extends CustomElement {
* @returns {Map<unknown, unknown>}
*/
get customization() {
return new Map([
...super.customization,
["templateFormatter.i18n", true],
]);
return new Map([...super.customization, ["templateFormatter.i18n", true]]);
}
/**
......@@ -130,14 +127,23 @@ class ColumnBar extends CustomElement {
const isOutsideElement = !path.includes(this);
const isOutsideShadow = !path.includes(this.shadowRoot);
if (isOutsideElement && isOutsideShadow && this[settingsLayerElementSymbol]) {
if (
isOutsideElement &&
isOutsideShadow &&
this[settingsLayerElementSymbol]
) {
this[settingsLayerElementSymbol].classList.remove("visible");
}
}
getGlobalObject("document").addEventListener("click" , this[closeEventHandlerSymbol]);
getGlobalObject("document").addEventListener("touch" , this[closeEventHandlerSymbol]);
};
getGlobalObject("document").addEventListener(
"click",
this[closeEventHandlerSymbol],
);
getGlobalObject("document").addEventListener(
"touch",
this[closeEventHandlerSymbol],
);
}
/**
......@@ -150,11 +156,16 @@ class ColumnBar extends CustomElement {
super.disconnectedCallback();
if (this[closeEventHandlerSymbol]) {
getGlobalObject("document").removeEventListener("click", this[closeEventHandlerSymbol]);
getGlobalObject("document").removeEventListener("touch", this[closeEventHandlerSymbol]);
getGlobalObject("document").removeEventListener(
"click",
this[closeEventHandlerSymbol],
);
getGlobalObject("document").removeEventListener(
"touch",
this[closeEventHandlerSymbol],
);
this[closeEventHandlerSymbol] = null;
}
}
/**
......
source/components/datatable/filter.mjs
+ 4
− 4
View file @ f6ea3d15
source/components/form/select.mjs
+ 2765
− 2763
View file @ f6ea3d15
......@@ -370,8 +370,7 @@ class Select extends CustomControl {
setSelection
.call(this, result.selection)
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -587,8 +586,7 @@ class Select extends CustomControl {
} else {
self
.fetch()
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(self, e);
});
......@@ -606,8 +604,7 @@ class Select extends CustomControl {
lastValue = n;
setSelection
.call(self, n)
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(self, e);
});
......@@ -883,8 +880,7 @@ function importOptionsIntern(data) {
setTimeout(() => {
setSelection
.call(this, this.getOption("selection"))
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -1365,10 +1361,10 @@ function getTranslations() {
function lookupSelection() {
const self = this;
const observer = new IntersectionObserver((entries, obs) => {
const observer = new IntersectionObserver(
(entries, obs) => {
for (const entry of entries) {
if (entry.isIntersecting) {
obs.disconnect(); // Only observe once
setTimeout(() => {
......@@ -1408,7 +1404,9 @@ function lookupSelection() {
for (const s of selection) {
if (s?.["value"]) {
filterFromRemoteByValue.call(self, url, s["value"]).catch((e) => {
filterFromRemoteByValue
.call(self, url, s["value"])
.catch((e) => {
addErrorAttribute(self, e);
});
}
......@@ -1416,13 +1414,14 @@ function lookupSelection() {
}, 100);
}
}
}, {threshold: 0.1});
},
{ threshold: 0.1 },
);
// Beobachte das Element selbst (dieses Element muss im DOM sein)
observer.observe(self);
}
/**
*
* @param url
......@@ -1493,11 +1492,14 @@ function fetchIt(url, controlOptions) {
setStatusOrRemoveBadges.call(this, "error");
reject(new Error("invalid response"));
}).catch((e) => {
})
.catch((e) => {
setStatusOrRemoveBadges.call(this, "error");
reject(e);
});
}).run().catch((e) => {
})
.run()
.catch((e) => {
setStatusOrRemoveBadges.call(this, "error");
addErrorAttribute(this, e);
reject(e);
......@@ -1777,8 +1779,7 @@ function getDefaultTranslation() {
try {
const doc = getDocumentTranslations();
translation.locale = doc.locale;
} catch (e) {
}
} catch (e) {}
return translation;
}
......@@ -2261,7 +2262,9 @@ function filterFromRemoteByValue(optionUrl, value, openPopper) {
addErrorAttribute(this, e);
setStatusOrRemoveBadges.call(this, "error");
});
}).run().catch((e) => {
})
.run()
.catch((e) => {
throw e;
});
}
......@@ -2440,7 +2443,6 @@ function gatherState() {
let filteredSelection = [];
if (type === "radio") {
const selection = [];
const elements = this.shadowRoot.querySelectorAll(
`input[type=${type}]:checked`,
......@@ -2454,28 +2456,29 @@ function gatherState() {
}
filteredSelection = selection;
} else {
const selection = [...this.getOption("selection", [])];
const allElements = this.shadowRoot.querySelectorAll(`input[type=${type}]`);
const checkedElements = this.shadowRoot.querySelectorAll(`input[type=${type}]:checked`);
const currentInputValues = new Set(Array.from(allElements).map(el => el.value));
filteredSelection = selection.filter(sel => !currentInputValues.has(sel.value));
const checkedElements = this.shadowRoot.querySelectorAll(
`input[type=${type}]:checked`,
);
const currentInputValues = new Set(
Array.from(allElements).map((el) => el.value),
);
filteredSelection = selection.filter(
(sel) => !currentInputValues.has(sel.value),
);
for (const input of checkedElements) {
filteredSelection.push({
label: getSelectionLabel.call(this, input.value),
value: input.value,
});
}
}
setSelection
.call(this, filteredSelection)
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2504,8 +2507,7 @@ function clearSelection() {
setSelection
.call(this, [])
.then(() => {
})
.then(() => {})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2747,7 +2749,6 @@ function convertSelectionToValue(selection) {
* @returns {boolean}
*/
function isValueIsEmpty(value) {
let equivalents = this.getOption("empty.equivalents");
if (!isArray(equivalents)) {
if (equivalents === undefined) {
......@@ -3034,7 +3035,8 @@ function initDefaultOptionsFromUrl() {
importOptionsIntern.call(this, data);
setStatusOrRemoveBadges.call(this, "open");
initTotal.call(this, data);
}).catch((e) => {
})
.catch((e) => {
addErrorAttribute(this, e);
setStatusOrRemoveBadges.call(this, "error");
});
......
source/components/layout/collapse.mjs
+ 1
− 4
View file @ f6ea3d15
......@@ -86,7 +86,6 @@ const eventQueueSymbol = Symbol("eventQueue");
*/
const isTransitioningSymbol = Symbol("isTransitioning");
/**
* @private
* @type {symbol}
......@@ -307,7 +306,6 @@ function handleCloseCommand() {
runEventQueue.call(this);
}, 0);
}, 0);
}
/**
......@@ -315,7 +313,6 @@ function handleCloseCommand() {
* @returns {handleOpenCommand}
*/
function handleOpenCommand() {
let node;
if (this[detailsElementSymbol].classList.contains("active")) {
return this;
......
source/components/layout/stylesheet/collapse.mjs
+ 14
− 7
View file @ f6ea3d15
This diff is collapsed.
source/dom/customelement.mjs
+ 3
− 4
View file @ f6ea3d15
......@@ -1083,7 +1083,6 @@ function parseOptionsJSON(data) {
* @returns {*|string}
*/
function substituteI18n(html) {
if (!this.getOption("templateFormatter.i18n", false)) {
return html;
}
......@@ -1094,7 +1093,7 @@ function substituteI18n(html) {
}
const formatter = new Formatter(labels, {});
formatter.setMarker("i18n{", '}')
formatter.setMarker("i18n{", "}");
return formatter.format(html);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment