Skip to content

Commit 88876cf

Browse files
techknowlogicktechknowlogick
committed
convert to tippy
1 parent 540e58f commit 88876cf

File tree

4 files changed

+74
-30
lines changed

4 files changed

+74
-30
lines changed

‎templates/repo/home.tmpl‎

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -116,20 +116,19 @@
116116
<div class="repo-button-row-right">
117117
<!-- Only show clone panel in repository home page -->
118118
{{if $isHomepage}}
119-
<div class="clone-panel ui action tiny input">
120-
<button class="ui basic small compact jump dropdown icon button primary" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
121-
<!-- {{svg "octicon-kebab-horizontal"}} -->
122-
<div>
119+
<div id="clone-panel">
120+
<button class="ui tiny primary button tw-pr-1 tw-flex js-btn-clone-panel">
123121
{{svg "octicon-code" 16}}
124122
<span>Code</span>
125-
{{svg "octicon-chevron-down"}}
126-
</div>
127-
<div class="menu gt-mt-3 clone-panel-content">
128-
<div class="ui input">
129-
{{svg "octicon-terminal" 16}}
130-
<strong id="clone-heading" class="gt-ml-3">Clone</strong>
131-
</div>
132-
<div class="ui input gt-mb-0">
123+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
124+
</button>
125+
<div class="clone-panel tippy-target">
126+
<div class="ui segment">
127+
<div class="field tw-flex tw-items-center">
128+
<div class="tw-flex-1">{{svg "octicon-terminal" 16}} Clone</div>
129+
<a class="muted close">{{svg "octicon-x" 16}}</a>
130+
</div>
131+
<div class="menu gt-mt-3 clone-panel-content">
133132
<!-- there is always at least one button (by context/repo.go) -->
134133
{{if $.CloneButtonShowHTTPS}}
135134
<div class="ui clone tabs" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}" data-description="{{ctx.Locale.Tr "repo.clone_https_description"}}">
@@ -142,32 +141,46 @@
142141
</div>
143142
{{end}}
144143
</div>
145-
<div class="ui input tiny action gt-mt-4 gt-mb-0">
144+
<div class="ui input tiny action gt-mt-4 gt-mb-0 field">
146145
<input id="repo-clone-url" size="30" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
147146
<div class="ui basic small compact icon button tooltip" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
148147
{{svg "octicon-copy" 14}}
149148
</div>
150149
</div>
150+
<div class="divider"></div>
151151
<div id="repo-clone-method-description" class="ui input text tiny grey gt-mt-3"></div>
152-
{{range .OpenWithEditorApps}}
153-
<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
152+
<ul class="ui list tw-w-full">
153+
{{range .OpenWithEditorApps}}
154+
<li>
155+
<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
156+
</li>
154157
{{end}}
158+
</ul>
155159
{{if not $.DisableDownloadSourceArchives}}
156-
<div class="ui divider"></div>
157-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
158-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
159-
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
160+
<div class="divider"></div>
161+
<ul class="ui list tw-w-full">
162+
<li>
163+
<a class="item archive-lnk" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
164+
</li>
165+
<li>
166+
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
167+
</li>
168+
<li>
169+
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
170+
</li>
171+
</ul>
160172
{{end}}
161173
{{if .CitiationExist}}
162-
<div class="ui divider"></div>
174+
<div class="divider"></div>
163175
<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
164176
{{end}}
165177
</div>
166-
</button>
178+
</div>
167179
{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
168-
</div>
169180
{{template "repo/cite/cite_modal" .}}
181+
</div>
170182
{{end}}
183+
171184
{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
172185
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
173186
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}

‎web_src/css/repo.css‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -166,15 +166,23 @@
166166
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
167167
} */
168168

169+
.repository #clone-panel {
170+
position: relative;
171+
}
172+
173+
.repository .clone-panel .ui.segment {
174+
border: none;
175+
}
176+
169177
.repository .clone-panel > button {
170178
border-radius: var(--border-radius) !important;
171179
}
172180

173-
#clone-heading {
181+
.repository #clone-heading {
174182
font-size: 1rem;
175183
}
176184

177-
.clone-panel-content {
185+
.repository .clone-panel-content {
178186
min-width: 200px;
179187
}
180188

@@ -208,11 +216,6 @@
208216
border-color: var(--color-primary);
209217
}
210218

211-
.repository .clone-panel .dropdown .menu {
212-
right: 0 !important;
213-
left: auto !important;
214-
}
215-
216219
.repository .repo-description {
217220
font-size: 16px;
218221
margin-bottom: 5px;

‎web_src/js/features/repo-home.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,38 @@
11
import $ from 'jquery';
22
import {stripTags} from '../utils.ts';
3+
import {createTippy} from '../modules/tippy.ts';
34
import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
45
import {POST} from '../modules/fetch.ts';
56
import {showErrorToast} from '../modules/toast.ts';
67

78
const {appSubUrl} = window.config;
89

10+
export function initRepoClonePanel() {
11+
const $clonePanelBtn = $('.js-btn-clone-panel');
12+
// The following part is only for diff views
13+
if (!$clonePanelBtn.length) return;
14+
15+
const $panel = $clonePanelBtn.parent().find('.clone-panel');
16+
const $closeBtn = $panel.find('.close');
17+
18+
if ($clonePanelBtn.length && $panel.length) {
19+
const tippy = createTippy($clonePanelBtn[0], {
20+
content: $panel[0],
21+
theme: 'default',
22+
placement: 'bottom',
23+
trigger: 'click',
24+
maxWidth: '300px',
25+
interactive: true,
26+
hideOnClick: true,
27+
});
28+
29+
$closeBtn.on('click', (e) => {
30+
e.preventDefault();
31+
tippy.hide();
32+
});
33+
}
34+
}
35+
936
export function initRepoTopicBar() {
1037
const mgrBtn = document.querySelector('#manage_topic');
1138
if (!mgrBtn) return;

‎web_src/js/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import {
3535
initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler,
3636
} from './features/repo-issue.ts';
3737
import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
38-
import {initRepoTopicBar} from './features/repo-home.ts';
38+
import {initRepoTopicBar, initRepoClonePanel} from './features/repo-home.ts';
3939
import {initAdminEmails} from './features/admin/emails.ts';
4040
import {initAdminCommon} from './features/admin/common.ts';
4141
import {initRepoTemplateSearch} from './features/repo-template.ts';
@@ -207,6 +207,7 @@ onDomReady(() => {
207207
initRepoSettingSearchTeamBox,
208208
initRepoSettingsCollaboration,
209209
initRepoTemplateSearch,
210+
initRepoClonePanel,
210211
initRepoTopicBar,
211212
initRepoWikiForm,
212213
initRepository,

0 commit comments

Comments
 (0)