Fossil SCM

Moved the diff toggle button to the right of the diff header line, per forum feedback. Changed the button to a checkbox. Removed the arbitrary heuristics regarding which diffs to show/hide by default - they are now all on by default.

stephan 2021-03-02 03:51 diff-view-toggle-poc
Commit f9d29b9702c8ec38429064bf37120df17e559fa4c9b9e90cbc9c9c71d138845d
+4 -3
--- src/default.css
+++ src/default.css
@@ -1763,13 +1763,14 @@
17631763
body.chat #chat-drop-details img {
17641764
max-width: 45%;
17651765
max-height: 45%;
17661766
}
17671767
1768
-button.diff-toggle {
1769
- margin-bottom: 0.5em;
1770
- font-size: 85%;
1768
+input[type=checkbox].diff-toggle {
1769
+ float: right;
1770
+ min-height: 1.5em;
1771
+ max-height: 1.5em;
17711772
}
17721773
/* Objects in the "desktoponly" class are invisible on mobile */
17731774
@media screen and (max-width: 600px) {
17741775
.desktoponly {
17751776
display: none;
17761777
--- src/default.css
+++ src/default.css
@@ -1763,13 +1763,14 @@
1763 body.chat #chat-drop-details img {
1764 max-width: 45%;
1765 max-height: 45%;
1766 }
1767
1768 button.diff-toggle {
1769 margin-bottom: 0.5em;
1770 font-size: 85%;
 
1771 }
1772 /* Objects in the "desktoponly" class are invisible on mobile */
1773 @media screen and (max-width: 600px) {
1774 .desktoponly {
1775 display: none;
1776
--- src/default.css
+++ src/default.css
@@ -1763,13 +1763,14 @@
1763 body.chat #chat-drop-details img {
1764 max-width: 45%;
1765 max-height: 45%;
1766 }
1767
1768 input[type=checkbox].diff-toggle {
1769 float: right;
1770 min-height: 1.5em;
1771 max-height: 1.5em;
1772 }
1773 /* Objects in the "desktoponly" class are invisible on mobile */
1774 @media screen and (max-width: 600px) {
1775 .desktoponly {
1776 display: none;
1777
--- src/fossil.info-diff.js
+++ src/fossil.info-diff.js
@@ -1,18 +1,14 @@
11
"use strict";
22
window.fossil.onPageLoad(function(){
33
const F = window.fossil, D = F.dom;
44
const addToggle = function(diffElem){
5
- const cs = diffElem.getClientRects()[0];
6
- if(cs.height < 150/*arbitrary*/) return;
7
- const btn = D.addClass(D.button("Toggle diff view"), 'diff-toggle'),
8
- p = diffElem.parentElement;
9
- p.insertBefore(btn, diffElem);
5
+ const sib = diffElem.previousElementSibling,
6
+ btn = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
7
+ if(!sib) return;
8
+ D.append(sib,btn);
109
btn.addEventListener('click', function(){
1110
diffElem.classList.toggle('hidden');
1211
}, false);
13
- if(cs.height > 700/*arbitrary!*/){
14
- btn.click();
15
- }
1612
};
1713
document.querySelectorAll('pre.udiff, table.sbsdiffcols').forEach(addToggle);
1814
});
1915
--- src/fossil.info-diff.js
+++ src/fossil.info-diff.js
@@ -1,18 +1,14 @@
1 "use strict";
2 window.fossil.onPageLoad(function(){
3 const F = window.fossil, D = F.dom;
4 const addToggle = function(diffElem){
5 const cs = diffElem.getClientRects()[0];
6 if(cs.height < 150/*arbitrary*/) return;
7 const btn = D.addClass(D.button("Toggle diff view"), 'diff-toggle'),
8 p = diffElem.parentElement;
9 p.insertBefore(btn, diffElem);
10 btn.addEventListener('click', function(){
11 diffElem.classList.toggle('hidden');
12 }, false);
13 if(cs.height > 700/*arbitrary!*/){
14 btn.click();
15 }
16 };
17 document.querySelectorAll('pre.udiff, table.sbsdiffcols').forEach(addToggle);
18 });
19
--- src/fossil.info-diff.js
+++ src/fossil.info-diff.js
@@ -1,18 +1,14 @@
1 "use strict";
2 window.fossil.onPageLoad(function(){
3 const F = window.fossil, D = F.dom;
4 const addToggle = function(diffElem){
5 const sib = diffElem.previousElementSibling,
6 btn = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
7 if(!sib) return;
8 D.append(sib,btn);
 
9 btn.addEventListener('click', function(){
10 diffElem.classList.toggle('hidden');
11 }, false);
 
 
 
12 };
13 document.querySelectorAll('pre.udiff, table.sbsdiffcols').forEach(addToggle);
14 });
15

Keyboard Shortcuts

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