mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
Replace fomantic popup module with tippy.js (#20428)
- replace fomantic popup module with tippy.js - fix chaining and add comment - add 100ms delay to tooltips - stopwatch improvments, raise default maxWidth - update web_src/js/features/common-global.js - use type=submit instead of js
This commit is contained in:
parent
36f9ee5813
commit
1b2cd4c4e1
@ -117,7 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline field"{{if DisableGitHooks}} hidden{{end}}>
|
<div class="inline field"{{if DisableGitHooks}} hidden{{end}}>
|
||||||
<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}" data-variation="very wide">
|
<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}">
|
||||||
<label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label>
|
<label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label>
|
||||||
<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
|
<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>
|
||||||
</div>
|
</div>
|
||||||
|
@ -86,10 +86,10 @@
|
|||||||
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
|
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="ui popup very wide">
|
<div class="active-stopwatch-popup hide">
|
||||||
<div class="df ac">
|
<div class="df ac">
|
||||||
<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
|
<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
|
||||||
{{svg "octicon-issue-opened"}}
|
{{svg "octicon-issue-opened" 16 "mr-3"}}
|
||||||
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
|
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
|
||||||
<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
|
<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
|
||||||
{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
|
{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
|
||||||
@ -98,6 +98,7 @@
|
|||||||
<form class="stopwatch-commit" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
|
<form class="stopwatch-commit" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
|
||||||
{{.CsrfTokenHtml}}
|
{{.CsrfTokenHtml}}
|
||||||
<button
|
<button
|
||||||
|
type="submit"
|
||||||
class="ui button mini compact basic icon fitted tooltip"
|
class="ui button mini compact basic icon fitted tooltip"
|
||||||
data-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
|
data-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
|
||||||
data-position="top right"
|
data-position="top right"
|
||||||
@ -106,6 +107,7 @@
|
|||||||
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
|
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
|
||||||
{{.CsrfTokenHtml}}
|
{{.CsrfTokenHtml}}
|
||||||
<button
|
<button
|
||||||
|
type="submit"
|
||||||
class="ui button mini compact basic icon fitted tooltip"
|
class="ui button mini compact basic icon fitted tooltip"
|
||||||
data-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
|
data-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
|
||||||
data-position="top right"
|
data-position="top right"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<a class="ui link commit-statuses-trigger">{{template "repo/commit_status" .Status}}</a>
|
<a class="ui link commit-statuses-trigger">{{template "repo/commit_status" .Status}}</a>
|
||||||
<div class="ui popup very wide fixed basic commit-statuses">
|
<div class="ui commit-statuses-popup commit-statuses hide">
|
||||||
<div class="ui relaxed list divided">
|
<div class="ui relaxed list divided">
|
||||||
{{range .Statuses}}
|
{{range .Statuses}}
|
||||||
<div class="ui item singular-status df">
|
<div class="ui item singular-status df">
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
{{Add .file.Addition .file.Deletion}}
|
{{Add .file.Addition .file.Deletion}}
|
||||||
<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
|
<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}">
|
||||||
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
|
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -98,7 +98,7 @@
|
|||||||
{{else if and (not $.CanSignedUserFork) (eq (len $.UserAndOrgForks) 0)}}
|
{{else if and (not $.CanSignedUserFork) (eq (len $.UserAndOrgForks) 0)}}
|
||||||
data-content="{{$.locale.Tr "repo.fork_from_self"}}"
|
data-content="{{$.locale.Tr "repo.fork_from_self"}}"
|
||||||
{{end}}
|
{{end}}
|
||||||
data-position="top center" data-variation="tiny" tabindex="0">
|
data-position="top center" tabindex="0">
|
||||||
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
|
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
|
||||||
{{if not $.CanSignedUserFork}}
|
{{if not $.CanSignedUserFork}}
|
||||||
{{if gt (len $.UserAndOrgForks) 1}}
|
{{if gt (len $.UserAndOrgForks) 1}}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
<div class="header">{{ .ctx.locale.Tr "repo.pick_reaction"}}</div>
|
<div class="header">{{ .ctx.locale.Tr "repo.pick_reaction"}}</div>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
{{range $value := AllowedReactions}}
|
{{range $value := AllowedReactions}}
|
||||||
<div class="item reaction" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
|
<div class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,7 +56,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="left floated content">
|
<div class="left floated content">
|
||||||
<i class="{{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}>{{svg "octicon-key" 32}}</i>
|
<i class="tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<strong>{{.Name}}</strong>
|
<strong>{{.Name}}</strong>
|
||||||
|
@ -44,7 +44,7 @@
|
|||||||
<div class="right menu">
|
<div class="right menu">
|
||||||
<form class="item" action="{{$.Link}}/replay/{{.UUID}}" method="post">
|
<form class="item" action="{{$.Link}}/replay/{{.UUID}}" method="post">
|
||||||
{{$.CsrfTokenHtml}}
|
{{$.CsrfTokenHtml}}
|
||||||
<button class="ui tiny button tooltip" data-content="{{$.locale.Tr "repo.settings.webhook.replay.description"}}" data-variation="inverted tiny">{{svg "octicon-sync"}}</button>
|
<button class="ui tiny button tooltip" data-content="{{$.locale.Tr "repo.settings.webhook.replay.description"}}">{{svg "octicon-sync"}}</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -120,22 +120,12 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="code-line-menu ui fluid popup transition hidden">
|
<div class="code-line-menu ui vertical pointing menu hide">
|
||||||
<div class="ui column relaxed equal height">
|
{{if $.Permission.CanRead $.UnitTypeIssues}}
|
||||||
<div class="column">
|
<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
|
||||||
{{if $.Permission.CanRead $.UnitTypeIssues}}
|
{{end}}
|
||||||
<div class="ui link list">
|
<a class="item view_git_blame" href="{{.Repository.HTMLURL}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.view_git_blame"}}</a>
|
||||||
<a class="item ref-in-new-issue" href="{{.RepoLink}}/issues/new?body={{.Repository.HTMLURL}}{{printf "/src/commit/" }}{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" rel="nofollow noindex">{{.locale.Tr "repo.issues.context.reference_issue"}}</a>
|
<a class="item copy-line-permalink" data-url="{{.Repository.HTMLURL}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_copy_permalink"}}</a>
|
||||||
</div>
|
|
||||||
{{end}}
|
|
||||||
<div class="ui link list">
|
|
||||||
<a class="item view_git_blame" href="{{.Repository.HTMLURL}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.view_git_blame"}}</a>
|
|
||||||
</div>
|
|
||||||
<div class="ui link list">
|
|
||||||
<a data-clipboard-text="{{.Repository.HTMLURL}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}" class="item copy-line-permalink">{{.locale.Tr "repo.file_copy_permalink"}}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
{{$.locale.Tr "settings.delete_token"}}
|
{{$.locale.Tr "settings.delete_token"}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
|
<i class="big send icon tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.token_state_desc"}}"{{end}}></i>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<strong>{{.Name}}</strong>
|
<strong>{{.Name}}</strong>
|
||||||
<div class="activity meta">
|
<div class="activity meta">
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
{{$.locale.Tr "settings.delete_key"}}
|
{{$.locale.Tr "settings.delete_key"}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.principal_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
|
<i class="big send icon tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.principal_state_desc"}}"{{end}}></i>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<strong>{{.Name}}</strong>
|
<strong>{{.Name}}</strong>
|
||||||
<div class="activity meta">
|
<div class="activity meta">
|
||||||
|
@ -47,7 +47,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="left floated content">
|
<div class="left floated content">
|
||||||
<span class="{{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}>{{svg "octicon-key" 32}}</span>
|
<span class="tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{{if .Verified}}
|
{{if .Verified}}
|
||||||
|
421
web_src/fomantic/build/semantic.css
generated
421
web_src/fomantic/build/semantic.css
generated
@ -34446,427 +34446,6 @@ Floated Menu / Item
|
|||||||
/*******************************
|
/*******************************
|
||||||
Site Overrides
|
Site Overrides
|
||||||
*******************************/
|
*******************************/
|
||||||
/*!
|
|
||||||
* # Fomantic-UI - Popup
|
|
||||||
* http://github.com/fomantic/Fomantic-UI/
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* Released under the MIT license
|
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Popup
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
/* Fixes content being squished when inline (moz only) */
|
|
||||||
min-width: -webkit-min-content;
|
|
||||||
min-width: -moz-min-content;
|
|
||||||
min-width: min-content;
|
|
||||||
z-index: 1900;
|
|
||||||
border: 1px solid #D4D4D5;
|
|
||||||
line-height: 1.4285em;
|
|
||||||
max-width: 250px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
padding: 0.833em 1em;
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
border-radius: 0.28571429rem;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup > .header {
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--fonts-regular);
|
|
||||||
font-size: 1.14285714em;
|
|
||||||
line-height: 1.2;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup > .header + .content {
|
|
||||||
padding-top: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 0.71428571em;
|
|
||||||
height: 0.71428571em;
|
|
||||||
background: #FFFFFF;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
z-index: 1901;
|
|
||||||
box-shadow: 1px 1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Types
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Spacing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Top */
|
|
||||||
|
|
||||||
.ui.top.popup {
|
|
||||||
margin: 0 0 0.71428571em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.left.popup {
|
|
||||||
transform-origin: left bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.center.popup {
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.right.popup {
|
|
||||||
transform-origin: right bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Vertical Center */
|
|
||||||
|
|
||||||
.ui.left.center.popup {
|
|
||||||
margin: 0 0.71428571em 0 0;
|
|
||||||
transform-origin: right 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.right.center.popup {
|
|
||||||
margin: 0 0 0 0.71428571em;
|
|
||||||
transform-origin: left 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extending from Bottom */
|
|
||||||
|
|
||||||
.ui.bottom.popup {
|
|
||||||
margin: 0.71428571em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.left.popup {
|
|
||||||
transform-origin: left top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.center.popup {
|
|
||||||
transform-origin: center top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.right.popup {
|
|
||||||
transform-origin: right top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Pointer
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/*--- Below ---*/
|
|
||||||
|
|
||||||
.ui.bottom.center.popup:before {
|
|
||||||
margin-left: -0.30714286em;
|
|
||||||
top: -0.30714286em;
|
|
||||||
left: 50%;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
box-shadow: -1px -1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.left.popup {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.bottom.left.popup:before {
|
|
||||||
top: -0.30714286em;
|
|
||||||
left: 1em;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
box-shadow: -1px -1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.right.popup {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.bottom.right.popup:before {
|
|
||||||
top: -0.30714286em;
|
|
||||||
right: 1em;
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
box-shadow: -1px -1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Above ---*/
|
|
||||||
|
|
||||||
.ui.top.center.popup:before {
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: -0.30714286em;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -0.30714286em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.left.popup {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.top.left.popup:before {
|
|
||||||
bottom: -0.30714286em;
|
|
||||||
left: 1em;
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.right.popup {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.top.right.popup:before {
|
|
||||||
bottom: -0.30714286em;
|
|
||||||
right: 1em;
|
|
||||||
top: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Left Center ---*/
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.left.center.popup:before {
|
|
||||||
top: 50%;
|
|
||||||
right: -0.30714286em;
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
margin-top: -0.30714286em;
|
|
||||||
box-shadow: 1px -1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--- Right Center ---*/
|
|
||||||
|
|
||||||
/*rtl:rename*/
|
|
||||||
|
|
||||||
.ui.right.center.popup:before {
|
|
||||||
top: 50%;
|
|
||||||
left: -0.30714286em;
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
margin-top: -0.30714286em;
|
|
||||||
box-shadow: -1px 1px 0 0 #bababc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.right.center.popup:before,
|
|
||||||
.ui.left.center.popup:before {
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow Color By Location */
|
|
||||||
|
|
||||||
.ui.bottom.popup:before {
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.top.popup:before {
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted Arrow Color */
|
|
||||||
|
|
||||||
.ui.inverted.bottom.popup:before {
|
|
||||||
background: #1B1C1D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.right.center.popup:before,
|
|
||||||
.ui.inverted.left.center.popup:before {
|
|
||||||
background: #1B1C1D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.top.popup:before {
|
|
||||||
background: #1B1C1D;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Coupling
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/* Immediate Nested Grid */
|
|
||||||
|
|
||||||
.ui.popup > .ui.grid:not(.padded) {
|
|
||||||
width: calc(100% + 1.75rem);
|
|
||||||
margin: -0.7rem -0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
States
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
.ui.loading.popup {
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.animating.popup,
|
|
||||||
.ui.visible.popup {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.visible.popup {
|
|
||||||
transform: translateZ(0);
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Variations
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Basic
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.basic.popup:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.fixed.popup {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Wide
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.wide.popup {
|
|
||||||
max-width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.wide.popup.fixed {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="very wide"].popup {
|
|
||||||
max-width: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui[class*="very wide"].popup.fixed {
|
|
||||||
width: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 767.98px) {
|
|
||||||
.ui.wide.popup,
|
|
||||||
.ui[class*="very wide"].popup {
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.wide.popup.fixed,
|
|
||||||
.ui[class*="very wide"].popup.fixed {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Fluid
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.fluid.popup {
|
|
||||||
width: 100%;
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Colors
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
/* Inverted colors */
|
|
||||||
|
|
||||||
.ui.inverted.popup {
|
|
||||||
background: #1B1C1D;
|
|
||||||
color: #FFFFFF;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.popup .header {
|
|
||||||
background-color: none;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.inverted.popup:before {
|
|
||||||
background-color: #1B1C1D;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Flowing
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.flowing.popup {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------
|
|
||||||
Sizes
|
|
||||||
---------------*/
|
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.mini.popup {
|
|
||||||
font-size: 0.78571429rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.tiny.popup {
|
|
||||||
font-size: 0.85714286rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.small.popup {
|
|
||||||
font-size: 0.92857143rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.large.popup {
|
|
||||||
font-size: 1.14285714rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.big.popup {
|
|
||||||
font-size: 1.28571429rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.huge.popup {
|
|
||||||
font-size: 1.42857143rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.massive.popup {
|
|
||||||
font-size: 1.71428571rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
Theme Overrides
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
/*******************************
|
|
||||||
User Overrides
|
|
||||||
*******************************/
|
|
||||||
/*!
|
/*!
|
||||||
* # Fomantic-UI - Reset
|
* # Fomantic-UI - Reset
|
||||||
* http://github.com/fomantic/Fomantic-UI/
|
* http://github.com/fomantic/Fomantic-UI/
|
||||||
|
1542
web_src/fomantic/build/semantic.js
generated
1542
web_src/fomantic/build/semantic.js
generated
File diff suppressed because it is too large
Load Diff
@ -44,7 +44,6 @@
|
|||||||
"menu",
|
"menu",
|
||||||
"message",
|
"message",
|
||||||
"modal",
|
"modal",
|
||||||
"popup",
|
|
||||||
"reset",
|
"reset",
|
||||||
"search",
|
"search",
|
||||||
"segment",
|
"segment",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {initVueSvg, vueDelimiters} from './VueComponentLoader.js';
|
import {initVueSvg, vueDelimiters} from './VueComponentLoader.js';
|
||||||
|
import {initTooltip} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {appSubUrl, assetUrlPrefix, pageData} = window.config;
|
const {appSubUrl, assetUrlPrefix, pageData} = window.config;
|
||||||
|
|
||||||
@ -138,7 +139,9 @@ function initVueComponents() {
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.changeReposFilter(this.reposFilter);
|
this.changeReposFilter(this.reposFilter);
|
||||||
$(this.$el).find('.tooltip').popup();
|
for (const el of this.$el.querySelectorAll('.tooltip')) {
|
||||||
|
initTooltip(el);
|
||||||
|
}
|
||||||
$(this.$el).find('.dropdown').dropdown();
|
$(this.$el).find('.dropdown').dropdown();
|
||||||
this.setCheckboxes();
|
this.setCheckboxes();
|
||||||
Vue.nextTick(() => {
|
Vue.nextTick(() => {
|
||||||
|
@ -1,24 +1,15 @@
|
|||||||
import $ from 'jquery';
|
import {showTemporaryTooltip} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {copy_success, copy_error} = window.config.i18n;
|
const {copy_success, copy_error} = window.config.i18n;
|
||||||
|
|
||||||
function onSuccess(btn) {
|
export async function copyToClipboard(text) {
|
||||||
btn.setAttribute('data-variation', 'inverted tiny');
|
try {
|
||||||
$(btn).popup('destroy');
|
await navigator.clipboard.writeText(text);
|
||||||
const oldContent = btn.getAttribute('data-content');
|
} catch {
|
||||||
btn.setAttribute('data-content', copy_success);
|
return fallbackCopyToClipboard(text);
|
||||||
$(btn).popup('show');
|
}
|
||||||
btn.setAttribute('data-content', oldContent || '');
|
return true;
|
||||||
}
|
}
|
||||||
function onError(btn) {
|
|
||||||
btn.setAttribute('data-variation', 'inverted tiny');
|
|
||||||
const oldContent = btn.getAttribute('data-content');
|
|
||||||
$(btn).popup('destroy');
|
|
||||||
btn.setAttribute('data-content', copy_error);
|
|
||||||
$(btn).popup('show');
|
|
||||||
btn.setAttribute('data-content', oldContent || '');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Fallback to use if navigator.clipboard doesn't exist. Achieved via creating
|
// Fallback to use if navigator.clipboard doesn't exist. Achieved via creating
|
||||||
// a temporary textarea element, selecting the text, and using document.execCommand
|
// a temporary textarea element, selecting the text, and using document.execCommand
|
||||||
@ -60,16 +51,8 @@ export default function initGlobalCopyToClipboardListener() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
(async() => {
|
(async() => {
|
||||||
try {
|
const success = await copyToClipboard(text);
|
||||||
await navigator.clipboard.writeText(text);
|
showTemporaryTooltip(target, success ? copy_success : copy_error);
|
||||||
onSuccess(target);
|
|
||||||
} catch {
|
|
||||||
if (fallbackCopyToClipboard(text)) {
|
|
||||||
onSuccess(target);
|
|
||||||
} else {
|
|
||||||
onError(target);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
@ -6,6 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js';
|
|||||||
import {showGlobalErrorMessage} from '../bootstrap.js';
|
import {showGlobalErrorMessage} from '../bootstrap.js';
|
||||||
import {attachDropdownAria} from './aria.js';
|
import {attachDropdownAria} from './aria.js';
|
||||||
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
|
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
|
||||||
|
import {initTooltip} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {appUrl, csrfToken} = window.config;
|
const {appUrl, csrfToken} = window.config;
|
||||||
|
|
||||||
@ -62,18 +63,10 @@ export function initGlobalButtonClickOnEnter() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initPopup(target) {
|
export function initGlobalTooltips() {
|
||||||
const $el = $(target);
|
for (const el of document.getElementsByClassName('tooltip')) {
|
||||||
const attr = $el.attr('data-variation');
|
initTooltip(el);
|
||||||
const attrs = attr ? attr.split(' ') : [];
|
}
|
||||||
const variations = new Set([...attrs, 'inverted', 'tiny']);
|
|
||||||
$el.attr('data-variation', [...variations].join(' ')).popup();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function initGlobalPopups() {
|
|
||||||
$('.tooltip').each((_, el) => {
|
|
||||||
initPopup(el);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initGlobalCommon() {
|
export function initGlobalCommon() {
|
||||||
@ -106,7 +99,12 @@ export function initGlobalCommon() {
|
|||||||
$uiDropdowns.filter('.jump').dropdown({
|
$uiDropdowns.filter('.jump').dropdown({
|
||||||
action: 'hide',
|
action: 'hide',
|
||||||
onShow() {
|
onShow() {
|
||||||
$('.tooltip').popup('hide');
|
// hide associated tooltip while dropdown is open
|
||||||
|
this._tippy?.hide();
|
||||||
|
this._tippy?.disable();
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
this._tippy?.enable();
|
||||||
},
|
},
|
||||||
fullTextSearch: 'exact'
|
fullTextSearch: 'exact'
|
||||||
});
|
});
|
||||||
@ -122,13 +120,6 @@ export function initGlobalCommon() {
|
|||||||
|
|
||||||
$('.ui.checkbox').checkbox();
|
$('.ui.checkbox').checkbox();
|
||||||
|
|
||||||
$('.top.menu .tooltip').popup({
|
|
||||||
onShow() {
|
|
||||||
if ($('.top.menu .menu.transition').hasClass('visible')) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('.tabular.menu .item').tab();
|
$('.tabular.menu .item').tab();
|
||||||
$('.tabable.menu .item').tab();
|
$('.tabable.menu .item').tab();
|
||||||
|
|
||||||
|
@ -1,16 +1,20 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
|
import {createTippy} from '../../modules/tippy.js';
|
||||||
|
|
||||||
const {csrfToken} = window.config;
|
const {csrfToken} = window.config;
|
||||||
|
|
||||||
export function initCompReactionSelector(parent) {
|
export function initCompReactionSelector(parent) {
|
||||||
let reactions = '';
|
let selector = 'a.label';
|
||||||
if (!parent) {
|
if (!parent) {
|
||||||
parent = $(document);
|
parent = $(document);
|
||||||
reactions = '.reactions > ';
|
selector = `.reactions ${selector}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
parent.find(`${reactions}a.label`).popup({position: 'bottom left', metadata: {content: 'title', title: 'none'}});
|
for (const el of parent[0].querySelectorAll(selector)) {
|
||||||
|
createTippy(el, {placement: 'bottom-start', content: el.getAttribute('data-title')});
|
||||||
|
}
|
||||||
|
|
||||||
parent.find(`.select-reaction > .menu > .item, ${reactions}a.label`).on('click', function (e) {
|
parent.find(`.select-reaction > .menu > .item, ${selector}`).on('click', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
if ($(this).hasClass('disabled')) return;
|
if ($(this).hasClass('disabled')) return;
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {svg} from '../svg.js';
|
import {svg} from '../svg.js';
|
||||||
import {invertFileFolding} from './file-fold.js';
|
import {invertFileFolding} from './file-fold.js';
|
||||||
|
import {createTippy} from '../modules/tippy.js';
|
||||||
|
import {copyToClipboard} from './clipboard.js';
|
||||||
|
|
||||||
function changeHash(hash) {
|
function changeHash(hash) {
|
||||||
if (window.history.pushState) {
|
if (window.history.pushState) {
|
||||||
@ -39,13 +41,13 @@ function selectRange($list, $select, $from) {
|
|||||||
$viewGitBlame.attr('href', href);
|
$viewGitBlame.attr('href', href);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateCopyPermalinkHref = function(anchor) {
|
const updateCopyPermalinkUrl = function(anchor) {
|
||||||
if ($copyPermalink.length === 0) {
|
if ($copyPermalink.length === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let link = $copyPermalink.attr('data-clipboard-text');
|
let link = $copyPermalink.attr('data-url');
|
||||||
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
|
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
|
||||||
$copyPermalink.attr('data-clipboard-text', link);
|
$copyPermalink.attr('data-url', link);
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($from) {
|
if ($from) {
|
||||||
@ -67,7 +69,7 @@ function selectRange($list, $select, $from) {
|
|||||||
|
|
||||||
updateIssueHref(`L${a}-L${b}`);
|
updateIssueHref(`L${a}-L${b}`);
|
||||||
updateViewGitBlameFragment(`L${a}-L${b}`);
|
updateViewGitBlameFragment(`L${a}-L${b}`);
|
||||||
updateCopyPermalinkHref(`L${a}-L${b}`);
|
updateCopyPermalinkUrl(`L${a}-L${b}`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -76,17 +78,36 @@ function selectRange($list, $select, $from) {
|
|||||||
|
|
||||||
updateIssueHref($select.attr('rel'));
|
updateIssueHref($select.attr('rel'));
|
||||||
updateViewGitBlameFragment($select.attr('rel'));
|
updateViewGitBlameFragment($select.attr('rel'));
|
||||||
updateCopyPermalinkHref($select.attr('rel'));
|
updateCopyPermalinkUrl($select.attr('rel'));
|
||||||
}
|
}
|
||||||
|
|
||||||
function showLineButton() {
|
function showLineButton() {
|
||||||
if ($('.code-line-menu').length === 0) return;
|
const menu = document.querySelector('.code-line-menu');
|
||||||
$('.code-line-button').remove();
|
if (!menu) return;
|
||||||
$('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').first().prepend(
|
|
||||||
$(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
|
// remove all other line buttons
|
||||||
);
|
for (const el of document.querySelectorAll('.code-line-button')) {
|
||||||
$('.code-line-menu').appendTo($('.code-view'));
|
el.remove();
|
||||||
$('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
|
}
|
||||||
|
|
||||||
|
// find active row and add button
|
||||||
|
const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
|
||||||
|
const td = tr.querySelector('td');
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.classList.add('code-line-button');
|
||||||
|
btn.innerHTML = svg('octicon-kebab-horizontal');
|
||||||
|
td.prepend(btn);
|
||||||
|
|
||||||
|
// put a copy of the menu back into DOM for the next click
|
||||||
|
btn.closest('.code-view').appendChild(menu.cloneNode(true));
|
||||||
|
|
||||||
|
createTippy(btn, {
|
||||||
|
trigger: 'click',
|
||||||
|
content: menu,
|
||||||
|
placement: 'right-start',
|
||||||
|
role: 'menu',
|
||||||
|
interactive: 'true',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initRepoCodeView() {
|
export function initRepoCodeView() {
|
||||||
@ -159,4 +180,9 @@ export function initRepoCodeView() {
|
|||||||
const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
|
const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
|
||||||
currentTarget.closest('tr').outerHTML = blob;
|
currentTarget.closest('tr').outerHTML = blob;
|
||||||
});
|
});
|
||||||
|
$(document).on('click', '.copy-line-permalink', async (e) => {
|
||||||
|
const success = await copyToClipboard(e.currentTarget.getAttribute('data-url'));
|
||||||
|
if (!success) return;
|
||||||
|
document.querySelector('.code-line-button')?._tippy?.hide();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
|
import {createTippy} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {csrfToken} = window.config;
|
const {csrfToken} = window.config;
|
||||||
|
|
||||||
@ -58,12 +59,12 @@ export function initRepoCommitLastCommitLoader() {
|
|||||||
export function initCommitStatuses() {
|
export function initCommitStatuses() {
|
||||||
$('.commit-statuses-trigger').each(function () {
|
$('.commit-statuses-trigger').each(function () {
|
||||||
const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
|
const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
|
||||||
const popupPosition = positionRight ? 'right center' : 'left center';
|
|
||||||
$(this)
|
createTippy(this, {
|
||||||
.popup({
|
trigger: 'click',
|
||||||
on: 'click',
|
content: this.nextSibling,
|
||||||
lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
|
placement: positionRight ? 'right' : 'left',
|
||||||
position: popupPosition,
|
interactive: true,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
|
|||||||
import {initRepoIssueContentHistory} from './repo-issue-content.js';
|
import {initRepoIssueContentHistory} from './repo-issue-content.js';
|
||||||
import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
|
import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
|
||||||
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
|
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
|
||||||
import {initPopup} from './common-global.js';
|
import {initTooltip} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {csrfToken} = window.config;
|
const {csrfToken} = window.config;
|
||||||
|
|
||||||
@ -53,7 +53,7 @@ export function initRepoDiffConversationForm() {
|
|||||||
const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
|
const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
|
||||||
const {path, side, idx} = newConversationHolder.data();
|
const {path, side, idx} = newConversationHolder.data();
|
||||||
|
|
||||||
initPopup(newConversationHolder.find('.tooltip'));
|
initTooltip(newConversationHolder.find('.tooltip'));
|
||||||
form.closest('.conversation-holder').replaceWith(newConversationHolder);
|
form.closest('.conversation-holder').replaceWith(newConversationHolder);
|
||||||
if (form.closest('tr').data('line-type') === 'same') {
|
if (form.closest('tr').data('line-type') === 'same') {
|
||||||
$(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
|
$(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
|
||||||
|
@ -4,6 +4,7 @@ import attachTribute from './tribute.js';
|
|||||||
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
|
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
|
||||||
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
|
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
|
||||||
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
|
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
|
||||||
|
import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {appSubUrl, csrfToken} = window.config;
|
const {appSubUrl, csrfToken} = window.config;
|
||||||
|
|
||||||
@ -278,7 +279,8 @@ export function initRepoPullRequestAllowMaintainerEdit() {
|
|||||||
|
|
||||||
const promptTip = $checkbox.attr('data-prompt-tip');
|
const promptTip = $checkbox.attr('data-prompt-tip');
|
||||||
const promptError = $checkbox.attr('data-prompt-error');
|
const promptError = $checkbox.attr('data-prompt-error');
|
||||||
$checkbox.popup({content: promptTip});
|
|
||||||
|
initTooltip($checkbox[0], {content: promptTip});
|
||||||
$checkbox.checkbox({
|
$checkbox.checkbox({
|
||||||
'onChange': () => {
|
'onChange': () => {
|
||||||
const checked = $checkbox.checkbox('is checked');
|
const checked = $checkbox.checkbox('is checked');
|
||||||
@ -288,14 +290,7 @@ export function initRepoPullRequestAllowMaintainerEdit() {
|
|||||||
$.ajax({url, type: 'POST',
|
$.ajax({url, type: 'POST',
|
||||||
data: {_csrf: csrfToken, allow_maintainer_edit: checked},
|
data: {_csrf: csrfToken, allow_maintainer_edit: checked},
|
||||||
error: () => {
|
error: () => {
|
||||||
$checkbox.popup({
|
showTemporaryTooltip($checkbox[0], promptError);
|
||||||
content: promptError,
|
|
||||||
onHidden: () => {
|
|
||||||
// the error popup should be shown only once, then we restore the popup to the default message
|
|
||||||
$checkbox.popup({content: promptTip});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
$checkbox.popup('show');
|
|
||||||
},
|
},
|
||||||
complete: () => {
|
complete: () => {
|
||||||
$checkbox.checkbox('set enabled');
|
$checkbox.checkbox('set enabled');
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import prettyMilliseconds from 'pretty-ms';
|
import prettyMilliseconds from 'pretty-ms';
|
||||||
|
import {createTippy} from '../modules/tippy.js';
|
||||||
|
|
||||||
const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
|
const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
|
||||||
|
|
||||||
@ -8,21 +9,21 @@ export function initStopwatch() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const stopwatchEl = $('.active-stopwatch-trigger');
|
const stopwatchEl = document.querySelector('.active-stopwatch-trigger');
|
||||||
|
const stopwatchPopup = document.querySelector('.active-stopwatch-popup');
|
||||||
|
|
||||||
if (!stopwatchEl.length) {
|
if (!stopwatchEl || !stopwatchPopup) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
stopwatchEl.removeAttr('href'); // intended for noscript mode only
|
stopwatchEl.removeAttribute('href'); // intended for noscript mode only
|
||||||
stopwatchEl.popup({
|
|
||||||
position: 'bottom right',
|
|
||||||
hoverable: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// form handlers
|
createTippy(stopwatchEl, {
|
||||||
$('form > button', stopwatchEl).on('click', function () {
|
content: stopwatchPopup,
|
||||||
$(this).parent().trigger('submit');
|
placement: 'bottom-end',
|
||||||
|
trigger: 'click',
|
||||||
|
maxWidth: 'none',
|
||||||
|
interactive: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
|
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
|
||||||
|
@ -56,7 +56,7 @@ import {
|
|||||||
initGlobalFormDirtyLeaveConfirm,
|
initGlobalFormDirtyLeaveConfirm,
|
||||||
initGlobalLinkActions,
|
initGlobalLinkActions,
|
||||||
initHeadNavbarContentToggle,
|
initHeadNavbarContentToggle,
|
||||||
initGlobalPopups,
|
initGlobalTooltips,
|
||||||
} from './features/common-global.js';
|
} from './features/common-global.js';
|
||||||
import {initRepoTopicBar} from './features/repo-home.js';
|
import {initRepoTopicBar} from './features/repo-home.js';
|
||||||
import {initAdminEmails} from './features/admin-emails.js';
|
import {initAdminEmails} from './features/admin-emails.js';
|
||||||
@ -100,7 +100,7 @@ initVueEnv();
|
|||||||
$(document).ready(() => {
|
$(document).ready(() => {
|
||||||
initGlobalCommon();
|
initGlobalCommon();
|
||||||
|
|
||||||
initGlobalPopups();
|
initGlobalTooltips();
|
||||||
initGlobalButtonClickOnEnter();
|
initGlobalButtonClickOnEnter();
|
||||||
initGlobalButtons();
|
initGlobalButtons();
|
||||||
initGlobalCopyToClipboardListener();
|
initGlobalCopyToClipboardListener();
|
||||||
|
@ -1,12 +1,56 @@
|
|||||||
import tippy from 'tippy.js';
|
import tippy from 'tippy.js';
|
||||||
|
|
||||||
export function createTippy(target, opts) {
|
export function createTippy(target, opts = {}) {
|
||||||
return tippy(target, {
|
const instance = tippy(target, {
|
||||||
appendTo: document.body,
|
appendTo: document.body,
|
||||||
placement: 'top-start',
|
placement: 'top-start',
|
||||||
animation: false,
|
animation: false,
|
||||||
allowHTML: true,
|
allowHTML: true,
|
||||||
|
maxWidth: 500, // increase over default 350px
|
||||||
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
|
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
|
||||||
|
...(opts?.role && {theme: opts.role}),
|
||||||
...opts,
|
...opts,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// for popups where content refers to a DOM element, we use the 'hide' class to initially hide
|
||||||
|
// the content, now we can remove it as the content has been removed from the DOM by tippy
|
||||||
|
if (opts.content instanceof Element) {
|
||||||
|
opts.content.classList.remove('hide');
|
||||||
|
}
|
||||||
|
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initTooltip(el, props = {}) {
|
||||||
|
const content = el.getAttribute('data-content') || props.content;
|
||||||
|
if (!content) return null;
|
||||||
|
return createTippy(el, {
|
||||||
|
content,
|
||||||
|
delay: 100,
|
||||||
|
role: 'tooltip',
|
||||||
|
...props,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showTemporaryTooltip(target, content) {
|
||||||
|
let tippy, oldContent;
|
||||||
|
if (target._tippy) {
|
||||||
|
tippy = target._tippy;
|
||||||
|
oldContent = tippy.props.content;
|
||||||
|
} else {
|
||||||
|
tippy = initTooltip(target, {content});
|
||||||
|
}
|
||||||
|
|
||||||
|
tippy.setContent(content);
|
||||||
|
tippy.show();
|
||||||
|
tippy.setProps({
|
||||||
|
onHidden: (tippy) => {
|
||||||
|
if (oldContent) {
|
||||||
|
tippy.setContent(oldContent);
|
||||||
|
} else {
|
||||||
|
tippy.destroy();
|
||||||
|
}
|
||||||
|
tippy.setProps({onHidden: undefined});
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
@ -155,6 +155,8 @@
|
|||||||
--color-caret: var(--color-text-dark);
|
--color-caret: var(--color-text-dark);
|
||||||
--color-reaction-bg: #0000000a;
|
--color-reaction-bg: #0000000a;
|
||||||
--color-reaction-active-bg: var(--color-primary-alpha-20);
|
--color-reaction-active-bg: var(--color-primary-alpha-20);
|
||||||
|
--color-tooltip-bg: #000000f0;
|
||||||
|
--color-tooltip-text: #ffffff;
|
||||||
/* backgrounds */
|
/* backgrounds */
|
||||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||||
@ -1313,7 +1315,7 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none !important;
|
||||||
|
|
||||||
&.show-outdated {
|
&.show-outdated {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@ -1873,41 +1875,6 @@ a.ui.basic.label:hover {
|
|||||||
color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
|
color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.popup {
|
|
||||||
background-color: var(--color-body);
|
|
||||||
color: var(--color-secondary-dark-6);
|
|
||||||
border-color: var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup::before {
|
|
||||||
box-shadow: 1px 1px 0 0 var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.popup::before,
|
|
||||||
.ui.top.popup::before,
|
|
||||||
.ui.right.center.popup::before,
|
|
||||||
.ui.left.center.popup::before {
|
|
||||||
background-color: var(--color-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.bottom.left.popup::before,
|
|
||||||
.ui.bottom.right.popup::before,
|
|
||||||
.ui.bottom.center.popup::before {
|
|
||||||
box-shadow: -1px -1px 0 0 var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.left.center.popup::before {
|
|
||||||
box-shadow: 1px -1px 0 0 var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.right.center.popup::before {
|
|
||||||
box-shadow: -1px 1px 0 0 var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.popup .ui.label {
|
|
||||||
margin-bottom: .4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-icon {
|
.color-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
@ -1,9 +1,5 @@
|
|||||||
/* styles are based on node_modules/tippy.js/dist/tippy.css */
|
/* styles are based on node_modules/tippy.js/dist/tippy.css */
|
||||||
|
|
||||||
.tippy-box[data-animation="fade"][data-state="hidden"] {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-tippy-root] {
|
[data-tippy-root] {
|
||||||
max-width: calc(100vw - 10px);
|
max-width: calc(100vw - 10px);
|
||||||
}
|
}
|
||||||
@ -15,7 +11,21 @@
|
|||||||
border: 1px solid var(--color-secondary);
|
border: 1px solid var(--color-secondary);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition-property: transform, visibility, opacity;
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="tooltip"] {
|
||||||
|
background-color: var(--color-tooltip-bg);
|
||||||
|
color: var(--color-tooltip-text);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="menu"] {
|
||||||
|
background-color: none;
|
||||||
|
color: var(--color-tooltip-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="menu"] .ui.menu {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tippy-content {
|
.tippy-content {
|
||||||
@ -24,6 +34,14 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="tooltip"] .tippy-content {
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="menu"] .tippy-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
|
.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
@ -82,3 +100,12 @@
|
|||||||
.tippy-svg-arrow-inner {
|
.tippy-svg-arrow-inner {
|
||||||
fill: var(--color-body);
|
fill: var(--color-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
|
||||||
|
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
|
||||||
|
fill: var(--color-tooltip-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
|
||||||
|
fill: var(--color-menu);
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user