Skip to content

Commit

Permalink
feat: New icons for bullet/section UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@dstoc
dstoc committed Nov 8, 2024
1 parent ceceda5 commit d6ab891
Showing 1 changed file with 75 additions and 11 deletions.
86 changes: 75 additions & 11 deletions src/markdown/block-ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
<div id="gutter">${marker}</div>
<div>
<div id="marker">${marker}</div>
<div id="gutter"></div>
<div id="body">
<slot></slot>
</div>
`;
}
}

const sectionIcon = template(`
<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)">
<g>
<g>
<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" />
</g>
</g></g></svg>`);

const starIcon = template(`
<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)">
<g>
<g>
<g transform="matrix(1,0,0,1,-2.891873489,-3.989510208)">
<g>
<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)" />
</g>
</g>
</g>
</g></g></svg>`);

const uncheckedIcon = template(`
<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)">
<g transform="matrix(1,0,0,1,-6.044344723,-3.939555109)">
<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)" />
</g></g></svg>`);

const checkedIcon = template(`
<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)">
<g>
<g>
<g transform="matrix(1,0,0,1,-5.971428054,-3.913929879)">
<g>
<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)" />
</g>
</g>
</g>
</g></g></svg>`);

const bulletIcon = template(`
<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)">
<g>
<g>
<g>
<g>
<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)" />
</g>
</g>
</g>
</g></g></svg>`);

@customElement('md-list-item-ui')
export class ListItem extends SignalWatcher(LitElement) {
static override readonly styles = css`
Expand All @@ -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})
Expand All @@ -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) {
Expand Down

0 comments on commit d6ab891

Please sign in to comment.