Skip to content

Commit 4d8c320

Browse files
SudhanshuMatrixSudhanshuMatrix
committed
perf(ui): collect page shortcuts dynamically and lazy load help modal in JS
Signed-off-by: Sudhanshu Singh <sudhanshuwriterblc@gmail.com>
1 parent c6b57b5 commit 4d8c320

7 files changed

Lines changed: 422 additions & 72 deletions

File tree

‎templates/base/footer_content.tmpl‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
</div>
3636
</div>
3737
<a href="{{AssetUrlPrefix}}/licenses.txt">{{ctx.Locale.Tr "licenses"}}</a>
38-
{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
38+
<a href="#" id="show-keyboard-shortcuts" title="{{ctx.Locale.Tr "keyboard_shortcuts.title"}}">
39+
<kbd>?</kbd>
40+
</a>
3941
{{template "custom/extra_links_footer" .}}
4042
</div>
4143
</footer>

‎templates/repo/blame.tmpl‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,15 @@
1919
<div class="ui buttons">
2020
<a class="ui tiny button" href="{{$.RawFileLink}}">{{ctx.Locale.Tr "repo.file_raw"}}</a>
2121
{{if or .RefFullName.IsBranch .RefFullName.IsTag}}
22-
<a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID | PathEscape}}/{{.TreePath | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.file_permalink"}}</a>
22+
<div class="global-shortcut-wrapper tw-inline-block">
23+
<a class="ui tiny button" href="{{.RepoLink}}/src/commit/{{.CommitID | PathEscape}}/{{.TreePath | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.file_permalink"}}</a>
24+
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="y" data-shortcut-description="Permalink" data-shortcut-section="Repository" class="tw-hidden">Y</kbd>
25+
</div>
2326
{{end}}
24-
<a class="ui tiny button" href="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.normal_view"}}</a>
27+
<div class="global-shortcut-wrapper tw-inline-block">
28+
<a class="ui tiny button" href="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.normal_view"}}</a>
29+
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="b" data-shortcut-description="Normal View" data-shortcut-section="Repository" class="tw-hidden">B</kbd>
30+
</div>
2531
<a class="ui tiny button" href="{{.RepoLink}}/commits/{{.RefTypeNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.file_history"}}</a>
2632
<button class="ui tiny button unescape-button">{{ctx.Locale.Tr "repo.unescape_control_characters"}}</button>
2733
<button class="ui tiny button escape-button tw-hidden">{{ctx.Locale.Tr "repo.escape_control_characters"}}</button>

‎templates/repo/branch_dropdown.tmpl‎

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,55 +14,58 @@
1414
1515
Search "repo/branch_dropdown" in the template directory to find all occurrences.
1616
*/}}
17-
<div class="{{if .ContainerClasses}}{{.ContainerClasses}}{{end}}"
18-
data-global-init="initRepoBranchTagSelector"
19-
data-text-release-compare="{{ctx.Locale.Tr "repo.release.compare"}}"
20-
data-text-branches="{{ctx.Locale.Tr "repo.branches"}}"
21-
data-text-tags="{{ctx.Locale.Tr "repo.tags"}}"
22-
data-text-filter-branch="{{ctx.Locale.Tr "repo.pulls.filter_branch"}}"
23-
data-text-filter-tag="{{ctx.Locale.Tr "repo.find_tag"}}"
24-
data-text-default-branch-label="{{ctx.Locale.Tr "repo.default_branch_label"}}"
25-
data-text-create-tag="{{ctx.Locale.Tr "repo.tag.create_tag"}}"
26-
data-text-create-branch="{{ctx.Locale.Tr "repo.branch.create_branch"}}"
27-
data-text-create-ref-from="{{ctx.Locale.Tr "repo.branch.create_from"}}"
28-
data-text-no-results="{{ctx.Locale.Tr "no_results_found"}}"
29-
data-text-view-all-branches="{{ctx.Locale.Tr "repo.view_all_branches"}}"
30-
data-text-view-all-tags="{{ctx.Locale.Tr "repo.view_all_tags"}}"
17+
<div class="global-shortcut-wrapper tw-inline-block">
18+
<div class="{{if .ContainerClasses}}{{.ContainerClasses}}{{end}}"
19+
data-global-init="initRepoBranchTagSelector"
20+
data-text-release-compare="{{ctx.Locale.Tr "repo.release.compare"}}"
21+
data-text-branches="{{ctx.Locale.Tr "repo.branches"}}"
22+
data-text-tags="{{ctx.Locale.Tr "repo.tags"}}"
23+
data-text-filter-branch="{{ctx.Locale.Tr "repo.pulls.filter_branch"}}"
24+
data-text-filter-tag="{{ctx.Locale.Tr "repo.find_tag"}}"
25+
data-text-default-branch-label="{{ctx.Locale.Tr "repo.default_branch_label"}}"
26+
data-text-create-tag="{{ctx.Locale.Tr "repo.tag.create_tag"}}"
27+
data-text-create-branch="{{ctx.Locale.Tr "repo.branch.create_branch"}}"
28+
data-text-create-ref-from="{{ctx.Locale.Tr "repo.branch.create_from"}}"
29+
data-text-no-results="{{ctx.Locale.Tr "no_results_found"}}"
30+
data-text-view-all-branches="{{ctx.Locale.Tr "repo.view_all_branches"}}"
31+
data-text-view-all-tags="{{ctx.Locale.Tr "repo.view_all_tags"}}"
3132

32-
data-current-repo-default-branch="{{.Repository.DefaultBranch}}"
33-
data-current-repo-link="{{.Repository.Link}}"
34-
data-current-tree-path="{{.CurrentTreePath}}"
35-
data-current-ref-type="{{.CurrentRefType}}"
36-
data-current-ref-short-name="{{.CurrentRefShortName}}"
33+
data-current-repo-default-branch="{{.Repository.DefaultBranch}}"
34+
data-current-repo-link="{{.Repository.Link}}"
35+
data-current-tree-path="{{.CurrentTreePath}}"
36+
data-current-ref-type="{{.CurrentRefType}}"
37+
data-current-ref-short-name="{{.CurrentRefShortName}}"
3738

38-
data-ref-link-template="{{.RefLinkTemplate}}"
39-
data-ref-form-action-template="{{.RefFormActionTemplate}}"
40-
data-dropdown-fixed-text="{{.DropdownFixedText}}"
41-
data-show-tab-branches="{{.ShowTabBranches}}"
42-
data-show-tab-tags="{{.ShowTabTags}}"
43-
data-allow-create-new-ref="{{.AllowCreateNewRef}}"
44-
data-show-view-all-refs-entry="{{.ShowViewAllRefsEntry}}"
39+
data-ref-link-template="{{.RefLinkTemplate}}"
40+
data-ref-form-action-template="{{.RefFormActionTemplate}}"
41+
data-dropdown-fixed-text="{{.DropdownFixedText}}"
42+
data-show-tab-branches="{{.ShowTabBranches}}"
43+
data-show-tab-tags="{{.ShowTabTags}}"
44+
data-allow-create-new-ref="{{.AllowCreateNewRef}}"
45+
data-show-view-all-refs-entry="{{.ShowViewAllRefsEntry}}"
4546

46-
data-enable-feed="{{ctx.RootData.EnableFeed}}"
47-
>
48-
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
49-
<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
50-
<div class="ui compact button branch-dropdown-button">
51-
<span class="flex-text-block gt-ellipsis">
52-
{{if .DropdownFixedText}}
53-
{{.DropdownFixedText}}
54-
{{else}}
55-
{{if eq .CurrentRefType "tag"}}
56-
{{svg "octicon-tag"}}
57-
{{else if eq .CurrentRefType "branch"}}
58-
{{svg "octicon-git-branch"}}
47+
data-enable-feed="{{ctx.RootData.EnableFeed}}"
48+
>
49+
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
50+
<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
51+
<div class="ui compact button branch-dropdown-button">
52+
<span class="flex-text-block gt-ellipsis">
53+
{{if .DropdownFixedText}}
54+
{{.DropdownFixedText}}
5955
{{else}}
60-
{{svg "octicon-git-commit"}}
56+
{{if eq .CurrentRefType "tag"}}
57+
{{svg "octicon-tag"}}
58+
{{else if eq .CurrentRefType "branch"}}
59+
{{svg "octicon-git-branch"}}
60+
{{else}}
61+
{{svg "octicon-git-commit"}}
62+
{{end}}
63+
<strong class="tw-inline-block gt-ellipsis">{{.CurrentRefShortName}}</strong>
6164
{{end}}
62-
<strong class="tw-inline-block gt-ellipsis">{{.CurrentRefShortName}}</strong>
63-
{{end}}
64-
</span>
65-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
65+
</span>
66+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
67+
</div>
6668
</div>
6769
</div>
70+
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="w" data-shortcut-description="Branches / Tags" data-shortcut-section="Repository" class="tw-hidden">W</kbd>
6871
</div>

‎templates/repo/view_content.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
data-tree-list-url="{{.RepoLink}}/tree-list/{{.RefTypeNameSubURL}}"
6060
data-no-results-text="{{ctx.Locale.Tr "repo.find_file.no_matching"}}"
6161
data-placeholder="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"
62-
><div class="ui small input global-shortcut-wrapper"><input placeholder="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"><kbd>T</kbd></div></div>
62+
><div class="ui small input global-shortcut-wrapper"><input placeholder="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}"><kbd data-global-init="onGlobalShortcut" data-shortcut-keys="t" data-shortcut-description="Go to File" data-shortcut-section="Repository">T</kbd></div></div>
6363

6464
{{if .RefFullName.IsBranch}}
6565
{{$addFilePath := .TreePath}}

‎templates/repo/view_file.tmpl‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,16 @@
4848
<div class="ui buttons tw-mr-1">
4949
<a class="ui mini basic button" href="{{$.RawFileLink}}">{{ctx.Locale.Tr "repo.file_raw"}}</a>
5050
{{if or .RefFullName.IsBranch .RefFullName.IsTag}}
51-
<a class="ui mini basic button" href="{{.RepoLink}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.file_permalink"}}</a>
51+
<div class="global-shortcut-wrapper tw-inline-block">
52+
<a class="ui mini basic button" href="{{.RepoLink}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.file_permalink"}}</a>
53+
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="y" data-shortcut-description="Permalink" data-shortcut-section="Repository" class="tw-hidden">Y</kbd>
54+
</div>
5255
{{end}}
5356
{{if .IsRepresentableAsText}}
54-
<a class="ui mini basic button" href="{{.RepoLink}}/blame/{{.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.blame"}}</a>
57+
<div class="global-shortcut-wrapper tw-inline-block">
58+
<a class="ui mini basic button" href="{{.RepoLink}}/blame/{{.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.blame"}}</a>
59+
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="b" data-shortcut-description="Blame" data-shortcut-section="Repository" class="tw-hidden">B</kbd>
60+
</div>
5561
{{end}}
5662
<a class="ui mini basic button" href="{{.RepoLink}}/commits/{{.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.file_history"}}</a>
5763
{{if .EscapeStatus.Escaped}}

‎web_src/css/modules/shortcut.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,101 @@ kbd {
2424
transform: translateY(-50%);
2525
pointer-events: none;
2626
}
27+
28+
/* Keyboard Shortcuts Modal Backdrop & Dialog Container */
29+
#keyboard-shortcuts-modal {
30+
position: fixed;
31+
top: 0;
32+
left: 0;
33+
width: 100vw;
34+
height: 100vh;
35+
z-index: 1000;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
}
40+
41+
#keyboard-shortcuts-modal.hidden {
42+
display: none !important;
43+
}
44+
45+
#keyboard-shortcuts-modal .modal-backdrop {
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: 100%;
51+
background: rgba(0, 0, 0, 0.5);
52+
backdrop-filter: blur(2px);
53+
}
54+
55+
#keyboard-shortcuts-modal .shortcut-section {
56+
margin-bottom: 24px;
57+
}
58+
59+
#keyboard-shortcuts-modal .shortcut-section:last-child {
60+
margin-bottom: 0;
61+
}
62+
63+
#keyboard-shortcuts-modal .shortcut-section h3 {
64+
margin: 0 0 12px;
65+
font-size: 0.875rem;
66+
font-weight: var(--font-weight-semibold);
67+
color: var(--color-text-light-2);
68+
text-transform: uppercase;
69+
letter-spacing: 0.5px;
70+
}
71+
72+
#keyboard-shortcuts-modal .shortcut-list {
73+
display: flex;
74+
flex-direction: column;
75+
gap: 12px;
76+
}
77+
78+
#keyboard-shortcuts-modal .shortcut-item {
79+
display: flex;
80+
align-items: center;
81+
gap: 16px;
82+
}
83+
84+
#keyboard-shortcuts-modal .shortcut-keys {
85+
display: flex;
86+
align-items: center;
87+
gap: 4px;
88+
min-width: 80px;
89+
}
90+
91+
#keyboard-shortcuts-modal .shortcut-keys kbd {
92+
display: inline-flex;
93+
align-items: center;
94+
justify-content: center;
95+
min-width: 28px;
96+
height: 28px;
97+
padding: 0 6px;
98+
font-size: 12px;
99+
font-weight: var(--font-weight-semibold);
100+
font-family: inherit;
101+
background: var(--color-secondary);
102+
border: 1px solid var(--color-secondary-dark-2);
103+
border-radius: 4px;
104+
box-shadow: 0 2px 0 var(--color-secondary-dark-2);
105+
color: var(--color-text);
106+
}
107+
108+
#keyboard-shortcuts-modal .shortcut-description {
109+
flex: 1;
110+
font-size: 0.875rem;
111+
color: var(--color-text);
112+
}
113+
114+
@media (max-width: 768px) {
115+
#keyboard-shortcuts-modal .shortcut-item {
116+
flex-direction: column;
117+
align-items: flex-start;
118+
gap: 8px;
119+
}
120+
121+
#keyboard-shortcuts-modal .shortcut-keys {
122+
min-width: auto;
123+
}
124+
}

0 commit comments

Comments
 (0)