mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-22 20:46:38 +08:00
chore(editor): remove redundant card-style-panel component (#10973)
Moved `CardStylePanel` into `CardStyleDropdownMenu`.
This commit is contained in:
@@ -1,65 +0,0 @@
|
||||
import type { EmbedCardStyle } from '@blocksuite/affine-model';
|
||||
import { WithDisposable } from '@blocksuite/global/lit';
|
||||
import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
export class CardStylePanel extends WithDisposable(LitElement) {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
icon-button {
|
||||
padding: var(--1, 0px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
icon-button.selected {
|
||||
border: 1px solid var(--affine-brand-color);
|
||||
}
|
||||
`;
|
||||
|
||||
override render() {
|
||||
const options = this.options;
|
||||
if (!options?.length) return nothing;
|
||||
|
||||
return repeat(
|
||||
options,
|
||||
options => options.style,
|
||||
({ style, Icon, tooltip }) => html`
|
||||
<icon-button
|
||||
width="76px"
|
||||
height="76px"
|
||||
class=${classMap({
|
||||
selected: this.value === style,
|
||||
})}
|
||||
@click=${() => {
|
||||
this.onSelect(style);
|
||||
this.value = style;
|
||||
}}
|
||||
>
|
||||
${Icon}
|
||||
<affine-tooltip .offset=${4}>${tooltip}</affine-tooltip>
|
||||
</icon-button>
|
||||
`
|
||||
);
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor onSelect!: (value: EmbedCardStyle) => void;
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor options!: {
|
||||
style: EmbedCardStyle;
|
||||
Icon: TemplateResult<1>;
|
||||
tooltip: string;
|
||||
}[];
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor value: EmbedCardStyle | undefined = undefined;
|
||||
}
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
NOTE_SLICER_WIDGET,
|
||||
NoteSlicer,
|
||||
} from './edgeless/components/note-slicer/index.js';
|
||||
import { CardStylePanel } from './edgeless/components/panel/card-style-panel.js';
|
||||
import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js';
|
||||
import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
|
||||
import { EdgelessLineWidthPanel } from './edgeless/components/panel/line-width-panel.js';
|
||||
@@ -215,7 +214,6 @@ function registerEdgelessToolbarComponents() {
|
||||
}
|
||||
|
||||
function registerEdgelessPanelComponents() {
|
||||
customElements.define('card-style-panel', CardStylePanel);
|
||||
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
|
||||
customElements.define(
|
||||
'edgeless-font-weight-and-style-panel',
|
||||
@@ -312,7 +310,6 @@ declare global {
|
||||
'edgeless-toolbar-button': EdgelessToolbarButton;
|
||||
'edgeless-connector-handle': EdgelessConnectorHandle;
|
||||
'note-slicer': NoteSlicer;
|
||||
'card-style-panel': CardStylePanel;
|
||||
'edgeless-font-family-panel': EdgelessFontFamilyPanel;
|
||||
'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
|
||||
'edgeless-line-width-panel': EdgelessLineWidthPanel;
|
||||
|
||||
Reference in New Issue
Block a user