Fossil SCM

Ensure there's enough contrast to read the text when the mouse is dropping over the attachment widget. Experimentally relable the Remove button as X.

stephan 2026-06-03 17:49 UTC attach-v2
Commit 05865c2310b5d4866a96317b7e2dd546a6ad4cf056c84c6c0c1e1b9e819630f8
Parent 4a8a290676c9c14…
2 files changed +2 +6 -5
~ src/default.css ~ src/fossil.attach.js
M src/default.css
+2
--- src/default.css
+++ src/default.css
@@ -2058,10 +2058,11 @@
20582058
 body.fossil-dark-style .attach-widget .attach-dropzone.populated{
20592059
 background-color: initial;
20602060
 }
20612061
 .attach-widget .attach-dropzone.dragover {
20622062
 background-color: #e1f5fe;
2063
+ color: black;
20632064
 border-color: #03a9f4;
20642065
 }
20652066
 body.fossil-dark-style .attach-widget .attach-dropzone.dragover{
20662067
 border-color: #03a9f4;
20672068
 }
@@ -2098,10 +2099,11 @@
20982099
 background-color: #d32f2f;
20992100
 color: #fff;
21002101
 border: none;
21012102
 border-radius: 0.25em;
21022103
 cursor: pointer;
2104
+ font-weight: bold;
21032105
 }
21042106
 .attach-widget .attach-row-remove:hover {
21052107
 background-color: #b71c1c;
21062108
 }
21072109
 .attach-widget .attach-controls {
21082110
--- src/default.css
+++ src/default.css
@@ -2058,10 +2058,11 @@
2058 body.fossil-dark-style .attach-widget .attach-dropzone.populated{
2059 background-color: initial;
2060 }
2061 .attach-widget .attach-dropzone.dragover {
2062 background-color: #e1f5fe;
 
2063 border-color: #03a9f4;
2064 }
2065 body.fossil-dark-style .attach-widget .attach-dropzone.dragover{
2066 border-color: #03a9f4;
2067 }
@@ -2098,10 +2099,11 @@
2098 background-color: #d32f2f;
2099 color: #fff;
2100 border: none;
2101 border-radius: 0.25em;
2102 cursor: pointer;
 
2103 }
2104 .attach-widget .attach-row-remove:hover {
2105 background-color: #b71c1c;
2106 }
2107 .attach-widget .attach-controls {
2108
--- src/default.css
+++ src/default.css
@@ -2058,10 +2058,11 @@
2058 body.fossil-dark-style .attach-widget .attach-dropzone.populated{
2059 background-color: initial;
2060 }
2061 .attach-widget .attach-dropzone.dragover {
2062 background-color: #e1f5fe;
2063 color: black;
2064 border-color: #03a9f4;
2065 }
2066 body.fossil-dark-style .attach-widget .attach-dropzone.dragover{
2067 border-color: #03a9f4;
2068 }
@@ -2098,10 +2099,11 @@
2099 background-color: #d32f2f;
2100 color: #fff;
2101 border: none;
2102 border-radius: 0.25em;
2103 cursor: pointer;
2104 font-weight: bold;
2105 }
2106 .attach-widget .attach-row-remove:hover {
2107 background-color: #b71c1c;
2108 }
2109 .attach-widget .attach-controls {
2110
M src/fossil.attach.js
+6 -5
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -34,12 +34,11 @@
3434
 opt.limit: optional max number of attachments to allow. This
3535
 defaults to "some sensible value".
3636
3737
 opt.startWith[=0]: if >0 then that many file selection widgets
3838
 are automatically activated, as if the user had tapped the Add
39
- button that many times. As a special case, if this is >0
40
- and the user removes the last entry, a new one is added.
39
+ button that many times.
4140
4241
 opt.description[=true]: if true then show the file description
4342
 field, otherwise elide it.
4443
4544
 opt.controls = [array of DOM elements]. Optional DOM elements
@@ -183,11 +182,12 @@
183182
 row: rowObj,
184183
 attacher: this
185184
 })
186185
 })
187186
 );
188
- if( 0===this.#rows.length
187
+ if( false /* arguable */
188
+ && 0===this.#rows.length
189189
 && this.#opt.startWith>0 ){
190190
 /* Intended primarily for /addattach. */
191191
 this.#addRow();
192192
 }
193193
 }
@@ -249,11 +249,11 @@
249249
 );
250250
 const eInfo = D.addClass(D.span(), 'attach-row-info');
251251
 const eFilename = D.append(
252252
 D.addClass(D.span(), 'attach-filename'),
253253
 "Select/drop file or click the outer border and tap your "+
254
- "platform's conventional Paste keyboard shortcut."
254
+ "platform's conventional <paste> keyboard shortcut."
255255
 );
256256
 const eSize = D.addClass(D.span(), 'attach-size');
257257
 eInfo.append(eFilename, eSize);
258258
 const eDesc = this.#opt.description
259259
 ? D.addClass(
@@ -261,16 +261,17 @@
261261
 'Optional description...'),
262262
 'hidden', 'attach-desc'
263263
 )
264264
 : undefined;
265265
 const eRemove = D.addClass(
266
- D.button('Remove', (ev)=>{
266
+ D.button('X', (ev)=>{
267267
 ev.stopPropagation();
268268
 this.#removeRow(rowObj);
269269
 }),
270270
 'attach-row-remove'
271271
 );
272
+ eRemove.setAttribute('title', 'Remove this attachment.');
272273
 eRemove.type = 'button';
273274
274275
 D.append(eDropzone, eInfo, eFile, eRemove);
275276
 eDropzone.addEventListener('click', ()=>eFile.click());
276277
 eFile.addEventListener('change', (ev)=>{
277278
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -34,12 +34,11 @@
34 opt.limit: optional max number of attachments to allow. This
35 defaults to "some sensible value".
36
37 opt.startWith[=0]: if >0 then that many file selection widgets
38 are automatically activated, as if the user had tapped the Add
39 button that many times. As a special case, if this is >0
40 and the user removes the last entry, a new one is added.
41
42 opt.description[=true]: if true then show the file description
43 field, otherwise elide it.
44
45 opt.controls = [array of DOM elements]. Optional DOM elements
@@ -183,11 +182,12 @@
183 row: rowObj,
184 attacher: this
185 })
186 })
187 );
188 if( 0===this.#rows.length
 
189 && this.#opt.startWith>0 ){
190 /* Intended primarily for /addattach. */
191 this.#addRow();
192 }
193 }
@@ -249,11 +249,11 @@
249 );
250 const eInfo = D.addClass(D.span(), 'attach-row-info');
251 const eFilename = D.append(
252 D.addClass(D.span(), 'attach-filename'),
253 "Select/drop file or click the outer border and tap your "+
254 "platform's conventional Paste keyboard shortcut."
255 );
256 const eSize = D.addClass(D.span(), 'attach-size');
257 eInfo.append(eFilename, eSize);
258 const eDesc = this.#opt.description
259 ? D.addClass(
@@ -261,16 +261,17 @@
261 'Optional description...'),
262 'hidden', 'attach-desc'
263 )
264 : undefined;
265 const eRemove = D.addClass(
266 D.button('Remove', (ev)=>{
267 ev.stopPropagation();
268 this.#removeRow(rowObj);
269 }),
270 'attach-row-remove'
271 );
 
272 eRemove.type = 'button';
273
274 D.append(eDropzone, eInfo, eFile, eRemove);
275 eDropzone.addEventListener('click', ()=>eFile.click());
276 eFile.addEventListener('change', (ev)=>{
277
--- src/fossil.attach.js
+++ src/fossil.attach.js
@@ -34,12 +34,11 @@
34 opt.limit: optional max number of attachments to allow. This
35 defaults to "some sensible value".
36
37 opt.startWith[=0]: if >0 then that many file selection widgets
38 are automatically activated, as if the user had tapped the Add
39 button that many times.
 
40
41 opt.description[=true]: if true then show the file description
42 field, otherwise elide it.
43
44 opt.controls = [array of DOM elements]. Optional DOM elements
@@ -183,11 +182,12 @@
182 row: rowObj,
183 attacher: this
184 })
185 })
186 );
187 if( false /* arguable */
188 && 0===this.#rows.length
189 && this.#opt.startWith>0 ){
190 /* Intended primarily for /addattach. */
191 this.#addRow();
192 }
193 }
@@ -249,11 +249,11 @@
249 );
250 const eInfo = D.addClass(D.span(), 'attach-row-info');
251 const eFilename = D.append(
252 D.addClass(D.span(), 'attach-filename'),
253 "Select/drop file or click the outer border and tap your "+
254 "platform's conventional <paste> keyboard shortcut."
255 );
256 const eSize = D.addClass(D.span(), 'attach-size');
257 eInfo.append(eFilename, eSize);
258 const eDesc = this.#opt.description
259 ? D.addClass(
@@ -261,16 +261,17 @@
261 'Optional description...'),
262 'hidden', 'attach-desc'
263 )
264 : undefined;
265 const eRemove = D.addClass(
266 D.button('X', (ev)=>{
267 ev.stopPropagation();
268 this.#removeRow(rowObj);
269 }),
270 'attach-row-remove'
271 );
272 eRemove.setAttribute('title', 'Remove this attachment.');
273 eRemove.type = 'button';
274
275 D.append(eDropzone, eInfo, eFile, eRemove);
276 eDropzone.addEventListener('click', ()=>eFile.click());
277 eFile.addEventListener('change', (ev)=>{
278

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button