From 1d9cca4ad3a3ba19ed1ae113c1cf894520a1a76e Mon Sep 17 00:00:00 2001 From: dstoc <539597+dstoc@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:42:14 +1100 Subject: [PATCH] feat: New icons for bullet/section UI --- src/markdown/block-ui.ts | 86 +++++++++++++++++++++++++++++++++++----- 1 file changed, 75 insertions(+), 11 deletions(-) diff --git a/src/markdown/block-ui.ts b/src/markdown/block-ui.ts index f4e4a93..0f6a360 100644 --- a/src/markdown/block-ui.ts +++ b/src/markdown/block-ui.ts @@ -3,48 +3,111 @@ import {customElement, property} from 'lit/decorators.js'; import {type ViewModelNode, viewModel} from './view-model-node.js'; import {ListItemNode} from './node.js'; import {SignalWatcher} from '@lit-labs/preact-signals'; - +import {templateContent} from 'lit/directives/template-content.js'; +import {template} from '../icons/material-symbols-rounded/template.js'; @customElement('md-section-ui') export class Section extends SignalWatcher(LitElement) { static override readonly styles = css` :host { display: grid; grid-template-columns: 18px 1fr; + grid-template-rows: max-content 1fr; align-items: baseline; margin-left: var(--md-section-nested-gutter); } - #gutter { + #marker { color: var(--md-accent-color); + fill: var(--md-accent-color); margin-right: 3px; - align-self: stretch; user-select: none; background: var(--md-section-gutter-color); } + #gutter { + grid-row: 2; + align-self: stretch; + margin-right: 3px; + background: var(--md-section-gutter-color); + } + #body { + grid-row: 1 / 3; + grid-column: 2; + } `; @property({attribute: false}) accessor node!: ViewModelNode; protected override render() { this.node[viewModel].renderSignal.value; const node = this.node; - let marker = ''; + let marker: unknown = ''; if (node.type === 'section') { if (node[viewModel].parent?.type !== 'section') { - marker = '★'; + marker = templateContent(starIcon); } else { const idx = Math.min(node.marker.length - 1, 9); const n = '₁₂₃₄₅₆₇₈₉ₙ'[idx]; - marker = `§${n}`; + marker = html`${templateContent(sectionIcon)}${n}`; } } return html` -
${marker}
-
+
${marker}
+
+
`; } } +const sectionIcon = template(` + + + + + +`); + +const starIcon = template(` + + + + + + + + + +`); + +const uncheckedIcon = template(` + + + +`); + +const checkedIcon = template(` + + + + + + + + + +`); + +const bulletIcon = template(` + + + + + + + + + +`); + @customElement('md-list-item-ui') export class ListItem extends SignalWatcher(LitElement) { static override readonly styles = css` @@ -57,6 +120,7 @@ export class ListItem extends SignalWatcher(LitElement) { color: var(--md-accent-color); user-select: none; cursor: pointer; + fill: currentcolor; } `; @property({attribute: false}) @@ -73,9 +137,9 @@ export class ListItem extends SignalWatcher(LitElement) { `; } #icon(checked: true | false | undefined) { - if (checked === true) return '☑'; - if (checked === false) return '☐'; - return '०'; + if (checked === true) return templateContent(checkedIcon); + if (checked === false) return templateContent(uncheckedIcon); + return templateContent(bulletIcon); // return '०'; } #handleClick(e: Event) {