extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-01 19:49:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

make "expand/collapse folder" easier to click especially on mobile

Browse Source
This commit is contained in:
milan 2024-11-28 11:49:48 +01:00
parent 43af164f7a
commit ba84d20eb4
4 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/js/etemplate/Et2Tree/Et2Tree.styles.ts
View File

@ -6,11 +6,19 @@ export default css`
display: block;
}
/* Style expand and collapse buttons so we can use technically larger images to increase clickable surface*/
::part(expand-button) {
rotate: none;
padding: 0 var(--sl-spacing-small);
width: 5em;
height: 1.2em;
margin-left: -2.4em;
margin-right: calc(-2em + 10px);
}
sl-icon[slot='collapse-icon'],sl-icon[slot='expand-icon']{
width: inherit;
height: inherit;
}
/* Stop icon from shrinking if there's not enough space */
/* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/

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

@ -1112,8 +1112,8 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
@dragleave=${(event) => {this.handleDragEvent(event);}}
@drop=${(event) => {this.handleDragEvent(event);}}
>
<sl-icon name="chevron-right" slot="expand-icon"></sl-icon>
<sl-icon name="chevron-down" slot="collapse-icon"></sl-icon>
<sl-icon src="${this.egw().image("bi-chevron-right")}" slot="expand-icon"></sl-icon>
<sl-icon src="${this.egw().image("bi-chevron-down")}" slot="collapse-icon"></sl-icon>
<slot></slot>
${repeat(this._selectOptions, (o) => o.value, this._optionTemplate)}
</sl-tree>

4
api/templates/default/images/bi-chevron-down.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 1 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

4
api/templates/default/images/bi-chevron-right.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 1 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 334 B