willdot.net
appview/pages: reimplement clone dropdown using popover
Signed-off-by: oppiliappan <me@oppi.li>
authored by
+81
-96
appview/pages/templates/repo/fragments/cloneDropdown.html
+81
-96
appview/pages/templates/repo/fragments/cloneDropdown.html
···
1
{{ define "repo/fragments/cloneDropdown" }}
2
-
{{ $knot := .RepoInfo.Knot }}
3
-
{{ if eq $knot "knot1.tangled.sh" }}
4
-
{{ $knot = "tangled.org" }}
5
-
{{ end }}
6
7
-
<details id="clone-dropdown" class="relative inline-block text-left group">
8
-
<summary class="btn-create cursor-pointer list-none flex items-center gap-2">
9
-
{{ i "download" "w-4 h-4" }}
10
-
<span class="hidden md:inline">code</span>
11
-
<span class="group-open:hidden">
12
-
{{ i "chevron-down" "w-4 h-4" }}
13
-
</span>
14
-
<span class="hidden group-open:flex">
15
-
{{ i "chevron-up" "w-4 h-4" }}
16
-
</span>
17
-
</summary>
18
19
-
<div class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 drop-shadow-sm dark:text-white z-[9999]">
20
-
<div class="p-4">
21
-
<div class="mb-3">
22
-
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Clone this repository</h3>
23
-
</div>
24
25
-
<!-- HTTPS Clone -->
26
-
<div class="mb-3">
27
-
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
28
-
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
29
-
<code
30
-
class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
31
-
onclick="window.getSelection().selectAllChildren(this)"
32
-
data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
33
-
>https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
34
-
<button
35
-
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
36
-
class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
37
-
title="Copy to clipboard"
38
-
>
39
-
{{ i "copy" "w-4 h-4" }}
40
-
</button>
41
-
</div>
42
-
</div>
43
44
-
<!-- SSH Clone -->
45
-
<div class="mb-3">
46
-
{{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
47
-
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
48
-
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
49
-
<code
50
-
class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
51
-
onclick="window.getSelection().selectAllChildren(this)"
52
-
data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
53
-
>git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
54
-
<button
55
-
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
56
-
class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
57
-
title="Copy to clipboard"
58
-
>
59
-
{{ i "copy" "w-4 h-4" }}
60
-
</button>
61
-
</div>
62
-
</div>
63
-
64
-
<!-- Note for self-hosted -->
65
-
<p class="text-xs text-gray-500 dark:text-gray-400">
66
-
For self-hosted knots, clone URLs may differ based on your setup.
67
-
</p>
68
-
69
-
<!-- Download Archive -->
70
-
<div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
71
-
<a
72
-
href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
73
-
class="flex items-center gap-2 px-3 py-2 text-sm"
74
-
>
75
-
{{ i "download" "w-4 h-4" }}
76
-
Download tar.gz
77
-
</a>
78
-
</div>
79
-
80
-
</div>
81
-
</div>
82
-
</details>
83
84
-
<script>
85
-
function copyToClipboard(button, text) {
86
-
navigator.clipboard.writeText(text).then(() => {
87
-
const originalContent = button.innerHTML;
88
-
button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
89
-
setTimeout(() => {
90
-
button.innerHTML = originalContent;
91
-
}, 2000);
92
-
});
93
-
}
94
95
-
// Close clone dropdown when clicking outside
96
-
document.addEventListener('click', function(event) {
97
-
const cloneDropdown = document.getElementById('clone-dropdown');
98
-
if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
99
-
if (!cloneDropdown.contains(event.target)) {
100
-
cloneDropdown.removeAttribute('open');
101
-
}
102
-
}
103
});
104
-
</script>
105
{{ end }}
···
1
{{ define "repo/fragments/cloneDropdown" }}
2
+
{{ $knot := .RepoInfo.Knot }}
3
+
{{ if eq $knot "knot1.tangled.sh" }}
4
+
{{ $knot = "tangled.org" }}
5
+
{{ end }}
6
7
+
<button
8
+
popovertarget="clone-dropdown"
9
+
popovertargetaction="toggle"
10
+
class="btn-create cursor-pointer list-none flex items-center gap-2 px-4">
11
+
{{ i "download" "w-4 h-4" }}
12
+
<span class="hidden md:inline">code</span>
13
+
</button>
14
+
<div
15
+
popover
16
+
id="clone-dropdown"
17
+
class="
18
+
bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
19
+
dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50
20
+
w-96 p-4 rounded drop-shadow overflow-visible">
21
+
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-5">Clone this repository</h3>
22
23
+
<!-- HTTPS Clone -->
24
+
<div class="mb-3">
25
+
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
26
+
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
27
+
<code
28
+
class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
29
+
onclick="window.getSelection().selectAllChildren(this)"
30
+
data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
31
+
>https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
32
+
<button
33
+
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
34
+
class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
35
+
title="Copy to clipboard"
36
+
>
37
+
{{ i "copy" "w-4 h-4" }}
38
+
</button>
39
+
</div>
40
+
</div>
41
42
+
<!-- SSH Clone -->
43
+
<div class="mb-3">
44
+
{{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
45
+
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
46
+
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
47
+
<code
48
+
class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
49
+
onclick="window.getSelection().selectAllChildren(this)"
50
+
data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
51
+
>git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
52
+
<button
53
+
onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
54
+
class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
55
+
title="Copy to clipboard"
56
+
>
57
+
{{ i "copy" "w-4 h-4" }}
58
+
</button>
59
+
</div>
60
+
</div>
61
62
+
<!-- Note for self-hosted -->
63
+
<p class="text-xs text-gray-500 dark:text-gray-400">
64
+
For self-hosted knots, clone URLs may differ based on your setup.
65
+
</p>
66
67
+
<!-- Download Archive -->
68
+
<div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
69
+
<a
70
+
href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
71
+
class="flex items-center gap-2 px-3 py-2 text-sm"
72
+
>
73
+
{{ i "download" "w-4 h-4" }}
74
+
Download tar.gz
75
+
</a>
76
+
</div>
77
+
</div>
78
79
+
<script>
80
+
function copyToClipboard(button, text) {
81
+
navigator.clipboard.writeText(text).then(() => {
82
+
const originalContent = button.innerHTML;
83
+
button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
84
+
setTimeout(() => {
85
+
button.innerHTML = originalContent;
86
+
}, 2000);
87
});
88
+
}
89
+
</script>
90
{{ end }}
+4
-9
appview/pages/templates/repo/index.html
+4
-9
appview/pages/templates/repo/index.html
···
14
{{ end }}
15
<div class="flex items-center justify-between pb-5">
16
{{ block "branchSelector" . }}{{ end }}
17
-
<div class="flex md:hidden items-center gap-3">
18
-
<a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex items-center text-sm gap-1 font-bold">
19
{{ i "git-commit-horizontal" "w-4" "h-4" }} {{ .TotalCommits }}
20
</a>
21
-
<a href="/{{ .RepoInfo.FullName }}/branches" class="inline-flex items-center text-sm gap-1 font-bold">
22
{{ i "git-branch" "w-4" "h-4" }} {{ len .Branches }}
23
</a>
24
-
<a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex items-center text-sm gap-1 font-bold">
25
{{ i "tags" "w-4" "h-4" }} {{ len .Tags }}
26
</a>
27
{{ template "repo/fragments/cloneDropdown" . }}
···
109
{{ i "git-compare" "w-4 h-4" }}
110
</a>
111
</div>
112
-
</div>
113
-
114
-
<!-- Clone dropdown in top right -->
115
-
<div class="hidden md:flex items-center ">
116
-
{{ template "repo/fragments/cloneDropdown" . }}
117
</div>
118
</div>
119
{{ end }}
···
14
{{ end }}
15
<div class="flex items-center justify-between pb-5">
16
{{ block "branchSelector" . }}{{ end }}
17
+
<div class="flex items-center gap-3">
18
+
<a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
19
{{ i "git-commit-horizontal" "w-4" "h-4" }} {{ .TotalCommits }}
20
</a>
21
+
<a href="/{{ .RepoInfo.FullName }}/branches" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
22
{{ i "git-branch" "w-4" "h-4" }} {{ len .Branches }}
23
</a>
24
+
<a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
25
{{ i "tags" "w-4" "h-4" }} {{ len .Tags }}
26
</a>
27
{{ template "repo/fragments/cloneDropdown" . }}
···
109
{{ i "git-compare" "w-4 h-4" }}
110
</a>
111
</div>
112
</div>
113
</div>
114
{{ end }}