Bruno Charest
ee3085ce38
- Integrated Unsplash API for image search functionality with environment configuration - Added new Nimbus Editor page component with navigation from sidebar and mobile drawer - Enhanced TOC with highlight animation for editor heading navigation - Improved CDK overlay z-index hierarchy for proper menu layering - Removed obsolete logging validation script
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { TocService } from '../../services/toc.service';
|
|
import { Input } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-toc-button',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
@if (tocService.hasHeadings()) {
|
|
<button
|
|
type="button"
|
|
[class]="buttonClass"
|
|
[class.active]="tocService.isOpen()"
|
|
(click)="tocService.toggle()"
|
|
title="Toggle Table of Contents (Ctrl+\\)"
|
|
[style.top.px]="mode === 'fixed' ? tocService.headerOffset() : null"
|
|
>
|
|
<svg class="w-5 h-5 text-text dark:text-neutral-100" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="6" x2="21" y2="6"/>
|
|
<line x1="3" y1="12" x2="21" y2="12"/>
|
|
<line x1="3" y1="18" x2="21" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
}
|
|
`,
|
|
styles: [`
|
|
.toc-toggle-button {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.toc-toggle-button.active {
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
border-color: rgb(59, 130, 246);
|
|
}
|
|
|
|
.toc-toggle-button:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.toc-toggle-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
`]
|
|
})
|
|
export class TocButtonComponent {
|
|
readonly tocService = inject(TocService);
|
|
@Input() mode: 'fixed' | 'header' = 'fixed';
|
|
|
|
get buttonClass(): string {
|
|
const base = 'toc-toggle-button p-2.5 rounded-lg bg-surface1 dark:bg-gray-800 border border-border dark:border-gray-700 shadow-lg hover:bg-surface2 dark:hover:bg-gray-700 transition z-30';
|
|
if (this.mode === 'header') return `${base} absolute right-0 top-1`;
|
|
return `${base} fixed right-4`;
|
|
}
|
|
}
|