mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-11 14:08:55 +08:00
DarkSky
0c7b20dc18
#### PR Dependency Tree * **PR #15464** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Replaced the project’s formatting and linting workflow with Oxfmt and Oxlint. * Added shared formatting and linting configuration, editor integration, and updated automated checks. * Updated generated files, scripts, and lint guidance to use the new tooling. * **Style** * Reformatted templates, source code, examples, and configuration files for consistent readability. * No user-facing functionality or rendering behavior changed. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { WithDisposable } from '@blocksuite/affine/global/lit';
|
|
import { ShadowlessElement } from '@blocksuite/affine/std';
|
|
import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
|
|
import { css, html, nothing } from 'lit';
|
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
|
|
@customElement('custom-outline-panel')
|
|
export class CustomOutlinePanel extends WithDisposable(ShadowlessElement) {
|
|
static override styles = css`
|
|
.custom-outline-container {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 16px;
|
|
border: 1px solid var(--affine-border-color, #e3e2e4);
|
|
background: var(--affine-background-overlay-panel-color);
|
|
height: 100vh;
|
|
width: 320px;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
}
|
|
`;
|
|
|
|
private _renderPanel() {
|
|
return html`<affine-outline-panel
|
|
.editor=${this.editor.host}
|
|
.fitPadding=${[50, 360, 50, 50]}
|
|
></affine-outline-panel>`;
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
${
|
|
this._show
|
|
? html`
|
|
<div class="custom-outline-container">${this._renderPanel()}</div>
|
|
`
|
|
: nothing
|
|
}
|
|
`;
|
|
}
|
|
|
|
toggleDisplay() {
|
|
this._show = !this._show;
|
|
}
|
|
|
|
@state()
|
|
private accessor _show = false;
|
|
|
|
@property({ attribute: false })
|
|
accessor editor!: TestAffineEditorContainer;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'custom-outline-panel': CustomOutlinePanel;
|
|
}
|
|
}
|