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>

6
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,7 +133,7 @@
</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>
@ -331,4 +331,4 @@
<div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div> <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> <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
</form> </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>

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

@ -1,13 +1,12 @@
<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>
@ -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);