lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nice button transitions

Browse Source
This commit is contained in:
shamoon 2024-03-31 23:41:59 -07:00
parent 26539854aa
commit 7a73ce8ad3
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src-ui/src/app/components/app-frame/global-search/global-search.component.html
View File

@ -13,19 +13,23 @@
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs> <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
<span class="text-truncate">{{item[nameProp]}}</span> <span class="text-truncate">{{item[nameProp]}}</span>
<div class="btn-group ms-auto"> <div class="btn-group ms-auto">
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="primaryAction(type, item); $event.stopPropagation()"> <button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="primaryAction(type, item); $event.stopPropagation()">
@if (type === 'document' || type === 'workflow' || type === 'customField' || type === 'group' || type === 'user') { @if (type === 'document' || type === 'workflow' || type === 'customField' || type === 'group' || type === 'user') {
<i-bs width="1em" height="1em" name="pencil"></i-bs> <i-bs width="1em" height="1em" name="pencil"></i-bs>
<span class="">&nbsp;<ng-container i18n>Edit</ng-container></span>
} @else { } @else {
<i-bs width="1em" height="1em" name="filter"></i-bs> <i-bs width="1em" height="1em" name="filter"></i-bs>
<span class="">&nbsp;<ng-container i18n>Filter documents</ng-container></span>
} }
</button> </button>
@if (type !== 'workflow' && type !== 'customField' && type !== 'group' && type !== 'user') { @if (type !== 'workflow' && type !== 'customField' && type !== 'group' && type !== 'user') {
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="secondaryAction(type, item); $event.stopPropagation()"> <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="secondaryAction(type, item); $event.stopPropagation()">
@if (type === 'document') { @if (type === 'document') {
<i-bs width="1em" height="1em" name="download"></i-bs> <i-bs width="1em" height="1em" name="download"></i-bs>
<span class="">&nbsp;<ng-container i18n>Download</ng-container></span>
} @else { } @else {
<i-bs width="1em" height="1em" name="pencil"></i-bs> <i-bs width="1em" height="1em" name="pencil"></i-bs>
<span class="">&nbsp;<ng-container i18n>Edit</ng-container></span>
} }
</button> </button>
} }

21
src-ui/src/app/components/app-frame/global-search/global-search.component.scss
View File

@ -62,3 +62,24 @@ form {
.dropdown-item:has(button:focus) { .dropdown-item:has(button:focus) {
background-color: var(--pngx-bg-alt); background-color: var(--pngx-bg-alt);
} }
.dropdown-item button {
transition: all 0.3s ease;
max-width: 2rem;
overflow: hidden;
}
.dropdown-item button span {
opacity: 0;
transition: inherit;
}
.dropdown-item:hover button,
.dropdown-item:has(button:focus) button {
max-width: 10rem;
}
.dropdown-item:hover button span,
.dropdown-item:has(button:focus) span {
opacity: 1;
}