mirror/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-24 23:33:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Use native inputs in whitespace dropdown (#20980)

Browse source 
Use native `<input type="radio">` instead of fake icon font. The
`pointer-events: none` is necessary so the link click always takes
effect. Tested in Firefox, Safari and Chrome.

Before:
<img width="305" alt="Screen Shot 2022-08-27 at 20 42 11"
src="https://user-images.githubusercontent.com/115237/187044786-6655c766-c3fb-4672-9e3e-219b3ec4896c.png">

After:
<img width="298" alt="Screen Shot 2022-08-27 at 21 10 05"
src="https://user-images.githubusercontent.com/115237/187044790-33f87741-062e-4744-80b1-d3bd3fd725e3.png">
<img width="302" alt="image"
src="https://user-images.githubusercontent.com/115237/187044872-6c133cea-65ee-4ebd-b18a-a8b38c791565.png">
This commit is contained in:
silverwind 2022-09-25 16:01:05 +02:00 committed by GitHub
parent c4742fbea3
commit 3d92ad8eb9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
templates/repo/diff/whitespace_dropdown.tmpl
View file

@ -3,20 +3,28 @@
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <div class="menu">
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
<i class="circle {{if eq .WhitespaceBehavior "show-all"}}dot{{else}}outline{{end}} icon"></i> <label class="pointer-events-none">
<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
{{.locale.Tr "repo.diff.whitespace_show_everything"}} {{.locale.Tr "repo.diff.whitespace_show_everything"}}
</label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all">
<i class="circle {{if eq .WhitespaceBehavior "ignore-all"}}dot{{else}}outline{{end}} icon"></i> <label class="pointer-events-none">
<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
{{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}} {{.locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
<label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change">
<i class="circle {{if eq .WhitespaceBehavior "ignore-change"}}dot{{else}}outline{{end}} icon"></i> <label class="pointer-events-none">
<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
{{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}} {{.locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
</label>
</a> </a>
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol"> <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol">
<i class="circle {{if eq .WhitespaceBehavior "ignore-eol"}}dot{{else}}outline{{end}} icon"></i> <label class="pointer-events-none">
<input class="mr-3 pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
{{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}} {{.locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
</label>
</a> </a>
</div> </div>
</div> </div>

3
web_src/less/helpers.less
View file

@ -19,6 +19,9 @@
.h-100 { height: 100% !important; } .h-100 { height: 100% !important; }
.br-0 { border-radius: 0 !important; } .br-0 { border-radius: 0 !important; }
/* below class names match Tailwind CSS */
.pointer-events-none { pointer-events: none !important; }
.mono { .mono {
font-family: var(--fonts-monospace) !important; font-family: var(--fonts-monospace) !important;
font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */ font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */