Fossil SCM
For the show/hide diff checkboxes, invisibly extend the corresponding LABEL element such that tapping any of the empty space to the left of the checkbox toggles it. This doesn't change the appearance but extends the click zone considerably on wide displays.
Commit
6bc8c5f8829a8b7925b3aa91ec8ef8d4ae3be654716613fb328141da190541e6
Parent
3bff7b92d6d152d…
1 file changed
+4
-2
+4
-2
| --- src/fossil.diff.js | ||
| +++ src/fossil.diff.js | ||
| @@ -45,14 +45,16 @@ | ||
| 45 | 45 | const sib = diffElem.previousElementSibling, |
| 46 | 46 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 47 | 47 | if(!sib) return; |
| 48 | 48 | const lblToggle = D.label(); |
| 49 | 49 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 50 | - const wrapper = D.append(D.span(), lblToggle); | |
| 51 | 50 | allToggles.push(ckbox); |
| 52 | 51 | ++checkedCount; |
| 53 | - D.append(sib, D.append(wrapper, lblToggle)); | |
| 52 | + /* Make all of the available empty space a click zone for the checkbox */ | |
| 53 | + lblToggle.style.flexGrow = 1; | |
| 54 | + lblToggle.style.textAlign = 'right'; | |
| 55 | + D.append(sib, lblToggle); | |
| 54 | 56 | ckbox.addEventListener('change', function(){ |
| 55 | 57 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 56 | 58 | if(btnAll){ |
| 57 | 59 | checkedCount += (this.checked ? 1 : -1); |
| 58 | 60 | btnAll.innerText = (checkedCount < allToggles.length) |
| 59 | 61 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -45,14 +45,16 @@ | |
| 45 | const sib = diffElem.previousElementSibling, |
| 46 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 47 | if(!sib) return; |
| 48 | const lblToggle = D.label(); |
| 49 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 50 | const wrapper = D.append(D.span(), lblToggle); |
| 51 | allToggles.push(ckbox); |
| 52 | ++checkedCount; |
| 53 | D.append(sib, D.append(wrapper, lblToggle)); |
| 54 | ckbox.addEventListener('change', function(){ |
| 55 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 56 | if(btnAll){ |
| 57 | checkedCount += (this.checked ? 1 : -1); |
| 58 | btnAll.innerText = (checkedCount < allToggles.length) |
| 59 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -45,14 +45,16 @@ | |
| 45 | const sib = diffElem.previousElementSibling, |
| 46 | ckbox = sib ? D.addClass(D.checkbox(true), 'diff-toggle') : 0; |
| 47 | if(!sib) return; |
| 48 | const lblToggle = D.label(); |
| 49 | D.append(lblToggle, ckbox, D.text(" show/hide ")); |
| 50 | allToggles.push(ckbox); |
| 51 | ++checkedCount; |
| 52 | /* Make all of the available empty space a click zone for the checkbox */ |
| 53 | lblToggle.style.flexGrow = 1; |
| 54 | lblToggle.style.textAlign = 'right'; |
| 55 | D.append(sib, lblToggle); |
| 56 | ckbox.addEventListener('change', function(){ |
| 57 | diffElem.classList[this.checked ? 'remove' : 'add']('hidden'); |
| 58 | if(btnAll){ |
| 59 | checkedCount += (this.checked ? 1 : -1); |
| 60 | btnAll.innerText = (checkedCount < allToggles.length) |
| 61 |