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

refactor: redesign editor buttons and improve scrollbar theming

Browse Source
This commit is contained in:
bruno
2025-10-21 22:32:54 -04:00
parent 0d0607577d
commit eeb957cf17
27 changed files with 739 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tags-view/note-viewer/note-viewer.component.ts
+56 -30
View File
@@ -51,7 +51,7 @@ export interface WikiLinkActivation {
<div class="relative p-1 prose prose-lg dark:prose-invert max-w-none prose-p:leading-[1] prose-li:leading-[1] prose-blockquote:leading-[1]">
<div class="sr-only" role="status" aria-live="polite">{{ copyStatus() }}</div>
<!-- Compact Top Bar -->
<div class="flex items-center justify-between gap-2 pl-1 pr-2 py-1 mb-2 text-text-muted text-xs">
<div class="flex items-start justify-between gap-2 pl-1 pr-2 py-1 mb-2 text-text-muted text-xs">
<app-note-header class="flex-1 min-w-0"
[fullPath]="note().filePath"
[noteId]="note().id"
@@ -62,7 +62,7 @@ export interface WikiLinkActivation {
(tagSelected)="tagClicked.emit($event)"
></app-note-header>
<div class="flex items-center gap-1">
<div class="flex items-center gap-1 self-start pt-1">
<button
type="button"
class="note-toolbar-icon"
@@ -85,15 +85,17 @@ export interface WikiLinkActivation {
{{ fullScreenActive() ? '⤢' : '⤢' }}
</button>
<button
type="button"
class="note-toolbar-icon"
(click)="showToc.emit()"
[attr.title]="tocOpen() ? 'Cacher sommaire' : 'Afficher sommaire'"
[attr.aria-label]="tocOpen() ? 'Cacher sommaire' : 'Afficher sommaire'"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [ngClass]="tocOpen() ? 'toc-toggle--active' : 'toc-toggle--idle'"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M13 8h5"/><path d="M13 12h5"/><path d="M13 16h5"/></svg>
</button>
<div class="hidden sm:block">
<button
type="button"
class="note-toolbar-icon"
(click)="showToc.emit()"
[attr.title]="tocOpen() ? 'Cacher sommaire' : 'Afficher sommaire'"
[attr.aria-label]="tocOpen() ? 'Cacher sommaire' : 'Afficher sommaire'"
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" [ngClass]="tocOpen() ? 'toc-toggle--active' : 'toc-toggle--idle'"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M13 8h5"/><path d="M13 12h5"/><path d="M13 16h5"/></svg>
</button>
</div>
<button
type="button"
@@ -155,23 +157,29 @@ export interface WikiLinkActivation {
</div>
}
<div class="not-prose flex items-center gap-3 text-sm text-text-muted my-4">
<span class="inline-flex items-center gap-1">
<div class="not-prose flex flex-col gap-2 text-sm text-text-muted my-4">
<!-- Row 1: date + author -->
<div class="flex flex-wrap items-center gap-4">
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2h-1.5a1.5 1.5 0 01-3 0h-5a1.5 1.5 0 01-3 0H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{{ note().updatedAt | date:'medium' }}
</span>
<span class="inline-flex items-center gap-1">
</span>
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM5.5 21a6.5 6.5 0 0113 0" />
</svg>
{{ getAuthorFromFrontmatter() ?? note().author ?? 'Auteur inconnu' }}
</span>
</span>
</div>
<!-- Row 2: state icons (toggle buttons) -->
<div class="flex flex-wrap items-center gap-3">
@if (hasState('favoris')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('favoris') ? 'text-rose-500' : 'text-muted'" title="{{ state('favoris') ? 'Ajouté aux favoris' : 'Non favori' }}" role="img" aria-label="{{ state('favoris') ? 'Ajouté aux favoris' : 'Non favori' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('favoris') ? 'text-rose-500' : 'text-muted'" title="{{ state('favoris') ? 'Ajouté aux favoris' : 'Non favori' }}" aria-label="{{ state('favoris') ? 'Ajouté aux favoris' : 'Non favori' }}" (click)="toggleState('favoris')">
@if (state('favoris')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<path d="M19 14.5c1.5-1.5 2-4 0-6s-5-2-7 1c-2-3-5-3.5-7-1s-1.5 4.5 0 6l7 6z" />
@@ -181,19 +189,19 @@ export interface WikiLinkActivation {
<path d="M19 14.5c1.5-1.5 2-4 0-6s-5-2-7 1c-2-3-5-3.5-7-1s-1.5 4.5 0 6l7 6z" />
</svg>
}
</span>
</button>
}
@if (hasState('publish')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('publish') ? 'text-green-500' : 'text-muted'" title="{{ state('publish') ? 'Publié sur le web' : 'Non publié' }}" role="img" aria-label="{{ state('publish') ? 'Publié sur le web' : 'Non publié' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('publish') ? 'text-green-500' : 'text-muted'" title="{{ state('publish') ? 'Publié sur le web' : 'Non publié' }}" aria-label="{{ state('publish') ? 'Publié sur le web' : 'Non publié' }}" (click)="toggleState('publish')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="M2 12h20" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
</span>
</button>
}
@if (hasState('draft')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('draft') ? 'text-yellow-500' : 'text-muted'" title="{{ state('draft') ? 'Brouillon actif' : 'Pas un brouillon' }}" role="img" aria-label="{{ state('draft') ? 'Brouillon actif' : 'Pas un brouillon' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('draft') ? 'text-yellow-500' : 'text-muted'" title="{{ state('draft') ? 'Brouillon actif' : 'Pas un brouillon' }}" aria-label="{{ state('draft') ? 'Brouillon actif' : 'Pas un brouillon' }}" (click)="toggleState('draft')">
@if (state('draft')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3h18v4H3z" />
@@ -205,10 +213,10 @@ export interface WikiLinkActivation {
<rect x="3" y="4" width="18" height="16" rx="2" />
</svg>
}
</span>
</button>
}
@if (hasState('template')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('template') ? 'text-amber-500' : 'text-muted'" title="{{ state('template') ? 'Modèle' : 'Non modèle' }}" role="img" aria-label="{{ state('template') ? 'Modèle' : 'Non modèle' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('template') ? 'text-amber-500' : 'text-muted'" title="{{ state('template') ? 'Modèle' : 'Non modèle' }}" aria-label="{{ state('template') ? 'Modèle' : 'Non modèle' }}" (click)="toggleState('template')">
@if (state('template')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="14" rx="2" />
@@ -220,10 +228,10 @@ export interface WikiLinkActivation {
<rect x="3" y="5" width="18" height="12" rx="2" />
</svg>
}
</span>
</button>
}
@if (hasState('task')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('task') ? 'text-indigo-500' : 'text-muted'" title="{{ state('task') ? 'Tâche' : 'Pas une tâche' }}" role="img" aria-label="{{ state('task') ? 'Tâche' : 'Pas une tâche' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('task') ? 'text-indigo-500' : 'text-muted'" title="{{ state('task') ? 'Tâche' : 'Pas une tâche' }}" aria-label="{{ state('task') ? 'Tâche' : 'Pas une tâche' }}" (click)="toggleState('task')">
@if (state('task')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="16" rx="2" />
@@ -234,10 +242,10 @@ export interface WikiLinkActivation {
<rect x="3" y="4" width="18" height="16" rx="2" />
</svg>
}
</span>
</button>
}
@if (hasState('private')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('private') ? 'text-purple-500' : 'text-muted'" title="{{ state('private') ? 'Privé' : 'Public' }}" role="img" aria-label="{{ state('private') ? 'Privé' : 'Public' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('private') ? 'text-purple-500' : 'text-muted'" title="{{ state('private') ? 'Privé' : 'Public' }}" aria-label="{{ state('private') ? 'Privé' : 'Public' }}" (click)="toggleState('private')">
@if (state('private')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" />
@@ -249,10 +257,10 @@ export interface WikiLinkActivation {
<path d="M7 11V7a5 5 0 0 1 9.9-1" />
</svg>
}
</span>
</button>
}
@if (hasState('archive')) {
<span class="inline-flex items-center gap-1 transition-colors" [ngClass]="state('archive') ? 'text-amber-600' : 'text-muted'" title="{{ state('archive') ? 'Document archivé' : 'Document non archivé' }}" role="img" aria-label="{{ state('archive') ? 'Document archivé' : 'Document non archivé' }}">
<button type="button" class="inline-flex items-center gap-1 transition-colors focus:outline-none" [ngClass]="state('archive') ? 'text-amber-600' : 'text-muted'" title="{{ state('archive') ? 'Document archivé' : 'Document non archivé' }}" aria-label="{{ state('archive') ? 'Document archivé' : 'Document non archivé' }}" (click)="toggleState('archive')">
@if (state('archive')) {
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22,12 18,12 18,8"/>
@@ -266,8 +274,9 @@ export interface WikiLinkActivation {
<line x1="10" y1="12" x2="14" y2="12"/>
</svg>
}
</span>
</button>
}
</div>
</div>
<div [innerHTML]="sanitizedHtmlContent()"></div>
@@ -359,6 +368,23 @@ export class NoteViewerComponent implements OnDestroy {
return [];
});
async toggleState(key: 'publish' | 'favoris' | 'archive' | 'draft' | 'private' | 'template' | 'task'): Promise<void> {
const currentNote = this.note();
if (!currentNote?.id) return;
const current = this.state(key);
const next = !current;
const ok = await this.vault.updateNoteStates(currentNote.id, key, next);
if (!ok) return;
try {
const fm = (currentNote.frontmatter ??= {} as Note['frontmatter']);
(fm as any)[key] = next;
} catch {
// ignore failures for optimistic update
}
this.vault.refresh();
}
constructor() {
effect(() => {
src/components/tags-view/tags-view.component.ts
+2 -2
View File
@@ -179,7 +179,7 @@ interface TagGroup {
<button
type="button"
(click)="toggleGroup(group.label)"
class="group-header w-full flex items-center justify-between px-3 py-2 text-left hover:bg-obs-l-bg-hover dark:hover:bg-obs-d-bg-hover"
class="group-header w-full flex items-center justify-between px-3 py-2 text-left rounded-lg transition-colors hover:bg-slate-500/10 dark:hover:bg-surface2/15"
>
<div class="flex items-center gap-2">
<svg
@@ -208,7 +208,7 @@ interface TagGroup {
<button
type="button"
(click)="onTagClick(tag.name)"
class="tag-item w-full flex items-center justify-between px-3 py-2 text-left hover:bg-obs-l-bg-hover dark:hover:bg-obs-d-bg-hover group"
class="tag-item w-full flex items-center justify-between px-3 py-2 text-left rounded-lg transition-colors hover:bg-slate-500/10 dark:hover:bg-surface2/15 group"
>
<div class="flex items-center gap-2 flex-1 min-w-0">
<svg class="h-3.5 w-3.5 text-obs-l-text-muted dark:text-obs-d-text-muted flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">