171 lines
6.2 KiB
TypeScript
171 lines
6.2 KiB
TypeScript
import { Component, Output, EventEmitter } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
export interface BlockMenuAction {
|
|
type: 'heading' | 'paragraph' | 'list' | 'numbered' | 'checkbox' | 'table' | 'code' | 'image' | 'file' | 'formula' | 'bookmark' | 'more';
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-block-initial-menu',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="flex items-center gap-1 px-3 py-2 bg-surface1 rounded-2xl shadow-surface-md border border-app">
|
|
<!-- Edit/Text -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Text"
|
|
(click)="onAction('paragraph')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Checkbox (square with check) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Checkbox list"
|
|
(click)="onAction('checkbox')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="14" height="14" rx="2"/>
|
|
<path d="M6.5 11.5l3 3 5-6"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Bullet list (dots + lines) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Bullet list"
|
|
(click)="onAction('list')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<circle cx="5" cy="7" r="1.6" fill="currentColor"/>
|
|
<path d="M9 7h11"/>
|
|
<circle cx="5" cy="12" r="1.6" fill="currentColor"/>
|
|
<path d="M9 12h11"/>
|
|
<circle cx="5" cy="17" r="1.6" fill="currentColor"/>
|
|
<path d="M9 17h11"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Numbered list (1/2/3 + lines) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Numbered list"
|
|
(click)="onAction('numbered')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<path d="M3.5 7h1.5"/><path d="M3 12h2"/><path d="M3 17h2"/>
|
|
<path d="M8 7h12"/>
|
|
<path d="M8 12h12"/>
|
|
<path d="M8 17h12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Table -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Table"
|
|
(click)="onAction('table')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M3 9h18M3 15h18M9 3v18"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Image -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Image"
|
|
(click)="onAction('image')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<path d="M21 15l-5-5L5 21"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Attachment/File (paperclip) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Attachment"
|
|
(click)="onAction('file')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Bookmark"
|
|
(click)="onAction('bookmark')"
|
|
type="button"
|
|
>
|
|
<span class="text-base leading-none">🔖</span>
|
|
</button>
|
|
|
|
<!-- Formula (fx with frame) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="Formula"
|
|
(click)="onAction('formula')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<text x="7" y="16" font-family="Arial" font-size="10" font-style="italic" fill="currentColor">fx</text>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Heading (HM) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors font-semibold"
|
|
title="Heading"
|
|
(click)="onAction('heading')"
|
|
type="button"
|
|
>
|
|
<span class="text-sm">H<sub class="text-[9px]">M</sub></span>
|
|
</button>
|
|
|
|
<!-- Separator -->
|
|
<div class="w-px h-5 bg-gray-700 mx-1"></div>
|
|
|
|
<!-- More (dropdown chevron) -->
|
|
<button
|
|
class="p-1.5 rounded hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-colors"
|
|
title="More options"
|
|
(click)="onAction('more')"
|
|
type="button"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 9l6 6 6-6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
:host {
|
|
display: block;
|
|
}
|
|
`]
|
|
})
|
|
export class BlockInitialMenuComponent {
|
|
@Output() action = new EventEmitter<BlockMenuAction>();
|
|
|
|
onAction(type: BlockMenuAction['type']): void {
|
|
this.action.emit({ type });
|
|
}
|
|
}
|