Fossil

Check-in [f9d29b9702]
Login

Check-in [f9d29b9702]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | diff-view-toggle-poc
Files: files | file ages | folders
SHA3-256: f9d29b9702c8ec38429064bf37120df17e559fa4c9b9e90cbc9c9c71d138845d
User & Date: stephan 2021-03-02 03:51:47.562
Context
2021-03-02
04:04
Removed the min/max height on the diff toggles to slightly improve the layout flow. ... (Closed-Leaf check-in: 42205f9c76 user: stephan tags: diff-view-toggle-poc)
03:51
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. ... (check-in: f9d29b9702 user: stephan tags: diff-view-toggle-poc)
2021-03-01
17:35
Proof of concept/demo for toggle buttons on individual diff views on the /info diff views, as discussed in [forum:0f751ad9c8]. ... (check-in: cfdd666533 user: stephan tags: diff-view-toggle-poc)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/default.css.
︙︙
1761
1762
1763
1764
1765
1766
1767
1768

1769
1770
1771
1772
1773
1774
1775
1776
1777

}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}

button.diff-toggle {

  margin-bottom: 0.5em;
  font-size: 85%;
}
/* Objects in the "desktoponly" class are invisible on mobile */
@media screen and (max-width: 600px) {
  .desktoponly {
    display: none;
  }
}








|
>
|
|








1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778

}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}

input[type=checkbox].diff-toggle {
  float: right;
  min-height: 1.5em;
  max-height: 1.5em;
}
/* Objects in the "desktoponly" class are invisible on mobile */
@media screen and (max-width: 600px) {
  .desktoponly {
    display: none;
  }
}
︙︙
Changes to src/fossil.info-diff.js. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

"use strict";
window.fossil.onPageLoad(function(){
  const F = window.fossil, D = F.dom;
  const addToggle = function(diffElem){
    const cs = diffElem.getClientRects()[0];
    if(cs.height < 150/*arbitrary*/) return;
    const btn = D.addClass(D.button("Toggle diff view"), 'diff-toggle'),
          p = diffElem.parentElement;
    p.insertBefore(btn, diffElem);
    btn.addEventListener('click', function(){
      diffElem.classList.toggle('hidden');
    }, false);
    if(cs.height > 700/*arbitrary!*/){
      btn.click();
    }
  };
  document.querySelectorAll('pre.udiff, table.sbsdiffcols').forEach(addToggle);
});





|
<
|
|
|



<
<
<




1
2
3
4
5

6
7
8
9
10
11



12
13
14

"use strict";
window.fossil.onPageLoad(function(){
  const F = window.fossil, D = F.dom;
  const addToggle = function(diffElem){
    const sib = diffElem.previousElementSibling,

          btn = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0;
    if(!sib) return;
    D.append(sib,btn);
    btn.addEventListener('click', function(){
      diffElem.classList.toggle('hidden');
    }, false);



  };
  document.querySelectorAll('pre.udiff, table.sbsdiffcols').forEach(addToggle);
});