forgejo/templates/base/modal_actions_confirm.tmpl
wxiaoguang 75c62054a6
Improve some modal action buttons (#24289)
Follow #24097 and #24285

And add a devtest page for modal action button testing.
http://localhost:3000/devtest/fomantic-modal

Now the `modal_actions_confirm.tmpl` could support: green / blue /
yellow positive buttons, the negative button is "secondary".

ps: this PR is only a small improvement, there are still a lot of
buttons not having proper colors. In the future these buttons could be
improved by this approach.

These buttons could also be improved according to the conclusion of
#24285 in the future.



![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png)


And add GitHub-like single danger button (context:
https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312)


![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-24 07:08:59 -04:00

39 lines
1.3 KiB
Handlebars

{{/*
Template Attributes:
* locale
Two buttons (negative, positive):
* ModalButtonTypes: "yes" (default) or "confirm"
* ModalButtonColors: "green" (default) / "blue" / "yellow"
* ModalButtonCancelText
* ModalButtonOkText
Single danger button (GitHub-like):
* ModalButtonDangerText "This action will destroy your data"
The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal internally
*/}}
<div class="actions">
{{if .ModalButtonDangerText}}
<button class="ui danger red ok button">{{.ModalButtonDangerText}}</button>
{{else}}
{{$textNegitive := .locale.Tr "modal.no"}}
{{$textPositive := .locale.Tr "modal.yes"}}
{{if eq .ModalButtonTypes "confirm"}}
{{$textNegitive = .locale.Tr "modal.cancel"}}
{{$textPositive = .locale.Tr "modal.confirm"}}
{{end}}
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
{{$stylePositive := "green"}}
{{if eq .ModalButtonColors "blue"}}
{{$stylePositive = "blue"}}
{{else if eq .ModalButtonColors "yellow"}}
{{$stylePositive = "yellow"}}
{{end}}
<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
{{end}}
</div>