mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-26 06:16:56 +09:00
silverwindandwxiaoguang
e645afbb3f
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>
70 lines
3.2 KiB
Handlebars
70 lines
3.2 KiB
Handlebars
<dialog class="modal-dialog" id="issue-label-edit-modal" data-global-init="initLabelEditModal"
|
|
data-current-page-link="{{$.Link}}"{{/*will be used to construct "new label" and "edit label" URLs*/}}
|
|
data-text-new-label="{{ctx.Locale.Tr "repo.issues.new_label"}}"
|
|
data-text-edit-label="{{ctx.Locale.Tr "repo.issues.label_modify"}}"
|
|
>
|
|
<div class="header"></div>
|
|
<div class="content">
|
|
<form class="ui form ignore-dirty form-fetch-action" method="post">
|
|
<input name="id" type="hidden">
|
|
<div class="required field">
|
|
<label for="name">{{ctx.Locale.Tr "repo.issues.label_title"}}</label>
|
|
<div class="ui small input">
|
|
<input class="label-name-input" name="title" placeholder="{{ctx.Locale.Tr "repo.issues.new_label_placeholder"}}" autofocus required maxlength="50">
|
|
</div>
|
|
</div>
|
|
<div class="field label-exclusive-input-field">
|
|
<div class="ui checkbox">
|
|
<input class="label-exclusive-input" name="exclusive" type="checkbox">
|
|
<label>{{ctx.Locale.Tr "repo.issues.label_exclusive"}}</label>
|
|
</div>
|
|
<br>
|
|
<small class="desc">{{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}}</small>
|
|
<div class="desc tw-ml-1 tw-mt-2 tw-hidden label-exclusive-warning">
|
|
{{svg "octicon-alert"}} {{ctx.Locale.Tr "repo.issues.label_exclusive_warning"}}
|
|
</div>
|
|
<div class="field label-exclusive-order-input-field tw-mt-2">
|
|
<label class="flex-text-block">
|
|
{{ctx.Locale.Tr "repo.issues.label_exclusive_order"}}
|
|
<span data-tooltip-content="{{ctx.Locale.Tr "repo.issues.label_exclusive_order_tooltip"}}">{{svg "octicon-info"}}</span>
|
|
</label>
|
|
<input class="label-exclusive-order-input" name="exclusive_order" type="number" maxlength="4">
|
|
</div>
|
|
</div>
|
|
<div class="field label-is-archived-input-field">
|
|
<div class="ui checkbox">
|
|
<input class="label-is-archived-input" name="is_archived" type="checkbox">
|
|
<label>{{ctx.Locale.Tr "repo.issues.label_archive"}}</label>
|
|
</div>
|
|
<i class="tw-ml-1" data-tooltip-content={{ctx.Locale.Tr "repo.issues.label_archive_tooltip"}}>
|
|
{{svg "octicon-info"}}
|
|
</i>
|
|
</div>
|
|
<div class="field">
|
|
<label for="description">{{ctx.Locale.Tr "repo.issues.label_description"}}</label>
|
|
<div class="ui small fluid input">
|
|
<input class="label-desc-input" name="description" placeholder="{{ctx.Locale.Tr "repo.issues.new_label_desc_placeholder"}}" maxlength="200">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
|
|
<div class="color-picker-combo" data-global-init="initColorPicker">
|
|
<!-- the "#" is optional because backend NormalizeColor is able to handle it, API also accepts both formats, and it is easier for users to directly copy-paste a hex value -->
|
|
<input name="color" value="#70c24a" placeholder="#c320f6" required pattern="^#?([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$" maxlength="7">
|
|
{{template "repo/issue/label_precolors"}}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" class="ui basic cancel button">
|
|
{{svg "octicon-x"}}
|
|
{{ctx.Locale.Tr "cancel"}}
|
|
</button>
|
|
<button type="button" class="ui primary approve button">
|
|
{{svg "fontawesome-save"}}
|
|
{{ctx.Locale.Tr "save"}}
|
|
</button>
|
|
</div>
|
|
</dialog>
|