summaryrefslogtreecommitdiffstats
path: root/templates/devtest/fomantic-modal.tmpl
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
committerDaniel Baumann <daniel@debian.org>2024-10-18 20:33:49 +0200
commitdd136858f1ea40ad3c94191d647487fa4f31926c (patch)
tree58fec94a7b2a12510c9664b21793f1ed560c6518 /templates/devtest/fomantic-modal.tmpl
parentInitial commit. (diff)
downloadforgejo-upstream.tar.xz
forgejo-upstream.zip
Adding upstream version 9.0.0.HEADupstream/9.0.0upstreamdebian
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'templates/devtest/fomantic-modal.tmpl')
-rw-r--r--templates/devtest/fomantic-modal.tmpl86
1 files changed, 86 insertions, 0 deletions
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
new file mode 100644
index 0000000..5cd3672
--- /dev/null
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -0,0 +1,86 @@
+{{template "base/head" .}}
+<div class="page-content devtest ui container">
+ {{template "base/alert" .}}
+
+ <div id="test-modal-form-1" class="ui mini modal">
+ <div class="header">Form dialog (layout 1)</div>
+ <form class="content" method="post">
+ <div class="ui input tw-w-full"><input name="user_input"></div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+ </form>
+ </div>
+
+ <div id="test-modal-form-2" class="ui mini modal">
+ <div class="header">Form dialog (layout 2)</div>
+ <form method="post">
+ <div class="content">
+ <div class="ui input tw-w-full"><input name="user_input"></div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+ </div>
+ </form>
+ </div>
+
+ <div id="test-modal-form-3" class="ui mini modal">
+ <div class="header">Form dialog (layout 3)</div>
+ <form method="post">
+ <div class="content">
+ <div class="ui input tw-w-full"><input name="user_input"></div>
+ </div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+ </form>
+ </div>
+
+ <div id="test-modal-form-4" class="ui mini modal">
+ <div class="header">Form dialog (layout 4)</div>
+ <div class="content">
+ <div class="ui input tw-w-full"><input name="user_input"></div>
+ </div>
+ <form method="post">
+ {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+ </form>
+ </div>
+
+ <div class="ui g-modal-confirm modal" id="test-modal-default">
+ <div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
+ <div class="content">
+ very long aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+ </div>
+ {{template "base/modal_actions_confirm"}}
+ </div>
+
+ <div class="ui g-modal-confirm modal" id="test-modal-confirm">
+ <div class="header">Confirm dialog</div>
+ <div class="content">hello, this is the modal dialog content</div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+ </div>
+
+ <div class="ui g-modal-confirm modal" id="test-modal-blue">
+ <div class="header">Blue dialog</div>
+ <div class="content">hello, this is the modal dialog content</div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonColors" "blue")}}
+ </div>
+
+ <div class="ui g-modal-confirm modal" id="test-modal-yellow">
+ <div class="header">yellow dialog</div>
+ <div class="content">hello, this is the modal dialog content</div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+ </div>
+
+ <div class="ui g-modal-confirm modal" id="test-modal-danger">
+ {{svg "octicon-x" 16 "inside close"}}
+ <div class="header">dangerous action dialog</div>
+ <div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
+ {{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
+ </div>
+
+ <div class="modal-buttons flex-text-block tw-flex-wrap"></div>
+ <script type="module">
+ for (const el of $('.ui.modal')) {
+ const $btn = $('<button>').text(`${el.id}`).on('click', () => {
+ $(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+ });
+ $('.modal-buttons').append($btn);
+ }
+ </script>
+</div>
+{{template "base/footer" .}}