extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added media Query to Et2Tree style to improve mobile display and made expanding/collapsing of folders easier on mobile

Browse Source
This commit is contained in:
milan 2024-06-20 18:25:31 +02:00
parent abf5c00923
commit f9be01774d
1 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
api/js/etemplate/Et2Tree/Et2Tree.ts
View File

@ -35,6 +35,39 @@ export type TreeItemData = SelectOption & {
badge?: string;
}
/**
* checks if the event has an Element in its composedPath that satisfies the Tag, className or both
* @param _ev
* @param tag
* @param className
* @returns true iff tag and classname are satisfied on the same Element somewhere in the composedPath and false otherwise
*/
export const composedPathContains = (_ev: any, tag?: string, className?: string) => {
// Tag and classname is given
// check if one element has given tag with given class
if(tag && className)
{
return _ev.composedPath().some((el) => {
return el?.classList?.contains(className) && el?.tagName?.toLowerCase() === tag.toLowerCase()
})
}
// only classname is given
// check if one element has given class
if(className && !tag)
return _ev.composedPath().some((el) => {
return el?.classList?.contains(className)
})
// only tag is given
// check if one element has given tag
if(tag && !className)
return _ev.composedPath().some((el) => {
return el?.tagName?.toLowerCase() === tag.toLowerCase()
})
return false
}
/**
* @event {{id: String, item:SlTreeItem}} sl-expand emmited when tree item expands
* //TODO add for other events
@ -163,8 +196,14 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
//Sl-Trees handle their own onClick events
_handleClick(_ev)
{
const labelClicked = composedPathContains(_ev,"span","tree-item__label")
if (!labelClicked)
{
this._currentSlTreeItem.expanded = !this._currentSlTreeItem.expanded;
}
// check if not expand icon (> or v) was clicked, we have an onclick handler and a string value
if (!(_ev.composedPath()[0].tagName === 'svg' && _ev.composedPath()[0].classList.contains('bi-chevron-right')) &&
// svg bibi-chevron-right is not necessarily the first element in composedPath
if (!(composedPathContains(_ev,"svg","bi-chevron-right")) &&
typeof this.onclick === "function" && typeof _ev.target.value === "string")
{
this.onclick(_ev.target.value, this, _ev.target.value)
@ -225,6 +264,17 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
top: 0;
right: 0.5em;
}
@media only screen and (max-device-width: 768px) {
:host{
--sl-font-size-medium: 1.2rem;
}
sl-tree-item{
padding: 0.1em;
}
}
`