Skip to content

Commit d6ab891

Browse files
dstocdstoc
committed
feat: New icons for bullet/section UI
1 parent ceceda5 commit d6ab891

1 file changed

Lines changed: 75 additions & 11 deletions

File tree

‎src/markdown/block-ui.ts‎

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,111 @@ import {customElement, property} from 'lit/decorators.js';
33
import {type ViewModelNode, viewModel} from './view-model-node.js';
44
import {ListItemNode} from './node.js';
55
import {SignalWatcher} from '@lit-labs/preact-signals';
6-
6+
import {templateContent} from 'lit/directives/template-content.js';
7+
import {template} from '../icons/material-symbols-rounded/template.js';
78
@customElement('md-section-ui')
89
export class Section extends SignalWatcher(LitElement) {
910
static override readonly styles = css`
1011
:host {
1112
display: grid;
1213
grid-template-columns: 18px 1fr;
14+
grid-template-rows: max-content 1fr;
1315
align-items: baseline;
1416
margin-left: var(--md-section-nested-gutter);
1517
}
16-
#gutter {
18+
#marker {
1719
color: var(--md-accent-color);
20+
fill: var(--md-accent-color);
1821
margin-right: 3px;
19-
align-self: stretch;
2022
user-select: none;
2123
background: var(--md-section-gutter-color);
2224
}
25+
#gutter {
26+
grid-row: 2;
27+
align-self: stretch;
28+
margin-right: 3px;
29+
background: var(--md-section-gutter-color);
30+
}
31+
#body {
32+
grid-row: 1 / 3;
33+
grid-column: 2;
34+
}
2335
`;
2436
@property({attribute: false})
2537
accessor node!: ViewModelNode;
2638
protected override render() {
2739
this.node[viewModel].renderSignal.value;
2840
const node = this.node;
29-
let marker = '';
41+
let marker: unknown = '';
3042
if (node.type === 'section') {
3143
if (node[viewModel].parent?.type !== 'section') {
32-
marker = '★';
44+
marker = templateContent(starIcon);
3345
} else {
3446
const idx = Math.min(node.marker.length - 1, 9);
3547
const n = '₁₂₃₄₅₆₇₈₉ₙ'[idx];
36-
marker = `§${n}`;
48+
marker = html`${templateContent(sectionIcon)}${n}`;
3749
}
3850
}
3951
return html`
40-
<div id="gutter">${marker}</div>
41-
<div>
52+
<div id="marker">${marker}</div>
53+
<div id="gutter"></div>
54+
<div id="body">
4255
<slot></slot>
4356
</div>
4457
`;
4558
}
4659
}
4760

61+
const sectionIcon = template(`
62+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 6 16" width="8" height="16"><defs></defs><g transform="matrix(1,0,0,1,-4.425053008,43.007677552)">
63+
<g>
64+
<g>
65+
<path d="M4.856649,-33.407678Q4.856649,-34.207678 5.240649,-34.695678 Q5.624649,-35.183678 6.120649,-35.423678 Q5.544649,-35.743678 5.224649,-36.183678 Q4.904649,-36.623678 4.904649,-37.263678 Q4.904649,-38.223678 5.720649,-38.775678 Q6.536649,-39.327678 8.056649,-39.327678 Q8.952649,-39.327678 9.576649,-39.175678 Q10.200649,-39.023678 10.792649,-38.783678 Q10.360649,-37.711678 10.360649,-37.711678 Q9.816649,-37.935678 9.272649,-38.087678 Q8.728649,-38.239678 7.960649,-38.239678 Q7.000649,-38.239678 6.608649,-37.991678 Q6.216649,-37.743678 6.216649,-37.295678 Q6.216649,-37.007678 6.408649,-36.775678 Q6.600649,-36.543678 7.056649,-36.311678 Q7.512649,-36.079678 8.328649,-35.775678 Q9.160649,-35.471678 9.736649,-35.119678 Q10.312649,-34.767678 10.624649,-34.311678 Q10.936649,-33.855678 10.936649,-33.215678 Q10.936649,-32.399678 10.568649,-31.879678 Q10.200649,-31.359678 9.736649,-31.087678 Q10.296649,-30.783678 10.608649,-30.359678 Q10.920649,-29.935678 10.920649,-29.327678 Q10.920649,-28.223678 10.000649,-27.615678 Q9.080649,-27.007678 7.432649,-27.007678 Q6.552649,-27.007678 5.896649,-27.143678 Q5.240649,-27.279678 4.728649,-27.535678 Q4.728649,-28.735678 4.728649,-28.735678 Q5.080649,-28.575678 5.528649,-28.423678 Q5.976649,-28.271678 6.488649,-28.175678 Q7.000649,-28.079678 7.496649,-28.079678 Q8.680649,-28.079678 9.128649,-28.423678 Q9.576649,-28.767678 9.576649,-29.215678 Q9.576649,-29.519678 9.424649,-29.743678 Q9.272649,-29.967678 8.832649,-30.215678 Q8.392649,-30.463678 7.512649,-30.783678 Q6.680649,-31.103678 6.080649,-31.439678 Q5.480649,-31.775678 5.168649,-32.239678 Q4.856649,-32.703678 4.856649,-33.407678 Q4.856649,-33.407678 4.856649,-33.407678 ZM6.056649,-33.567678Q6.056649,-33.183678 6.272649,-32.871678 Q6.488649,-32.559678 6.992649,-32.279678 Q7.496649,-31.999678 8.344649,-31.679678 Q8.696649,-31.551678 8.696649,-31.551678 Q9.064649,-31.775678 9.392649,-32.119678 Q9.720649,-32.463678 9.720649,-33.007678 Q9.720649,-33.407678 9.504649,-33.727678 Q9.288649,-34.047678 8.744649,-34.343678 Q8.200649,-34.639678 7.208649,-34.943678 Q6.760649,-34.831678 6.408649,-34.463678 Q6.056649,-34.095678 6.056649,-33.567678 Q6.056649,-33.567678 6.056649,-33.567678 Z" />
66+
</g>
67+
</g></g></svg>`);
68+
69+
const starIcon = template(`
70+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="16" height="16"><defs></defs><g transform="matrix(1,0,0,1,10.891873489,11.989510208)">
71+
<g>
72+
<g>
73+
<g transform="matrix(1,0,0,1,-2.891873489,-3.989510208)">
74+
<g>
75+
<path d="M480.000000,-285.000000C480.000000,-285.000000 316.000000,-187.000000 316.000000,-187.000000 C308.666667,-183.000000 301.500000,-181.333333 294.500000,-182.000000 C287.500000,-182.666667 281.333333,-185.000000 276.000000,-189.000000 C270.666667,-193.000000 266.666667,-198.500000 264.000000,-205.500000 C261.333333,-212.500000 261.000000,-219.666667 263.000000,-227.000000 C263.000000,-227.000000 306.000000,-410.000000 306.000000,-410.000000 C306.000000,-410.000000 161.000000,-533.000000 161.000000,-533.000000 C155.000000,-538.333333 151.333333,-544.500000 150.000000,-551.500000 C148.666667,-558.500000 149.000000,-565.333333 151.000000,-572.000000 C153.000000,-578.666667 156.666667,-584.166667 162.000000,-588.500000 C167.333333,-592.833333 174.000000,-595.333333 182.000000,-596.000000 C182.000000,-596.000000 372.000000,-613.000000 372.000000,-613.000000 C372.000000,-613.000000 447.000000,-787.000000 447.000000,-787.000000 C450.333333,-794.333333 455.000000,-799.833333 461.000000,-803.500000 C467.000000,-807.166667 473.333333,-809.000000 480.000000,-809.000000 C486.666667,-809.000000 493.000000,-807.166667 499.000000,-803.500000 C505.000000,-799.833333 509.666667,-794.333333 513.000000,-787.000000 C513.000000,-787.000000 588.000000,-612.000000 588.000000,-612.000000 C588.000000,-612.000000 778.000000,-596.000000 778.000000,-596.000000 C786.000000,-595.333333 792.666667,-592.666667 798.000000,-588.000000 C803.333333,-583.333333 807.000000,-577.666667 809.000000,-571.000000 C811.000000,-564.333333 811.166667,-557.666667 809.500000,-551.000000 C807.833333,-544.333333 804.000000,-538.333333 798.000000,-533.000000 C798.000000,-533.000000 654.000000,-410.000000 654.000000,-410.000000 C654.000000,-410.000000 697.000000,-227.000000 697.000000,-227.000000 C699.000000,-219.666667 698.666667,-212.500000 696.000000,-205.500000 C693.333333,-198.500000 689.333333,-193.000000 684.000000,-189.000000 C678.666667,-185.000000 672.500000,-182.666667 665.500000,-182.000000 C658.500000,-181.333333 651.333333,-183.000000 644.000000,-187.000000 C644.000000,-187.000000 480.000000,-285.000000 480.000000,-285.000000 C480.000000,-285.000000 480.000000,-285.000000 480.000000,-285.000000 Z" transform="matrix(0.020833334,0,0,0.020833334,-9.96104285,11.788690589)" />
76+
</g>
77+
</g>
78+
</g>
79+
</g></g></svg>`);
80+
81+
const uncheckedIcon = template(`
82+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="12" height="12"><defs></defs><g transform="matrix(1,0,0,1,0.000000238,0.000000238)">
83+
<g transform="matrix(1,0,0,1,-6.044344723,-3.939555109)">
84+
<path d="M480.279999,-96.000000C427.426666,-96.000000 377.666667,-106.000000 331.000000,-126.000000 C284.333333,-146.000000 243.500000,-173.500000 208.500000,-208.500000 C173.500000,-243.500000 146.000000,-284.319997 126.000000,-330.959991 C106.000000,-377.600006 96.000000,-427.433339 96.000000,-480.459991 C96.000000,-533.486664 106.000000,-583.166667 126.000000,-629.500000 C146.000000,-675.833333 173.500000,-716.500000 208.500000,-751.500000 C243.500000,-786.500000 284.319997,-814.000000 330.959991,-834.000000 C377.600006,-854.000000 427.433339,-864.000000 480.459991,-864.000000 C533.486664,-864.000000 583.166667,-854.000000 629.500000,-834.000000 C675.833333,-814.000000 716.500000,-786.500000 751.500000,-751.500000 C786.500000,-716.500000 814.000000,-675.760010 834.000000,-629.280029 C854.000000,-582.793335 864.000000,-533.126658 864.000000,-480.279999 C864.000000,-427.426666 854.000000,-377.666667 834.000000,-331.000000 C814.000000,-284.333333 786.500000,-243.500000 751.500000,-208.500000 C716.500000,-173.500000 675.760010,-146.000000 629.280029,-126.000000 C582.793335,-106.000000 533.126658,-96.000000 480.279999,-96.000000 C480.279999,-96.000000 480.279999,-96.000000 480.279999,-96.000000 ZM480.000000,-168.000000C566.666667,-168.000000 640.333333,-198.333333 701.000000,-259.000000 C761.666667,-319.666667 792.000000,-393.333333 792.000000,-480.000000 C792.000000,-566.666667 761.666667,-640.333333 701.000000,-701.000000 C640.333333,-761.666667 566.666667,-792.000000 480.000000,-792.000000 C393.333333,-792.000000 319.666667,-761.666667 259.000000,-701.000000 C198.333333,-640.333333 168.000000,-566.666667 168.000000,-480.000000 C168.000000,-393.333333 198.333333,-319.666667 259.000000,-259.000000 C319.666667,-198.333333 393.333333,-168.000000 480.000000,-168.000000 C480.000000,-168.000000 480.000000,-168.000000 480.000000,-168.000000 Z" transform="matrix(0.020833334,0,0,0.020833334,4.044344425,21.939555407)" />
85+
</g></g></svg>`);
86+
87+
const checkedIcon = template(`
88+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="12" height="12"><defs></defs><g transform="matrix(1,0,0,1,0.000000238,0.000000238)">
89+
<g>
90+
<g>
91+
<g transform="matrix(1,0,0,1,-5.971428054,-3.913929879)">
92+
<g>
93+
<path d="M480.000000,-96.000000C427.333333,-96.000000 377.666667,-106.000000 331.000000,-126.000000 C284.333333,-146.000000 243.500000,-173.500000 208.500000,-208.500000 C173.500000,-243.500000 146.000000,-284.333333 126.000000,-331.000000 C106.000000,-377.666667 96.000000,-427.333333 96.000000,-480.000000 C96.000000,-533.333333 106.000000,-583.166667 126.000000,-629.500000 C146.000000,-675.833333 173.500000,-716.500000 208.500000,-751.500000 C243.500000,-786.500000 284.333333,-814.000000 331.000000,-834.000000 C377.666667,-854.000000 427.333333,-864.000000 480.000000,-864.000000 C512.000000,-864.000000 543.500000,-860.166667 574.500000,-852.500000 C605.500000,-844.833333 635.000000,-833.333333 663.000000,-818.000000 C672.333333,-812.666667 678.000000,-805.333333 680.000000,-796.000000 C682.000000,-786.666667 680.000000,-777.666667 674.000000,-769.000000 C668.000000,-760.333333 660.000000,-755.000000 650.000000,-753.000000 C640.000000,-751.000000 630.333333,-752.666667 621.000000,-758.000000 C599.666667,-769.333333 577.000000,-777.833333 553.000000,-783.500000 C529.000000,-789.166667 504.666667,-792.000000 480.000000,-792.000000 C393.333333,-792.000000 319.666667,-761.666667 259.000000,-701.000000 C198.333333,-640.333333 168.000000,-566.666667 168.000000,-480.000000 C168.000000,-393.333333 198.333333,-319.666667 259.000000,-259.000000 C319.666667,-198.333333 393.333333,-168.000000 480.000000,-168.000000 C566.666667,-168.000000 640.333333,-198.333333 701.000000,-259.000000 C761.666667,-319.666667 792.000000,-393.333333 792.000000,-480.000000 C792.000000,-487.333333 791.833333,-495.000000 791.500000,-503.000000 C791.166667,-511.000000 790.333333,-518.666667 789.000000,-526.000000 C787.666667,-536.000000 789.500000,-545.333333 794.500000,-554.000000 C799.500000,-562.666667 806.666667,-568.333333 816.000000,-571.000000 C826.000000,-573.666667 835.333333,-572.166667 844.000000,-566.500000 C852.666667,-560.833333 857.666667,-553.000000 859.000000,-543.000000 C860.333333,-533.000000 861.500000,-522.666667 862.500000,-512.000000 C863.500000,-501.333333 864.000000,-490.666667 864.000000,-480.000000 C864.000000,-427.333333 854.000000,-377.666667 834.000000,-331.000000 C814.000000,-284.333333 786.500000,-243.500000 751.500000,-208.500000 C716.500000,-173.500000 675.833333,-146.000000 629.500000,-126.000000 C583.166667,-106.000000 533.333333,-96.000000 480.000000,-96.000000 C480.000000,-96.000000 480.000000,-96.000000 480.000000,-96.000000 ZM426.000000,-410.000000C426.000000,-410.000000 788.000000,-772.000000 788.000000,-772.000000 C795.333333,-779.333333 803.833333,-783.000000 813.500000,-783.000000 C823.166667,-783.000000 831.666667,-779.333333 839.000000,-772.000000 C846.333333,-764.666667 850.000000,-756.166667 850.000000,-746.500000 C850.000000,-736.833333 846.333333,-728.333333 839.000000,-721.000000 C839.000000,-721.000000 450.000000,-332.000000 450.000000,-332.000000 C442.666667,-324.666667 434.333333,-321.000000 425.000000,-321.000000 C415.666667,-321.000000 407.333333,-324.666667 400.000000,-332.000000 C400.000000,-332.000000 290.000000,-442.000000 290.000000,-442.000000 C282.666667,-449.333333 279.000000,-458.000000 279.000000,-468.000000 C279.000000,-478.000000 282.666667,-486.666667 290.000000,-494.000000 C297.333333,-501.333333 306.000000,-505.000000 316.000000,-505.000000 C326.000000,-505.000000 334.666667,-501.333333 342.000000,-494.000000 C342.000000,-494.000000 426.000000,-410.000000 426.000000,-410.000000 C426.000000,-410.000000 426.000000,-410.000000 426.000000,-410.000000 Z" transform="matrix(0.020833334,0,0,0.020833334,3.971427756,21.913930177)" />
94+
</g>
95+
</g>
96+
</g>
97+
</g></g></svg>`);
98+
99+
const bulletIcon = template(`
100+
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="12" height="12"><defs></defs><g transform="matrix(1,0,0,1,0.000000238,0.000000238)">
101+
<g>
102+
<g>
103+
<g>
104+
<g>
105+
<path d="M480.230011,-288.000000C533.410004,-288.000000 578.666667,-306.743337 616.000000,-344.230011 C653.333333,-381.710012 672.000000,-427.043345 672.000000,-480.230011 C672.000000,-533.410004 653.256673,-578.666667 615.770020,-616.000000 C578.289998,-653.333333 532.956655,-672.000000 479.769989,-672.000000 C426.589996,-672.000000 381.333333,-653.256673 344.000000,-615.770020 C306.666667,-578.289998 288.000000,-532.956655 288.000000,-479.769989 C288.000000,-426.589996 306.743337,-381.333333 344.230011,-344.000000 C381.710012,-306.666667 427.043345,-288.000000 480.230011,-288.000000 C480.230011,-288.000000 480.230011,-288.000000 480.230011,-288.000000 ZM480.279999,-96.000000C427.426666,-96.000000 377.666667,-106.000000 331.000000,-126.000000 C284.333333,-146.000000 243.500000,-173.500000 208.500000,-208.500000 C173.500000,-243.500000 146.000000,-284.319997 126.000000,-330.959991 C106.000000,-377.600006 96.000000,-427.433339 96.000000,-480.459991 C96.000000,-533.486664 106.000000,-583.166667 126.000000,-629.500000 C146.000000,-675.833333 173.500000,-716.500000 208.500000,-751.500000 C243.500000,-786.500000 284.319997,-814.000000 330.959991,-834.000000 C377.600006,-854.000000 427.433339,-864.000000 480.459991,-864.000000 C533.486664,-864.000000 583.166667,-854.000000 629.500000,-834.000000 C675.833333,-814.000000 716.500000,-786.500000 751.500000,-751.500000 C786.500000,-716.500000 814.000000,-675.760010 834.000000,-629.280029 C854.000000,-582.793335 864.000000,-533.126658 864.000000,-480.279999 C864.000000,-427.426666 854.000000,-377.666667 834.000000,-331.000000 C814.000000,-284.333333 786.500000,-243.500000 751.500000,-208.500000 C716.500000,-173.500000 675.760010,-146.000000 629.280029,-126.000000 C582.793335,-106.000000 533.126658,-96.000000 480.279999,-96.000000 C480.279999,-96.000000 480.279999,-96.000000 480.279999,-96.000000 ZM480.000000,-168.000000C566.666667,-168.000000 640.333333,-198.333333 701.000000,-259.000000 C761.666667,-319.666667 792.000000,-393.333333 792.000000,-480.000000 C792.000000,-566.666667 761.666667,-640.333333 701.000000,-701.000000 C640.333333,-761.666667 566.666667,-792.000000 480.000000,-792.000000 C393.333333,-792.000000 319.666667,-761.666667 259.000000,-701.000000 C198.333333,-640.333333 168.000000,-566.666667 168.000000,-480.000000 C168.000000,-393.333333 198.333333,-319.666667 259.000000,-259.000000 C319.666667,-198.333333 393.333333,-168.000000 480.000000,-168.000000 C480.000000,-168.000000 480.000000,-168.000000 480.000000,-168.000000 Z" transform="matrix(0.020833334,0,0,0.020833334,-2.000000298,18.000000298)" />
106+
</g>
107+
</g>
108+
</g>
109+
</g></g></svg>`);
110+
48111
@customElement('md-list-item-ui')
49112
export class ListItem extends SignalWatcher(LitElement) {
50113
static override readonly styles = css`
@@ -57,6 +120,7 @@ export class ListItem extends SignalWatcher(LitElement) {
57120
color: var(--md-accent-color);
58121
user-select: none;
59122
cursor: pointer;
123+
fill: currentcolor;
60124
}
61125
`;
62126
@property({attribute: false})
@@ -73,9 +137,9 @@ export class ListItem extends SignalWatcher(LitElement) {
73137
`;
74138
}
75139
#icon(checked: true | false | undefined) {
76-
if (checked === true) return '☑';
77-
if (checked === false) return '☐';
78-
return '०';
140+
if (checked === true) return templateContent(checkedIcon);
141+
if (checked === false) return templateContent(uncheckedIcon);
142+
return templateContent(bulletIcon);
79143
// return '०';
80144
}
81145
#handleClick(e: Event) {

0 commit comments

Comments
 (0)