Fossil SCM

Diff toggles: add a label to the checkbox to make it easier to click, add an 'all' button which toggles all diffs, and remove the toggle from the /fdiff page because it only has a single diff block.

stephan 2024-12-11 23:09 trunk merge
Commit a11d24547826591f0521308560fd174a46edd405683a2df2a2d55bfb0c2b0deb
Parent 2c0714f8d5e377a…
4 files changed +9 -4 +24 -8 +3 -1 +6 -3
~ src/default.css ~ src/fossil.diff.js ~ src/fossil.dom.js ~ src/info.c
M src/default.css
+9 -4
--- src/default.css
+++ src/default.css
@@ -748,10 +748,19 @@
748748
 border-bottom: 3px solid gold;
749749
 }
750750
 body.tkt div.content ol.tkt-changes > li:target > ol {
751751
 border-left: 1px solid gold;
752752
 }
753
+body.cpage-info .file-change-line,
754
+body.cpage-vdiff .file-change-line {
755
+ margin-top: 16px;
756
+ margin-bottom: 16px;
757
+ margin-right: 1em /* keep it from nudging right up against the scrollbar-reveal zone */;
758
+ display: flex;
759
+ flex-direction: row;
760
+ justify-content: space-between;
761
+}
753762
754763
 span.modpending {
755764
 color: #b03800;
756765
 font-style: italic;
757766
 }
@@ -1818,14 +1827,10 @@
18181827
 }
18191828
 body.fossil-dark-style .settings-icon {
18201829
 filter: invert(100%);
18211830
 }
18221831
1823
-input[type="checkbox"].diff-toggle {
1824
- float: right;
1825
-}
1826
-
18271832
 body.branch .brlist > table > tbody > tr:hover:not(.selected),
18281833
 body.branch .brlist > table > tbody > tr.selected {
18291834
 background-color: #ffc;
18301835
 }
18311836
 body.branch .brlist > table > tbody td:first-child > input {
18321837
--- src/default.css
+++ src/default.css
@@ -748,10 +748,19 @@
748 border-bottom: 3px solid gold;
749 }
750 body.tkt div.content ol.tkt-changes > li:target > ol {
751 border-left: 1px solid gold;
752 }
 
 
 
 
 
 
 
 
 
753
754 span.modpending {
755 color: #b03800;
756 font-style: italic;
757 }
@@ -1818,14 +1827,10 @@
1818 }
1819 body.fossil-dark-style .settings-icon {
1820 filter: invert(100%);
1821 }
1822
1823 input[type="checkbox"].diff-toggle {
1824 float: right;
1825 }
1826
1827 body.branch .brlist > table > tbody > tr:hover:not(.selected),
1828 body.branch .brlist > table > tbody > tr.selected {
1829 background-color: #ffc;
1830 }
1831 body.branch .brlist > table > tbody td:first-child > input {
1832
--- src/default.css
+++ src/default.css
@@ -748,10 +748,19 @@
748 border-bottom: 3px solid gold;
749 }
750 body.tkt div.content ol.tkt-changes > li:target > ol {
751 border-left: 1px solid gold;
752 }
753 body.cpage-info .file-change-line,
754 body.cpage-vdiff .file-change-line {
755 margin-top: 16px;
756 margin-bottom: 16px;
757 margin-right: 1em /* keep it from nudging right up against the scrollbar-reveal zone */;
758 display: flex;
759 flex-direction: row;
760 justify-content: space-between;
761 }
762
763 span.modpending {
764 color: #b03800;
765 font-style: italic;
766 }
@@ -1818,14 +1827,10 @@
1827 }
1828 body.fossil-dark-style .settings-icon {
1829 filter: invert(100%);
1830 }
1831
 
 
 
 
1832 body.branch .brlist > table > tbody > tr:hover:not(.selected),
1833 body.branch .brlist > table > tbody > tr.selected {
1834 background-color: #ffc;
1835 }
1836 body.branch .brlist > table > tbody td:first-child > input {
1837
M src/fossil.diff.js
+24 -8
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -6,23 +6,39 @@
66
 /**
77
 Adds toggle checkboxes to each file entry in the diff views for
88
 /info and similar pages.
99
 */
1010
 const D = window.fossil.dom;
11
- const isFdiff = !!document.querySelector('body.fdiff');
11
+ const allToggles = [/*collection of all diff-toggle checkboxes */];
1212
 const addToggle = function(diffElem){
1313
 const sib = diffElem.previousElementSibling,
14
- btn = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
14
+ btnOne = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
1515
 if(!sib) return;
16
- if(isFdiff) sib.parentElement.insertBefore(
17
- D.append(D.div(),btn),sib.nextElementSibling);
18
- else D.append(sib,btn);
19
- btn.addEventListener('click', function(){
20
- diffElem.classList.toggle('hidden');
16
+ const lblToggle = D.append(D.label(null, " Toggle "), btnOne);
17
+ const wrapper = D.append(D.span(), lblToggle);
18
+ const btnAll = D.button("all");
19
+ btnAll.$cb = btnOne;
20
+ allToggles.push(btnOne);
21
+ D.append(sib, D.append(wrapper, lblToggle, D.text(" "), btnAll));
22
+ btnOne.addEventListener('change', function(){
23
+ diffElem.classList[this.checked ? 'remove' : 'add']('hidden');
24
+ }, false);
25
+ btnAll.addEventListener('click', function(){
26
+ /* Toggle all entries to match this line's new state. Note that
27
+ we use click() instead of cb.checked=... so that the
28
+ on-change event handler fires. */
29
+ const checked = !this.$cb.checked;
30
+ allToggles.forEach( (cb)=>{
31
+ if(cb.checked!==checked) cb.click();
32
+ });
2133
 }, false);
2234
 };
23
- document.querySelectorAll('table.diff').forEach(addToggle);
35
+ if( !document.querySelector('body.fdiff') ){
36
+ /* Don't show the diff toggle button for /fdiff because it only
37
+ has a single file to show (and also a different DOM layout). */
38
+ document.querySelectorAll('table.diff').forEach(addToggle);
39
+ }
2440
 });
2541
2642
 window.fossil.onPageLoad(function(){
2743
 const F = window.fossil, D = F.dom;
2844
 const Diff = F.diff = {
2945
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -6,23 +6,39 @@
6 /**
7 Adds toggle checkboxes to each file entry in the diff views for
8 /info and similar pages.
9 */
10 const D = window.fossil.dom;
11 const isFdiff = !!document.querySelector('body.fdiff');
12 const addToggle = function(diffElem){
13 const sib = diffElem.previousElementSibling,
14 btn = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
15 if(!sib) return;
16 if(isFdiff) sib.parentElement.insertBefore(
17 D.append(D.div(),btn),sib.nextElementSibling);
18 else D.append(sib,btn);
19 btn.addEventListener('click', function(){
20 diffElem.classList.toggle('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
21 }, false);
22 };
23 document.querySelectorAll('table.diff').forEach(addToggle);
 
 
 
 
24 });
25
26 window.fossil.onPageLoad(function(){
27 const F = window.fossil, D = F.dom;
28 const Diff = F.diff = {
29
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -6,23 +6,39 @@
6 /**
7 Adds toggle checkboxes to each file entry in the diff views for
8 /info and similar pages.
9 */
10 const D = window.fossil.dom;
11 const allToggles = [/*collection of all diff-toggle checkboxes */];
12 const addToggle = function(diffElem){
13 const sib = diffElem.previousElementSibling,
14 btnOne = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
15 if(!sib) return;
16 const lblToggle = D.append(D.label(null, " Toggle "), btnOne);
17 const wrapper = D.append(D.span(), lblToggle);
18 const btnAll = D.button("all");
19 btnAll.$cb = btnOne;
20 allToggles.push(btnOne);
21 D.append(sib, D.append(wrapper, lblToggle, D.text(" "), btnAll));
22 btnOne.addEventListener('change', function(){
23 diffElem.classList[this.checked ? 'remove' : 'add']('hidden');
24 }, false);
25 btnAll.addEventListener('click', function(){
26 /* Toggle all entries to match this line's new state. Note that
27 we use click() instead of cb.checked=... so that the
28 on-change event handler fires. */
29 const checked = !this.$cb.checked;
30 allToggles.forEach( (cb)=>{
31 if(cb.checked!==checked) cb.click();
32 });
33 }, false);
34 };
35 if( !document.querySelector('body.fdiff') ){
36 /* Don't show the diff toggle button for /fdiff because it only
37 has a single file to show (and also a different DOM layout). */
38 document.querySelectorAll('table.diff').forEach(addToggle);
39 }
40 });
41
42 window.fossil.onPageLoad(function(){
43 const F = window.fossil, D = F.dom;
44 const Diff = F.diff = {
45
M src/fossil.dom.js
+3 -1
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -87,11 +87,13 @@
8787
 const rc = document.createElement('label');
8888
 if(forElem){
8989
 if(forElem instanceof HTMLElement){
9090
 forElem = this.attr(forElem, 'id');
9191
 }
92
- dom.attr(rc, 'for', forElem);
92
+ if(forElem){
93
+ dom.attr(rc, 'for', forElem);
94
+ }
9395
 }
9496
 if(text) this.append(rc, text);
9597
 return rc;
9698
 };
9799
 /**
98100
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -87,11 +87,13 @@
87 const rc = document.createElement('label');
88 if(forElem){
89 if(forElem instanceof HTMLElement){
90 forElem = this.attr(forElem, 'id');
91 }
92 dom.attr(rc, 'for', forElem);
 
 
93 }
94 if(text) this.append(rc, text);
95 return rc;
96 };
97 /**
98
--- src/fossil.dom.js
+++ src/fossil.dom.js
@@ -87,11 +87,13 @@
87 const rc = document.createElement('label');
88 if(forElem){
89 if(forElem instanceof HTMLElement){
90 forElem = this.attr(forElem, 'id');
91 }
92 if(forElem){
93 dom.attr(rc, 'for', forElem);
94 }
95 }
96 if(text) this.append(rc, text);
97 return rc;
98 };
99 /**
100
M src/info.c
+6 -3
--- src/info.c
+++ src/info.c
@@ -372,11 +372,13 @@
372372
 const char *zNew, /* blob.uuid after change. NULL for deletes */
373373
 const char *zOldName, /* Prior name. NULL if no name change. */
374374
 DiffConfig *pCfg, /* Flags for text_diff() or NULL to omit all */
375375
 int mperm /* executable or symlink permission for zNew */
376376
 ){
377
- @ <p>
377
+ @ <div class='file-change-line'><span>
378
+ /* Maintenance reminder: the extra level of SPAN is for
379
+ ** arranging new elements via JS. */
378380
 if( !g.perm.Hyperlink ){
379381
 if( zNew==0 ){
380382
 @ Deleted %h(zName).
381383
 }else if( zOld==0 ){
382384
 @ Added %h(zName).
@@ -391,10 +393,11 @@
391393
 @ %h(zName) became a regular file.
392394
 }
393395
 }else{
394396
 @ Changes to %h(zName).
395397
 }
398
+ @ </span></div>
396399
 if( pCfg ){
397400
 append_diff(zOld, zNew, pCfg);
398401
 }
399402
 }else{
400403
 if( zOld && zNew ){
@@ -436,20 +439,20 @@
436439
 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zOld))[%S(zOld)]</a>.
437440
 }else{
438441
 @ Added %z(href("%R/finfo?name=%T&m=%!S&ci=%!S",zName,zNew,zCkin))\
439442
 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zNew))[%S(zNew)]</a>.
440443
 }
444
+ @ </span></div>
441445
 if( zOld && zNew && fossil_strcmp(zOld,zNew)!=0 ){
442446
 if( pCfg ){
443447
 append_diff(zOld, zNew, pCfg);
444
- }else{
448
+ }else{
445449
 @ &nbsp;&nbsp;
446450
 @ %z(href("%R/fdiff?v1=%!S&v2=%!S",zOld,zNew))[diff]</a>
447451
 }
448452
 }
449453
 }
450
- @ </p>
451454
 }
452455
453456
 /*
454457
 ** Generate javascript to enhance HTML diffs.
455458
 */
456459
--- src/info.c
+++ src/info.c
@@ -372,11 +372,13 @@
372 const char *zNew, /* blob.uuid after change. NULL for deletes */
373 const char *zOldName, /* Prior name. NULL if no name change. */
374 DiffConfig *pCfg, /* Flags for text_diff() or NULL to omit all */
375 int mperm /* executable or symlink permission for zNew */
376 ){
377 @ <p>
 
 
378 if( !g.perm.Hyperlink ){
379 if( zNew==0 ){
380 @ Deleted %h(zName).
381 }else if( zOld==0 ){
382 @ Added %h(zName).
@@ -391,10 +393,11 @@
391 @ %h(zName) became a regular file.
392 }
393 }else{
394 @ Changes to %h(zName).
395 }
 
396 if( pCfg ){
397 append_diff(zOld, zNew, pCfg);
398 }
399 }else{
400 if( zOld && zNew ){
@@ -436,20 +439,20 @@
436 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zOld))[%S(zOld)]</a>.
437 }else{
438 @ Added %z(href("%R/finfo?name=%T&m=%!S&ci=%!S",zName,zNew,zCkin))\
439 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zNew))[%S(zNew)]</a>.
440 }
 
441 if( zOld && zNew && fossil_strcmp(zOld,zNew)!=0 ){
442 if( pCfg ){
443 append_diff(zOld, zNew, pCfg);
444 }else{
445 @ &nbsp;&nbsp;
446 @ %z(href("%R/fdiff?v1=%!S&v2=%!S",zOld,zNew))[diff]</a>
447 }
448 }
449 }
450 @ </p>
451 }
452
453 /*
454 ** Generate javascript to enhance HTML diffs.
455 */
456
--- src/info.c
+++ src/info.c
@@ -372,11 +372,13 @@
372 const char *zNew, /* blob.uuid after change. NULL for deletes */
373 const char *zOldName, /* Prior name. NULL if no name change. */
374 DiffConfig *pCfg, /* Flags for text_diff() or NULL to omit all */
375 int mperm /* executable or symlink permission for zNew */
376 ){
377 @ <div class='file-change-line'><span>
378 /* Maintenance reminder: the extra level of SPAN is for
379 ** arranging new elements via JS. */
380 if( !g.perm.Hyperlink ){
381 if( zNew==0 ){
382 @ Deleted %h(zName).
383 }else if( zOld==0 ){
384 @ Added %h(zName).
@@ -391,10 +393,11 @@
393 @ %h(zName) became a regular file.
394 }
395 }else{
396 @ Changes to %h(zName).
397 }
398 @ </span></div>
399 if( pCfg ){
400 append_diff(zOld, zNew, pCfg);
401 }
402 }else{
403 if( zOld && zNew ){
@@ -436,20 +439,20 @@
439 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zOld))[%S(zOld)]</a>.
440 }else{
441 @ Added %z(href("%R/finfo?name=%T&m=%!S&ci=%!S",zName,zNew,zCkin))\
442 @ %h(zName)</a> version %z(href("%R/artifact/%!S",zNew))[%S(zNew)]</a>.
443 }
444 @ </span></div>
445 if( zOld && zNew && fossil_strcmp(zOld,zNew)!=0 ){
446 if( pCfg ){
447 append_diff(zOld, zNew, pCfg);
448 }else{
449 @ &nbsp;&nbsp;
450 @ %z(href("%R/fdiff?v1=%!S&v2=%!S",zOld,zNew))[diff]</a>
451 }
452 }
453 }
 
454 }
455
456 /*
457 ** Generate javascript to enhance HTML diffs.
458 */
459

Keyboard Shortcuts

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