Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Nimbus UI mode with adaptive scrollbars and layout improvements

Browse Source
This commit is contained in:
bruno
2025-10-15 11:57:32 -04:00
parent 5a95b33081
commit 55a7a06daa
29 changed files with 1669 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/file-explorer/file-explorer.component.ts
+28 -15
View File
@@ -13,7 +13,7 @@ import { VaultService } from '../../services/vault.service';
@let folder = node;
<div>
<div
(click)="toggleFolder(folder)"
(click)="onFolderClick(folder)"
class="flex items-center cursor-pointer p-2 rounded my-0.5 text-sm hover:bg-obs-l-bg-main dark:hover:bg-obs-d-bg-main"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 transition-transform text-obs-l-text-muted dark:text-obs-d-text-muted" [class.rotate-90]="folder.isOpen" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -27,26 +27,30 @@ import { VaultService } from '../../services/vault.service';
<app-file-explorer
[nodes]="folder.children"
[selectedNoteId]="selectedNoteId()"
[foldersOnly]="foldersOnly()"
(folderSelected)="folderSelected.emit($event)"
(fileSelected)="onFileSelected($event)"
></app-file-explorer>
</div>
}
</div>
} @else {
@let file = node;
<div
(click)="onFileSelected(file.id)"
class="flex items-center cursor-pointer p-2 rounded my-0.5 text-sm ml-5"
[class.bg-obs-l-bg-main]="selectedNoteId() === file.id"
[class.dark:bg-obs-d-bg-main]="selectedNoteId() === file.id"
[class.hover:bg-obs-l-bg-main]="selectedNoteId() !== file.id"
[class.dark:hover:bg-obs-d-bg-main]="selectedNoteId() !== file.id"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 flex-shrink-0 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="truncate">{{ file.name }}</span>
</div>
@if (!foldersOnly()) {
@let file = node;
<div
(click)="onFileSelected(file.id)"
class="flex items-center cursor-pointer p-2 rounded my-0.5 text-sm ml-5"
[class.bg-obs-l-bg-main]="selectedNoteId() === file.id"
[class.dark:bg-obs-d-bg-main]="selectedNoteId() === file.id"
[class.hover:bg-obs-l-bg-main]="selectedNoteId() !== file.id"
[class.dark:hover:bg-obs-d-bg-main]="selectedNoteId() !== file.id"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 flex-shrink-0 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="truncate">{{ file.name }}</span>
</div>
}
}
</li>
}
@@ -58,7 +62,9 @@ import { VaultService } from '../../services/vault.service';
export class FileExplorerComponent {
nodes = input.required<VaultNode[]>();
selectedNoteId = input<string | null>(null);
foldersOnly = input<boolean>(false);
fileSelected = output<string>();
folderSelected = output<string>();
private vaultService = inject(VaultService);
@@ -68,6 +74,13 @@ export class FileExplorerComponent {
}
}
onFolderClick(folder: VaultFolder) {
this.toggleFolder(folder);
if (folder?.path) {
this.folderSelected.emit(folder.path);
}
}
toggleFolder(folder: VaultFolder) {
this.vaultService.toggleFolder(folder.path);
}
src/components/tags-view/tags-view.component.ts
+1 -19
View File
@@ -35,24 +35,6 @@ interface TagGroup {
--tv-scroll-thumb: rgba(200, 200, 200, 0.2);
}
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: var(--tv-scroll-thumb) var(--tv-scroll-track);
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: var(--tv-scroll-track);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--tv-scroll-thumb);
border-radius: 3px;
}
.tag-item {
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -180,7 +162,7 @@ interface TagGroup {
</div>
<!-- Tags list -->
<div class="flex-1 overflow-y-auto custom-scrollbar">
<div class="flex-1 overflow-y-auto" appScrollableOverlay>
@if (displayedGroups().length === 0) {
<div class="flex flex-col items-center justify-center h-full text-obs-l-text-muted dark:text-obs-d-text-muted p-8">
<svg class="h-12 w-12 mb-3 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">