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,
|
NOTE_SLICER_WIDGET,
|
||||||
NoteSlicer,
|
NoteSlicer,
|
||||||
} from './edgeless/components/note-slicer/index.js';
|
} 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 { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js';
|
||||||
import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
|
import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
|
||||||
import { EdgelessLineWidthPanel } from './edgeless/components/panel/line-width-panel.js';
|
import { EdgelessLineWidthPanel } from './edgeless/components/panel/line-width-panel.js';
|
||||||
@@ -215,7 +214,6 @@ function registerEdgelessToolbarComponents() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function registerEdgelessPanelComponents() {
|
function registerEdgelessPanelComponents() {
|
||||||
customElements.define('card-style-panel', CardStylePanel);
|
|
||||||
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
|
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
|
||||||
customElements.define(
|
customElements.define(
|
||||||
'edgeless-font-weight-and-style-panel',
|
'edgeless-font-weight-and-style-panel',
|
||||||
@@ -312,7 +310,6 @@ declare global {
|
|||||||
'edgeless-toolbar-button': EdgelessToolbarButton;
|
'edgeless-toolbar-button': EdgelessToolbarButton;
|
||||||
'edgeless-connector-handle': EdgelessConnectorHandle;
|
'edgeless-connector-handle': EdgelessConnectorHandle;
|
||||||
'note-slicer': NoteSlicer;
|
'note-slicer': NoteSlicer;
|
||||||
'card-style-panel': CardStylePanel;
|
|
||||||
'edgeless-font-family-panel': EdgelessFontFamilyPanel;
|
'edgeless-font-family-panel': EdgelessFontFamilyPanel;
|
||||||
'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
|
'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
|
||||||
'edgeless-line-width-panel': EdgelessLineWidthPanel;
|
'edgeless-line-width-panel': EdgelessLineWidthPanel;
|
||||||
|
|||||||
Reference in New Issue
Block a user