mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-26 06:16:56 +09:00
Replace Fomantic's hard-forked jQuery modal with native `<dialog>` elements, advancing https://github.com/go-gitea/gitea/issues/29849. The UI is visually unchanged. Dialogs open with `show()` over an `inert` page, so tooltips, popups and toasts mounted on `<body>` stay usable above them, unlike with `showModal()` (https://github.com/whatwg/html/issues/9936). - Remove the Fomantic modal and dimmer, add `showModal` and `hideModal` - Declare modals as `<dialog class="modal-dialog">`, shown inside a `.modal-backdrop`, instead of `ui modal` with its unused size classes - Remove two modals that could never be opened - Block the page while a modal is open, close the topmost one on Escape and restore focus to its opener - Allow stacked modals, use a confirm modal instead of `window.confirm` for deleting content history - Hide popups and toasts when a modal opens or closes - Keep the release notes modal open when generating notes fails Fixes: https://github.com/go-gitea/gitea/issues/39643 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
109 lines
3.3 KiB
Handlebars
109 lines
3.3 KiB
Handlebars
<h4 class="ui top attached header">
|
|
{{ctx.Locale.Tr "secrets.management"}}
|
|
<div class="ui right">
|
|
<button type="button" class="ui primary tiny button show-modal"
|
|
data-modal="#add-secret-modal"
|
|
data-modal-form.url="{{.Link}}"
|
|
data-modal-header="{{ctx.Locale.Tr "secrets.add_secret"}}"
|
|
data-modal-secret-name.value=""
|
|
data-modal-secret-name.read-only="false"
|
|
data-modal-secret-data=""
|
|
data-modal-secret-description=""
|
|
>
|
|
{{ctx.Locale.Tr "secrets.add_secret"}}
|
|
</button>
|
|
</div>
|
|
</h4>
|
|
<div class="ui attached segment">
|
|
{{if .Secrets}}
|
|
<div class="flex-divided-list items-with-main">
|
|
{{range .Secrets}}
|
|
<div class="item tw-items-center">
|
|
<div class="item-leading">
|
|
{{svg "octicon-key" 32}}
|
|
</div>
|
|
<div class="item-main">
|
|
<div class="item-title">
|
|
{{.Name}}
|
|
</div>
|
|
<div class="item-body">
|
|
{{if .Description}}{{.Description}}{{else}}-{{end}}
|
|
</div>
|
|
<div class="item-body">
|
|
******
|
|
</div>
|
|
</div>
|
|
<div class="item-trailing">
|
|
<span>
|
|
{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
|
|
</span>
|
|
<button type="button" class="btn interact-bg show-modal tw-p-2"
|
|
data-modal="#add-secret-modal"
|
|
data-modal-form.url="{{$.Link}}"
|
|
data-modal-header="{{ctx.Locale.Tr "secrets.edit_secret"}}"
|
|
data-tooltip-content="{{ctx.Locale.Tr "secrets.edit_secret"}}"
|
|
data-modal-secret-name.value="{{.Name}}"
|
|
data-modal-secret-name.read-only="true"
|
|
data-modal-secret-data=""
|
|
data-modal-secret-description="{{if .Description}}{{.Description}}{{end}}"
|
|
>
|
|
{{svg "octicon-pencil"}}
|
|
</button>
|
|
<button type="button" class="btn interact-bg link-action negative tw-p-2"
|
|
data-url="{{$.Link}}/delete?id={{.ID}}"
|
|
data-modal-confirm="{{ctx.Locale.Tr "secrets.deletion.description"}}"
|
|
data-tooltip-content="{{ctx.Locale.Tr "secrets.deletion"}}"
|
|
>
|
|
{{svg "octicon-trash"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{else}}
|
|
{{ctx.Locale.Tr "secrets.none"}}
|
|
{{end}}
|
|
</div>
|
|
|
|
{{/* Add secret dialog */}}
|
|
<dialog class="modal-dialog" id="add-secret-modal">
|
|
<div class="header"></div>
|
|
<form class="ui form form-fetch-action" method="post">
|
|
<div class="content">
|
|
<div class="field">
|
|
{{ctx.Locale.Tr "secrets.description"}}
|
|
</div>
|
|
<div class="field">
|
|
<label for="secret-name">{{ctx.Locale.Tr "name"}}</label>
|
|
<input autofocus required
|
|
id="secret-name"
|
|
name="name"
|
|
pattern="^(?!GITEA_|GITHUB_)[a-zA-Z_][a-zA-Z0-9_]*$"
|
|
data-tooltip-content="{{ctx.Locale.Tr "secrets.creation.name_pattern"}}"
|
|
placeholder="MY_SECRET_NAME"
|
|
>
|
|
</div>
|
|
<div class="field">
|
|
<label for="secret-data">{{ctx.Locale.Tr "value"}}</label>
|
|
<textarea required
|
|
id="secret-data"
|
|
name="data"
|
|
maxlength="{{.DataMaxLength}}"
|
|
placeholder="{{ctx.Locale.Tr "secrets.creation.value_placeholder"}}"
|
|
></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label for="secret-description">{{ctx.Locale.Tr "secrets.creation.description"}}</label>
|
|
<textarea
|
|
id="secret-description"
|
|
name="description"
|
|
rows="2"
|
|
maxlength="{{.DescriptionMaxLength}}"
|
|
placeholder="{{ctx.Locale.Tr "secrets.creation.description_placeholder"}}"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</form>
|
|
</dialog>
|