overlays.templ RawHistoryFolder
1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3package web
4
5import "strings"
6
7// OverlayHelp is the keyboard map panel.
8templ OverlayHelp() {
9 <dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
10 <div class="panel-head"><h2>Keyboard shortcuts</h2><button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd> close</button></div>
11 <dl class="keys">
12 <div><dt><kbd>ctrl k</kbd> <kbd>:</kbd></dt><dd>go to a section, branch, tag, file or repository</dd></div>
13 <div><dt><kbd>?</kbd></dt><dd>this list</dd></div>
14 <div><dt><kbd>j</kbd> <kbd>k</kbd></dt><dd>move the row cursor down / up</dd></div>
15 <div><dt><kbd>enter</kbd></dt><dd>open the row under the cursor</dd></div>
16 <div><dt><kbd>g g</kbd> <kbd>G</kbd></dt><dd>first / last row</dd></div>
17 <div><dt><kbd>/</kbd></dt><dd>filter the list; on Files, find a file in the repository</dd></div>
18 <div><dt><kbd>b</kbd></dt><dd>{ "switch" } branch or tag</dd></div>
19 <div><dt><kbd>s</kbd> <kbd>t</kbd> <kbd>c</kbd> <kbd>r</kbd> <kbd>m</kbd></dt><dd>tabs: summary, files, commits, branches & tags, merge requests</dd></div>
20 <div><dt><kbd>g h</kbd></dt><dd>home</dd></div>
21 <div><dt><kbd>y</kbd></dt><dd>copy a permalink pinned to the commit</dd></div>
22 <div><dt><kbd>d</kbd> <kbd>u</kbd> <kbd>x</kbd></dt><dd>diff: split / unified / collapse or expand all</dd></div>
23 <div><dt><kbd>n</kbd></dt><dd>merge request: next note in the diff</dd></div>
24 <div><dt><kbd>esc</kbd></dt><dd>close a dialog, leave a field</dd></div>
25 </dl>
26 </dialog>
27}
28
29// OverlayRefs is the ref switcher. It exists only inside a repository.
30templ OverlayRefs(l Layout) {
31 if l.Ref != "" {
32 <dialog id="panel-refs" class="panel modal" aria-label="Switch ref" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
33 <div class="panel-head">
34 <label for="refs-filter" class="sr">filter branches and tags</label>
35 <input
36 id="refs-filter"
37 type="search"
38 placeholder="Switch branch or tag…"
39 autocomplete="off"
40 data-pick="#panel-refs li"
41 hx-on:input="ermite.filter(this)"
42 />
43 <button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
44 </div>
45 <div class="panel-cols" data-picklist>
46 <section aria-label="Branches">
47 <h2>Branches <span class="count">{ itoa(len(l.Heads)) }</span></h2>
48 <ul>
49 for _, r := range l.Heads {
50 @refItem(r)
51 }
52 </ul>
53 </section>
54 <section aria-label="Tags">
55 <h2>Tags <span class="count">{ itoa(len(l.Tags)) }</span></h2>
56 <ul>
57 for _, r := range l.Tags {
58 @refItem(r)
59 }
60 </ul>
61 </section>
62 </div>
63 </dialog>
64 }
65}
66
67templ refItem(r RefItem) {
68 <li>
69 <a
70 href={ templ.SafeURL(r.Href) }
71 if r.Current {
72 aria-current="true"
73 }
74 >
75 <span class="mark" aria-hidden="true">
76 if r.Current {
77 ●
78 } else {
79
80 }
81 </span>{ r.Name }
82 </a>
83 </li>
84}
85
86// OverlayCmd is the ":" command line: one filterable list mixing sections,
87// refs and repos.
88templ OverlayCmd(items []CmdItem) {
89 <dialog id="panel-cmd" class="panel modal" aria-label="Go to" hx-on:close="ermiteFinder.paletteClose()" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
90 <div class="panel-head">
91 <label for="cmd-q" class="sr">go to</label>
92 <input
93 id="cmd-q"
94 type="search"
95 placeholder="Go to a section, branch, tag, file or repository…"
96 autocomplete="off"
97 spellcheck="false"
98 aria-controls="cmd-list"
99 hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)"
100 hx-on:keydown="ermite.cmdKey(event)"
101 />
102 <button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
103 </div>
104 <ul id="cmd-list" class="cmd-list" aria-label="Targets">
105 for i, c := range items {
106 <li data-k={ strings.ToLower(c.Kind + " " + c.Label) } data-cursor?={ i == 0 }><a href={ templ.SafeURL(c.Href) } tabindex="-1"><span class="lbl">{ c.Label }</span><span class="k">{ c.Kind }</span></a></li>
107 }
108 </ul>
109 <p class="panel-foot"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></p>
110 </dialog>
111}