amorfo77/paperless-ngx
1
0 Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-11-03 05:25:37 +00:00
Code Issues Projects Releases Wiki Activity

pngx-bs-icon

Browse Source
This commit is contained in:
shamoon committed 2026-11-02 19:22:12 -08:00
1 parent 00b212b79d
commit 930770581d
91 files changed
+443 -445
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src-ui/e2e/document-list/document-list.spec.ts
+1 -1
View File
@@ -123,7 +123,7 @@ test('sorting', async ({ page }) => {
await page.getByRole('button', { name: 'Notes' }).click()
await expect(page).toHaveURL(/sort=num_notes/)
await page.getByRole('button', { name: 'Sort' }).click()
await page.locator('.w-100 > label > i-bs').first().click()
await page.locator('.w-100 > label > pngx-bs-icon').first().click()
await expect(page).not.toHaveURL(/reverse=1/)
})
src-ui/src/app/components/admin/config/config.component.html
+3 -3
View File
@@ -28,7 +28,7 @@
{{option.title}}
</h6>
<a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
<i-bs name="info-circle"></i-bs>
<pngx-bs-icon name="info-circle"></pngx-bs-icon>
</a>
@if (isExternallyConfigured(option.config_key)) {
@if (isSet(option.key)) {
@@ -40,11 +40,11 @@
@if (isSet(option.key)) {
@if (isExternallyConfigured(option.config_key)) {
<button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Use the externally configured value" i18n-title (click)="resetOption(option.key)">
<i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset to external</ng-container>
<pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset to external</ng-container>
</button>
} @else {
<button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Reset" i18n-title (click)="resetOption(option.key)">
<i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
<pngx-bs-icon class="me-1" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
</button>
}
}
src-ui/src/app/components/admin/settings/settings.component.html
+9 -9
View File
@@ -5,7 +5,7 @@
i18n-info
>
<button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
<i-bs class="me-2" name="airplane"></i-bs><ng-container i18n>Start tour</ng-container>
<pngx-bs-icon class="me-2" name="airplane"></pngx-bs-icon><ng-container i18n>Start tour</ng-container>
</button>
@if (canViewSystemStatus) {
<button class="btn btn-sm btn-outline-primary position-relative ms-md-5 me-1" (click)="showSystemStatus()"
@@ -13,14 +13,14 @@
@if (!systemStatus()) {
<div class="spinner-border spinner-border-sm me-2 h-75" role="status"></div>
} @else {
<i-bs class="me-2" name="card-checklist"></i-bs>
<pngx-bs-icon class="me-2" name="card-checklist"></pngx-bs-icon>
@if (systemStatusHasErrors) {
<span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
<i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
<pngx-bs-icon name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></pngx-bs-icon>
</span>
} @else {
<span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
<i-bs name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></pngx-bs-icon>
</span>
}
}
@@ -30,7 +30,7 @@
@if (permissionsService.isAdmin()) {
<a class="btn btn-sm btn-primary" href="admin/" target="_blank">
<ng-container i18n>Open Django Admin</ng-container>
<i-bs class="ms-2" name="arrow-up-right"></i-bs>
<pngx-bs-icon class="ms-2" name="arrow-up-right"></pngx-bs-icon>
</a>
}
</pngx-page-header>
@@ -151,7 +151,7 @@
</div>
<div class="col-2">
<button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
<i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><ng-container i18n>Reset</ng-container>
</button>
</div>
</div>
@@ -181,7 +181,7 @@
<div class="col d-flex flex-row align-items-start">
<pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
<button class="btn btn-sm btn-link text-muted me-auto p-0 ms-2" title="What's this?" i18n-title type="button" triggers="mouseenter:mouseleave" [ngbPopover]="updatesPopover" [autoClose]="true">
<i-bs name="question-circle"></i-bs>
<pngx-bs-icon name="question-circle"></pngx-bs-icon>
</button>
<ng-template #updatesPopover>
<p i18n>
@@ -263,9 +263,9 @@
<input type="radio" class="btn-check" id="suggestionSourceBoth" [value]="SuggestionSource.Both" formControlName="documentEditingSuggestionSource">
<label class="btn btn-outline-primary" for="suggestionSourceBoth"><ng-container i18n>Both</ng-container></label>
<input type="radio" class="btn-check" id="suggestionSourceML" [value]="SuggestionSource.ML" formControlName="documentEditingSuggestionSource">
<label class="btn btn-outline-primary" for="suggestionSourceML"><i-bs class="me-1" name="cpu"></i-bs><ng-container i18n>ML only</ng-container></label>
<label class="btn btn-outline-primary" for="suggestionSourceML"><pngx-bs-icon class="me-1" name="cpu"></pngx-bs-icon><ng-container i18n>ML only</ng-container></label>
<input type="radio" class="btn-check" id="suggestionSourceAI" [value]="SuggestionSource.AI" formControlName="documentEditingSuggestionSource">
<label class="btn btn-outline-primary" for="suggestionSourceAI"><i-bs class="me-1" name="stars"></i-bs><ng-container i18n>AI only</ng-container></label>
<label class="btn btn-outline-primary" for="suggestionSourceAI"><pngx-bs-icon class="me-1" name="stars"></pngx-bs-icon><ng-container i18n>AI only</ng-container></label>
</fieldset>
</div>
</div>
src-ui/src/app/components/admin/tasks/tasks.component.html
+11 -11
View File
@@ -7,13 +7,13 @@
>
<div class="btn-toolbar col col-md-auto align-items-center gap-2">
<button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="visibleTasks.length === 0">
<i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
<pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon>{{dismissButtonText}}
</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks() === 0">
<i-bs name="check2-all" class="me-1"></i-bs><ng-container i18n>Dismiss all</ng-container>
<pngx-bs-icon name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss all</ng-container>
</button>
<div class="form-check form-switch mb-0 ms-2">
<input id="autoRefreshSwitch" class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
@@ -86,7 +86,7 @@
</div>
@if (filterText?.length) {
<button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetFilter()" aria-label="Clear search" i18n-aria-label>
<i-bs width="1em" height="1em" name="x"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
</button>
}
<label class="visually-hidden" for="taskSearch" i18n>Search tasks</label>
@@ -98,7 +98,7 @@
@if (isFiltered) {
<button class="btn btn-link py-0 ms-md-auto" (click)="resetFilters()">
<i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><small i18n>Reset filters</small>
</button>
}
@@ -125,7 +125,7 @@
@if (hasMore) {
<ng-container i18n>{{tasks.length}} of {{count}} tasks</ng-container>
<button class="btn btn-link show-all p-0 ms-2 align-baseline" type="button" (click)="setSection(section)">
<ng-container i18n>Show all</ng-container><i-bs class="ms-1" width="1em" height="1em" name="arrow-right"></i-bs>
<ng-container i18n>Show all</ng-container><pngx-bs-icon class="ms-1" width="1em" height="1em" name="arrow-right"></pngx-bs-icon>
</button>
} @else {
<ng-container i18n>{count, plural, =1 {1 task} other {{{count}} tasks}}</ng-container>
@@ -180,7 +180,7 @@
@if (taskShowsSeparateTypeLabel(task)) {
<span class="me-2">{{ task.task_type_display }}</span>
}
<span class="text-nowrap"><i-bs class="me-1" width="1em" height="1em" name="box-arrow-in-right"></i-bs>{{ task.trigger_source_display }}</span>
<span class="text-nowrap"><pngx-bs-icon class="me-1" width="1em" height="1em" name="box-arrow-in-right"></pngx-bs-icon>{{ task.trigger_source_display }}</span>
</div>
</td>
<td class="d-none d-lg-table-cell created-col">{{ task.date_created | customDate:'short' }}</td>
@@ -197,7 +197,7 @@
}
@if (duplicateDocumentId(task)) {
<div class="small text-warning-emphasis d-flex align-items-center gap-1 mt-1">
<i-bs class="lh-1" width="1em" height="1em" name="exclamation-triangle"></i-bs>
<pngx-bs-icon class="lh-1" width="1em" height="1em" name="exclamation-triangle"></pngx-bs-icon>
<span>{{ duplicateTaskLabel(task) }}</span>
</div>
}
@@ -213,18 +213,18 @@
}
<td class="d-lg-none">
<button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();" aria-label="View task details" i18n-aria-label>
<i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
</button>
</td>
<td class="actions-col">
<div class="btn-group" role="group">
<button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
<i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
<pngx-bs-icon name="check" class="me-1"></pngx-bs-icon><ng-container i18n>Dismiss</ng-container>
</button>
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
@if (task.related_document_ids?.[0]) {
<a class="btn btn-sm btn-outline-primary" [routerLink]="['/documents', task.related_document_ids[0]]" (click)="dismissTask(task)">
<i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
<pngx-bs-icon name="file-text" class="me-1"></pngx-bs-icon><ng-container i18n>Open Document</ng-container>
</a>
}
</ng-container>
src-ui/src/app/components/admin/trash/trash.component.html
+8 -8
View File
@@ -5,16 +5,16 @@
i18n-info
infoLink="usage/#document-trash">
<button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Clear selection</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
<i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
<pngx-bs-icon name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore selected</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
<pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete selected</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
<pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Empty trash</ng-container>
</button>
</pngx-page-header>
@@ -59,7 +59,7 @@
<td scope="row">
{{ document.title }}
<pngx-preview-popup [document]="document" linkClasses="btn btn-sm btn-link" #popupPreview>
<i-bs name="eye"></i-bs>
<pngx-bs-icon name="eye"></pngx-bs-icon>
</pngx-preview-popup>
</td>
<td scope="row" class="d-none d-sm-table-cell" i18n>{{ getDaysRemaining(document) }} days</td>
@@ -67,7 +67,7 @@
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="restore(document)" ngbDropdownItem i18n>Restore</button>
@@ -77,10 +77,10 @@
</div>
<div class="btn-group d-none d-sm-block">
<button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
<i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore</ng-container>
<pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Restore</ng-container>
</button>
<button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
</td>
src-ui/src/app/components/admin/users-groups/users-groups.component.html
+6 -6
View File
@@ -11,7 +11,7 @@
<h4 class="d-flex">
<ng-container i18n>Users</ng-container>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add User</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add User</ng-container>
</button>
</h4>
<ul class="list-group">
@@ -32,10 +32,10 @@
<div class="col">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
</div>
@@ -49,7 +49,7 @@
<h4 class="mt-4 d-flex">
<ng-container i18n>Groups</ng-container>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Group</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Group</ng-container>
</button>
</h4>
<ul class="list-group">
@@ -70,10 +70,10 @@
<div class="col">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
</div>
src-ui/src/app/components/app-frame/app-frame.component.html
+36 -36
View File
@@ -2,7 +2,7 @@
<button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
(click)="closeMobileSearch(); toggleMenuCollapsed()">
<i-bs width="1.5em" height="1.5em" name="list"></i-bs>
<pngx-bs-icon width="1.5em" height="1.5em" name="list"></pngx-bs-icon>
</button>
<div class="navbar-brand-container order-sm-0">
<a class="navbar-brand d-flex align-items-center me-0 ps-md-3 py-0"
@@ -34,7 +34,7 @@
<div *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Document }" class="btn-group header-upload-group flex-shrink-0">
<button class="btn btn-sm header-upload border-0 d-flex align-items-center justify-content-center py-0 px-2" type="button"
(click)="fileUpload.click()" aria-label="Upload documents" i18n-aria-label>
<i-bs class="d-flex" width="1.1em" height="1.1em" name="file-earmark-arrow-up"></i-bs><span class="ms-2 d-sm-none d-md-inline" i18n>Upload</span>
<pngx-bs-icon class="d-flex" width="1.1em" height="1.1em" name="file-earmark-arrow-up"></pngx-bs-icon><span class="ms-2 d-sm-none d-md-inline" i18n>Upload</span>
</button>
@if (uploadsInProgress > 0) {
<button class="btn btn-sm header-upload border-0 d-flex align-items-center py-0 px-2" type="button"
@@ -52,7 +52,7 @@
<pngx-toasts-dropdown></pngx-toasts-dropdown>
<li ngbDropdown class="nav-item dropdown">
<button class="btn navbar-action border-0 me-1 me-md-2" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
<pngx-bs-icon width="1.3em" height="1.3em" name="person-circle"></pngx-bs-icon>
<span class="small ms-2 d-none d-sm-inline">
{{this.settingsService.displayName}}
</span>
@@ -63,19 +63,19 @@
<div class="dropdown-divider"></div>
</div>
<button ngbDropdownItem class="nav-link" (click)="editProfile()">
<i-bs class="me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container>
<pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><ng-container i18n>My Profile</ng-container>
</button>
<a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
*pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }">
<i-bs class="me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
<pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><ng-container i18n>Settings</ng-container>
</a>
<a ngbDropdownItem class="nav-link d-flex" href="accounts/logout/" (click)="onLogout()">
<i-bs class="me-2" name="door-open"></i-bs><ng-container i18n>Logout</ng-container>
<pngx-bs-icon class="me-2" name="door-open"></pngx-bs-icon><ng-container i18n>Logout</ng-container>
</a>
<div class="dropdown-divider"></div>
<a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
href="https://docs.paperless-ngx.com">
<i-bs class="me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container>
<pngx-bs-icon class="me-2" name="question-circle"></pngx-bs-icon><ng-container i18n>Documentation</ng-container>
</a>
</div>
</li>
@@ -93,9 +93,9 @@
@if (canSaveSettings) {
<button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()" [aria-label]="slimSidebarEnabled ? 'Expand sidebar' : 'Collapse sidebar'" i18n-aria-label>
@if (slimSidebarEnabled) {
<i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-right"></pngx-bs-icon>
} @else {
<i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="chevron-double-left"></pngx-bs-icon>
}
</button>
}
@@ -105,7 +105,7 @@
<a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="house"></i-bs><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
<pngx-bs-icon class="me-2" name="house"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Dashboard</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Dashboard" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Dashboard)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Dashboard, $event)"></pngx-input-switch>
@@ -117,7 +117,7 @@
(click)="closeMenu()"
ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="files"></i-bs><span class="nav-link-label"><ng-container i18n>Documents</ng-container></span>
<pngx-bs-icon class="me-2" name="files"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Documents</ng-container></span>
</a>
</li>
</ul>
@@ -136,7 +136,7 @@
routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
[disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
popoverClass="popover-slim">
<i-bs class="me-2" [name]="view.icon || 'funnel'"></i-bs><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
<pngx-bs-icon class="me-2" [name]="view.icon || 'funnel'"></pngx-bs-icon><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
@if (showSidebarCounts && !slimSidebarEnabled) {
<span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
}
@@ -147,7 +147,7 @@
</a>
@if (settingsService.organizingSidebarSavedViews() && canSaveSettings) {
<div class="position-absolute end-0 top-0 px-1 py-2" [class.me-n2]="slimSidebarEnabled" cdkDragHandle>
<i-bs name="grip-vertical"></i-bs>
<pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
</div>
}
</li>
@@ -174,10 +174,10 @@
routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
[disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
popoverClass="popover-slim">
<i-bs class="me-2" name="file-text"></i-bs><span>{{d.title | documentTitle}}</span>
<pngx-bs-icon class="me-2" name="file-text"></pngx-bs-icon><span>{{d.title | documentTitle}}</span>
<span class="close flex-column justify-content-center"
(click)="$event.preventDefault(); $event.stopPropagation(); closeDocument(d)">
<i-bs name="x"></i-bs>
<pngx-bs-icon name="x"></pngx-bs-icon>
</span>
</a>
</li>
@@ -188,7 +188,7 @@
[class.text-truncate]="!slimSidebarEnabled" (click)="closeAll()"
ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="x"></i-bs><span class="nav-link-label"><ng-container i18n>Close all</ng-container></span>
<pngx-bs-icon class="me-2" name="x"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Close all</ng-container></span>
</button>
</li>
}
@@ -207,7 +207,7 @@
[routerLinkActiveOptions]="{ exact: !(slimSidebarEnabled || attributesSectionsCollapsed) }" (click)="closeMenu()"
ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs name="stack"></i-bs><span class="nav-link-label ms-2"><ng-container i18n>Attributes</ng-container></span>
<pngx-bs-icon name="stack"></pngx-bs-icon><span class="nav-link-label ms-2"><ng-container i18n>Attributes</ng-container></span>
</a>
@if (!slimSidebarEnabled && canSaveSettings) {
<button
@@ -217,7 +217,7 @@
[attr.aria-label]="attributesSectionsCollapsed ? 'Expand attributes sections' : 'Collapse attributes sections'"
i18n-aria-label
>
<i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
<pngx-bs-icon [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></pngx-bs-icon>
</button>
}
</div>
@@ -228,27 +228,27 @@
<ul class="nav flex-column">
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
<a class="nav-link" routerLink="attributes/tags" routerLinkActive="active" (click)="closeMenu()">
<i-bs class="me-2" name="tags"></i-bs><span class="nav-link-label"><ng-container i18n>Tags</ng-container></span>
<pngx-bs-icon class="me-2" name="tags"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tags</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
<a class="nav-link" routerLink="attributes/correspondents" routerLinkActive="active" (click)="closeMenu()">
<i-bs class="me-2" name="person"></i-bs><span class="nav-link-label"><ng-container i18n>Correspondents</ng-container></span>
<pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Correspondents</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
<a class="nav-link" routerLink="attributes/documenttypes" routerLinkActive="active" (click)="closeMenu()">
<i-bs class="me-2" name="hash"></i-bs><span class="nav-link-label"><ng-container i18n>Document types</ng-container></span>
<pngx-bs-icon class="me-2" name="hash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Document types</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
<a class="nav-link" routerLink="attributes/storagepaths" routerLinkActive="active" (click)="closeMenu()">
<i-bs class="me-2" name="folder"></i-bs><span class="nav-link-label"><ng-container i18n>Storage paths</ng-container></span>
<pngx-bs-icon class="me-2" name="folder"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Storage paths</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
<a class="nav-link" routerLink="attributes/customfields" routerLinkActive="active" (click)="closeMenu()">
<i-bs class="me-2" name="ui-radios"></i-bs><span class="nav-link-label"><ng-container i18n>Custom fields</ng-container></span>
<pngx-bs-icon class="me-2" name="ui-radios"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Custom fields</ng-container></span>
</a>
</li>
</ul>
@@ -259,7 +259,7 @@
<a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="window-stack"></i-bs><span class="nav-link-label"><ng-container i18n>Saved Views</ng-container></span>
<pngx-bs-icon class="me-2" name="window-stack"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Saved Views</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Saved Views" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.SavedViews)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.SavedViews, $event)"></pngx-input-switch>
@@ -270,7 +270,7 @@
<a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="share-links" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Share links" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="link"></i-bs><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
<pngx-bs-icon class="me-2" name="link"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Share links</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Share Links" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.ShareLinks)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.ShareLinks, $event)"></pngx-input-switch>
@@ -283,7 +283,7 @@
<a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="boxes"></i-bs><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
<pngx-bs-icon class="me-2" name="boxes"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Workflows</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Workflows" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Workflows, $event)"></pngx-input-switch>
@@ -294,7 +294,7 @@
<a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="envelope"></i-bs><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
<pngx-bs-icon class="me-2" name="envelope"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Mail</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Mail" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Mail, $event)"></pngx-input-switch>
@@ -304,7 +304,7 @@
<a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="trash"></i-bs><span class="nav-link-label"><ng-container i18n>Trash</ng-container></span>
<pngx-bs-icon class="me-2" name="trash"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Trash</ng-container></span>
</a>
</li>
</ul>
@@ -320,21 +320,21 @@
<a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="gear"></i-bs><span class="nav-link-label"><ng-container i18n>Settings</ng-container></span>
<pngx-bs-icon class="me-2" name="gear"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Settings</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.AppConfig }">
<a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="sliders2-vertical"></i-bs><span class="nav-link-label"><ng-container i18n>Configuration</ng-container></span>
<pngx-bs-icon class="me-2" name="sliders2-vertical"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Configuration</ng-container></span>
</a>
</li>
<li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
<a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="people"></i-bs><span class="nav-link-label"><ng-container i18n>Users & Groups</ng-container></span>
<pngx-bs-icon class="me-2" name="people"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Users & Groups</ng-container></span>
</a>
</li>
<li class="nav-item app-link"
@@ -343,7 +343,7 @@
<a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="list-task"></i-bs><span class="nav-link-label"><ng-container i18n>Tasks</ng-container></span>
<pngx-bs-icon class="me-2" name="list-task"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Tasks</ng-container></span>
@if (tasksService.needsAttentionTasksCount > 0 && !slimSidebarEnabled) {
<span class="badge bg-danger ms-2 d-inline flex-shrink-0">{{tasksService.needsAttentionTasksCount}}</span>
}
@@ -357,7 +357,7 @@
<a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="me-2" name="text-left"></i-bs><span class="nav-link-label"><ng-container i18n>Logs</ng-container></span>
<pngx-bs-icon class="me-2" name="text-left"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>Logs</ng-container></span>
</a>
</li>
}
@@ -366,7 +366,7 @@
target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="d-flex me-2" name="question-circle"></i-bs><span><ng-container i18n>Documentation</ng-container></span>
<pngx-bs-icon class="d-flex me-2" name="question-circle"></pngx-bs-icon><span><ng-container i18n>Documentation</ng-container></span>
</a>
@if (settingsService.organizingSidebarItems()) {
<pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Documentation" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Documentation)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Documentation, $event)"></pngx-input-switch>
@@ -408,7 +408,7 @@
href="https://github.com/paperless-ngx/paperless-ngx/releases"
[ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
container="body">
<i-bs width="1.2em" height="1.2em" name="info-circle" class="me-1"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="info-circle" class="me-1"></pngx-bs-icon>
@if (appRemoteVersion()?.update_available) {
<ng-container i18n>Update available</ng-container>
}
@@ -418,7 +418,7 @@
<a *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" class="small text-decoration-none" routerLink="/settings" fragment="update-checking" aria-label="Configure update checking" i18n-aria-label
[ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
container="body">
<i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="info-circle"></pngx-bs-icon>
</a>
}
</div>
src-ui/src/app/components/app-frame/app-frame.component.scss
+8 -8
View File
@@ -142,7 +142,7 @@ main {
padding-left: 0;
padding-right: 0;
i-bs {
pngx-bs-icon {
margin-right: 0 !important;
}
}
@@ -268,7 +268,7 @@ main {
}
}
i-bs {
pngx-bs-icon {
position: relative;
top: -1px;
}
@@ -279,7 +279,7 @@ main {
align-items: center;
min-width: 0;
> i-bs {
> pngx-bs-icon {
flex: 0 0 auto;
}
@@ -373,11 +373,11 @@ main {
width: 1.8rem;
height: 100%;
i-bs {
pngx-bs-icon {
opacity: 0.5;
}
&:hover i-bs {
&:hover pngx-bs-icon {
opacity: 1;
}
}
@@ -392,7 +392,7 @@ main {
text-decoration: underline;
}
i-bs {
pngx-bs-icon {
margin-bottom: 2px;
}
}
@@ -665,7 +665,7 @@ main {
.navbar .dropdown-menu {
font-size: 0.875rem; // body size
a i-bs, button i-bs {
a pngx-bs-icon, button pngx-bs-icon {
opacity: 0.6;
}
}
@@ -693,7 +693,7 @@ main {
cursor: move;
}
::ng-deep .navItemDrag .position-absolute i-bs {
::ng-deep .navItemDrag .position-absolute pngx-bs-icon {
display: none;
}
src-ui/src/app/components/app-frame/global-search/global-search.component.html
+9 -9
View File
@@ -1,7 +1,7 @@
<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
<form class="form-inline position-relative">
<i-bs width="1em" height="1em" name="search"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="search"></pngx-bs-icon>
<div class="input-group">
<div class="form-control form-control-sm">
<input class="bg-transparent border-0 w-100 h-100" #searchInput type="text" name="query"
@@ -25,7 +25,7 @@
} @else {
<ng-container i18n>Search</ng-container>
}
<i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="arrow-right-short"></pngx-bs-icon>
</button>
}
</div>
@@ -35,7 +35,7 @@
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
(click)="primaryAction(type, item, $event)"
(mouseenter)="onItemHover($event)">
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></pngx-bs-icon>
<div class="text-truncate">
{{item[nameProp]}}
@if (date) {
@@ -49,13 +49,13 @@
[disabled]="disablePrimaryButton(type, item)"
(mouseenter)="onButtonHover($event)">
@if (type === DataType.Document) {
<i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="file-earmark-richtext" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
} @else if (type === DataType.SavedView) {
<i-bs width="1em" height="1em" name="eye" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="eye" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
} @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
} @else {
<i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><span><ng-container i18n>Filter documents</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><span><ng-container i18n>Filter documents</ng-container></span>
}
</button>
@if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
@@ -65,9 +65,9 @@
[disabled]="disableSecondaryButton(type, item)"
(mouseenter)="onButtonHover($event)">
@if (type === DataType.Document) {
<i-bs width="1em" height="1em" name="download" class="me-1"></i-bs><span><ng-container i18n>Download</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="download" class="me-1"></pngx-bs-icon><span><ng-container i18n>Download</ng-container></span>
} @else {
<i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
<pngx-bs-icon width="1em" height="1em" name="file-earmark-richtext" class="me-1"></pngx-bs-icon><span><ng-container i18n>Open</ng-container></span>
}
</button>
}
src-ui/src/app/components/app-frame/global-search/global-search.component.scss
+3 -3
View File
@@ -1,7 +1,7 @@
form {
position: relative;
> i-bs[name="search"] {
> pngx-bs-icon[name="search"] {
position: absolute;
left: 0.6rem;
top: .25rem;
@@ -14,7 +14,7 @@ form {
}
&:focus-within {
i-bs[name="search"],
pngx-bs-icon[name="search"],
.badge {
display: none !important;
}
@@ -72,7 +72,7 @@ form {
.dropdown.show {
// Hide the search icon when the dropdown is shown
i-bs[name="search"] {
pngx-bs-icon[name="search"] {
display: none !important;
}
src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
+3 -3
View File
@@ -4,7 +4,7 @@
<span class="notification-count badge rounded-pill z-3 pe-none position-absolute" [class.bg-danger]="hasUnreadError()" [class.bg-secondary]="!hasUnreadError()">{{ unread().length }}</span>
}
<button class="btn navbar-action border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
<pngx-bs-icon width="1.3em" height="1.3em" name="bell"></pngx-bs-icon>
</button>
<div ngbDropdownMenu class="dropdown-menu-end shadow p-2" aria-labelledby="notificationsDropdown">
<div class="d-flex align-items-center px-1 mb-2">
@@ -12,13 +12,13 @@
@if (toasts().length) {
<button class="btn btn-link btn-sm p-0 ms-auto text-body-secondary text-decoration-none clear-all"
(click)="toastService.clearToasts()">
<i-bs width="1em" height="1em" name="check2-all" class="me-1"></i-bs><ng-container i18n>Clear All</ng-container>
<pngx-bs-icon width="1em" height="1em" name="check2-all" class="me-1"></pngx-bs-icon><ng-container i18n>Clear All</ng-container>
</button>
}
</div>
@if (toasts().length === 0) {
<div class="text-center text-body-secondary small py-4">
<i-bs width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></i-bs>
<pngx-bs-icon width="1.5em" height="1.5em" name="bell" class="d-block mx-auto mb-2 opacity-50"></pngx-bs-icon>
<ng-container i18n>No notifications</ng-container>
</div>
}
src-ui/src/app/components/chat/chat/chat.component.html
+6 -6
View File
@@ -1,11 +1,11 @@
<li ngbDropdown class="nav-item" display="dynamic" placement="bottom-end" [popperOptions]="popperOptions" (openChange)="onOpenChange($event)">
<button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
<i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
<pngx-bs-icon width="1.3em" height="1.3em" name="chatSquareDots"></pngx-bs-icon>
</button>
<div ngbDropdownMenu class="dropdown-menu-end shadow p-0 overflow-hidden" aria-labelledby="chatDropdown">
<div class="d-flex align-items-center border-bottom px-3 py-2">
<i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="stars" class="text-primary me-2"></pngx-bs-icon>
<span class="fw-semibold">
@if (documentId()) {
<ng-container i18n>Ask about this document</ng-container>
@@ -15,7 +15,7 @@
</span>
@if (messages().length) {
<button class="btn btn-sm btn-link text-muted ms-auto p-0" type="button" (click)="clearChat()" title="Clear chat" i18n-title>
<i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise"></pngx-bs-icon>
</button>
}
</div>
@@ -46,7 +46,7 @@
<div class="list-group-item text-muted small py-1" i18n>Sources</div>
@for (reference of message.references; track reference.id) {
<a class="list-group-item list-group-item-action d-flex align-items-center text-primary" [routerLink]="['/documents', reference.id]" [title]="reference.title">
<i-bs width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></i-bs><span class="text-truncate">{{ reference.title }}</span>
<pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></pngx-bs-icon><span class="text-truncate">{{ reference.title }}</span>
</a>
}
</div>
@@ -72,11 +72,11 @@
/>
@if (loading()) {
<button class="btn btn-outline-secondary" type="button" (click)="stopStreaming()" title="Stop" i18n-title aria-label="Stop" i18n-aria-label>
<i-bs width="1em" height="1em" name="x-lg"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="x-lg"></pngx-bs-icon>
</button>
} @else {
<button class="btn btn-primary" type="button" (click)="sendMessage()" title="Send" i18n-title aria-label="Send" i18n-aria-label>
<i-bs width="1em" height="1em" name="arrow-return-left"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="arrow-return-left"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/bootstrap-icon/bootstrap-icon.component.ts
+1 -3
View File
@@ -19,9 +19,7 @@ const toKey = (name: string) =>
* Icons must be registered in `./icons.ts`.
*/
@Component({
// keep the selector of the ngx-bootstrap-icons
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'i-bs',
selector: 'pngx-bs-icon',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
})
src-ui/src/app/components/common/bootstrap-icon/icons.ts
+1 -1
View File
@@ -154,7 +154,7 @@ import xLg from 'bootstrap-icons/icons/x-lg.svg'
import x from 'bootstrap-icons/icons/x.svg'
/**
* `<i-bs>`. Only icons registered here are bundled but can add
* `<pngx-bs-icon>`. Only icons registered here are bundled but can add
* new ones (any icon from the bootstrap-icons package) as needed.
*/
export const icons: Record<string, string> = {
src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
+2 -2
View File
@@ -1,11 +1,11 @@
@if (active()) {
<button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
@if (!isNumbered() && selected()) {
<i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
<pngx-bs-icon class="check" width="1em" height="1em" name="check-lg"></pngx-bs-icon>
}
@if (isNumbered()) {
<div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
}
<i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
<pngx-bs-icon class="x" width=".9em" height="1em" name="x-lg"></pngx-bs-icon>
</button>
}
src-ui/src/app/components/common/confirm-button/confirm-button.component.html
+1 -1
View File
@@ -10,7 +10,7 @@
popoverClass="popover-slim"
>
@if (iconName) {
<i-bs [class.me-1]="label" name="{{iconName}}"></i-bs>
<pngx-bs-icon [class.me-1]="label" name="{{iconName}}"></pngx-bs-icon>
}
<ng-container>{{label}}</ng-container>
</button>
src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.html
+1 -1
View File
@@ -22,7 +22,7 @@
@let document = getDocument(documentID);
@if (document) {
<li class="list-group-item d-flex align-items-center" cdkDrag>
<i-bs name="grip-vertical" class="me-2"></i-bs>
<pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
<div class="d-flex flex-column">
<div>
@if (document.correspondent) {
src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.html
+1 -1
View File
@@ -15,7 +15,7 @@
@let document = getDocument(documentID);
@if (document) {
<li class="list-group-item d-flex align-items-center" cdkDrag>
<i-bs name="grip-vertical" class="me-2"></i-bs>
<pngx-bs-icon name="grip-vertical" class="me-2"></pngx-bs-icon>
<div class="d-flex flex-column">
<div>
@if (document.correspondent) {
src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html
+2 -2
View File
@@ -18,7 +18,7 @@
(ngModelChange)="onUpdateDocumentChange($event)"
/>
<label class="btn btn-outline-primary btn-sm" for="removeReplace">
<i-bs name="pencil"></i-bs>
<pngx-bs-icon name="pencil"></pngx-bs-icon>
<span class="ms-2" i18n>Replace current document</span>
</label>
<input
@@ -31,7 +31,7 @@
(ngModelChange)="onUpdateDocumentChange($event)"
/>
<label class="btn btn-outline-primary btn-sm" for="removeCreate">
<i-bs name="plus"></i-bs>
<pngx-bs-icon name="plus"></pngx-bs-icon>
<span class="ms-2" i18n>Create new document</span>
</label>
</div>
src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html
+2 -2
View File
@@ -7,7 +7,7 @@
<div class="row">
<div class="col-2 d-flex justify-content-end">
<button class="btn btn-secondary mt-auto" (click)="rotate(false)" aria-label="Rotate counterclockwise" i18n-aria-label>
<i-bs name="arrow-counterclockwise"></i-bs>
<pngx-bs-icon name="arrow-counterclockwise"></pngx-bs-icon>
</button>
</div>
<div class="col-8 d-flex align-items-center">
@@ -17,7 +17,7 @@
</div>
<div class="col-2 d-flex">
<button class="btn btn-secondary mt-auto" (click)="rotate()" aria-label="Rotate clockwise" i18n-aria-label>
<i-bs name="arrow-clockwise"></i-bs>
<pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
</button>
</div>
</div>
src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
+1 -1
View File
@@ -20,7 +20,7 @@
@for (docId of value; track docId) {
@if (getDocumentTitle(docId)) {
<a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
<i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ getDocumentTitle(docId) }}</span>
<pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-1"></pngx-bs-icon><span>{{ getDocumentTitle(docId) }}</span>
</a>
}
}
src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
+2 -2
View File
@@ -1,6 +1,6 @@
<div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions">
<button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle aria-label="Custom Fields" i18n-aria-label>
<i-bs name="ui-radios"></i-bs><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
<pngx-bs-icon name="ui-radios"></pngx-bs-icon><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
<div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
@@ -16,7 +16,7 @@
}
@if (!filterText?.length || filteredFields.length === 0) {
<button type="button" class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
<i-bs width=".9em" height=".9em" name="asterisk" class="me-1"></i-bs><ng-container i18n>Create new field</ng-container>
<pngx-bs-icon width=".9em" height=".9em" name="asterisk" class="me-1"></pngx-bs-icon><ng-container i18n>Create new field</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+8 -8
View File
@@ -1,7 +1,7 @@
@if (useDropdown) {
<div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
<button class="btn btn-sm" [ngClass]="!editing && isActive ? 'btn-primary' : 'btn-outline-primary'" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled" [aria-label]="title">
<i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
@if (isActive) {
<pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
}
@@ -38,11 +38,11 @@
<fieldset class="btn-group btn-group-sm flex-shrink-0 date-mode" aria-label="Date mode" i18n-aria-label>
<input type="radio" class="btn-check" [id]="atom.id + '_fixed'" [name]="atom.id + '_dateMode'" [checked]="!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Fixed date" i18n-aria-label>
<label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_fixed'" title="Fixed date" i18n-title>
<i-bs name="calendar"></i-bs><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
<pngx-bs-icon name="calendar"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
</label>
<input type="radio" class="btn-check" [id]="atom.id + '_relative'" [name]="atom.id + '_dateMode'" [checked]="!!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Relative date" i18n-aria-label>
<label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_relative'" title="Relative date" i18n-title>
<i-bs name="clock-history"></i-bs><span class="d-none d-md-inline ms-2" i18n>Relative</span>
<pngx-bs-icon name="clock-history"></pngx-bs-icon><span class="d-none d-md-inline ms-2" i18n>Relative</span>
</label>
</fieldset>
<div class="input-group input-group-sm flex-grow-1">
@@ -70,7 +70,7 @@
#d="ngbDatepicker"
[footerTemplate]="datePickerFooterTemplate" />
<button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button" aria-label="Open date picker" i18n-aria-label>
<i-bs name="calendar-event"></i-bs>
<pngx-bs-icon name="calendar-event"></pngx-bs-icon>
</button>
<ng-template #datePickerFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
@@ -187,7 +187,7 @@
}
</div>
<button class="btn btn-link btn-sm text-danger pe-0 align-self-center" type="button" (click)="removeElement(atom)" [disabled]="disabled" aria-label="Remove query" i18n-aria-label>
<i-bs name="x-circle"></i-bs>
<pngx-bs-icon name="x-circle"></pngx-bs-icon>
</button>
</ng-template>
@@ -221,14 +221,14 @@
</div>
<div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add query" i18n-title (click)="addAtom(expression)" [disabled]="disabled || expression.value.length === CUSTOM_FIELD_QUERY_MAX_ATOMS">
<i-bs name="node-plus"></i-bs>
<pngx-bs-icon name="node-plus"></pngx-bs-icon>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(expression)" [disabled]="disabled || expression.depth === CUSTOM_FIELD_QUERY_MAX_DEPTH">
<i-bs name="braces"></i-bs>
<pngx-bs-icon name="braces"></pngx-bs-icon>
</button>
@if (expression.depth > 0) {
<button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled" aria-label="Remove expression" i18n-aria-label>
<i-bs name="x-circle"></i-bs>
<pngx-bs-icon name="x-circle"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html
+17 -17
View File
@@ -1,6 +1,6 @@
<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled" [aria-label]="title">
<i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-bs-icon width="1em" height="1em" name="calendar-event-fill"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
</button>
<div [id]="dropdownMenuId" class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
@@ -10,8 +10,8 @@
<div class="selected-icon">
@if (createdRelativeDate) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()" aria-label="Clear created relative date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused text-dark"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -35,8 +35,8 @@
<div class="selected-icon">
@if (createdDateFrom) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()" aria-label="Clear created from date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -45,7 +45,7 @@
<input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
<button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button" aria-label="Open created from date picker" i18n-aria-label>
<i-bs width="1em" height="1em" name="calendar"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
</button>
<ng-template #createdFromFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
@@ -59,8 +59,8 @@
<div class="selected-icon">
@if (createdDateTo) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()" aria-label="Clear created to date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -69,7 +69,7 @@
<input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
<button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button" aria-label="Open created to date picker" i18n-aria-label>
<i-bs width="1em" height="1em" name="calendar"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
</button>
<ng-template #createdToFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
@@ -87,8 +87,8 @@
<div class="selected-icon">
@if (addedRelativeDate) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()" aria-label="Clear added relative date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused text-dark"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -112,8 +112,8 @@
<div class="selected-icon">
@if (addedDateFrom) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()" aria-label="Clear added from date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -122,7 +122,7 @@
<input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
<button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button" aria-label="Open added from date picker" i18n-aria-label>
<i-bs width="1em" height="1em" name="calendar"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
</button>
<ng-template #addedFromFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
@@ -136,8 +136,8 @@
<div class="selected-icon">
@if (addedDateTo) {
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()" aria-label="Clear added to date" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
@@ -146,7 +146,7 @@
<input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
<button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button" aria-label="Open added to date picker" i18n-aria-label>
<i-bs width="1em" height="1em" name="calendar"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="calendar"></pngx-bs-icon>
</button>
<ng-template #addedToFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
+1 -1
View File
@@ -17,7 +17,7 @@
@switch (objectForm.get('data_type').value) {
@case (CustomFieldDataType.Select) {
<button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
<span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
<span i18n>Add option</span><pngx-bs-icon class="ms-1" name="plus-circle"></pngx-bs-icon>
</button>
<div formArrayName="select_options">
@for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+5 -5
View File
@@ -30,7 +30,7 @@
<div class="d-flex">
<p class="p-2" i18n>Trigger Workflow On:</p>
<button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Trigger</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Trigger</ng-container>
</button>
</div>
<div ngbAccordion [closeOthers]="true">
@@ -72,7 +72,7 @@
<div class="d-flex">
<p class="p-2" i18n>Apply Actions:</p>
<button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Action</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Action</ng-container>
</button>
</div>
<div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@@ -80,7 +80,7 @@
<div ngbAccordionItem [formGroup]="actionFields.controls[i]">
<div ngbAccordionHeader cdkDrag>
<button ngbAccordionButton>
<i-bs name="grip-vertical" class="ms-n3 pe-1"></i-bs>
<pngx-bs-icon name="grip-vertical" class="ms-n3 pe-1"></pngx-bs-icon>
{{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
@if(action.id) {
<span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
@@ -187,7 +187,7 @@
(click)="addFilter(formGroup)"
[disabled]="!canAddFilter(formGroup)"
>
<i-bs name="plus-circle" class="me-1"></i-bs><span i18n>Add filter</span>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><span i18n>Add filter</span>
</button>
</div>
<ul class="mt-2 list-group filters" formArrayName="filters">
@@ -240,7 +240,7 @@
class="btn btn-link text-danger p-0"
(click)="removeFilter(formGroup, filterIndex)"
>
<i-bs name="trash"></i-bs><span class="ms-1" i18n>Delete</span>
<pngx-bs-icon name="trash"></pngx-bs-icon><span class="ms-1" i18n>Delete</span>
</button>
</div>
</li>
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+4 -4
View File
@@ -1,6 +1,6 @@
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions" [autoClose]="!creating()">
<button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled" [aria-label]="title">
<i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-bs-icon name="{{icon}}"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
@if (!editing && selectionModel.totalCount > 0) {
<pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
}
@@ -52,20 +52,20 @@
@if (filteredItems.length === 0 && createRef !== undefined && filterText?.length > 0) {
<button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
<span class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</span>
<i-bs width="1.5em" height="1em" name="plus"></i-bs>
<pngx-bs-icon width="1.5em" height="1em" name="plus"></pngx-bs-icon>
</button>
}
@if (filteredItems.length > 0) {
<button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="applyClicked()" [disabled]="!modelIsDirty() || disabled">
<span class="ms-2" [ngClass]="{'fw-bold': modelIsDirty()}" i18n>Apply</span>
<i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
<pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
</button>
}
}
@if (extraButtonTitle && (showExtraButtonIfEmpty || filteredItems?.length > 0)) {
<button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="extraButtonClicked($event)" [disabled]="disabled">
<span class="ms-2 fw-bold">{{extraButtonTitle}}</span>
<i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
<pngx-bs-icon width="1.5em" height="1em" name="arrow-right"></pngx-bs-icon>
</button>
}
@if (!editing && manyToOne) {
src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+3 -3
View File
@@ -6,13 +6,13 @@
[disabled]="disabled">
<div class="selected-icon me-1">
@if (isChecked()) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
@if (isPartiallyChecked()) {
<i-bs width="1em" height="1em" name="dash"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="dash"></pngx-bs-icon>
}
@if (isExcluded()) {
<i-bs width="1em" height="1em" name="x"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
}
</div>
<div class="me-1 name-cell" [style.--depth]="isTag ? getDepth() + 1 : 1">
src-ui/src/app/components/common/input/check/check.component.html
+1 -1
View File
@@ -5,7 +5,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/input/color/color.component.html
+1 -1
View File
@@ -15,7 +15,7 @@
<input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
<button class="btn btn-outline-secondary" type="button" (click)="randomize()" aria-label="Choose a random color" i18n-aria-label>
<i-bs name="dice5"></i-bs>
<pngx-bs-icon name="dice5"></pngx-bs-icon>
</button>
</div>
src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.html
+1 -1
View File
@@ -75,7 +75,7 @@
}
}
<button type="button" class="btn btn-link text-danger" (click)="removeSelectedField.next(fieldId)" aria-label="Remove custom field" i18n-aria-label>
<i-bs name="trash"></i-bs>
<pngx-bs-icon name="trash"></pngx-bs-icon>
</button>
</div>
}
src-ui/src/app/components/common/input/date/date.component.html
+3 -3
View File
@@ -4,7 +4,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -14,7 +14,7 @@
(dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
name="dp" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled" [footerTemplate]="datePickerFooterTemplate">
<button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled" aria-label="Open date picker" i18n-aria-label>
<i-bs width="1.2em" height="1.2em" name="calendar"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="calendar"></pngx-bs-icon>
</button>
<ng-template #datePickerFooterTemplate>
<div class="btn-group-xs border-top p-2 d-flex">
@@ -24,7 +24,7 @@
</ng-template>
@if (showFilter) {
<button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
<i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/input/document-link/document-link.component.html
+4 -4
View File
@@ -9,7 +9,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -41,15 +41,15 @@
<ng-template ng-label-tmp let-document="item">
<div class="d-flex align-items-center">
@if (!disabled) {
<button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
<button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><pngx-bs-icon name="x"></pngx-bs-icon></button>
}
@if (document.title) {
<a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
<i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{document.title}}</span>
<pngx-bs-icon width="0.9em" height="0.9em" name="file-text" class="me-1"></pngx-bs-icon><span>{{document.title}}</span>
</a>
} @else {
<span class="badge bg-light text-muted">
<i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></i-bs><span i18n>Unavailable</span>
<pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></pngx-bs-icon><span i18n>Unavailable</span>
</span>
}
</div>
src-ui/src/app/components/common/input/document-link/document-link.component.scss
+1 -1
View File
@@ -19,7 +19,7 @@
}
}
i-bs {
pngx-bs-icon {
cursor: pointer;
}
src-ui/src/app/components/common/input/entries/entries.component.html
+2 -2
View File
@@ -5,7 +5,7 @@
<label class="form-label mb-0" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
}
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="addEntry()">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add</ng-container>
</button>
</div>
<div class="position-relative">
@@ -14,7 +14,7 @@
<input type="text" class="form-control" [(ngModel)]="entry[0]" [ngModelOptions]="{standalone: true}" (change)="inputChange()" [disabled]="disabled" autocomplete="off">
<input type="text" class="form-control" [(ngModel)]="entry[1]" [ngModelOptions]="{standalone: true}" (change)="inputChange()" [disabled]="disabled" autocomplete="off">
<button type="button" class="btn btn-outline-secondary" (click)="removeEntry(i)" aria-label="Remove entry" i18n-aria-label>
<i-bs class="text-danger" name="trash"></i-bs>
<pngx-bs-icon class="text-danger" name="trash"></pngx-bs-icon>
</button>
</div>
}
src-ui/src/app/components/common/input/file/file.component.html
+2 -2
View File
@@ -6,7 +6,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -18,7 +18,7 @@
<div class="form-text d-flex align-items-center">
<span class="text-muted">{{filename}}</span>
<button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()">
<i-bs name="x"></i-bs><small i18n>Remove</small>
<pngx-bs-icon name="x"></pngx-bs-icon><small i18n>Remove</small>
</button>
</div>
}
src-ui/src/app/components/common/input/monetary/monetary.component.html
+1 -1
View File
@@ -6,7 +6,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/input/number/number.component.html
+1 -1
View File
@@ -6,7 +6,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/input/password/password.component.html
+1 -1
View File
@@ -10,7 +10,7 @@
<input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
@if (showReveal) {
<button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
<i-bs name="eye"></i-bs>
<pngx-bs-icon name="eye"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/input/select/select.component.html
+5 -5
View File
@@ -7,7 +7,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -42,26 +42,26 @@
}
<span class="ng-value-label" [title]="item[bindLabel]">
@if (iconField && item[iconField]) {
<i-bs class="me-2" [name]="item[iconField]"></i-bs>
<pngx-bs-icon class="me-2" [name]="item[iconField]"></pngx-bs-icon>
}
{{item[bindLabel]}}
</span>
</ng-template>
<ng-template ng-option-tmp let-item="item">
@if (iconField && item[iconField]) {
<i-bs class="me-2" [name]="item[iconField]"></i-bs>
<pngx-bs-icon class="me-2" [name]="item[iconField]"></pngx-bs-icon>
}
<span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
</ng-template>
</ng-select>
@if (allowCreateNew && !hideAddButton) {
<button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled" aria-label="Create new item" i18n-aria-label>
<i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="plus"></pngx-bs-icon>
</button>
}
@if (showFilter) {
<button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
<i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/input/switch/switch.component.html
+3 -3
View File
@@ -5,12 +5,12 @@
<label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
{{title}}
@if (showUnsetNote && isUnset) {
<i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle"></pngx-bs-icon>
}
</label>
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -22,7 +22,7 @@
<label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
{{title}}
@if (showUnsetNote && isUnset) {
<i-bs class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
<pngx-bs-icon class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></pngx-bs-icon>
}
</label>
}
src-ui/src/app/components/common/input/tags/tags.component.html
+5 -5
View File
@@ -22,7 +22,7 @@
<ng-template ng-label-tmp let-item="item">
<button class="tag-wrap btn p-0 d-flex align-items-center" (click)="removeTag(item.id)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove tag" i18n-title>
<i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
<pngx-bs-icon name="x" style="margin-inline-end: 1px;"></pngx-bs-icon>
@if (item.id && tags) {
<pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
}
@@ -32,12 +32,12 @@
<div class="tag-option-row d-flex align-items-center" [class.w-auto]="!getTag(item.id)?.parent">
@if (item.id && tags) {
@if (getTag(item.id)?.parent) {
<i-bs name="list-nested" class="me-1"></i-bs>
<pngx-bs-icon name="list-nested" class="me-1"></pngx-bs-icon>
<span class="hierarchy-reveal d-flex align-items-center">
<span class="parents d-flex align-items-center">
@for (p of getParentChain(item.id); track p.id) {
<span class="badge me-1" [style.background]="p.color" [style.color]="p.text_color">{{p.name}}</span>
<i-bs name="chevron-right" width=".8em" height=".8em" class="me-1"></i-bs>
<pngx-bs-icon name="chevron-right" width=".8em" height=".8em" class="me-1"></pngx-bs-icon>
}
</span>
</span>
@@ -49,12 +49,12 @@
</ng-select>
@if (allowCreate && !hideAddButton) {
<button class="btn btn-outline-secondary" type="button" (click)="createTag(null, true)" [disabled]="disabled" aria-label="Create new tag" i18n-aria-label>
<i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="plus"></pngx-bs-icon>
</button>
}
@if (showFilter) {
<button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
<i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="filter"></pngx-bs-icon>
</button>
}
</div>
src-ui/src/app/components/common/input/text/text.component.html
+1 -1
View File
@@ -6,7 +6,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/input/textarea/textarea.component.html
+1 -1
View File
@@ -6,7 +6,7 @@
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
src-ui/src/app/components/common/input/url/url.component.html
+2 -2
View File
@@ -4,7 +4,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
<pngx-bs-icon name="x" class="me-1"></pngx-bs-icon><ng-container i18n>Remove</ng-container>
</button>
}
</div>
@@ -12,7 +12,7 @@
<div class="input-group" [class.is-invalid]="error">
<input #inputField type="url" class="form-control" [class.is-invalid]="error" placeholder="https://" [id]="inputId" [(ngModel)]="value" [ngModelOptions]="{standalone: true}" (change)="onChange(value)" [disabled]="disabled">
<a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank">
<i-bs width="1.2em" height="1.2em" name="box-arrow-up-right"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="box-arrow-up-right"></pngx-bs-icon>
</a>
<div class="invalid-feedback position-absolute top-100">
{{error}}
src-ui/src/app/components/common/page-header/page-header.component.html
+3 -3
View File
@@ -5,7 +5,7 @@
@if (id()) {
<button type="button" class="badge border-0 bg-primary text-primary-text-contrast ms-3 small fs-normal" (click)="copyID()" title="Copy ID" i18n-title>
@if (copied()) {
<i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
<pngx-bs-icon width="1em" height="1em" name="clipboard-check" class="me-1"></pngx-bs-icon><ng-container i18n>Copied!</ng-container>
} @else {
ID: {{id()}}
}
@@ -16,13 +16,13 @@
}
@if (info()) {
<button class="btn btn-sm btn-link text-muted p-0 ms-2 p-md-2 ms-md-0" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
<i-bs name="question-circle"></i-bs>
<pngx-bs-icon name="question-circle"></pngx-bs-icon>
</button>
<ng-template #infoPopover>
<p [class.mb-0]="!infoLink()" [innerHTML]="info()"></p>
@if (infoLink()) {
<a href="https://docs.paperless-ngx.com/{{infoLink()}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
<i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
<pngx-bs-icon class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></pngx-bs-icon>
}
</ng-template>
}
src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html
+11 -11
View File
@@ -7,21 +7,21 @@
<div class="btn-toolbar mb-2">
<div class="btn-group me-3">
<button class="btn btn-sm btn-secondary" (click)="selectAll()" title="Select all pages" i18n-title>
<i-bs name="check-all"></i-bs>
<pngx-bs-icon name="check-all"></pngx-bs-icon>
</button>
<button class="btn btn-sm btn-secondary" (click)="deselectAll()" [disabled]="!hasSelection()" title="Deselect all pages" i18n-title>
<i-bs name="x"></i-bs>
<pngx-bs-icon name="x"></pngx-bs-icon>
</button>
</div>
<div class="btn-group">
<button class="btn btn-sm btn-secondary" (click)="rotateSelected(-90)" [disabled]="!hasSelection()" title="Rotate selected pages counter-clockwise" i18n-title>
<i-bs name="arrow-counterclockwise"></i-bs>
<pngx-bs-icon name="arrow-counterclockwise"></pngx-bs-icon>
</button>
<button class="btn btn-sm btn-secondary" (click)="rotateSelected(90)" [disabled]="!hasSelection()" title="Rotate selected pages clockwise" i18n-title>
<i-bs name="arrow-clockwise"></i-bs>
<pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
</button>
<button class="btn btn-sm btn-danger" (click)="deleteSelected()" [disabled]="!hasSelection()" title="Delete selected pages" i18n-title>
<i-bs name="trash"></i-bs>
<pngx-bs-icon name="trash"></pngx-bs-icon>
</button>
</div>
</div>
@@ -31,18 +31,18 @@
<div class="btn-toolbar hover-actions z-10">
<div class="btn-group me-2">
<button class="btn btn-sm btn-dark" (click)="rotate(i, true); $event.stopPropagation()" title="Rotate page counter-clockwise" i18n-title>
<i-bs name="arrow-counterclockwise"></i-bs>
<pngx-bs-icon name="arrow-counterclockwise"></pngx-bs-icon>
</button>
<button class="btn btn-sm btn-dark" (click)="rotate(i); $event.stopPropagation()" title="Rotate page clockwise" i18n-title>
<i-bs name="arrow-clockwise"></i-bs>
<pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
</button>
</div>
<div class="btn-group">
<button class="btn btn-sm btn-dark text-danger" (click)="remove(i); $event.stopPropagation()" title="Delete page" i18n-title>
<i-bs name="trash"></i-bs>
<pngx-bs-icon name="trash"></pngx-bs-icon>
</button>
<button class="btn btn-sm btn-dark" (click)="toggleSplit(i); $event.stopPropagation()" title="Add / remove document split here" i18n-title>
<i-bs name="scissors"></i-bs>
<pngx-bs-icon name="scissors"></pngx-bs-icon>
</button>
</div>
</div>
@@ -78,12 +78,12 @@
<div class="btn-group" role="group">
<input type="radio" class="btn-check" [(ngModel)]="editMode" [value]="PdfEditorEditMode.Create" id="editModeCreate" name="editmode">
<label for="editModeCreate" class="btn btn-outline-primary btn-sm">
<i-bs name="plus"></i-bs>
<pngx-bs-icon name="plus"></pngx-bs-icon>
<span class="form-check-label ms-1" i18n>Create new document(s)</span>
</label>
<input type="radio" class="btn-check" [(ngModel)]="editMode" [value]="PdfEditorEditMode.Update" id="editModeUpdate" name="editmode" [disabled]="hasSplit()">
<label for="editModeUpdate" class="btn btn-outline-primary btn-sm">
<i-bs name="pencil"></i-bs>
<pngx-bs-icon name="pencil"></pngx-bs-icon>
<span class="form-check-label ms-2" i18n>Add document version</span>
</label>
</div>
src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+8 -8
View File
@@ -1,6 +1,6 @@
<div class="btn-group w-100" ngbDropdown role="group">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled" [aria-label]="title">
<i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-bs-icon name="person-fill-lock"></pngx-bs-icon><div class="d-none d-sm-inline ms-1">{{title}}</div>
<pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
</button>
<div [id]="dropdownMenuId" class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
@@ -8,7 +8,7 @@
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.NONE) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
</div>
<div class="me-1">
@@ -18,7 +18,7 @@
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.SELF) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
</div>
<div class="me-1">
@@ -28,7 +28,7 @@
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
</div>
<div class="me-1">
@@ -38,7 +38,7 @@
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
</div>
<div class="me-1">
@@ -48,7 +48,7 @@
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
<i-bs width="1em" height="1em" name="check"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check"></pngx-bs-icon>
}
</div>
<div class="me-1">
@@ -59,8 +59,8 @@
<div class="selected-icon me-1">
@if (selectionModel.ownerFilter() === OwnerFilterType.OTHERS) {
<a class="text-reset focus-variants" href="javascript:void(0)" (click)="clearIncludeUsers()" aria-label="Clear selected users" i18n-aria-label>
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="check" class="variant-unfocused"></pngx-bs-icon>
<pngx-bs-icon width="1em" height="1em" name="x" class="variant-focused text-primary"></pngx-bs-icon>
</a>
}
</div>
src-ui/src/app/components/common/permissions-select/permissions-select.component.html
+2 -2
View File
@@ -2,12 +2,12 @@
<label class="form-label">
{{title}}
<button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true" container="body">
<i-bs name="question-circle"></i-bs>
<pngx-bs-icon name="question-circle"></pngx-bs-icon>
</button>
<ng-template #infoPopover>
<p i18n>Global permissions define what areas of the app and API endpoints users can access.</p>
<a href="https://docs.paperless-ngx.com/usage/#global-permissions" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
<i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
<pngx-bs-icon class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></pngx-bs-icon>
</ng-template>
</label>
<ul class="list-group">
src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+1 -1
View File
@@ -20,7 +20,7 @@
} @else {
@if (requiresPassword()) {
<div class="w-100 h-100 position-relative">
<i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
<pngx-bs-icon width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></pngx-bs-icon>
</div>
}
@if (!requiresPassword()) {
src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+1 -1
View File
@@ -90,7 +90,7 @@ describe('PreviewPopupComponent', () => {
component.onError({ name: 'PasswordException' })
fixture.detectChanges()
expect(component.requiresPassword()).toBeTruthy()
expect(fixture.debugElement.query(By.css('i-bs'))).not.toBeNull()
expect(fixture.debugElement.query(By.css('pngx-bs-icon'))).not.toBeNull()
})
it('should fall back to object for non-pdf', () => {
src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+6 -6
View File
@@ -36,10 +36,10 @@
<input type="text" class="form-control" formControlName="auth_token" readonly>
<button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
@if (!copied()) {
<i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="clipboard-fill"></pngx-bs-icon>
}
@if (copied()) {
<i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="clipboard-check-fill"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy</span>
</button>
@@ -90,7 +90,7 @@
<div class="list-group">
@for (provider of socialAccountProviders(); track provider.name) {
<a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
{{provider.name}}<i-bs class="pb-1 ms-2" name="box-arrow-up-right"></i-bs>
{{provider.name}}<pngx-bs-icon class="pb-1 ms-2" name="box-arrow-up-right"></pngx-bs-icon>
</a>
}
</div>
@@ -139,7 +139,7 @@
<label class="d-block mb-2" i18n>Two-factor Authentication</label>
@if (recoveryCodes()) {
<div class="alert alert-warning" role="alert">
<i-bs name="exclamation-triangle" class="me-1"></i-bs><ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
<pngx-bs-icon name="exclamation-triangle" class="me-1"></pngx-bs-icon><ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
</div>
<div class="d-flex flex-row align-items-start mb-3">
<ul class="list-group w-50">
@@ -156,10 +156,10 @@
</ul>
<button type="button" class="btn btn-sm btn-outline-secondary ms-2" (click)="copyRecoveryCodes()" i18n-title title="Copy">
@if (!codesCopied()) {
<i-bs width="1em" height="1em" name="clipboard-fill" class="me-1"></i-bs><span i18n>Copy codes</span>
<pngx-bs-icon width="1em" height="1em" name="clipboard-fill" class="me-1"></pngx-bs-icon><span i18n>Copy codes</span>
}
@if (codesCopied()) {
<i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary me-1"></i-bs><span class="text-primary" i18n>Copied!</span>
<pngx-bs-icon width="1em" height="1em" name="clipboard-check-fill" class="text-primary me-1"></pngx-bs-icon><span class="text-primary" i18n>Copied!</span>
}
</button>
</div>
src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.html
+2 -2
View File
@@ -74,10 +74,10 @@
(click)="copy(createdBundle)"
>
@if (copied()) {
<i-bs name="clipboard-check"></i-bs>
<pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
}
@if (!copied()) {
<i-bs name="clipboard"></i-bs>
<pngx-bs-icon name="clipboard"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy link</span>
</button>
src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.html
+5 -5
View File
@@ -20,20 +20,20 @@
}
<button type="button" class="btn btn-outline-primary" (click)="copy(link)">
@if (copied() !== link.id) {
<i-bs width="1.2em" height="1.2em" name="clipboard-fill"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="clipboard-fill"></pngx-bs-icon>
}
@if (copied() === link.id) {
<i-bs width="1.2em" height="1.2em" name="clipboard-check-fill"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="clipboard-check-fill"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy</span>
</button>
@if (canShare(link)) {
<button type="button" class="btn btn-outline-primary" (click)="share(link)">
<i-bs width="1.2em" height="1.2em" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
<pngx-bs-icon width="1.2em" height="1.2em" name="box-arrow-up"></pngx-bs-icon><span class="visually-hidden" i18n>Share</span>
</button>
}
<button type="button" class="btn btn-outline-danger" (click)="delete(link)">
<i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
<pngx-bs-icon width="1.2em" height="1.2em" name="trash"></pngx-bs-icon><span class="visually-hidden" i18n>Delete</span>
</button>
</div>
<span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied() === link.id" i18n>Copied!</span>
@@ -60,7 +60,7 @@
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
}
@if (!loading()) {
<i-bs name="plus"></i-bs>
<pngx-bs-icon name="plus"></pngx-bs-icon>
}
<ng-container i18n>Create</ng-container>
</button>
src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.html
+8 -8
View File
@@ -4,9 +4,9 @@
@if (loading()) {
<div class="spinner-border spinner-border-sm" role="status"></div>
} @else if (noSuggestions) {
<i-bs width="1.2em" height="1.2em" name="check-circle"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="check-circle"></pngx-bs-icon>
} @else {
<i-bs width="1.2em" height="1.2em" name="lightbulb"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="lightbulb"></pngx-bs-icon>
}
@if (noSuggestions) {
<span class="d-none d-lg-inline ps-1" i18n>No suggestions</span>
@@ -31,19 +31,19 @@
</div>
}
@if (suggestions()?.suggested_tags?.length > 0) {
<small class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="tags"></i-bs><ng-container i18n>Tags</ng-container></small>
<small class="list-group-item text-uppercase text-muted small"><pngx-bs-icon class="me-2" name="tags"></pngx-bs-icon><ng-container i18n>Tags</ng-container></small>
@for (tag of suggestions().suggested_tags; track tag) {
<button type="button" class="list-group-item list-group-item-action bg-light" (click)="addTag.emit(tag)">{{ tag }}</button>
}
}
@if (suggestions()?.suggested_document_types?.length > 0) {
<div class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="hash"></i-bs><ng-container i18n>Document Types</ng-container></div>
<div class="list-group-item text-uppercase text-muted small"><pngx-bs-icon class="me-2" name="hash"></pngx-bs-icon><ng-container i18n>Document Types</ng-container></div>
@for (type of suggestions().suggested_document_types; track type) {
<button type="button" class="list-group-item list-group-item-action bg-light" (click)="addDocumentType.emit(type)">{{ type }}</button>
}
}
@if (suggestions()?.suggested_correspondents?.length > 0) {
<div class="list-group-item text-uppercase text-muted small"><i-bs class="me-2" name="person"></i-bs><ng-container i18n>Correspondents</ng-container></div>
<div class="list-group-item text-uppercase text-muted small"><pngx-bs-icon class="me-2" name="person"></pngx-bs-icon><ng-container i18n>Correspondents</ng-container></div>
@for (correspondent of suggestions().suggested_correspondents; track correspondent) {
<button type="button" class="list-group-item list-group-item-action bg-light" (click)="addCorrespondent.emit(correspondent)">{{ correspondent }}</button>
}
@@ -61,7 +61,7 @@
@if (aiEnabled()) {
<div ngbDropdown autoClose="outside" placement="bottom-end" [popperOptions]="popperOptions">
<button type="button" class="btn btn-sm btn-link position-relative" ngbDropdownToggle [disabled]="disabled() || loading()" i18n-title title="Suggestion options">
<i-bs name="three-dots"></i-bs>
<pngx-bs-icon name="three-dots"></pngx-bs-icon>
@if (source() !== defaultSource()) {
<span class="position-absolute top-0 start-100 translate-middle p-1 bg-primary border border-light rounded-circle">
<span class="visually-hidden" i18n>Not using default</span>
@@ -72,11 +72,11 @@
<div class="small text-muted mb-2" i18n>Suggest using:</div>
<div class="form-check small">
<input class="form-check-input" type="checkbox" id="suggestionSourceML" [checked]="useML" [disabled]="useML && !useAI" (change)="setSources($event.target.checked, useAI)">
<label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceML"><i-bs name="cpu"></i-bs><ng-container i18n>ML</ng-container></label>
<label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceML"><pngx-bs-icon name="cpu"></pngx-bs-icon><ng-container i18n>ML</ng-container></label>
</div>
<div class="form-check small">
<input class="form-check-input" type="checkbox" id="suggestionSourceAI" [checked]="useAI" [disabled]="useAI && !useML" (change)="setSources(useML, $event.target.checked)">
<label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceAI"><i-bs name="stars"></i-bs><ng-container i18n>AI</ng-container></label>
<label class="form-check-label d-inline-flex align-items-center gap-1" for="suggestionSourceAI"><pngx-bs-icon name="stars"></pngx-bs-icon><ng-container i18n>AI</ng-container></label>
</div>
</div>
</div>
src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
+31 -31
View File
@@ -24,7 +24,7 @@
{{status().pngx_version}}
@if (versionMismatch()) {
<button class="btn btn-sm d-inline align-items-center btn-dark text-uppercase small" [ngbPopover]="versionPopover" triggers="click mouseenter:mouseleave" aria-label="View version mismatch details" i18n-aria-label>
<i-bs name="exclamation-triangle-fill" class="text-danger lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-danger lh-1"></pngx-bs-icon>
</button>
}
<ng-template #versionPopover>
@@ -60,9 +60,9 @@
<button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="databaseStatus" triggers="click mouseenter:mouseleave">
{{status().database.status}}
@if (status().database.status === 'OK') {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></pngx-bs-icon>
}
</button>
<ng-template #databaseStatus>
@@ -77,9 +77,9 @@
<dd>
<button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="migrationStatus" triggers="click mouseenter:mouseleave">
@if (status().database.migration_status.unapplied_migrations.length === 0) {
<ng-container i18n>Up to date</ng-container><i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<ng-container i18n>Up to date</ng-container><pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<ng-container>{{status().database.migration_status.unapplied_migrations.length}} Pending</ng-container><i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></i-bs>
<ng-container>{{status().database.migration_status.unapplied_migrations.length}} Pending</ng-container><pngx-bs-icon name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></pngx-bs-icon>
}
<ng-template #migrationStatus>
<h6><ng-container i18n>Latest Migration</ng-container>:</h6> <span class="font-monospace small">{{status().database.migration_status.latest_migration}}</span>
@@ -111,9 +111,9 @@
<button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="redisStatus" triggers="click mouseenter:mouseleave">
{{status().tasks.redis_status}}
@if (status().tasks.redis_status === 'OK') {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></pngx-bs-icon>
}
</button>
<ng-template #redisStatus>
@@ -129,11 +129,11 @@
<button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="celeryStatus" triggers="click mouseenter:mouseleave">
{{status().tasks.celery_status}}
@if (status().tasks.celery_status === 'OK') {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
<pngx-bs-icon name="exclamation-triangle-fill" class="ms-2 lh-1"
[class.text-danger]="status().tasks.celery_status === SystemStatusItemStatus.ERROR"
[class.text-warning]="status().tasks.celery_status === SystemStatusItemStatus.WARNING"></i-bs>
[class.text-warning]="status().tasks.celery_status === SystemStatusItemStatus.WARNING"></pngx-bs-icon>
}
</button>
<ng-template #celeryStatus>
@@ -186,9 +186,9 @@
<button class="btn btn-sm d-flex align-items-center btn-dark text-uppercase small" [ngbPopover]="indexStatus" triggers="click mouseenter:mouseleave">
{{status().tasks.index_status}}
@if (status().tasks.index_status === 'OK') {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></pngx-bs-icon>
}
</button>
</dd>
@@ -205,14 +205,14 @@
{{status().tasks.classifier_status}}
@if (status().tasks.classifier_status === 'OK') {
@if (isStale(status().tasks.classifier_last_trained)) {
<i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
}
} @else {
<i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
<pngx-bs-icon name="exclamation-triangle-fill" class="ms-2 lh-1"
[class.text-danger]="status().tasks.classifier_status === SystemStatusItemStatus.ERROR"
[class.text-warning]="status().tasks.classifier_status === SystemStatusItemStatus.WARNING"></i-bs>
[class.text-warning]="status().tasks.classifier_status === SystemStatusItemStatus.WARNING"></pngx-bs-icon>
}
</button>
@if (currentUserIsSuperUser) {
@@ -220,7 +220,7 @@
<div class="spinner-border spinner-border-sm ms-2" role="status"></div>
} @else {
<button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskType.TrainClassifier)">
<i-bs name="play-fill" class="me-1"></i-bs>
<pngx-bs-icon name="play-fill" class="me-1"></pngx-bs-icon>
<ng-container i18n>Run Task</ng-container>
</button>
}
@@ -239,14 +239,14 @@
{{status().tasks.sanity_check_status}}
@if (status().tasks.sanity_check_status === 'OK') {
@if (isStale(status().tasks.sanity_check_last_run)) {
<i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
}
} @else {
<i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
<pngx-bs-icon name="exclamation-triangle-fill" class="ms-2 lh-1"
[class.text-danger]="status().tasks.sanity_check_status === SystemStatusItemStatus.ERROR"
[class.text-warning]="status().tasks.sanity_check_status === SystemStatusItemStatus.WARNING"></i-bs>
[class.text-warning]="status().tasks.sanity_check_status === SystemStatusItemStatus.WARNING"></pngx-bs-icon>
}
</button>
@if (currentUserIsSuperUser) {
@@ -254,7 +254,7 @@
<div class="spinner-border spinner-border-sm ms-2" role="status"></div>
} @else {
<button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskType.SanityCheck)">
<i-bs name="play-fill" class="me-1"></i-bs>
<pngx-bs-icon name="play-fill" class="me-1"></pngx-bs-icon>
<ng-container i18n>Run Task</ng-container>
</button>
}
@@ -272,10 +272,10 @@
<span class="btn btn-sm pe-none align-items-center btn-dark text-uppercase small">
@if (status().websocket_connected === 'OK') {
<ng-container i18n>OK</ng-container>
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
} @else {
<ng-container i18n>Error</ng-container>
<i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></pngx-bs-icon>
}
</span>
</dd>
@@ -286,15 +286,15 @@
{{status().tasks.llmindex_status}}
@if (status().tasks.llmindex_status === 'OK') {
@if (isStale(status().tasks.llmindex_last_modified)) {
<i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></pngx-bs-icon>
} @else {
<i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
<pngx-bs-icon name="check-circle-fill" class="text-primary ms-2 lh-1"></pngx-bs-icon>
}
} @else {
<i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
<pngx-bs-icon name="exclamation-triangle-fill" class="ms-2 lh-1"
[class.text-danger]="status().tasks.llmindex_status === SystemStatusItemStatus.ERROR"
[class.text-warning]="status().tasks.llmindex_status === SystemStatusItemStatus.WARNING"
[class.text-muted]="status().tasks.llmindex_status === SystemStatusItemStatus.DISABLED"></i-bs>
[class.text-muted]="status().tasks.llmindex_status === SystemStatusItemStatus.DISABLED"></pngx-bs-icon>
}
</button>
@if (currentUserIsSuperUser) {
@@ -302,7 +302,7 @@
<div class="spinner-border spinner-border-sm ms-2" role="status"></div>
} @else {
<button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskType.LlmIndex)">
<i-bs name="play-fill" class="me-1"></i-bs>
<pngx-bs-icon name="play-fill" class="me-1"></pngx-bs-icon>
<ng-container i18n>Run Task</ng-container>
</button>
}
@@ -326,10 +326,10 @@
<div class="modal-footer">
<button class="btn btn-sm d-flex align-items-center btn-dark btn btn-sm d-flex align-items-center btn-dark btn-outline-secondary" (click)="copy()">
@if (!copied()) {
<i-bs name="clipboard-fill" class="me-1"></i-bs>
<pngx-bs-icon name="clipboard-fill" class="me-1"></pngx-bs-icon>
}
@if (copied()) {
<i-bs name="clipboard-check-fill" class="me-1"></i-bs>
<pngx-bs-icon name="clipboard-check-fill" class="me-1"></pngx-bs-icon>
}
<ng-container i18n>Copy</ng-container>
</button>
src-ui/src/app/components/common/toast/toast.component.html
+5 -5
View File
@@ -18,13 +18,13 @@
<div class="d-flex align-items-top">
@switch (toast.level) {
@case (ToastLevel.Success) {
<i-bs width="0.9em" height="0.9em" name="check-circle" class="toast-icon"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="check-circle" class="toast-icon"></pngx-bs-icon>
}
@case (ToastLevel.Error) {
<i-bs width="0.9em" height="0.9em" name="exclamation-triangle" class="toast-icon"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="exclamation-triangle" class="toast-icon"></pngx-bs-icon>
}
@default {
<i-bs width="0.9em" height="0.9em" name="info-circle" class="toast-icon"></i-bs>
<pngx-bs-icon width="0.9em" height="0.9em" name="info-circle" class="toast-icon"></pngx-bs-icon>
}
}
<div class="toast-content">
@@ -46,10 +46,10 @@
<div class="col offset-sm-3">
<button class="btn btn-sm btn-outline-secondary" (click)="copyError(toast.error)">
@if (!copied()) {
<i-bs name="clipboard" class="me-1"></i-bs>
<pngx-bs-icon name="clipboard" class="me-1"></pngx-bs-icon>
}
@if (copied()) {
<i-bs name="clipboard-check" class="me-1"></i-bs>
<pngx-bs-icon name="clipboard-check" class="me-1"></pngx-bs-icon>
}
<ng-container i18n>Copy Raw Error</ng-container>
</button>
src-ui/src/app/components/common/toast/toast.component.spec.ts
+3 -3
View File
@@ -139,7 +139,7 @@ describe('ToastComponent', () => {
}
fixture.detectChanges()
const el: HTMLElement = fixture.nativeElement
expect(el.querySelector('i-bs[name="check-circle"]')).not.toBeNull()
expect(el.querySelector('pngx-bs-icon[name="check-circle"]')).not.toBeNull()
expect(el.querySelector('ngb-toast').classList).not.toContain('toast-error')
fixture = TestBed.createComponent(ToastComponent)
@@ -151,7 +151,7 @@ describe('ToastComponent', () => {
fixture.detectChanges()
const errorEl: HTMLElement = fixture.nativeElement
expect(
errorEl.querySelector('i-bs[name="exclamation-triangle"]')
errorEl.querySelector('pngx-bs-icon[name="exclamation-triangle"]')
).not.toBeNull()
expect(errorEl.querySelector('ngb-toast').classList).toContain(
'toast-error'
@@ -161,7 +161,7 @@ describe('ToastComponent', () => {
fixture.componentInstance.toast = { content: 'Started', delay: 5000 }
fixture.detectChanges()
expect(
fixture.nativeElement.querySelector('i-bs[name="info-circle"]')
fixture.nativeElement.querySelector('pngx-bs-icon[name="info-circle"]')
).not.toBeNull()
})
src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.html
+3 -3
View File
@@ -9,12 +9,12 @@
@if (getStatusCompleted().length > 0) {
<a class="btn-link small text-nowrap" (click)="dismissCompleted()" [routerLink]="[]">
<span class="me-1" i18n="This button dismisses all status messages about processed documents in the tray (failed and successful)">Dismiss completed</span>
<i-bs name="check2-all"></i-bs>
<pngx-bs-icon name="check2-all"></pngx-bs-icon>
</a>
}
<button type="button" class="btn btn-sm btn-link p-0 text-muted" (click)="toggleCollapsed()"
[attr.aria-expanded]="!collapsed()" aria-label="Toggle document processing status" i18n-aria-label>
<i-bs [name]="collapsed() ? 'chevron-up' : 'chevron-down'"></i-bs>
<pngx-bs-icon [name]="collapsed() ? 'chevron-up' : 'chevron-down'"></pngx-bs-icon>
</button>
</div>
</div>
@@ -42,7 +42,7 @@
@if (status.documentId) {
<a class="btn btn-sm btn-outline-primary btn-open" [routerLink]="['/documents', status.documentId]" (click)="dismiss(status)">
<small i18n>Open document</small>
<i-bs name="arrow-right-short"></i-bs>
<pngx-bs-icon name="arrow-right-short"></pngx-bs-icon>
</a>
}
</div>
src-ui/src/app/components/common/upload-status-tray/upload-status-tray.component.scss
+2 -2
View File
@@ -1,4 +1,4 @@
:host ::ng-deep i-bs svg {
:host ::ng-deep pngx-bs-icon svg {
margin-top: -3px;
}
@@ -10,7 +10,7 @@
.btn-open {
line-height: 1;
i-bs {
pngx-bs-icon {
margin-top: -1px;
}
}
src-ui/src/app/components/dashboard/dashboard.component.html
+2 -2
View File
@@ -14,7 +14,7 @@
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex">
<div class="ms-n2 me-1">
<i-bs name="grip-vertical"></i-bs>
<pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
</div>
<h6 class="card-title mb-0"></h6>
</div>
@@ -37,7 +37,7 @@
<div class="card shadow-sm bg-light opacity-50">
<div class="card-body">
<div class="text-center">
<p class="mb-0 fst-italic"><i-bs name="info-circle" class="me-2"></i-bs><ng-container i18n>Hint: saved views can be created from the <a routerLink="/documents">documents list</a></ng-container></p>
<p class="mb-0 fst-italic"><pngx-bs-icon name="info-circle" class="me-2"></pngx-bs-icon><ng-container i18n>Hint: saved views can be created from the <a routerLink="/documents">documents list</a></ng-container></p>
</div>
</div>
</div>
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+3 -3
View File
@@ -108,7 +108,7 @@
@if (doc.notes.length) {
<a routerLink="/documents/{{doc.id}}/notes" class="btn btn-sm p-0">
<span class="badge rounded-pill bg-light border text-primary">
<i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></pngx-bs-icon>
{{doc.notes.length}}</span>
</a>
}
@@ -120,10 +120,10 @@
@if (j === displayFields().length - 1) {
<div class="btn-group position-absolute top-50 end-0 translate-middle-y" (mouseleave)="popupPreview.close()">
<pngx-preview-popup [document]="doc" linkClasses="btn px-4 btn-dark border-dark-subtle" #popupPreview>
<i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
<pngx-bs-icon width="0.8em" height="0.8em" name="eye"></pngx-bs-icon>
</pngx-preview-popup>
<a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
<i-bs width="0.8em" height="0.8em" name="download"></i-bs>
<pngx-bs-icon width="0.8em" height="0.8em" name="download"></pngx-bs-icon>
</a>
</div>
}
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div content tourAnchor="tour.upload-widget">
<form class="justify-content-center d-flex flex-column align-items-center">
<button type="button" class="btn btn-outline-dark bg-light shadow-sm w-100 h-100 pt-3 pb-3" (click)="fileUpload.click()">
<i-bs class="text-primary me-1" name="plus-circle"></i-bs>
<pngx-bs-icon class="text-primary me-1" name="plus-circle"></pngx-bs-icon>
<span class="text-primary" i18n>Upload documents</span>
<div class="text-muted smaller fst-italic" i18n>or drop files anywhere</div>
</button>
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
+1 -1
View File
@@ -1,4 +1,4 @@
:host ::ng-deep i-bs svg {
:host ::ng-deep pngx-bs-icon svg {
margin-top: -3px;
}
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+2 -2
View File
@@ -5,12 +5,12 @@
<div class="d-flex align-items-center">
@if (draggable()) {
<div class="ms-n2 me-1" cdkDragHandle>
<i-bs name="grip-vertical"></i-bs>
<pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
</div>
}
<h6 class="card-title mb-0">
@if (titleIcon()) {
<i-bs class="me-2" [name]="titleIcon()"></i-bs>
<pngx-bs-icon class="me-2" [name]="titleIcon()"></pngx-bs-icon>
}
{{title()}}
</h6>
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
+1 -1
View File
@@ -1,4 +1,4 @@
i-bs {
pngx-bs-icon {
cursor: move;
}
src-ui/src/app/components/document-detail/document-barcodes/document-barcodes.component.html
+2 -2
View File
@@ -33,9 +33,9 @@
i18n-title
>
@if (copiedIndex() === $index) {
<i-bs name="clipboard-check"></i-bs>
<pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
} @else {
<i-bs name="clipboard"></i-bs>
<pngx-bs-icon name="clipboard"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy content</span>
</button>
src-ui/src/app/components/document-detail/document-barcodes/document-barcodes.component.spec.ts
+6 -6
View File
@@ -49,15 +49,15 @@ describe('DocumentBarcodesComponent', () => {
fixture.detectChanges()
expect(copySpy).toHaveBeenCalledWith('ASN00123')
expect(component.copiedIndex()).toEqual(0)
expect(buttons[0].querySelector('i-bs').getAttribute('name')).toEqual(
'clipboard-check'
)
expect(
buttons[0].querySelector('pngx-bs-icon').getAttribute('name')
).toEqual('clipboard-check')
jest.advanceTimersByTime(3000)
fixture.detectChanges()
expect(component.copiedIndex()).toBeNull()
expect(buttons[0].querySelector('i-bs').getAttribute('name')).toEqual(
'clipboard'
)
expect(
buttons[0].querySelector('pngx-bs-icon').getAttribute('name')
).toEqual('clipboard')
jest.useRealTimers()
})
src-ui/src/app/components/document-detail/document-detail.component.html
+16 -16
View File
@@ -1,6 +1,6 @@
<pngx-page-header [title]="title()" [id]="documentId()">
<button type="button" class="btn btn-sm btn-outline-danger me-md-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" aria-label="Delete" i18n-aria-label>
<i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
<pngx-bs-icon width="1.2em" height="1.2em" name="trash"></pngx-bs-icon><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
</button>
<pngx-document-version-dropdown
@@ -18,7 +18,7 @@
@if (downloading()) {
<div class="spinner-border spinner-border-sm" role="status"></div>
} @else {
<i-bs width="1.2em" height="1.2em" name="download"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="download"></pngx-bs-icon>
}
<span class="d-none d-lg-inline ps-1" i18n>Download</span>
</button>
@@ -42,28 +42,28 @@
<div class="ms-md-auto" ngbDropdown>
<button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
<pngx-bs-icon name="three-dots"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
<button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit || !userIsOwner">
<i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-2"></i-bs><span i18n>Reprocess</span>
<pngx-bs-icon width="1em" height="1em" name="arrow-counterclockwise" class="me-2"></pngx-bs-icon><span i18n>Reprocess</span>
</button>
<button ngbDropdownItem (click)="printDocument()" [hidden]="useNativePdfViewer || isMobile">
<i-bs width="1em" height="1em" name="printer" class="me-2"></i-bs><span i18n>Print</span>
<pngx-bs-icon width="1em" height="1em" name="printer" class="me-2"></pngx-bs-icon><span i18n>Print</span>
</button>
<button ngbDropdownItem (click)="moreLike()">
<i-bs width="1em" height="1em" name="diagram-3" class="me-2"></i-bs><span i18n>More like this</span>
<pngx-bs-icon width="1em" height="1em" name="diagram-3" class="me-2"></pngx-bs-icon><span i18n>More like this</span>
</button>
<button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
<i-bs name="pencil" class="me-2"></i-bs><ng-container i18n>PDF Editor</ng-container>
<pngx-bs-icon name="pencil" class="me-2"></pngx-bs-icon><ng-container i18n>PDF Editor</ng-container>
</button>
@if (userIsOwner && (requiresPassword || password)) {
<button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
<i-bs name="unlock" class="me-2"></i-bs><ng-container i18n>Remove Password</ng-container>
<pngx-bs-icon name="unlock" class="me-2"></pngx-bs-icon><ng-container i18n>Remove Password</ng-container>
</button>
}
</div>
@@ -71,15 +71,15 @@
<div class="ms-md-auto" ngbDropdown>
<button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle aria-label="Send" i18n-aria-label>
<i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
<pngx-bs-icon name="send"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="sendDropdown" class="shadow">
<button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
<i-bs name="link" class="me-2"></i-bs><span i18n>Share Links</span>
<pngx-bs-icon name="link" class="me-2"></pngx-bs-icon><span i18n>Share Links</span>
</button>
@if (emailEnabled) {
<button ngbDropdownItem (click)="openEmailDocument()">
<i-bs name="envelope" class="me-2"></i-bs><span i18n>Email</span>
<pngx-bs-icon name="envelope" class="me-2"></pngx-bs-icon><span i18n>Email</span>
</button>
}
</div>
@@ -95,13 +95,13 @@
<div class="btn-toolbar mb-1 pb-3 gap-2 row-gap-2 border-bottom">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
<i-bs width="1.2em" height="1.2em" name="x"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="x"></pngx-bs-icon>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
<i-bs width="1.2em" height="1.2em" name="arrow-left"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="arrow-left"></pngx-bs-icon>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
<i-bs width="1.2em" height="1.2em" name="arrow-right"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="arrow-right"></pngx-bs-icon>
</button>
</div>
@@ -499,7 +499,7 @@
}
<div class="input-group input-group-sm w-auto flex-nowrap">
<button class="btn btn-outline-secondary" type="button" (click)="decreaseZoom()" aria-label="Zoom out" i18n-aria-label>
<i-bs width="1em" height="1em" name="dash"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="dash"></pngx-bs-icon>
</button>
<select class="form-select" (change)="setZoom($event.target.value)" [ngModelOptions]="{standalone: true}" [ngModel]="currentZoom" aria-label="Zoom" i18n-aria-label>
@for (setting of zoomSettings; track setting) {
@@ -509,7 +509,7 @@
}
</select>
<button class="btn btn-outline-secondary" type="button" (click)="increaseZoom()" aria-label="Zoom in" i18n-aria-label>
<i-bs width="1em" height="1em" name="plus"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="plus"></pngx-bs-icon>
</button>
</div>
</div>
src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html
+7 -7
View File
@@ -1,6 +1,6 @@
<div class="btn-group" ngbDropdown autoClose="outside">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle aria-label="Versions" i18n-aria-label>
<i-bs name="file-earmark-diff"></i-bs>
<pngx-bs-icon name="file-earmark-diff"></pngx-bs-icon>
<span class="d-none d-lg-inline ps-1" i18n>Versions</span>
@if (versions.length > 1) {
<span class="badge text-bg-secondary ms-1">{{ versions.length }}</span>
@@ -35,7 +35,7 @@
title="Upload a new version"
i18n-title
>
<i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Upload</span>
<pngx-bs-icon name="file-earmark-plus"></pngx-bs-icon><span class="ps-1" i18n>Upload</span>
</button>
<button
class="btn btn-sm btn-outline-secondary w-100"
@@ -44,7 +44,7 @@
title="Use an existing document"
i18n-title
>
<i-bs name="file-earmark"></i-bs><span class="ps-1" i18n>Existing</span>
<pngx-bs-icon name="file-earmark"></pngx-bs-icon><span class="ps-1" i18n>Existing</span>
</button>
</div>
} @else {
@@ -81,9 +81,9 @@
>
<div class="check mx-3">
@if (selectedVersionId === version.id) {
<i-bs name="check-circle"></i-bs>
<pngx-bs-icon name="check-circle"></pngx-bs-icon>
} @else {
<i-bs class="text-muted" name="circle"></i-bs>
<pngx-bs-icon class="text-muted" name="circle"></pngx-bs-icon>
}
</div>
<div class="d-flex flex-column">
@@ -121,9 +121,9 @@
(click)="isEditingVersion(version.id) ? submitEditedVersionLabel(version, $event) : beginEditingVersion(version, $event)"
>
@if (isEditingVersion(version.id)) {
<i-bs width=".8rem" height=".8rem" name="check-lg"></i-bs>
<pngx-bs-icon width=".8rem" height=".8rem" name="check-lg"></pngx-bs-icon>
} @else {
<i-bs width=".8rem" height=".8rem" name="pencil"></i-bs>
<pngx-bs-icon width=".8rem" height=".8rem" name="pencil"></pngx-bs-icon>
}
</button>
}
src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html
+2 -2
View File
@@ -2,10 +2,10 @@
<button type="button" class="btn btn-outline-secondary btn-sm me-2"
(click)="expand = !expand" aria-label="Toggle document metadata" i18n-aria-label>
@if (!expand) {
<i-bs width="1.2em" height="1.2em" name="caret-down"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="caret-down"></pngx-bs-icon>
}
@if (expand) {
<i-bs width="1.2em" height="1.2em" name="caret-up"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" name="caret-up"></pngx-bs-icon>
}
</button>
{{title}}
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+12 -12
View File
@@ -75,7 +75,7 @@
}
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll" aria-label="Permissions" i18n-aria-label>
<i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Permissions</ng-container></div>
<pngx-bs-icon name="person-fill-lock"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Permissions</ng-container></div>
</button>
</div>
</div>
@@ -83,20 +83,20 @@
<div class="btn-toolbar">
<div ngbDropdown>
<button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
<pngx-bs-icon name="three-dots"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
<button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
<i-bs name="body-text" class="me-2"></i-bs><ng-container i18n>Reprocess</ng-container>
<pngx-bs-icon name="body-text" class="me-2"></pngx-bs-icon><ng-container i18n>Reprocess</ng-container>
</button>
<button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
<i-bs name="arrow-clockwise" class="me-2"></i-bs><ng-container i18n>Rotate</ng-container>
<pngx-bs-icon name="arrow-clockwise" class="me-2"></pngx-bs-icon><ng-container i18n>Rotate</ng-container>
</button>
<button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.allSelected || list.selectedCount < 2">
<i-bs name="journals" class="me-2"></i-bs><ng-container i18n>Merge</ng-container>
<pngx-bs-icon name="journals" class="me-2"></pngx-bs-icon><ng-container i18n>Merge</ng-container>
</button>
<button ngbDropdownItem (click)="mergeSelectedAsVersions()" [disabled]="!userOwnsAll || !userCanEditAll || !userCanDelete || list.allSelected || list.selectedCount < 2">
<i-bs name="journal-bookmark-fill" class="me-2"></i-bs><ng-container i18n>Merge as versions</ng-container>
<pngx-bs-icon name="journal-bookmark-fill" class="me-2"></pngx-bs-icon><ng-container i18n>Merge as versions</ng-container>
</button>
</div>
</div>
@@ -110,18 +110,18 @@
aria-label="Send"
i18n-aria-label
>
<i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container>
<pngx-bs-icon name="send"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container>
</div>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownSend" class="shadow">
@if (permissionService.currentUserCan(PermissionAction.Add, PermissionType.ShareLinkBundle)) {
<button ngbDropdownItem (click)="createShareLinkBundle()" [disabled]="!canSendSelection">
<i-bs name="link" class="me-2"></i-bs><ng-container i18n>Create a share link bundle</ng-container>
<pngx-bs-icon name="link" class="me-2"></pngx-bs-icon><ng-container i18n>Create a share link bundle</ng-container>
</button>
}
@if (permissionService.currentUserCan(PermissionAction.View, PermissionType.ShareLinkBundle)) {
<button ngbDropdownItem (click)="manageShareLinkBundles()">
<i-bs name="list-ul" class="me-2"></i-bs><ng-container i18n>Manage share link bundles</ng-container>
<pngx-bs-icon name="list-ul" class="me-2"></pngx-bs-icon><ng-container i18n>Manage share link bundles</ng-container>
</button>
}
@if (
@@ -133,7 +133,7 @@
}
@if (emailEnabled) {
<button ngbDropdownItem (click)="emailSelected()" [disabled]="!canSendSelection">
<i-bs name="envelope" class="me-2"></i-bs><ng-container i18n>Email</ng-container>
<pngx-bs-icon name="envelope" class="me-2"></pngx-bs-icon><ng-container i18n>Email</ng-container>
</button>
}
</div>
@@ -141,7 +141,7 @@
<div class="btn-group btn-group-sm">
<button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload()" (click)="downloadSelected()" aria-label="Download" i18n-aria-label>
@if (!awaitingDownload()) {
<i-bs name="arrow-down"></i-bs>
<pngx-bs-icon name="arrow-down"></pngx-bs-icon>
}
@if (awaitingDownload()) {
<div class="spinner-border spinner-border-sm" role="status">
@@ -176,7 +176,7 @@
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
</div>
src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.html
+1 -1
View File
@@ -62,7 +62,7 @@
}
}
<button type="button" class="btn btn-outline-danger mb-3" (click)="removeField(field.id)" aria-label="Remove custom field" i18n-aria-label>
<i-bs name="x"></i-bs>
<pngx-bs-icon name="x"></pngx-bs-icon>
</button>
</div>
}
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+15 -15
View File
@@ -52,7 +52,7 @@
}
@for (highlight of searchNoteHighlights; track highlight) {
<span class="d-block">
<i-bs name="chat-left-text"></i-bs>
<pngx-bs-icon name="chat-left-text"></pngx-bs-icon>
<span [innerHtml]="highlight"></span>
</span>
}
@@ -70,16 +70,16 @@
<div class="btn-group">
@if (document()) {
<a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()">
<i-bs name="diagram-3" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>More like this</span>
<pngx-bs-icon name="diagram-3" class="me-1"></pngx-bs-icon><span class="d-none d-md-inline" i18n>More like this</span>
</a>
<a routerLink="/documents/{{document().id}}" class="btn btn-sm btn-outline-secondary">
<i-bs name="file-earmark-richtext" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Open</span>
<pngx-bs-icon name="file-earmark-richtext" class="me-1"></pngx-bs-icon><span class="d-none d-md-inline" i18n>Open</span>
</a>
<pngx-preview-popup [document]="document()" #popupPreview>
<i-bs name="eye" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>View</span>
<pngx-bs-icon name="eye" class="me-1"></pngx-bs-icon><span class="d-none d-md-inline" i18n>View</span>
</pngx-preview-popup>
<a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
<i-bs name="download" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Download</span>
<pngx-bs-icon name="download" class="me-1"></pngx-bs-icon><span class="d-none d-md-inline" i18n>Download</span>
</a>
} @else {
<div class="placeholder btn btn-sm btn-outline-secondary bg-secondary" style="width: 60px;">&nbsp;</div>
@@ -93,24 +93,24 @@
@if (document()) {
@if (displayFields().includes(DisplayField.NOTES) && notesEnabled && document().notes.length) {
<button routerLink="/documents/{{document().id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="View notes" i18n-title>
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="chat-left-text"></i-bs><small>{{document().notes.length}} Notes</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="chat-left-text"></pngx-bs-icon><small>{{document().notes.length}} Notes</small>
</button>
}
@if (displayFields().includes(DisplayField.DOCUMENT_TYPE) && document().document_type) {
<button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="Filter by document type" i18n-title
(click)="clickDocumentType.emit(document().document_type);$event.stopPropagation()">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="file-earmark"></i-bs><small>{{document().document_type | documentTypeName | async}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="file-earmark"></pngx-bs-icon><small>{{document().document_type | documentTypeName | async}}</small>
</button>
}
@if (displayFields().includes(DisplayField.STORAGE_PATH) && document().storage_path) {
<button type="button" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="Filter by storage path" i18n-title
(click)="clickStoragePath.emit(document().storage_path);$event.stopPropagation()">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="archive"></i-bs><small>{{document().storage_path | storagePathName | async}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="archive"></pngx-bs-icon><small>{{document().storage_path | storagePathName | async}}</small>
</button>
}
@if (displayFields().includes(DisplayField.ASN) && document().archive_serial_number | isNumber) {
<div class="list-group-item me-2 bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="upc-scan"></i-bs><small>#{{document().archive_serial_number}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="upc-scan"></pngx-bs-icon><small>#{{document().archive_serial_number}}</small>
</div>
}
@if (displayFields().includes(DisplayField.CREATED) || displayFields().includes(DisplayField.ADDED)) {
@@ -123,29 +123,29 @@
</ng-template>
@if (displayFields().includes(DisplayField.CREATED)) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center" [ngbTooltip]="dateTooltip">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="calendar-event"></i-bs><small>{{document().created | customDate:'mediumDate'}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="calendar-event"></pngx-bs-icon><small>{{document().created | customDate:'mediumDate'}}</small>
</div>
}
@if (displayFields().includes(DisplayField.ADDED)) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center" [ngbTooltip]="dateTooltip">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="calendar-event"></i-bs><small>{{document().added | customDate:'mediumDate'}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="calendar-event"></pngx-bs-icon><small>{{document().added | customDate:'mediumDate'}}</small>
</div>
}
}
@if (displayFields().includes(DisplayField.PAGE_COUNT) && document().page_count) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="files"></i-bs>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="files"></pngx-bs-icon>
<small i18n>{document().page_count, plural, =1 {1 page} other {{{document().page_count}} pages}}</small>
</div>
}
@if (displayFields().includes(DisplayField.OWNER) && document().owner && document().owner !== settingsService.currentUser().id) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document().owner | username | async}}</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></pngx-bs-icon><small>{{document().owner | username | async}}</small>
</div>
}
@if (displayFields().includes(DisplayField.SHARED) && document().is_shared_by_requester) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="people-fill"></i-bs><small i18n>Shared</small>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="people-fill"></pngx-bs-icon><small i18n>Shared</small>
</div>
}
@if (document().__search_hit__?.score) {
@@ -157,7 +157,7 @@
@for (field of document().custom_fields; track field.field) {
@if (displayFields().includes(DisplayField.CUSTOM_FIELD + field.field)) {
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="ui-radios"></i-bs>
<pngx-bs-icon width=".9em" height=".9em" class="me-2 text-muted" name="ui-radios"></pngx-bs-icon>
<small>
<pngx-custom-field-display [document]="document()" [fieldId]="field.field" showNameIfEmpty="true"></pngx-custom-field-display>
</small>
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+13 -13
View File
@@ -35,7 +35,7 @@
@if (document() && displayFields().includes(DisplayField.NOTES) && notesEnabled && document().notes.length) {
<a routerLink="/documents/{{document().id}}/notes" class="document-card-notes py-2 px-1">
<span class="badge rounded-pill bg-light border text-primary">
<i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></pngx-bs-icon>
{{document().notes.length}}</span>
</a>
}
@@ -62,14 +62,14 @@
@if (displayFields().includes(DisplayField.DOCUMENT_TYPE) && document().document_type) {
<button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle document type filter" i18n-title
(click)="clickDocumentType.emit(document().document_type);$event.stopPropagation()">
<i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="file-earmark"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="file-earmark"></pngx-bs-icon>
<small>{{document().document_type | documentTypeName | async}}</small>
</button>
}
@if (displayFields().includes(DisplayField.STORAGE_PATH) && document().storage_path) {
<button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle storage path filter" i18n-title
(click)="clickStoragePath.emit(document().storage_path);$event.stopPropagation()">
<i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="folder"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="folder"></pngx-bs-icon>
<small>{{document().storage_path | storagePathName | async}}</small>
</button>
}
@@ -83,7 +83,7 @@
</div>
</ng-template>
<div class="ps-0 p-1" placement="top" [ngbTooltip]="dateCreatedTooltip">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></pngx-bs-icon>
<small>{{document().created | customDate:'mediumDate'}}</small>
</div>
</div>
@@ -98,7 +98,7 @@
</div>
</ng-template>
<div class="ps-0 p-1" placement="top" [ngbTooltip]="dateAddedTooltip">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></pngx-bs-icon>
<small>{{document().added | customDate:'mediumDate'}}</small>
</div>
</div>
@@ -106,33 +106,33 @@
@if (displayFields().includes(DisplayField.PAGE_COUNT) && document().page_count) {
<div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
<div class="ps-0 p-1" placement="top">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="files"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="files"></pngx-bs-icon>
<small i18n>{document().page_count, plural, =1 {1 page} other {{{document().page_count}} pages}}</small>
</div>
</div>
}
@if (displayFields().includes(DisplayField.ASN) && document().archive_serial_number | isNumber) {
<div class="ps-0 p-1">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="upc-scan"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="upc-scan"></pngx-bs-icon>
<small>#{{document().archive_serial_number}}</small>
</div>
}
@if (displayFields().includes(DisplayField.OWNER) && document().owner && document().owner !== settingsService.currentUser().id) {
<div class="ps-0 p-1">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="person-fill-lock"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="person-fill-lock"></pngx-bs-icon>
<small>{{document().owner | username | async}}</small>
</div>
}
@if (displayFields().includes(DisplayField.SHARED) && document().is_shared_by_requester) {
<div class="ps-0 p-1">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="people-fill"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="people-fill"></pngx-bs-icon>
<small i18n>Shared</small>
</div>
}
@for (field of document().custom_fields; track field.field) {
@if (displayFields().includes(DisplayField.CUSTOM_FIELD + field.field)) {
<div class="ps-0 p-1 d-flex align-items-center overflow-hidden">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="ui-radios"></i-bs>
<pngx-bs-icon width="1em" height="1em" class="me-2 text-muted" name="ui-radios"></pngx-bs-icon>
<small><pngx-custom-field-display [document]="document()" [fieldId]="field.field" showNameIfEmpty="true"></pngx-custom-field-display></small>
</div>
}
@@ -145,13 +145,13 @@
<div class="btn-group w-100">
@if (document()) {
<a routerLink="/documents/{{document().id}}" class="btn btn-sm btn-outline-secondary" title="Open" i18n-title>
<i-bs name="file-earmark-richtext"></i-bs>
<pngx-bs-icon name="file-earmark-richtext"></pngx-bs-icon>
</a>
<pngx-preview-popup [document]="document()" #popupPreview>
<i-bs name="eye"></i-bs>
<pngx-bs-icon name="eye"></pngx-bs-icon>
</pngx-preview-popup>
<a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
<i-bs name="download"></i-bs>
<pngx-bs-icon name="download"></pngx-bs-icon>
</a>
} @else {
<span class="btn btn-sm btn-outline-secondary placeholder bg-secondary" aria-hidden="true"></span>
src-ui/src/app/components/document-list/document-list.component.html
+17 -17
View File
@@ -1,7 +1,7 @@
<pngx-page-header [title]="getTitle()">
<div ngbDropdown class="btn-group flex-fill d-sm-none">
<button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle aria-label="Select" i18n-aria-label>
<i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
<pngx-bs-icon name="text-indent-left"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
@if (list.hasSelection) {
<pngx-clearable-badge [selected]="list.hasSelection" [number]="list.selectedCount" (cleared)="list.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
}
@@ -19,20 +19,20 @@
<div class="btn-group btn-group-sm flex-nowrap">
@if (list.hasSelection) {
<button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
<i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
<pngx-bs-icon name="slash-circle" class="me-1"></pngx-bs-icon><ng-container i18n>None</ng-container>
</button>
}
<button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
<i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
<pngx-bs-icon name="file-earmark-check" class="me-1"></pngx-bs-icon><ng-container i18n>Page</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
<i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
<pngx-bs-icon name="check-all" class="me-1"></pngx-bs-icon><ng-container i18n>All</ng-container>
</button>
</div>
</div>
<div ngbDropdown class="btn-group flex-fill">
<button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle aria-label="Show" i18n-aria-label>
<i-bs name="card-heading"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Show</ng-container></div>
<pngx-bs-icon name="card-heading"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Show</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownDisplayFields" class="shadow">
<div class="px-3">
@@ -48,31 +48,31 @@
<div class="btn-group flex-fill" role="group">
<input type="radio" class="btn-check" [(ngModel)]="list.displayMode" value="table" id="displayModeDetails" name="displayModeDetails">
<label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
<i-bs name="list-ul"></i-bs>
<pngx-bs-icon name="list-ul"></pngx-bs-icon>
</label>
<input type="radio" class="btn-check" [(ngModel)]="list.displayMode" value="smallCards" id="displayModeSmall" name="displayModeSmall">
<label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
<i-bs name="grid"></i-bs>
<pngx-bs-icon name="grid"></pngx-bs-icon>
</label>
<input type="radio" class="btn-check" [(ngModel)]="list.displayMode" value="largeCards" id="displayModeLarge" name="displayModeLarge">
<label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
<i-bs name="hdd-stack"></i-bs>
<pngx-bs-icon name="hdd-stack"></pngx-bs-icon>
</label>
</div>
<div ngbDropdown class="btn-group flex-fill">
<button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle aria-label="Sort" i18n-aria-label>
<i-bs name="arrow-down-up"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Sort</ng-container></div>
<pngx-bs-icon name="arrow-down-up"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Sort</ng-container></div>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
<div class="w-100 d-flex pb-2 mb-1 border-bottom">
<input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
<label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
<i-bs name="sort-alpha-down"></i-bs>
<pngx-bs-icon name="sort-alpha-down"></pngx-bs-icon>
</label>
<input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
<label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
<i-bs name="sort-alpha-up-alt"></i-bs>
<pngx-bs-icon name="sort-alpha-up-alt"></pngx-bs-icon>
</label>
</div>
<div>
@@ -87,7 +87,7 @@
<div class="btn-group flex-fill" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown #viewsDropdown="ngbDropdown" role="group">
<button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle aria-label="Views" i18n-aria-label>
<i-bs name="window-stack"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Views</ng-container></div>
<pngx-bs-icon name="window-stack"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Views</ng-container></div>
@if (savedViewIsModified) {
<div class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
<span class="visually-hidden">selected</span>
@@ -99,7 +99,7 @@
<div class="views-list overflow-y-auto">
@for (view of savedViewService.allViews; track view.id) {
<button ngbDropdownItem (click)="loadViewConfig(view.id)">
<i-bs class="me-2" [name]="view.icon || 'funnel'"></i-bs>{{view.name}}
<pngx-bs-icon class="me-2" [name]="view.icon || 'funnel'"></pngx-bs-icon>{{view.name}}
</button>
}
</div>
@@ -141,12 +141,12 @@
}
@if (!list.isReloading && isFiltered) {
<button class="btn btn-link py-0" (click)="resetFilters()">
<i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon><small i18n>Reset filters</small>
</button>
}
@if (!list.isReloading && list.hasSelection) {
<button class="btn btn-link py-0" (click)="list.selectNone()">
<i-bs width="1em" height="1em" name="slash-circle" class="me-1"></i-bs><small i18n>Clear selection</small>
<pngx-bs-icon width="1em" height="1em" name="slash-circle" class="me-1"></pngx-bs-icon><small i18n>Clear selection</small>
</button>
}
</div>
@@ -325,7 +325,7 @@
@if (activeDisplayFields.includes(DisplayField.TITLE)) {
<td class="pe-0 text-end align-baseline" (mouseleave)="popupPreview.close()">
<pngx-preview-popup [document]="d" linkClasses="btn btn-sm btn-link text-secondary px-1" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
<i-bs name="eye"></i-bs>
<pngx-bs-icon name="eye"></pngx-bs-icon>
</pngx-preview-popup>
</td>
}
@@ -351,7 +351,7 @@
@if (d.notes.length) {
<a routerLink="/documents/{{d.id}}/notes" class="btn btn-sm p-0">
<span class="badge rounded-pill bg-light border text-primary">
<i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
<pngx-bs-icon width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></pngx-bs-icon>
{{d.notes.length}}</span>
</a>
}
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+2 -2
View File
@@ -19,7 +19,7 @@
}
@if (_textFilter) {
<button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetTextField()" aria-label="Clear search" i18n-aria-label>
<i-bs width="1em" height="1em" name="x"></i-bs>
<pngx-bs-icon width="1em" height="1em" name="x"></pngx-bs-icon>
</button>
}
<input #textFilterInput class="form-control form-control-sm" type="text"
@@ -104,7 +104,7 @@
</div>
<div class="d-flex flex-wrap d-none d-sm-inline-block">
<button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
<i-bs class="ms-n1" name="x"></i-bs><ng-container i18n>Reset filters</ng-container>
<pngx-bs-icon class="ms-n1" name="x"></pngx-bs-icon><ng-container i18n>Reset filters</ng-container>
</button>
</div>
</div>
src-ui/src/app/components/document-notes/document-notes.component.html
+1 -1
View File
@@ -23,7 +23,7 @@
<div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
<span>{{displayName(note)}} - {{ note.created | customDate}}</span>
<button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete note" i18n-title (click)="deleteNote(note.id)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Note }">
<i-bs name="trash"></i-bs>
<pngx-bs-icon name="trash"></pngx-bs-icon>
<span class="visually-hidden" i18n>Delete note</span>
</button>
</div>
src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html
+4 -4
View File
@@ -25,7 +25,7 @@
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="editField(field)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" ngbDropdownItem i18n>Edit</button>
@@ -44,10 +44,10 @@
</div>
<div class="btn-group d-none d-sm-inline-block">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
@if (field.document_count > 0) {
@@ -56,7 +56,7 @@
class="btn btn-sm btn-outline-secondary"
[routerLink]="getDocumentFilterUrl(field)"
>
<i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
<pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><ng-container i18n>Documents</ng-container
><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
</a>
</div>
src-ui/src/app/components/manage/document-attributes/document-attributes.component.html
+9 -9
View File
@@ -8,7 +8,7 @@
@if (activeManagementList) {
<div ngbDropdown class="btn-group flex-fill d-sm-none">
<button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle aria-label="Select" i18n-aria-label>
<i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
<pngx-bs-icon name="text-indent-left"></pngx-bs-icon><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
@if (activeManagementList.hasSelection) {
<pngx-clearable-badge [selected]="activeManagementList.hasSelection" [number]="activeManagementList.selectedCount" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
}
@@ -27,34 +27,34 @@
<div class="btn-group btn-group-sm flex-nowrap">
@if (activeManagementList.hasSelection) {
<button class="btn btn-sm btn-outline-secondary" (click)="activeManagementList.selectNone()">
<i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
<pngx-bs-icon name="slash-circle" class="me-1"></pngx-bs-icon><ng-container i18n>None</ng-container>
</button>
}
<button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectPage(true)">
<i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
<pngx-bs-icon name="file-earmark-check" class="me-1"></pngx-bs-icon><ng-container i18n>Page</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectAll()">
<i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
<pngx-bs-icon name="check-all" class="me-1"></pngx-bs-icon><ng-container i18n>All</ng-container>
</button>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="activeManagementList.setPermissions()"
[disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || !activeManagementList.hasSelection">
<i-bs name="person-fill-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
<pngx-bs-icon name="person-fill-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="activeManagementList.delete()"
[disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || !activeManagementList.hasSelection">
<i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
<button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="activeManagementList.openCreateDialog()"
*pngxIfPermissions="{ action: PermissionAction.Add, type: activeManagementList.permissionType }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Create</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Create</ng-container>
</button>
} @else if (customFieldsActive) {
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addCustomField()"
*pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Field</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Field</ng-container>
</button>
}
</pngx-page-header>
@@ -63,7 +63,7 @@
@for (section of visibleSections; track section.id) {
<li [ngbNavItem]="section.id">
<a ngbNavLink >
<i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
<pngx-bs-icon class="me-2" [name]="section.icon"></pngx-bs-icon>{{ section.label }}
</a>
</li>
}
src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html
+4 -4
View File
@@ -116,7 +116,7 @@
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
@@ -136,10 +136,10 @@
</div>
<div class="btn-group d-none d-sm-inline-block">
<button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
@if (getDocumentCount(object) > 0) {
@@ -150,7 +150,7 @@
[routerLink]="getDocumentFilterUrl(object)"
(click)="$event?.stopPropagation()"
>
<i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
<pngx-bs-icon width="1em" height="1em" name="filter" class="me-1"></pngx-bs-icon><ng-container i18n>Documents</ng-container
><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
</a>
</div>
src-ui/src/app/components/manage/mail/mail.component.html
+18 -18
View File
@@ -11,16 +11,16 @@
<h4>
<ng-container i18n>Mail accounts</ng-container>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Account</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Account</ng-container>
</button>
@if (gmailOAuthUrl) {
<a class="btn btn-sm btn-outline-secondary ms-2" [href]="gmailOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
<i-bs name="google" class="me-1"></i-bs><ng-container i18n>Connect Gmail Account</ng-container>
<pngx-bs-icon name="google" class="me-1"></pngx-bs-icon><ng-container i18n>Connect Gmail Account</ng-container>
</a>
}
@if (outlookOAuthUrl) {
<a class="btn btn-sm btn-outline-secondary ms-2" [href]="outlookOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
<i-bs name="microsoft" class="me-1"></i-bs><ng-container i18n>Connect Outlook Account</ng-container>
<pngx-bs-icon name="microsoft" class="me-1"></pngx-bs-icon><ng-container i18n>Connect Outlook Account</ng-container>
</a>
}
</h4>
@@ -47,9 +47,9 @@
<div class="col d-flex align-items-center">
<button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount) || !userCanEdit(account)">
{{account.name}}@switch (account.account_type) {
@case (MailAccountType.IMAP) {<i-bs name="envelope-at-fill" class="ms-2"></i-bs>}
@case (MailAccountType.Gmail_OAuth) {<i-bs name="google" class="ms-2"></i-bs>}
@case (MailAccountType.Outlook_OAuth) {<i-bs name="microsoft" class="ms-2"></i-bs>}
@case (MailAccountType.IMAP) {<pngx-bs-icon name="envelope-at-fill" class="ms-2"></pngx-bs-icon>}
@case (MailAccountType.Gmail_OAuth) {<pngx-bs-icon name="google" class="ms-2"></pngx-bs-icon>}
@case (MailAccountType.Outlook_OAuth) {<pngx-bs-icon name="microsoft" class="ms-2"></pngx-bs-icon>}
}
</button>
</div>
@@ -59,7 +59,7 @@
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="editMailAccount(account)" [disabled]="!userCanEdit(account)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" ngbDropdownItem i18n>Edit</button>
@@ -72,18 +72,18 @@
<div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
<i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
<pngx-bs-icon width="1em" height="1em" name="person-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
</button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="processAccount(account)">
<i-bs width="1em" height="1em" name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Process Mail</ng-container>
<pngx-bs-icon width="1em" height="1em" name="arrow-clockwise" class="me-1"></pngx-bs-icon><ng-container i18n>Process Mail</ng-container>
</button>
</div>
</div>
@@ -102,7 +102,7 @@
<h4 class="mt-4">
<ng-container i18n>Mail rules</ng-container>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Rule</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Rule</ng-container>
</button>
</h4>
<ul class="list-group">
@@ -140,14 +140,14 @@
</div>
<div class="col d-flex align-items-center d-none d-sm-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMail(rule)">
<i-bs width="1em" height="1em" name="clock-history" class="me-1"></i-bs><ng-container i18n>View Processed Mail</ng-container>
<pngx-bs-icon width="1em" height="1em" name="clock-history" class="me-1"></pngx-bs-icon><ng-container i18n>View Processed Mail</ng-container>
</button>
</div>
<div class="col-3">
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="editMailRule(rule)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" ngbDropdownItem i18n>Edit</button>
@@ -160,18 +160,18 @@
<div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
<i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
<pngx-bs-icon width="1em" height="1em" name="person-lock" class="me-1"></pngx-bs-icon><ng-container i18n>Permissions</ng-container>
</button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyMailRule(rule)">
<i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
<pngx-bs-icon width="1em" height="1em" name="files" class="me-1"></pngx-bs-icon><ng-container i18n>Copy</ng-container>
</button>
</div>
</div>
src-ui/src/app/components/manage/mail/processed-mail-dialog/processed-mail-dialog.component.html
+5 -5
View File
@@ -1,11 +1,11 @@
<div class="modal-header">
<h6 class="modal-title" id="modal-basic-title" i18n>Processed Mail for <em>{{ rule().name }}</em></h6>
<button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
<i-bs name="question-circle"></i-bs>
<pngx-bs-icon name="question-circle"></pngx-bs-icon>
</button>
<ng-template #infoPopover>
<a href="https://docs.paperless-ngx.com/usage#processed-mail" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
<i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
<pngx-bs-icon class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></pngx-bs-icon>
</ng-template>
<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
</div>
@@ -56,13 +56,13 @@
<td>
@switch (mail.status) {
@case ('SUCCESS') {
<i-bs name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="statusTooltip"></i-bs>
<pngx-bs-icon name="check-circle" title="SUCCESS" class="text-success" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
}
@case ('FAILED') {
<i-bs name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="statusTooltip"></i-bs>
<pngx-bs-icon name="exclamation-triangle" title="FAILED" class="text-danger" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
}
@default {
<i-bs name="slash-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="statusTooltip"></i-bs>
<pngx-bs-icon name="slash-circle" title="{{ mail.status }}" class="text-muted" [ngbTooltip]="statusTooltip"></pngx-bs-icon>
}
}
</td>
src-ui/src/app/components/manage/saved-views/saved-views.component.html
+1 -1
View File
@@ -43,7 +43,7 @@
type="button"
(click)="editPermissions(view)"
*pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }"
i18n><i-bs class="me-1" name="person-fill-lock"></i-bs>Permissions</button>
><pngx-bs-icon class="me-1" name="person-fill-lock"></pngx-bs-icon><ng-container i18n>Permissions</ng-container></button>
<pngx-confirm-button
label="Delete"
i18n-label
src-ui/src/app/components/manage/share-links/share-link-bundle-list/share-link-bundle-list.component.html
+4 -4
View File
@@ -47,7 +47,7 @@
i18n-aria-label
>
<span class="badge text-bg-warning text-uppercase me-2">{{ statusLabel(bundle.status) }}</span>
<i-bs name="exclamation-triangle-fill" class="text-warning"></i-bs>
<pngx-bs-icon name="exclamation-triangle-fill" class="text-warning"></pngx-bs-icon>
</button>
<ng-template #errorDetail>
@if (bundle.last_error.timestamp) {
@@ -107,10 +107,10 @@
i18n-title
>
@if (copiedSlug() === bundle.slug) {
<i-bs name="clipboard-check"></i-bs>
<pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
}
@if (copiedSlug() !== bundle.slug) {
<i-bs name="clipboard"></i-bs>
<pngx-bs-icon name="clipboard"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy share link</span>
</button>
@@ -121,7 +121,7 @@
[disabled]="loading()"
(click)="retry(bundle)"
>
<i-bs name="arrow-clockwise"></i-bs>
<pngx-bs-icon name="arrow-clockwise"></pngx-bs-icon>
<span class="visually-hidden" i18n>Retry</span>
</button>
}
src-ui/src/app/components/manage/share-links/share-link-list/share-link-list.component.html
+3 -3
View File
@@ -26,7 +26,7 @@
<a routerLink="/documents/{{ link.document }}">{{ link.document_title | documentTitle }}</a>
<span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyDocumentID(link.document)">
@if (copiedDocumentID() === link.document) {
<i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
<pngx-bs-icon width="1em" height="1em" name="clipboard-check" class="me-1"></pngx-bs-icon><ng-container i18n>Copied!</ng-container>
} @else {
ID: {{link.document}}
}
@@ -60,9 +60,9 @@
i18n-title
>
@if (copiedID() === link.id) {
<i-bs name="clipboard-check"></i-bs>
<pngx-bs-icon name="clipboard-check"></pngx-bs-icon>
} @else {
<i-bs name="clipboard"></i-bs>
<pngx-bs-icon name="clipboard"></pngx-bs-icon>
}
<span class="visually-hidden" i18n>Copy share link</span>
</button>
src-ui/src/app/components/manage/workflows/workflows.component.html
+5 -5
View File
@@ -6,7 +6,7 @@
infoLink="usage/#workflows"
>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
<i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Workflow</ng-container>
<pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Workflow</ng-container>
</button>
</pngx-page-header>
@@ -48,7 +48,7 @@
<div class="btn-group d-block d-sm-none">
<div ngbDropdown container="body" class="d-inline-block">
<button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle aria-label="Actions" i18n-aria-label>
<i-bs name="three-dots-vertical"></i-bs>
<pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
</button>
<div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
<button (click)="editWorkflow(workflow)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" ngbDropdownItem i18n>Edit</button>
@@ -60,15 +60,15 @@
<div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
<i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
<pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
</button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
<i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
<pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
</button>
</div>
<div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyWorkflow(workflow)">
<i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
<pngx-bs-icon width="1em" height="1em" name="files" class="me-1"></pngx-bs-icon><ng-container i18n>Copy</ng-container>
</button>
</div>
</div>
src-ui/src/app/components/not-found/not-found.component.html
+1 -1
View File
@@ -6,7 +6,7 @@
<h1 class="display-6" i18n>Not Found</h1>
<p>
<a class="btn btn-primary" routerLink="/dashboard">
<i-bs width="1.2em" height="1.2em" name="house" class="me-1"></i-bs><ng-container i18n>Go to Dashboard</ng-container>
<pngx-bs-icon width="1.2em" height="1.2em" name="house" class="me-1"></pngx-bs-icon><ng-container i18n>Go to Dashboard</ng-container>
</a>
</p>
</div>
src-ui/src/environments/environment.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export const DEFAULT_APP_TITLE = 'Paperless-ngx'
export const environment = {
production: false,
apiBaseUrl: '/api/',
apiBaseUrl: 'http://localhost:8000/api/',
apiVersion: '10',
appTitle: DEFAULT_APP_TITLE,
tag: 'dev',
src-ui/src/styles.scss
+2 -2
View File
@@ -883,7 +883,7 @@ canvas.hiddenCanvasElement {
}
// bs icons
.btn-sm i-bs svg {
.btn-sm pngx-bs-icon svg {
vertical-align: text-bottom;
}
@@ -900,7 +900,7 @@ canvas.hiddenCanvasElement {
border-color: var(--pngx-card-hover-border) !important;
}
.card-footer i-bs svg {
.card-footer pngx-bs-icon svg {
vertical-align: middle;
}
}
src-ui/src/theme.scss
+1 -1
View File
@@ -190,7 +190,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h
}
.search-container {
input, input:focus, i-bs[name="search"] , ::placeholder {
input, input:focus, pngx-bs-icon[name="search"] , ::placeholder {
color: var(--pngx-primary-text-contrast) !important;
}
}