Skip to content

Commit 21d4963

Browse files
silverwindsilverwind
authored
Fix tooltips and issue dependency styles (#13458)
- Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: #13400
1 parent 9155f13 commit 21d4963

File tree

15 files changed

+163
-145
lines changed

15 files changed

+163
-145
lines changed

‎.stylelintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ rules:
1111
no-descending-specificity: null
1212
number-leading-zero: never
1313
rule-empty-line-before: null
14-
selector-pseudo-element-colon-notation: null
14+
selector-pseudo-element-colon-notation: double
1515
shorthand-property-no-redundant-values: true

‎templates/admin/user/edit.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
</div>
9191
</div>
9292
<div class="inline field">
93-
<div class="ui checkbox" data-tooltip="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}">
93+
<div class="ui checkbox poping up" data-content="{{.i18n.Tr "admin.users.allow_git_hook_tooltip"}}" data-variation="very wide">
9494
<label><strong>{{.i18n.Tr "admin.users.allow_git_hook"}}</strong></label>
9595
<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
9696
</div>

‎templates/repo/commits_table.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<input type="checkbox" name="all" id="all" value="true" {{.All}}>
1818
<label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
1919
</div>
20-
<button class="ui primary tiny button mr-0" data-panel="#add-deploy-key-panel" data-tooltip={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
20+
<button class="ui primary tiny button mr-0 poping up" data-panel="#add-deploy-key-panel" data-content={{.i18n.Tr "repo.commits.search.tooltip"}}>{{.i18n.Tr "repo.commits.find"}}</button>
2121
</form>
2222
{{else if .IsDiffCompare}}
2323
<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>

‎templates/repo/create.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<input class="hidden" name="git_content" type="checkbox" tabindex="0" {{if .git_content}}checked{{end}}>
7474
<label>{{.i18n.Tr "repo.template.git_content"}}</label>
7575
</div>
76-
<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
76+
<div class="ui checkbox{{if not .SignedUser.CanEditGitHook}} poping up{{end}}"{{if not .SignedUser.CanEditGitHook}} data-content="{{.i18n.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
7777
<input class="hidden" name="git_hooks" type="checkbox" tabindex="0" {{if .git_hooks}}checked{{end}}>
7878
<label>{{.i18n.Tr "repo.template.git_hooks"}}</label>
7979
</div>

‎templates/repo/issue/view_content/sidebar.tmpl

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -434,32 +434,35 @@
434434
{{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}}
435435
<span class="text"><strong>{{.i18n.Tr "repo.issues.dependency.title"}}</strong></span>
436436
<br>
437-
<p>{{if .Issue.IsPull}}
437+
<p>
438+
{{if .Issue.IsPull}}
438439
{{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}}
439440
{{else}}
440441
{{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}}
441-
{{end}}</p>
442+
{{end}}
443+
</p>
442444
{{end}}
443445

444446
{{if .BlockingDependencies}}
445-
<span class="text" data-tooltip="{{if .Issue.IsPull}}
446-
{{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}
447-
{{else}}
448-
{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}
449-
{{end}}" data-inverted="">
450-
<strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
447+
<span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_close_blocks"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}{{end}}">
448+
<strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
451449
</span>
452450
<div class="ui relaxed divided list">
453451
{{range .BlockingDependencies}}
454-
<div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
455-
<span class="text grey right floated">#{{.Issue.Index}}</span>
456-
<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
457-
<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
458-
<div class="ui transparent label right floated nopadding">
452+
<div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
453+
<div class="item-left df jc fc f1">
454+
<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
455+
#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
456+
</a>
457+
<div class="text small">
458+
{{.Repository.OwnerName}}/{{.Repository.Name}}
459+
</div>
460+
</div>
461+
<div class="item-right df ac">
459462
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
460-
<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
461-
data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
462-
<i class="delete icon text red nopadding nomargin"></i>
463+
<a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
464+
data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
465+
{{svg "octicon-trashcan" 16}}
463466
</a>
464467
{{end}}
465468
</div>
@@ -469,24 +472,25 @@
469472
{{end}}
470473

471474
{{if .BlockedByDependencies}}
472-
<span class="text" data-tooltip="{{if .Issue.IsPull}}
473-
{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}
474-
{{else}}
475-
{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}
476-
{{end}}" data-inverted="">
477-
<strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
475+
<span class="text poping up" data-content="{{if .Issue.IsPull}}{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}{{else}}{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}{{end}}">
476+
<strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
478477
</span>
479478
<div class="ui relaxed divided list">
480479
{{range .BlockedByDependencies}}
481-
<div class="item{{if .Issue.IsClosed}} is-closed{{end}}">
482-
<span class="text grey right floated">#{{.Issue.Index}}</span>
483-
<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">{{.Issue.Title | RenderEmoji}}</a>
484-
<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
485-
<div class="ui transparent label right floated nopadding">
480+
<div class="item{{if .Issue.IsClosed}} is-closed{{end}} df ac sb">
481+
<div class="item-left df jc fc f1">
482+
<a class="title" href="{{.Repository.Link}}/issues/{{.Issue.Index}}">
483+
#{{.Issue.Index}} {{.Issue.Title | RenderEmoji}}
484+
</a>
485+
<div class="text small">
486+
{{.Repository.OwnerName}}/{{.Repository.Name}}
487+
</div>
488+
</div>
489+
<div class="item-right df ac">
486490
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
487-
<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
488-
data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
489-
<i class="delete icon text red nopadding nomargin"></i>
491+
<a class="delete-dependency-button poping up ci" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
492+
data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
493+
{{svg "octicon-trashcan" 16}}
490494
</a>
491495
{{end}}
492496
</div>

‎templates/repo/release/list.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@
152152
{{if .Attachments}}
153153
{{range .Attachments}}
154154
<li>
155-
<span class="ui text right" data-tooltip="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}" data-position="bottom right">{{svg "octicon-info"}}</span>
155+
<span class="ui text right poping up" data-content="{{$.i18n.Tr "repo.release.download_count" (.DownloadCount | PrettyNumber)}}">
156+
{{svg "octicon-info"}}
157+
</span>
156158
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
157159
<strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong>
158160
<span class="ui text grey right">{{.Size | FileSize}}</span>

‎templates/repo/view_file.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323
{{end}}
2424
{{if .LFSLock}}
25-
<div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
25+
<div class="file-info-entry ui poping up" data-content="{{.LFSLockHint}}">
2626
{{svg "octicon-lock" 16 "mr-2"}}
2727
<a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
2828
</div>

‎web_src/less/_base.less

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -362,10 +362,6 @@ a:hover,
362362
background-color: transparent;
363363
}
364364

365-
&.nopadding {
366-
padding: 0;
367-
}
368-
369365
&.menu,
370366
&.vertical.menu,
371367
&.segment {
@@ -506,14 +502,6 @@ a:hover,
506502
&.middle {
507503
vertical-align: middle;
508504
}
509-
510-
&.nopadding {
511-
padding: 0;
512-
}
513-
514-
&.nomargin {
515-
margin: 0;
516-
}
517505
}
518506

519507
.message {
@@ -952,7 +940,7 @@ footer {
952940
background: rgba(0, 0, 0, .2);
953941
}
954942

955-
.ui.menu.new-menu:after {
943+
.ui.menu.new-menu::after {
956944
position: absolute;
957945
margin-top: -15px;
958946
display: block;
@@ -1049,12 +1037,12 @@ i.icon.centerlock {
10491037

10501038
span {
10511039
&.bottom-line {
1052-
&:after {
1040+
&::after {
10531041
border-bottom: 1px solid #eaecef;
10541042
}
10551043
}
10561044

1057-
&:after {
1045+
&::after {
10581046
content: attr(data-line-number);
10591047
line-height: 20px !important;
10601048
padding: 0 10px;
@@ -1271,6 +1259,37 @@ i.icon.centerlock {
12711259
}
12721260
}
12731261

1262+
.ui.popup {
1263+
background-color: var(--color-body);
1264+
color: var(--color-secondary-dark-6);
1265+
border-color: var(--color-secondary);
1266+
}
1267+
1268+
.ui.popup::before {
1269+
box-shadow: 1px 1px 0 0 var(--color-secondary);
1270+
}
1271+
1272+
.ui.bottom.popup::before,
1273+
.ui.top.popup::before,
1274+
.ui.right.center.popup::before,
1275+
.ui.left.center.popup::before {
1276+
background-color: var(--color-body);
1277+
}
1278+
1279+
.ui.bottom.left.popup::before,
1280+
.ui.bottom.right.popup::before,
1281+
.ui.bottom.center.popup::before {
1282+
box-shadow: -1px -1px 0 0 var(--color-secondary);
1283+
}
1284+
1285+
.ui.left.center.popup::before {
1286+
box-shadow: 1px -1px 0 0 var(--color-secondary);
1287+
}
1288+
1289+
.ui.right.center.popup::before {
1290+
box-shadow: -1px 1px 0 0 var(--color-secondary);
1291+
}
1292+
12741293
.ui.popup .ui.label {
12751294
margin-bottom: .4em;
12761295
}

‎web_src/less/_markdown.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -403,10 +403,10 @@
403403
border: 0;
404404
}
405405

406-
pre code:before,
407-
pre code:after,
408-
pre tt:before,
409-
pre tt:after {
406+
pre code::before,
407+
pre code::after,
408+
pre tt::before,
409+
pre tt::after {
410410
content: normal;
411411
}
412412

0 commit comments

Comments
 (0)