paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-08-18 00:46:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cute visual indicator

Browse Source
This commit is contained in:
shamoon
2025-02-10 21:55:12 -08:00
parent 59db0ea879
commit ef25dbc1bb
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,7 +83,10 @@
<label class="form-check-label" for="{{typeName}}{{object.id}}"></label> <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
</div> </div>
</td> </td>
<td scope="row" class="depth-{{depth}}"> <td scope="row" class="name-cell" style="--depth: {{depth}}">
@if (depth > 0) {
<div class="indicator"></div>
}
<button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button> <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
</td> </td>
<td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td> <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>

32
src-ui/src/app/components/manage/management-list/management-list.component.scss
View File

@@ -11,26 +11,16 @@ tbody tr:last-child td {
min-height: 0; min-height: 0;
} }
.depth-0 { td.name-cell {
padding-left: 0; padding-left: calc(calc(var(--depth) - 1) * 1.1rem);
}
.depth-1 { .indicator {
padding-left: 20px; display: inline-block;
} width: .8rem;
height: .8rem;
.depth-2 { border-left: 1px solid var(--bs-secondary);
padding-left: 40px; border-bottom: 1px solid var(--bs-secondary);
} margin-right: .25rem;
margin-left: .5rem;
.depth-3 { }
padding-left: 60px;
}
.depth-4 {
padding-left: 80px;
}
.depth-5 {
padding-left: 100px;
} }