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

Fix display issues

Browse Source
This commit is contained in:
shamoon 2024-01-14 00:33:44 -08:00
parent d6620f4c09
commit 37f8363ad5
46 changed files with 847 additions and 901 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1023
src-ui/messages.xlf
View File

File diff suppressed because it is too large Load Diff

2
src-ui/src/app/components/admin/config/config.component.html
View File

@ -17,7 +17,7 @@
<h6> <h6>
{{option.title}} {{option.title}}
<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"> <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 class="sidebaricon" name="info-circle"></i-bs> <i-bs name="info-circle"></i-bs>
</a> </a>
</h6> </h6>
</div> </div>

330
src-ui/src/app/components/admin/settings/settings.component.html
View File

@ -2,7 +2,7 @@
<button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button> <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
<a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank"> <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
<ng-container i18n>Open Django Admin</ng-container> <ng-container i18n>Open Django Admin</ng-container>
<i-bs class="sidebaricon ms-1" name="arrow-up-right"></i-bs> <i-bs name="arrow-up-right"></i-bs>
</a> </a>
</pngx-page-header> </pngx-page-header>
@ -133,202 +133,202 @@
</div> </div>
<div class="col-2"> <div class="col-2">
<button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()"> <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
<i-bs class="buttonicon-sm me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container> <i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
</button> </button>
</div>
</div> </div>
</div>
<h4 class="mt-4" id="update-checking" i18n>Update checking</h4> <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
<div class="row mb-3"> <div class="row mb-3">
<div class="offset-md-3 col"> <div class="offset-md-3 col">
<p i18n> <p i18n>
Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/> Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
Actual updating of the app must still be performed manually. Actual updating of the app must still be performed manually.
</p> </p>
<p i18n> <p i18n>
<em>No tracking data is collected by the app in any way.</em> <em>No tracking data is collected by the app in any way.</em>
</p> </p>
<pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check> <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
</div>
</div> </div>
</div>
<h4 class="mt-4" i18n>Bulk editing</h4> <h4 class="mt-4" i18n>Bulk editing</h4>
<div class="row mb-3"> <div class="row mb-3">
<div class="offset-md-3 col"> <div class="offset-md-3 col">
<pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check> <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
<pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check> <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
</div>
</div> </div>
</div>
<h4 class="mt-4" i18n>Notes</h4> <h4 class="mt-4" i18n>Notes</h4>
<div class="row mb-3"> <div class="row mb-3">
<div class="offset-md-3 col"> <div class="offset-md-3 col">
<pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check> <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
</div>
</div> </div>
</div>
</ng-template> </ng-template>
</li> </li>
<li [ngbNavItem]="SettingsNavIDs.Permissions"> <li [ngbNavItem]="SettingsNavIDs.Permissions">
<a ngbNavLink i18n>Permissions</a> <a ngbNavLink i18n>Permissions</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<h4 i18n>Default Permissions</h4> <h4 i18n>Default Permissions</h4>
<div class="row mb-3"> <div class="row mb-3">
<div class="offset-md-3 col"> <div class="offset-md-3 col">
<p i18n> <p i18n>
Settings apply to this user account for objects (Tags, Mail Rules, etc.) created via the web UI Settings apply to this user account for objects (Tags, Mail Rules, etc.) created via the web UI
</p> </p>
</div>
</div> </div>
<div class="row mb-3"> </div>
<div class="col-md-3 col-form-label pt-0"> <div class="row mb-3">
<span i18n>Default Owner</span> <div class="col-md-3 col-form-label pt-0">
</div> <span i18n>Default Owner</span>
<div class="col-md-5">
<pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
<small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
</div>
</div> </div>
<div class="row mb-3"> <div class="col-md-5">
<div class="col-md-3 col-form-label pt-0"> <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
<span i18n>Default View Permissions</span> <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
</div> </div>
<div class="col-md-5"> </div>
<div class="row"> <div class="row mb-3">
<div class="col-3"> <div class="col-md-3 col-form-label pt-0">
<span class="d-block pt-1" i18n>Users:</span> <span i18n>Default View Permissions</span>
</div> </div>
<div class="col"> <div class="col-md-5">
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }"> <div class="row">
<pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user> <div class="col-3">
</ng-container> <span class="d-block pt-1" i18n>Users:</span>
</div>
</div> </div>
<div class="row"> <div class="col">
<div class="col-3"> <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
<span class="d-block pt-1" i18n>Groups:</span> <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
</div> </ng-container>
<div class="col"> </div>
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }"> </div>
<pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group> <div class="row">
</ng-container> <div class="col-3">
</div> <span class="d-block pt-1" i18n>Groups:</span>
</div>
<div class="col">
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
<pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
<div class="row mb-3"> </div>
<div class="col-md-3 col-form-label pt-0"> <div class="row mb-3">
<span i18n>Default Edit Permissions</span> <div class="col-md-3 col-form-label pt-0">
</div> <span i18n>Default Edit Permissions</span>
<div class="col-md-5"> </div>
<div class="row"> <div class="col-md-5">
<div class="col-3"> <div class="row">
<span class="d-block pt-1" i18n>Users:</span> <div class="col-3">
</div> <span class="d-block pt-1" i18n>Users:</span>
<div class="col">
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
<pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
</ng-container>
</div>
</div> </div>
<div class="row"> <div class="col">
<div class="col-3"> <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
<span class="d-block pt-1" i18n>Groups:</span> <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
</div> </ng-container>
<div class="col">
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
<pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
</ng-container>
</div>
</div>
<div class="row">
<small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
</div> </div>
</div> </div>
</div> <div class="row">
</ng-template> <div class="col-3">
</li> <span class="d-block pt-1" i18n>Groups:</span>
</div>
<li [ngbNavItem]="SettingsNavIDs.Notifications"> <div class="col">
<a ngbNavLink i18n>Notifications</a> <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
<ng-template ngbNavContent> <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
</ng-container>
<h4 i18n>Document processing</h4> </div>
</div>
<div class="row mb-3"> <div class="row">
<div class="offset-md-3 col"> <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
<pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
<pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
<pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
<pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
</div> </div>
</div> </div>
</div>
</ng-template>
</li>
</ng-template> <li [ngbNavItem]="SettingsNavIDs.Notifications">
</li> <a ngbNavLink i18n>Notifications</a>
<ng-template ngbNavContent>
<li [ngbNavItem]="SettingsNavIDs.SavedViews"> <h4 i18n>Document processing</h4>
<a ngbNavLink i18n>Saved views</a>
<ng-template ngbNavContent>
<h4 i18n>Settings</h4> <div class="row mb-3">
<div class="row mb-3"> <div class="offset-md-3 col">
<div class="offset-md-3 col"> <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
<pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check> <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
<pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
<pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
</div>
</div>
</ng-template>
</li>
<li [ngbNavItem]="SettingsNavIDs.SavedViews">
<a ngbNavLink i18n>Saved views</a>
<ng-template ngbNavContent>
<h4 i18n>Settings</h4>
<div class="row mb-3">
<div class="offset-md-3 col">
<pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
</div>
</div>
<h4 i18n>Views</h4>
<div formGroupName="savedViews">
@for (view of savedViews; track view) {
<div [formGroupName]="view.id" class="row">
<div class="mb-3 col">
<label class="form-label" for="name_{{view.id}}" i18n>Name</label>
<input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
</div>
<div class="mb-2 col">
<label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
<label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
<label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
</div>
</div>
<div class="mb-2 col-auto">
<label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
<button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
</div>
</div> </div>
</div> }
<h4 i18n>Views</h4> @if (savedViews && savedViews.length === 0) {
<div formGroupName="savedViews"> <div i18n>No saved views defined.</div>
}
@for (view of savedViews; track view) { @if (!savedViews) {
<div [formGroupName]="view.id" class="row"> <div>
<div class="mb-3 col"> <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<label class="form-label" for="name_{{view.id}}" i18n>Name</label> <div class="visually-hidden" i18n>Loading...</div>
<input type="text" class="form-control" formControlName="name" id="name_{{view.id}}"> </div>
</div> }
<div class="mb-2 col">
<label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
<label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
<label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
</div>
</div>
<div class="mb-2 col-auto">
<label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
<button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
</div>
</div>
}
@if (savedViews && savedViews.length === 0) { </div>
<div i18n>No saved views defined.</div>
}
@if (!savedViews) { </ng-template>
<div> </li>
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div> </ul>
<div class="visually-hidden" i18n>Loading...</div>
</div>
}
</div> <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
</ng-template> <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
</li> </form>
</ul>
<div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
<button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
</form>

8
src-ui/src/app/components/admin/tasks/tasks.component.html
View File

@ -1,10 +1,10 @@
<pngx-page-header title="File Tasks" i18n-title> <pngx-page-header title="File Tasks" i18n-title>
<div class="btn-toolbar col col-md-auto align-items-center"> <div class="btn-toolbar col col-md-auto align-items-center">
<button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0"> <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0"> <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
<i-bs class="sidebaricon" name="check2-all"></i-bs>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container> <i-bs name="check2-all"></i-bs>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
</button> </button>
<div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()"> <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
<input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval"> <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
@ -77,12 +77,12 @@
<td scope="row"> <td scope="row">
<div class="btn-group" role="group"> <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 }"> <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
<i-bs class="sidebaricon" name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container> <i-bs name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
</button> </button>
<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"> <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
@if (task.related_document) { @if (task.related_document) {
<button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();"> <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
<i-bs class="sidebaricon" name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container> <i-bs name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
</button> </button>
} }
</ng-container> </ng-container>

14
src-ui/src/app/components/admin/users-groups/users-groups.component.html
View File

@ -5,8 +5,7 @@
<h4 class="d-flex"> <h4 class="d-flex">
<ng-container i18n>Users</ng-container> <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 }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add User</ng-container>
<ng-container i18n>Add User</ng-container>
</button> </button>
</h4> </h4>
<ul class="list-group"> <ul class="list-group">
@ -27,10 +26,10 @@
<div class="col"> <div class="col">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }"> <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
<i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }"> <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
<i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>
@ -44,8 +43,7 @@
<h4 class="mt-4 d-flex"> <h4 class="mt-4 d-flex">
<ng-container i18n>Groups</ng-container> <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 }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
<ng-container i18n>Add Group</ng-container>
</button> </button>
</h4> </h4>
@if (groups.length > 0) { @if (groups.length > 0) {
@ -67,10 +65,10 @@
<div class="col"> <div class="col">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }"> <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
<i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }"> <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
<i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>

100
src-ui/src/app/components/app-frame/app-frame.component.html
View File

@ -27,13 +27,13 @@
<div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"> *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
<form (ngSubmit)="search()" class="form-inline flex-grow-1"> <form (ngSubmit)="search()" class="form-inline flex-grow-1">
<i-bs class="sidebaricon" name="search"></i-bs> <i-bs style="top: .25em;" width="1em" height="1em" name="search"></i-bs>
<input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search" <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
[formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)" [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
(selectItem)="itemSelected($event)" i18n-placeholder> (selectItem)="itemSelected($event)" i18n-placeholder>
@if (!searchFieldEmpty) { @if (!searchFieldEmpty) {
<button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()"> <button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
<i-bs class="buttonicon-sm me-1" name="x"></i-bs> <i-bs width="1em" height="1em" name="x"></i-bs>
</button> </button>
} }
</form> </form>
@ -44,27 +44,27 @@
<span class="small me-2 d-none d-sm-inline"> <span class="small me-2 d-none d-sm-inline">
{{this.settingsService.displayName}} {{this.settingsService.displayName}}
</span> </span>
<i-bs name="person-circle"></i-bs> <i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
</button> </button>
<div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown"> <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
<div class="d-sm-none"> <div class="d-sm-none">
<p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p> <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
</div> </div>
<button ngbDropdownItem class="nav-link" (click)="editProfile()"> <button ngbDropdownItem class="nav-link d-flex align-items-center" (click)="editProfile()">
<i-bs class="sidebaricon me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container> <i-bs class="d-flex me-2" name="person"></i-bs>&nbsp;<ng-container i18n>My Profile</ng-container>
</button> </button>
<a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" <a ngbDropdownItem class="nav-link d-flex align-items-center" routerLink="settings" (click)="closeMenu()"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"> *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
<i-bs class="sidebaricon me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container> <i-bs class="d-flex me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
</a> </a>
<a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()"> <a ngbDropdownItem class="nav-link d-flex" href="accounts/logout/" (click)="onLogout()">
<i-bs class="sidebaricon me-2" name="door-open"></i-bs><ng-container i18n>Logout</ng-container> <i-bs class="d-flex me-2" height="19" name="door-open"></i-bs><ng-container i18n>Logout</ng-container>
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer" <a ngbDropdownItem class="nav-link d-flex align-items-center" target="_blank" rel="noopener noreferrer"
href="https://docs.paperless-ngx.com"> href="https://docs.paperless-ngx.com">
<i-bs class="sidebaricon me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container> <i-bs class="d-flex me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container>
</a> </a>
</div> </div>
</li> </li>
@ -78,25 +78,25 @@
[ngbCollapse]="isMenuCollapsed"> [ngbCollapse]="isMenuCollapsed">
<button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()"> <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
@if (slimSidebarEnabled) { @if (slimSidebarEnabled) {
<i-bs name="chevron-double-right"></i-bs> <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
} @else { } @else {
<i-bs name="chevron-double-left"></i-bs> <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
} }
</button> </button>
<div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around"> <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span> <i-bs class="d-flex me-1" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
<a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span> <i-bs class="d-flex me-1" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
</a> </a>
</li> </li>
</ul> </ul>
@ -114,15 +114,15 @@
<li class="nav-item w-100" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews" <li class="nav-item w-100" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)" cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
(cdkDragEnded)="onDragEnd($event)"> (cdkDragEnded)="onDragEnd($event)">
<a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" <a class="nav-link d-flex align-items-center" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
[disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
popoverClass="popover-slim"> popoverClass="popover-slim">
<i-bs class="sidebaricon" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span> <i-bs class="d-flex me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
</a> </a>
@if (settingsService.organizingSidebarSavedViews) { @if (settingsService.organizingSidebarSavedViews) {
<div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle> <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
<i-bs class="sidebaricon text-muted" name="grip-vertical"></i-bs> <i-bs name="grip-vertical"></i-bs>
</div> </div>
} }
</li> </li>
@ -139,11 +139,11 @@
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-2">
@for (d of openDocuments; track d) { @for (d of openDocuments; track d) {
<li class="nav-item w-100"> <li class="nav-item w-100">
<a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" <a class="nav-link d-flex align-items-center" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}"
routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
[disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
popoverClass="popover-slim"> popoverClass="popover-slim">
<i-bs class="sidebaricon" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span> <i-bs class="d-flex me-1" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
<span class="close" (click)="closeDocument(d); $event.preventDefault()"> <span class="close" (click)="closeDocument(d); $event.preventDefault()">
<i-bs class="toolbaricon" name="x"></i-bs> <i-bs class="toolbaricon" name="x"></i-bs>
</span> </span>
@ -152,10 +152,10 @@
} }
@if (openDocuments.length >= 1) { @if (openDocuments.length >= 1) {
<li class="nav-item w-100"> <li class="nav-item w-100">
<a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" <a class="nav-link d-flex align-items-center" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span> <i-bs class="d-flex me-1" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
</a> </a>
</li> </li>
} }
@ -168,57 +168,57 @@
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-2">
<li class="nav-item" <li class="nav-item"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"> *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
<a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span> <i-bs class="d-flex me-1" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
tourAnchor="tour.tags"> tourAnchor="tour.tags">
<a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" <a class="nav-link d-flex align-items-center" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim"> triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span> <i-bs class="d-flex me-1" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" <li class="nav-item"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"> *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
<a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span> <i-bs class="d-flex me-1" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
<a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span> <i-bs class="d-flex me-1" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
<a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span> <i-bs class="d-flex me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" <li class="nav-item"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
tourAnchor="tour.workflows"> tourAnchor="tour.workflows">
<a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span> <i-bs class="d-flex me-1" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }" <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
tourAnchor="tour.mail"> tourAnchor="tour.mail">
<a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail" <a class="nav-link d-flex align-items-center" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim"> triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span> <i-bs class="d-flex me-1" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
</a> </a>
</li> </li>
</ul> </ul>
@ -229,45 +229,45 @@
<ul class="nav flex-column mb-2"> <ul class="nav flex-column mb-2">
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"
tourAnchor="tour.settings"> tourAnchor="tour.settings">
<a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span> <i-bs class="d-flex me-1" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
<a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span> <i-bs class="d-flex me-1" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
<a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span> <i-bs class="d-flex me-1" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" <li class="nav-item"
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }"
tourAnchor="tour.file-tasks"> tourAnchor="tour.file-tasks">
<a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" <a class="nav-link d-flex align-items-center" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim"> container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
@if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) { @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
<span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span> <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
} }
<i-bs class="sidebaricon" name="list-task"></i-bs><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) { <i-bs class="d-flex me-1" name="list-task"></i-bs><span class="align-items-center" [class.d-md-flex]="!slimSidebarEnabled">&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
<span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span> <span><span class="badge bg-danger ms-2 d-md-flex">{{tasksService.failedFileTasks.length}}</span></span>
}</ng-container></span> }</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }"> <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
<a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" <a class="nav-link d-flex align-items-center" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim"> triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span> <i-bs class="d-flex me-1" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item mt-2" tourAnchor="tour.outro"> <li class="nav-item mt-2" tourAnchor="tour.outro">
@ -275,7 +275,7 @@
target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
triggers="mouseenter:mouseleave" popoverClass="popover-slim"> triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<i-bs class="sidebaricon" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span> <i-bs class="d-flex me-1" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
</a> </a>
</li> </li>
<li class="nav-item" [class.visually-hidden]="slimSidebarEnabled"> <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">

14
src-ui/src/app/components/app-frame/app-frame.component.scss
View File

@ -186,11 +186,11 @@ main {
width: 1.8rem; width: 1.8rem;
height: 100%; height: 100%;
svg { i-bs {
opacity: 0.5; opacity: 0.5;
} }
&:hover svg { &:hover i-bs {
opacity: 1; opacity: 1;
} }
} }
@ -205,7 +205,7 @@ main {
text-decoration: underline; text-decoration: underline;
} }
svg { i-bs {
margin-bottom: 2px; margin-bottom: 2px;
} }
} }
@ -248,7 +248,7 @@ main {
.navbar .dropdown-menu { .navbar .dropdown-menu {
font-size: 0.875rem; // body size font-size: 0.875rem; // body size
a svg { a i-bs {
opacity: 0.6; opacity: 0.6;
} }
} }
@ -259,7 +259,7 @@ main {
form { form {
position: relative; position: relative;
> svg { > i-bs {
position: absolute; position: absolute;
left: 0.6rem; left: 0.6rem;
top: 0.5rem; top: 0.5rem;
@ -269,7 +269,7 @@ main {
&:focus-within { &:focus-within {
form > svg { form > i-bs {
display: none; display: none;
} }
@ -323,6 +323,6 @@ main {
cursor: move; cursor: move;
} }
::ng-deep .navItemDrag .position-absolute svg { ::ng-deep .navItemDrag .position-absolute i-bs {
display: none; display: none;
} }

4
src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
View File

@ -1,11 +1,11 @@
@if (active) { @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)"> <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) { @if (!isNumbered && selected) {
<i-bs name="check-lg"></i-bs> <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
} }
@if (isNumbered) { @if (isNumbered) {
<div class="number">{{number}}<span class="visually-hidden">selected</span></div> <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
} }
<i-bs name="x-lg"></i-bs> <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
</button> </button>
} }

4
src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss
View File

@ -22,7 +22,7 @@ button:hover {
.x { .x {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 5px; top: .4em;
left: calc(50% - 4px); left: calc(50% - .4em);
} }
} }

4
src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
View File

@ -18,10 +18,10 @@
</pngx-input-select> </pngx-input-select>
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<button class="btn btn-sm btn-outline-secondary me-auto" type="button" (click)="createField()" [disabled]="!canCreateFields"> <button class="btn btn-sm btn-outline-secondary me-auto" type="button" (click)="createField()" [disabled]="!canCreateFields">
<i-bs class="buttonicon-sm me-1 mb-1" name="asterisk"></i-bs><ng-container i18n>Create New Field</ng-container> <i-bs width="1em" height="1em" name="asterisk"></i-bs><ng-container i18n>Create New Field</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="addField(); fieldDropdown.close()" [disabled]="field === undefined"> <button class="btn btn-sm btn-outline-primary me-1" type="button" (click)="addField(); fieldDropdown.close()" [disabled]="field === undefined">
<i-bs class="buttonicon me-1" name="plus-circle"></i-bs><ng-container i18n>Add</ng-container> <i-bs width="1.2em" height="1.2em" name="plus-circle"></i-bs><ng-container i18n>Add</ng-container>
</button> </button>
</div> </div>
</li> </li>

10
src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
View File

@ -9,7 +9,7 @@
<button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)"> <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
<div class="selected-icon"> <div class="selected-icon">
@if (relativeDate === rd.id) { @if (relativeDate === rd.id) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="d-flex justify-content-between w-100 align-items-center ps-2"> <div class="d-flex justify-content-between w-100 align-items-center ps-2">
@ -30,7 +30,7 @@
<div i18n>After</div> <div i18n>After</div>
@if (dateAfter) { @if (dateAfter) {
<a class="btn btn-link p-0 m-0" (click)="clearAfter()"> <a class="btn btn-link p-0 m-0" (click)="clearAfter()">
<i-bs class="buttonicon-sm" name="x"></i-bs> <i-bs width="1em" height="1em" name="x"></i-bs>
<small i18n>Clear</small> <small i18n>Clear</small>
</a> </a>
} }
@ -40,7 +40,7 @@
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)" <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker"> maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
<button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button"> <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
<i-bs class="buttonicon-sm" name="calendar"></i-bs> <i-bs width="1em" height="1em" name="calendar"></i-bs>
</button> </button>
</div> </div>
@ -51,7 +51,7 @@
<div i18n>Before</div> <div i18n>Before</div>
@if (dateBefore) { @if (dateBefore) {
<a class="btn btn-link p-0 m-0" (click)="clearBefore()"> <a class="btn btn-link p-0 m-0" (click)="clearBefore()">
<i-bs class="buttonicon-sm" name="x"></i-bs> <i-bs width="1em" height="1em" name="x"></i-bs>
<small i18n>Clear</small> <small i18n>Clear</small>
</a> </a>
} }
@ -61,7 +61,7 @@
<input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)" <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker"> maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
<button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button"> <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
<i-bs class="buttonicon-sm" name="calendar"></i-bs> <i-bs width="1em" height="1em" name="calendar"></i-bs>
</button> </button>
</div> </div>

12
src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
View File

@ -27,8 +27,7 @@
<div class="d-flex"> <div class="d-flex">
<p class="p-2" i18n>Trigger Workflow On:</p> <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()"> <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Trigger</ng-container>
<ng-container i18n>Add Trigger</ng-container>
</button> </button>
</div> </div>
<div ngbAccordion [closeOthers]="true"> <div ngbAccordion [closeOthers]="true">
@ -40,8 +39,7 @@
<span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{trigger.id}}</span> <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{trigger.id}}</span>
} }
<button type="button" class="btn btn-link text-danger ms-2" (click)="removeTrigger(i)"> <button type="button" class="btn btn-link text-danger ms-2" (click)="removeTrigger(i)">
<i-bs class="sidebaricon me-1" name="trash"></i-bs> <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
<ng-container i18n>Delete</ng-container>
</button> </button>
</button> </button>
</div> </div>
@ -67,8 +65,7 @@
<div class="d-flex"> <div class="d-flex">
<p class="p-2" i18n>Apply Actions:</p> <p class="p-2" i18n>Apply Actions:</p>
<button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()"> <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Action</ng-container>
<ng-container i18n>Add Action</ng-container>
</button> </button>
</div> </div>
<div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)"> <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@ -80,8 +77,7 @@
<span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span> <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
} }
<button type="button" class="btn btn-link text-danger ms-2" (click)="removeAction(i)"> <button type="button" class="btn btn-link text-danger ms-2" (click)="removeAction(i)">
<i-bs class="sidebaricon me-1" name="trash"></i-bs> <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
<ng-container i18n>Delete</ng-container>
</button> </button>
</button> </button>
</div> </div>

4
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
View File

@ -1,6 +1,6 @@
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)"> <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
<button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled"> <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
<i-bs class="toolbaricon" name="{{icon}}"></i-bs> <i-bs name="{{icon}}"></i-bs>
<div class="d-none d-sm-inline">&nbsp;{{title}}</div> <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
@if (!editing && selectionModel.totalCount > 0) { @if (!editing && selectionModel.totalCount > 0) {
<pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge> <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
@ -47,7 +47,7 @@
@if (editing) { @if (editing) {
<button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled"> <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
<small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small> <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
<i-bs name="arrow-right"></i-bs> <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
</button> </button>
} }
@if (!editing && manyToOne) { @if (!editing && manyToOne) {

2
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
View File

@ -25,7 +25,7 @@
} }
} }
small > svg { small > i-bs {
margin-top: -2px; margin-top: -2px;
} }

6
src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
View File

@ -1,13 +1,13 @@
<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)="toggleItem($event)" [disabled]="disabled"> <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)="toggleItem($event)" [disabled]="disabled">
<div class="selected-icon me-1"> <div class="selected-icon me-1">
@if (isChecked()) { @if (isChecked()) {
<i-bs class="buttonicon-sm bi-check" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
@if (isPartiallyChecked()) { @if (isPartiallyChecked()) {
<i-bs class="buttonicon-sm bi-dash" name="dash"></i-bs> <i-bs width="1em" height="1em" name="dash"></i-bs>
} }
@if (isExcluded()) { @if (isExcluded()) {
<i-bs class="buttonicon-sm bi-x" name="x"></i-bs> <i-bs width="1em" height="1em" name="x"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">

2
src-ui/src/app/components/common/input/check/check.component.html
View File

@ -5,7 +5,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label> <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>

6
src-ui/src/app/components/common/input/date/date.component.html
View File

@ -4,7 +4,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label> <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -14,11 +14,11 @@
(dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)" (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled"> name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
<button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled"> <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
<i-bs class="buttonicon" name="calendar"></i-bs> <i-bs width="1.2em" height="1.2em" name="calendar"></i-bs>
</button> </button>
@if (showFilter) { @if (showFilter) {
<button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}"> <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
<i-bs class="buttonicon" name="filter"></i-bs> <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
</button> </button>
} }
</div> </div>

6
src-ui/src/app/components/common/input/document-link/document-link.component.html
View File

@ -6,7 +6,7 @@
} }
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -27,9 +27,9 @@
(change)="onChange(selectedDocuments)"> (change)="onChange(selectedDocuments)">
<ng-template ng-label-tmp let-document="item"> <ng-template ng-label-tmp let-document="item">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i-bs class="sidebaricon" (click)="unselect(document)" name="x"></i-bs> <i-bs (click)="unselect(document)" name="x"></i-bs>
<a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();"> <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
<i-bs class="sidebaricon-sm me-1" name="file-text"></i-bs><span>{{document.title}}</span> <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs><span>{{document.title}}</span>
</a> </a>
</div> </div>
</ng-template> </ng-template>

4
src-ui/src/app/components/common/input/file/file.component.html
View File

@ -6,7 +6,7 @@
} }
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -18,7 +18,7 @@
<div class="form-text d-flex align-items-center"> <div class="form-text d-flex align-items-center">
<span class="text-muted">{{filename}}</span> <span class="text-muted">{{filename}}</span>
<button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()"> <button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()">
<i-bs class="sidebaricon" name="x"></i-bs><small class="ms-1" i18n>Remove</small> <i-bs name="x"></i-bs><small class="ms-1" i18n>Remove</small>
</button> </button>
</div> </div>
} }

2
src-ui/src/app/components/common/input/number/number.component.html
View File

@ -6,7 +6,7 @@
} }
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>

6
src-ui/src/app/components/common/input/select/select.component.html
View File

@ -6,7 +6,7 @@
} }
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -38,12 +38,12 @@
</ng-select> </ng-select>
@if (allowCreateNew) { @if (allowCreateNew) {
<button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled"> <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
<i-bs class="buttonicon" name="plus"></i-bs> <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
</button> </button>
} }
@if (showFilter) { @if (showFilter) {
<button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}"> <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
<i-bs class="buttonicon" name="filter"></i-bs> <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
</button> </button>
} }
</div> </div>

6
src-ui/src/app/components/common/input/switch/switch.component.html
View File

@ -5,12 +5,12 @@
<label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end"> <label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
{{title}} {{title}}
@if (showUnsetNote && isUnset) { @if (showUnsetNote && isUnset) {
<i-bs class="sidebaricon-sm ms-1" name="exclamation-triangle"></i-bs> <i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
} }
</label> </label>
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -22,7 +22,7 @@
<label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end"> <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
{{title}} {{title}}
@if (showUnsetNote && isUnset) { @if (showUnsetNote && isUnset) {
<i-bs class="sidebaricon-sm ms-1" name="exclamation-triangle"></i-bs> <i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
} }
</label> </label>
} }

4
src-ui/src/app/components/common/input/tags/tags.component.html
View File

@ -34,12 +34,12 @@
</ng-select> </ng-select>
@if (allowCreate) { @if (allowCreate) {
<button class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled"> <button class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
<i-bs class="buttonicon" name="plus"></i-bs> <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
</button> </button>
} }
@if (showFilter) { @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"> <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 class="buttonicon" name="filter"></i-bs> <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
</button> </button>
} }
</div> </div>

2
src-ui/src/app/components/common/input/text/text.component.html
View File

@ -6,7 +6,7 @@
} }
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>

4
src-ui/src/app/components/common/input/url/url.component.html
View File

@ -4,7 +4,7 @@
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label> <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
@if (removable) { @if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)"> <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button> </button>
} }
</div> </div>
@ -12,7 +12,7 @@
<div class="input-group" [class.is-invalid]="error"> <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" (change)="onChange(value)" [disabled]="disabled"> <input #inputField type="url" class="form-control" [class.is-invalid]="error" placeholder="https://" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
<a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank"> <a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank">
<i-bs class="buttonicon mb-1" name="box-arrow-up-right"></i-bs> <i-bs width="1.2em" height="1.2em" name="box-arrow-up-right"></i-bs>
</a> </a>
<div class="invalid-feedback position-absolute top-100"> <div class="invalid-feedback position-absolute top-100">
{{error}} {{error}}

12
src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
View File

@ -9,7 +9,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"> <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"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.NONE) { @if (selectionModel.ownerFilter === OwnerFilterType.NONE) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">
@ -19,7 +19,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"> <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"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.SELF) { @if (selectionModel.ownerFilter === OwnerFilterType.SELF) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">
@ -29,7 +29,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"> <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"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) { @if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">
@ -39,7 +39,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"> <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"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) { @if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">
@ -49,7 +49,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"> <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"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) { @if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1"> <div class="me-1">
@ -59,7 +59,7 @@
<button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" 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" [disabled]="disabled"> <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" 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" [disabled]="disabled">
<div class="selected-icon me-1"> <div class="selected-icon me-1">
@if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) { @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
<i-bs class="buttonicon-sm" name="check"></i-bs> <i-bs width="1em" height="1em" name="check"></i-bs>
} }
</div> </div>
<div class="me-1 w-100"> <div class="me-1 w-100">

2
src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
View File

@ -73,7 +73,7 @@ describe('PreviewPopupComponent', () => {
component.onError({ name: 'PasswordException' }) component.onError({ name: 'PasswordException' })
fixture.detectChanges() fixture.detectChanges()
expect(component.requiresPassword).toBeTruthy() expect(component.requiresPassword).toBeTruthy()
expect(fixture.debugElement.query(By.css('svg'))).not.toBeNull() expect(fixture.debugElement.query(By.css('i-bs'))).not.toBeNull()
}) })
it('should fall back to object for non-pdf', () => { it('should fall back to object for non-pdf', () => {

6
src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
View File

@ -34,15 +34,15 @@
<input type="text" class="form-control" formControlName="auth_token" readonly> <input type="text" class="form-control" formControlName="auth_token" readonly>
<button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy"> <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
@if (!copied) { @if (!copied) {
<i-bs class="buttonicon-sm" name="clipboard-fill"></i-bs> <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
} }
@if (copied) { @if (copied) {
<i-bs class="buttonicon-sm" name="clipboard-check-fill"></i-bs> <i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
} }
<span class="visually-hidden" i18n>Copy</span> <span class="visually-hidden" i18n>Copy</span>
</button> </button>
<button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token"> <button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token">
<i-bs class="buttonicon" name="arrow-repeat"></i-bs> <i-bs width="1.2em" height="1.2em" name="arrow-repeat"></i-bs>
</button> </button>
</div> </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" i18n>Copied!</span> <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" i18n>Copied!</span>

10
src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
View File

@ -21,20 +21,20 @@
} }
<button type="button" class="btn btn-sm btn-outline-primary" (click)="copy(link)"> <button type="button" class="btn btn-sm btn-outline-primary" (click)="copy(link)">
@if (copied !== link.id) { @if (copied !== link.id) {
<i-bs class="buttonicon" name="clipboard-fill"></i-bs> <i-bs width="1.2em" height="1.2em" name="clipboard-fill"></i-bs>
} }
@if (copied === link.id) { @if (copied === link.id) {
<i-bs class="buttonicon" name="clipboard-check-fill"></i-bs> <i-bs width="1.2em" height="1.2em" name="clipboard-check-fill"></i-bs>
} }
<span class="visually-hidden" i18n>Copy</span> <span class="visually-hidden" i18n>Copy</span>
</button> </button>
@if (canShare(link)) { @if (canShare(link)) {
<button type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)"> <button type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
<i-bs class="buttonicon" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span> <i-bs width="1.2em" height="1.2em" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
</button> </button>
} }
<button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)"> <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)">
<i-bs class="buttonicon" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span> <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
</button> </button>
</div> </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> <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>
@ -59,7 +59,7 @@
<div class="spinner-border spinner-border-sm me-2" role="status"></div> <div class="spinner-border spinner-border-sm me-2" role="status"></div>
} }
@if (!loading) { @if (!loading) {
<i-bs class="buttonicon me-1" name="plus"></i-bs> <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
} }
<ng-container i18n>Create</ng-container> <ng-container i18n>Create</ng-container>
</button> </button>

8
src-ui/src/app/components/common/toasts/toasts.component.html
View File

@ -9,10 +9,10 @@
<span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span> <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
<div class="d-flex align-items-top"> <div class="d-flex align-items-top">
@if (!toast.error) { @if (!toast.error) {
<i-bs class="sidebaricon-sm mt-1 me-2 flex-shrink-0" name="info-circle"></i-bs> <i-bs width="0.9em" height="0.9em" name="info-circle"></i-bs>
} }
@if (toast.error) { @if (toast.error) {
<i-bs class="sidebaricon-sm mt-1 me-2 flex-shrink-0" name="exclamation-triangle"></i-bs> <i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
} }
<div> <div>
<p class="mb-0">{{toast.content}}</p> <p class="mb-0">{{toast.content}}</p>
@ -33,10 +33,10 @@
<div class="col offset-sm-3"> <div class="col offset-sm-3">
<button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)"> <button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
@if (!copied) { @if (!copied) {
<i-bs class="sidebaricon" name="clipboard"></i-bs> <i-bs name="clipboard"></i-bs>
} }
@if (copied) { @if (copied) {
<i-bs class="sidebaricon" name="clipboard-check"></i-bs> <i-bs name="clipboard-check"></i-bs>
} }
>&nbsp;<ng-container i18n>Copy Raw Error</ng-container> >&nbsp;<ng-container i18n>Copy Raw Error</ng-container>
</button> </button>

4
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
View File

@ -39,13 +39,13 @@
<a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle" <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
[ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle" [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover"> autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
<i-bs class="buttonicon-xs" name="eye"></i-bs> <i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
</a> </a>
<ng-template #previewContent> <ng-template #previewContent>
<pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup> <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
</ng-template> </ng-template>
<a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()"> <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
<i-bs class="buttonicon-xs" name="download"></i-bs> <i-bs width="0.8em" height="0.8em" name="download"></i-bs>
</a> </a>
</div> </div>
</td> </td>

2
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
View File

@ -16,7 +16,7 @@ form {
.btn-open { .btn-open {
line-height: 1; line-height: 1;
svg { i-bs {
margin-top: -1px; margin-top: -1px;
} }
} }

2
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
View File

@ -4,7 +4,7 @@
<div class="d-flex"> <div class="d-flex">
@if (draggable) { @if (draggable) {
<div class="ms-n2 me-1" cdkDragHandle> <div class="ms-n2 me-1" cdkDragHandle>
<i-bs class="sidebaricon text-muted" name="grip-vertical"></i-bs> <i-bs name="grip-vertical"></i-bs>
</div> </div>
} }
<h6 class="card-title mb-0">{{title}}</h6> <h6 class="card-title mb-0">{{title}}</h6>

2
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
View File

@ -1,3 +1,3 @@
svg { i-bs {
cursor: move; cursor: move;
} }

14
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -19,12 +19,12 @@
} }
<button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }"> <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
<i-bs class="buttonicon" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span> <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
</button> </button>
<div class="btn-group me-2"> <div class="btn-group me-2">
<a [href]="downloadUrl" class="btn btn-sm btn-outline-primary"> <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
<i-bs class="buttonicon me-md-1" name="download"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Download</span> <i-bs width="1.2em" height="1.2em" name="download"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Download</span>
</a> </a>
@if (metadata?.has_archive_version) { @if (metadata?.has_archive_version) {
@ -44,11 +44,11 @@
</button> </button>
<div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow"> <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
<button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit"> <button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit">
<i-bs class="buttonicon-sm" name="arrow-counterclockwise"></i-bs><span class="ps-1" i18n>Redo OCR</span> <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs><span class="ps-1" i18n>Redo OCR</span>
</button> </button>
<button ngbDropdownItem (click)="moreLike()"> <button ngbDropdownItem (click)="moreLike()">
<i-bs class="buttonicon-sm" name="diagram-3"></i-bs><span class="ps-1" i18n>More like this</span> <i-bs width="1em" height="1em" name="diagram-3"></i-bs><span class="ps-1" i18n>More like this</span>
</button> </button>
</div> </div>
</div> </div>
@ -74,13 +74,13 @@
<div class="btn-toolbar mb-1 pb-3 border-bottom"> <div class="btn-toolbar mb-1 pb-3 border-bottom">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()"> <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
<i-bs class="buttonicon" name="x"></i-bs> <i-bs width="1.2em" height="1.2em" name="x"></i-bs>
</button> </button>
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()"> <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
<i-bs class="buttonicon" name="arrow-left"></i-bs> <i-bs width="1.2em" height="1.2em" name="arrow-left"></i-bs>
</button> </button>
<button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()"> <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
<i-bs class="buttonicon" name="arrow-right"></i-bs> <i-bs width="1.2em" height="1.2em" name="arrow-right"></i-bs>
</button> </button>
</div> </div>

4
src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html
View File

@ -2,10 +2,10 @@
<button type="button" class="btn btn-outline-secondary btn-sm me-2" <button type="button" class="btn btn-outline-secondary btn-sm me-2"
(click)="expand = !expand"> (click)="expand = !expand">
@if (!expand) { @if (!expand) {
<i-bs class="buttonicon" name="caret-down"></i-bs> <i-bs width="1.2em" height="1.2em" name="caret-down"></i-bs>
} }
@if (expand) { @if (expand) {
<i-bs class="buttonicon" name="caret-up"></i-bs> <i-bs width="1.2em" height="1.2em" name="caret-up"></i-bs>
} }
</button> </button>
{{title}} {{title}}

8
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@ -49,21 +49,21 @@
<div class="d-flex flex-column flex-md-row align-items-md-center"> <div class="d-flex flex-column flex-md-row align-items-md-center">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()"> <a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()">
<i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span> <i-bs name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
</a> </a>
<a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }"> <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
<i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="pencil"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span> <i-bs name="pencil"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Edit</span>
</a> </a>
<a class="btn btn-sm btn-outline-secondary" target="_blank" [href]="previewUrl" <a class="btn btn-sm btn-outline-secondary" target="_blank" [href]="previewUrl"
[ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle" [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover"> autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
<i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span> <i-bs name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
</a> </a>
<ng-template #previewContent> <ng-template #previewContent>
<pngx-preview-popup [document]="document"></pngx-preview-popup> <pngx-preview-popup [document]="document"></pngx-preview-popup>
</ng-template> </ng-template>
<a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()"> <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
<i-bs class="sidebaricon" fill="currentColor" class="sidebaricon" name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span> <i-bs name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
</a> </a>
</div> </div>

2
src-ui/src/app/components/document-list/document-list.component.html
View File

@ -104,7 +104,7 @@
} }
@if (!list.isReloading && isFiltered) { @if (!list.isReloading && isFiltered) {
<button class="btn btn-link py-0" (click)="resetFilters()"> <button class="btn btn-link py-0" (click)="resetFilters()">
<i-bs class="buttonicon-sm" name="x"></i-bs><small i18n>Reset filters</small> <i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
</button> </button>
} }
</div> </div>

2
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
View File

@ -19,7 +19,7 @@
} }
@if (_textFilter) { @if (_textFilter) {
<button class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()"> <button class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
<i-bs class="buttonicon-sm me-1" name="x"></i-bs> <i-bs width="1em" height="1em" name="x"></i-bs>
</button> </button>
} }
<input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'"> <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">

7
src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
View File

@ -1,7 +1,6 @@
<pngx-page-header title="Custom Fields" i18n-title> <pngx-page-header title="Custom Fields" i18n-title>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Field</ng-container>
<ng-container i18n>Add Field</ng-container>
</button> </button>
</pngx-page-header> </pngx-page-header>
@ -23,10 +22,10 @@
<div class="col"> <div class="col">
<div class="btn-group"> <div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)"> <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
<i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)"> <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
<i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>

18
src-ui/src/app/components/manage/mail/mail.component.html
View File

@ -5,8 +5,7 @@
<h4> <h4>
<ng-container i18n>Mail accounts</ng-container> <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 }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Account</ng-container>
<ng-container i18n>Add Account</ng-container>
</button> </button>
</h4> </h4>
<ul class="list-group"> <ul class="list-group">
@ -26,13 +25,13 @@
<div class="col"> <div class="col">
<div class="btn-group"> <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)"> <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 class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)"> <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
<i-bs class="buttonicon-sm" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container> <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
</button> </button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)"> <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 class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>
@ -50,8 +49,7 @@
<h4 class="mt-4"> <h4 class="mt-4">
<ng-container i18n>Mail rules</ng-container> <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 }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Rule</ng-container>
<ng-container i18n>Add Rule</ng-container>
</button> </button>
</h4> </h4>
<ul class="list-group"> <ul class="list-group">
@ -71,13 +69,13 @@
<div class="col"> <div class="col">
<div class="btn-group"> <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)"> <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 class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)"> <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
<i-bs class="buttonicon-sm" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container> <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
</button> </button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)"> <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 class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>

17
src-ui/src/app/components/manage/management-list/management-list.component.html
View File

@ -1,14 +1,13 @@
<pngx-page-header title="{{ typeNamePlural | titlecase }}"> <pngx-page-header title="{{ typeNamePlural | titlecase }}">
<button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedObjects.size === 0"> <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedObjects.size === 0">
<i-bs class="sidebaricon" name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container> <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
</button> </button>
<button type="button" class="btn btn-sm btn-outline-primary me-5" (click)="setPermissions()" [disabled]="!userOwnsAll || selectedObjects.size === 0"> <button type="button" class="btn btn-sm btn-outline-primary me-5" (click)="setPermissions()" [disabled]="!userOwnsAll || selectedObjects.size === 0">
<i-bs name="person-fill-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container> <i-bs name="person-fill-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
</button> </button>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }" i18n> <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Create</ng-container>
Create </button>
</button>
</pngx-page-header> </pngx-page-header>
<div class="row mb-3"> <div class="row mb-3">
@ -85,13 +84,13 @@
</div> </div>
<div class="btn-group d-none d-sm-block"> <div class="btn-group d-none d-sm-block">
<button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"> <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
<i-bs class="buttonicon-sm" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container> <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)"> <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
<i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)"> <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
<i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</td> </td>

7
src-ui/src/app/components/manage/workflows/workflows.component.html
View File

@ -1,7 +1,6 @@
<pngx-page-header title="Workflows" i18n-title> <pngx-page-header title="Workflows" i18n-title>
<button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }"> <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
<i-bs class="sidebaricon me-1" name="plus-circle"></i-bs> <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Workflow</ng-container>
<ng-container i18n>Add Workflow</ng-container>
</button> </button>
</pngx-page-header> </pngx-page-header>
@ -27,10 +26,10 @@
<div class="col"> <div class="col">
<div class="btn-group"> <div class="btn-group">
<button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)"> <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
<i-bs class="buttonicon-sm" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container> <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
</button> </button>
<button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)"> <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
<i-bs class="buttonicon-sm" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container> <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button> </button>
</div> </div>
</div> </div>

3
src-ui/src/app/components/not-found/not-found.component.html
View File

@ -6,8 +6,7 @@
<h1 class="display-6" i18n>Not Found</h1> <h1 class="display-6" i18n>Not Found</h1>
<p> <p>
<a class="btn btn-primary" routerLink="/dashboard"> <a class="btn btn-primary" routerLink="/dashboard">
<i-bs class="buttonicon me-1" name="house"></i-bs> <i-bs width="1.2em" height="1.2em" name="house"></i-bs>&nbsp;<ng-container i18n>Go to Dashboard</ng-container>
<ng-container i18n>Go to Dashboard</ng-container>
</a> </a>
</p> </p>
</div> </div>

1
src-ui/src/assets/bootstrap-icons.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

38
src-ui/src/styles.scss
View File

@ -465,44 +465,6 @@ ul.pagination {
overflow: hidden; overflow: hidden;
} }
// icons
.toolbaricon {
width: 1.2em;
height: 1.2em;
}
.buttonicon {
width: 1.2em;
height: 1.2em;
}
.buttonicon-sm {
width: 1em;
height: 1em;
}
.buttonicon-xs {
width: 0.8em;
height: 0.8em;
}
.sidebaricon {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
.sidebaricon-sm {
width: 12px;
height: 12px;
}
.metadata-icon {
width: 0.9rem;
height: 0.9rem;
padding: 0.05rem;
}
table.table { table.table {
--bs-table-color: var(--bs-body-color); --bs-table-color: var(--bs-body-color);
--bs-table-bg: var(--bs-light-rgb); --bs-table-bg: var(--bs-light-rgb);