The chooser's marks are dots at the left
From the development repository at 06a7ffb. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
1 parent
0d01e23d7c
commit
02b78f0856
4 files changed
+13
-11
No files matched your search
@@ -4,7 +4,8 @@
|
|||||||
* notebooks and the pages kept in them, and loads the chosen page.
|
* notebooks and the pages kept in them, and loads the chosen page.
|
||||||
*
|
*
|
||||||
* It also deletes (Andy, 2026-10-11): every notebook and every page card
|
* It also deletes (Andy, 2026-10-11): every notebook and every page card
|
||||||
* carries a mark, ×, that a tap turns into a tick, and one "Delete"
|
* carries a mark at its left, a dot that a tap turns into a tick (not a
|
||||||
|
* × at the right, which in many interfaces means "delete" itself), and one "Delete"
|
||||||
* button in the header, which appears as soon as something is marked,
|
* button in the header, which appears as soon as something is marked,
|
||||||
* says how much is marked and asks for a second press before anything
|
* says how much is marked and asks for a second press before anything
|
||||||
* goes, as the file chooser does for replacing a file; no system dialog.
|
* goes, as the file chooser does for replacing a file; no system dialog.
|
||||||
@@ -43,7 +44,7 @@ function counted(count, noun) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A mark button: × until marked, then ✓.
|
* A mark button: a dot until marked, then ✓.
|
||||||
* @param {string} help The tooltip.
|
* @param {string} help The tooltip.
|
||||||
* @returns {HTMLButtonElement}
|
* @returns {HTMLButtonElement}
|
||||||
*/
|
*/
|
||||||
@@ -51,7 +52,7 @@ function markButton(help) {
|
|||||||
const mark = document.createElement('button');
|
const mark = document.createElement('button');
|
||||||
mark.type = 'button';
|
mark.type = 'button';
|
||||||
mark.className = 'mark';
|
mark.className = 'mark';
|
||||||
mark.textContent = '×';
|
mark.textContent = '•';
|
||||||
mark.setAttribute('aria-label', 'Mark for deletion');
|
mark.setAttribute('aria-label', 'Mark for deletion');
|
||||||
mark.setAttribute('aria-pressed', 'false');
|
mark.setAttribute('aria-pressed', 'false');
|
||||||
mark.dataset.help = help;
|
mark.dataset.help = help;
|
||||||
@@ -146,7 +147,7 @@ export class NotebookChooser {
|
|||||||
}
|
}
|
||||||
this.toggleMark(mark, this.markedNotebooks, notebook);
|
this.toggleMark(mark, this.markedNotebooks, notebook);
|
||||||
});
|
});
|
||||||
row.append(button, mark);
|
row.append(mark, button);
|
||||||
list.append(row);
|
list.append(row);
|
||||||
}
|
}
|
||||||
this.showMarks();
|
this.showMarks();
|
||||||
@@ -199,7 +200,7 @@ export class NotebookChooser {
|
|||||||
mark.setAttribute('aria-pressed', 'true');
|
mark.setAttribute('aria-pressed', 'true');
|
||||||
slot.classList.add('marked');
|
slot.classList.add('marked');
|
||||||
}
|
}
|
||||||
slot.append(card, mark);
|
slot.append(mark, card);
|
||||||
grid.append(slot);
|
grid.append(slot);
|
||||||
}
|
}
|
||||||
this.markedPages.set(notebook, marked);
|
this.markedPages.set(notebook, marked);
|
||||||
@@ -224,7 +225,7 @@ export class NotebookChooser {
|
|||||||
toggleMark(mark, marked, name) {
|
toggleMark(mark, marked, name) {
|
||||||
const now = !marked.has(name);
|
const now = !marked.has(name);
|
||||||
if (now) marked.add(name); else marked.delete(name);
|
if (now) marked.add(name); else marked.delete(name);
|
||||||
mark.textContent = now ? '✓' : '×';
|
mark.textContent = now ? '✓' : '•';
|
||||||
mark.setAttribute('aria-pressed', String(now));
|
mark.setAttribute('aria-pressed', String(now));
|
||||||
/** @type {HTMLElement} */ (mark.parentElement).classList.toggle('marked', now);
|
/** @type {HTMLElement} */ (mark.parentElement).classList.toggle('marked', now);
|
||||||
this.disarm();
|
this.disarm();
|
||||||
|
|||||||
+3
-2
@@ -439,7 +439,8 @@ h2 {
|
|||||||
|
|
||||||
.chooser_notebooks button.notebook_pick { flex: 1; min-width: 0; text-align: left; }
|
.chooser_notebooks button.notebook_pick { flex: 1; min-width: 0; text-align: left; }
|
||||||
|
|
||||||
/* Rows and cards carry a mark, ×, for deletion; marked, they dim. */
|
/* Rows and cards carry a mark at their left, a dot, for deletion (a ×
|
||||||
|
at the right would read as "delete" itself, Andy); marked, they dim. */
|
||||||
.notebook_row { display: flex; gap: 0.3rem; align-items: stretch; }
|
.notebook_row { display: flex; gap: 0.3rem; align-items: stretch; }
|
||||||
.notebook_row.marked button.notebook_pick, .page_slot.marked .page_card { opacity: 0.45; }
|
.notebook_row.marked button.notebook_pick, .page_slot.marked .page_card { opacity: 0.45; }
|
||||||
.page_slot { position: relative; display: flex; }
|
.page_slot { position: relative; display: flex; }
|
||||||
@@ -454,7 +455,7 @@ button.mark {
|
|||||||
.page_slot button.mark {
|
.page_slot button.mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.3rem;
|
top: 0.3rem;
|
||||||
right: 0.3rem;
|
left: 0.3rem;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
@@ -304,8 +304,8 @@ right of your toolbar:
|
|||||||
your notebooks, with everything that was written on it. A chooser
|
your notebooks, with everything that was written on it. A chooser
|
||||||
shows your notebooks and small pictures of their kept pages. The kept
|
shows your notebooks and small pictures of their kept pages. The kept
|
||||||
page itself is not changed: the session works on a copy. The same
|
page itself is not changed: the session works on a copy. The same
|
||||||
chooser deletes pages and notebooks of yours, marked with their ×
|
chooser deletes pages and notebooks of yours, marked with the dot at
|
||||||
and then the **Delete** button, pressed twice; the host's part says
|
their left and then the **Delete** button, pressed twice; the host's part says
|
||||||
more.
|
more.
|
||||||
* **Hide**, among the tools, hides part of the page for everyone: drag
|
* **Hide**, among the tools, hides part of the page for everyone: drag
|
||||||
open a rectangle and whatever lies under it, writing included, is
|
open a rectangle and whatever lies under it, writing included, is
|
||||||
|
|||||||
+1
-1
@@ -248,7 +248,7 @@ A lesson might go: **New**, **Image** for the exercise, work, **New**
|
|||||||
for a point of grammar, work, **Notebooks** to return to the exercise.
|
for a point of grammar, work, **Notebooks** to return to the exercise.
|
||||||
|
|
||||||
The same chooser deletes. Every page card and every notebook in the
|
The same chooser deletes. Every page card and every notebook in the
|
||||||
list carries a small × mark; a tap marks it, a second tap unmarks it,
|
list carries a small dot at its left; a tap marks it with a tick, a second tap unmarks it,
|
||||||
and a marked notebook goes with every page in it. As soon as something
|
and a marked notebook goes with every page in it. As soon as something
|
||||||
is marked, a **Delete** button in the chooser's header says how much:
|
is marked, a **Delete** button in the chooser's header says how much:
|
||||||
"Delete 3 pages?", "Delete 1 notebook and 3 pages?". The first press
|
"Delete 3 pages?", "Delete 1 notebook and 3 pages?". The first press
|
||||||
|
|||||||
Reference in new issue
Block a user