chris/chart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

color select alignment

Browse source
This commit is contained in:
Chris Amow 2026-08-13 20:30:07 -05:00
parent 54f4871757
commit 7d9644ab55
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/index.html
View file

@ -210,6 +210,10 @@
<span v-else>#{{ item.number }} · {{ item.line.tf }} · {{ item.line.side === 'support' ? '↑' : '↓' }}</span>
<div class="drawing-controls" @click.stop v-if="item.line">
<select :value="item.line.line_width || 2" aria-label="Drawing width"
@change="updateLineStyle(item.line, {line_width: Number($event.target.value)})">
<option v-for="width in 9" :value="width">{{ width }}</option>
</select>
<details class="color-picker">
<summary :aria-label="`Choose drawing color; current color ${drawingColorName(item.line.color || '#65b7cf')}`"
:title="drawingColorName(item.line.color || '#65b7cf')"
@ -230,12 +234,12 @@
</button>
</div>
</details>
<select :value="item.line.line_width || 2" aria-label="Drawing width"
@change="updateLineStyle(item.line, {line_width: Number($event.target.value)})">
<option v-for="width in 9" :value="width">{{ width }}</option>
</select>
</div>
<div class="drawing-controls" @click.stop v-else>
<button v-if="item.kind === 'comment'" class="collapse-toggle" @click.stop="toggleComment(item.comment)"
:title="item.comment.collapsed ? 'Expand comment' : 'Collapse comment'">
<i :class="item.comment.collapsed ? 'fa-solid fa-expand' : 'fa-solid fa-compress'"></i>
</button>
<details class="color-picker">
<summary :aria-label="`Choose comment color; current color ${drawingColorName(item.comment.color || '#c8992f')}`"
:title="drawingColorName(item.comment.color || '#c8992f')"
@ -256,10 +260,6 @@
</button>
</div>
</details>
<button v-if="item.kind === 'comment'" class="collapse-toggle" @click.stop="toggleComment(item.comment)"
:title="item.comment.collapsed ? 'Expand comment' : 'Collapse comment'">
<i :class="item.comment.collapsed ? 'fa-solid fa-expand' : 'fa-solid fa-compress'"></i>
</button>
</div>
</div>
</div>

4
tests/e2e/comments.test.mjs
View file

@ -83,6 +83,10 @@ test('clicking a comment collapses it', { timeout: 180000 }, async () => {
assert.equal((await commentNode(page)).collapsed, false);
await page.fill('input[aria-label="Filter drawings by text"]', TEXT);
const row = page.locator('.trendline-row');
const controls = await row.locator('.drawing-controls>*').evaluateAll(nodes =>
nodes.map(node => node.classList.contains('color-picker') ? 'color' : node.className));
assert.deepEqual(controls, ['collapse-toggle', 'color'],
'the comment color picker is not the rightmost control');
await row.locator('.drawing-secondary>span').click();
assert.equal(await page.locator(`.chart-comment[title="${TEXT}"]`).evaluate(node => node.classList.contains('focus')), true,
'selecting the comment row did not point out the comment on the chart');

3
tests/e2e/drawings.test.mjs
View file

@ -47,6 +47,9 @@ test('editing a drawing name with Backspace or Delete cannot delete the drawing'
const row = page.locator('.trendline-row');
assert.deepEqual(await row.locator('select[aria-label="Drawing width"] option').allTextContents(),
['1', '2', '3', '4', '5', '6', '7', '8', '9']);
const controls = await row.locator('.drawing-controls>*').evaluateAll(nodes =>
nodes.map(node => node.classList.contains('color-picker') ? 'color' : node.tagName.toLowerCase()));
assert.deepEqual(controls, ['select', 'color'], 'the color picker is not the rightmost control');
const rowBox = await row.boundingBox();
assert.ok(rowBox.height <= 48, `drawing row is still ${rowBox.height}px tall`);
assert.equal(await row.locator('.drawing-state .fa-bell').count(), 1,