feat(projectFolders): make all the buttons and context menus work better

This commit is contained in:
Johannes Millan 2025-09-20 14:45:56 +02:00
parent 268656d9cf
commit 5ebd758689
3 changed files with 9 additions and 27 deletions

View file

@ -67,7 +67,7 @@
[class.expanded]="expanded()"
[class.collapsed]="!expanded()"
>
chevron_right
expand_more
</mat-icon>
@if (label()) {
<span
@ -80,19 +80,9 @@
}
</button>
<button
[style.visibility]="showMoreButton() ? 'visible' : 'hidden'"
#folderSettingsBtn
class="additional-btn"
mat-icon-button
>
<mat-icon>more_vert</mat-icon>
</button>
<context-menu
[contextMenu]="folderContextMenu"
[rightClickTriggerEl]="folderBtn"
[leftClickTriggerEl]="folderSettingsBtn"
></context-menu>
<ng-template #folderContextMenu>

View file

@ -1,13 +1,11 @@
<div class="g-multi-btn-wrapper">
<nav-item
[mode]="'folder'"
[container]="null"
[folderId]="item().id"
[container]="'group'"
[expanded]="isExpanded()"
[ariaControls]="'group-' + item().id"
[icon]="item().icon"
[svgIcon]="item().svgIcon"
[label]="item().label"
[label]="item().label | translate"
[showLabels]="showLabels()"
(clicked)="onHeaderClick()"
></nav-item>
@ -62,13 +60,12 @@
>
<div class="nav-child-item folder-item draggable">
<nav-item
[container]="'action'"
[mode]="'folder'"
[folderId]="node.data?.kind === 'folder' ? node.data.id : ''"
[expanded]="expanded"
[icon]="expanded ? 'folder_open' : 'folder'"
[label]="node.data?.kind === 'folder' ? node.data.name : node.data.label"
[variant]="'nav'"
[showLabels]="showLabels()"
[showMoreButton]="false"
(clicked)="onChildClick(node)"
></nav-item>
</div>

View file

@ -10,19 +10,17 @@
display: flex;
align-items: center;
position: relative;
overflow: hidden;
// Hide additional buttons by default on desktop
.additional-btns {
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
display: none;
}
// Show additional buttons on focus/hover (desktop)
&:focus-within .additional-btns,
&:hover .additional-btns {
opacity: 1;
visibility: visible !important;
display: flex;
}
// Folder header drop zone styling
@ -51,10 +49,7 @@
.additional-btns {
display: flex;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin-left: auto;
}
.additional-btn {