githaven/templates/repo/issue/labels/label_new.tmpl
silverwind dd8dde2be8
replace jquery-minicolors with coloris (#30055)
Get rid of one more jQuery dependant and have a nicer color picker as
well.

Now there is only a single global color picker init because that is all
that's necessary because the elements are present on the page when the
init code runs. The init is slightly weird because the module only takes
a selector instead of DOM elements directly.

The label modals now also perform form validation because previously it
was possible to trigger a 500 error `Color cannot be empty.` by clearing
out the color value on labels.

<img width="867" alt="Screenshot 2024-03-25 at 00 21 05"
src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">
2024-03-29 04:00:07 +01:00

49 lines
1.8 KiB
Handlebars

<div class="ui small new-label modal">
<div class="header">
{{ctx.Locale.Tr "repo.issues.new_label"}}
</div>
<div class="content">
<form class="ui new-label form ignore-dirty" action="{{$.Link}}/new" method="post">
{{.CsrfTokenHtml}}
<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>
<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 color-field">
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
<div class="js-color-picker-input column">
<input name="color" value="#70c24a" placeholder="#c320f6" required maxlength="7">
{{template "repo/issue/label_precolors"}}
</div>
</div>
</form>
</div>
<div class="actions">
<button class="ui cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "cancel"}}
</button>
<button class="ui primary ok button">
{{svg "octicon-check"}}
{{ctx.Locale.Tr "repo.issues.create_label"}}
</button>
</div>
</div>