improve modal buttons

Author: wxiaoguang

templates/base/modal_actions_confirm.tmpl

@@ -2,15 +2,13 @@
 Template Attributes:
 * locale
 
-Two buttons:
-
+Two buttons (negative, positive):
 * ModalButtonTypes: "yes" (default) or "confirm"
-* ModalButtonColors: "green-red" (default) / "blue" / "yellow"
+* ModalButtonColors: "green" (default) / "blue" / "yellow"
 * ModalButtonCancelText
 * ModalButtonOkText
 
-Single button:
-
+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
@@ -28,16 +26,13 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
 		{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
 		{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
 
-		{{$styleNegative := "red"}}
 		{{$stylePositive := "green"}}
 		{{if eq .ModalButtonColors "blue"}}
-			{{$styleNegative = "secondary basic"}}
 			{{$stylePositive = "blue"}}
 		{{else if eq .ModalButtonColors "yellow"}}
-			{{$styleNegative = "secondary basic"}}
 			{{$stylePositive = "yellow"}}
 		{{end}}
-		<button class="ui {{$styleNegative}} cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
+		<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>

templates/devtest/fomantic-modal.tmpl

@@ -38,7 +38,7 @@
 	<script type="module">
 		for (const el of $('.ui.modal')) {
 			const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
-				$(el).modal('show');
+				$(el).modal({onApprove() {alert('confirmed');}}).modal('show');
 			});
 			$('.modal-buttons').append($btn);
 		}

templates/status/500.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content gt-w-screen status-page-500">
+<div role="main" aria-label="{{.Title}}" class="page-content status-page-500">
 	<p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
 	<div class="ui divider"></div>
 

web_src/css/modules/modal.css

@@ -50,7 +50,7 @@
 
 .ui.modal .actions > .ui.button.danger {
   display: block;
-  width: 80%;
+  width: 100%;
   margin: 0 auto;
   text-align: center;
 }