diff options
Diffstat (limited to 'templates/devtest')
| -rw-r--r-- | templates/devtest/badge-actions-svg.tmpl | 25 | ||||
| -rw-r--r-- | templates/devtest/badge-commit-sign.tmpl (renamed from templates/devtest/commit-sign-badge.tmpl) | 0 | ||||
| -rw-r--r-- | templates/devtest/devtest-header.tmpl | 1 | ||||
| -rw-r--r-- | templates/devtest/flex-list.tmpl | 2 | ||||
| -rw-r--r-- | templates/devtest/fomantic-dropdown.tmpl | 4 | ||||
| -rw-r--r-- | templates/devtest/fomantic-modal.tmpl | 16 | ||||
| -rw-r--r-- | templates/devtest/gitea-ui.tmpl | 32 | ||||
| -rw-r--r-- | templates/devtest/mail-preview.tmpl | 27 | ||||
| -rw-r--r-- | templates/devtest/markup-render.tmpl | 71 |
9 files changed, 153 insertions, 25 deletions
diff --git a/templates/devtest/badge-actions-svg.tmpl b/templates/devtest/badge-actions-svg.tmpl new file mode 100644 index 0000000000..5be4fb3131 --- /dev/null +++ b/templates/devtest/badge-actions-svg.tmpl @@ -0,0 +1,25 @@ +{{template "devtest/devtest-header"}} +<div class="page-content devtest ui container"> + <div> + <h1>Actions SVG</h1> + <form class="tw-my-3"> + <div class="tw-mb-2"> + {{range $fontName := .BadgeFontFamilyNames}} + <label><input name="font" type="radio" value="{{$fontName}}" {{Iif (eq $.SelectedFontFamilyName $fontName) "checked"}}>{{$fontName}}</label> + {{end}} + </div> + <div class="tw-mb-2"> + {{range $style := .BadgeStyles}} + <label><input name="style" type="radio" value="{{$style}}" {{Iif (eq $.SelectedStyle $style) "checked"}}>{{$style}}</label> + {{end}} + </div> + <button>submit</button> + </form> + <div class="flex-text-block tw-flex-wrap"> + {{range $badgeSVG := .BadgeSVGs}} + <div>{{$badgeSVG}}</div> + {{end}} + </div> + </div> +</div> +{{template "devtest/devtest-footer"}} diff --git a/templates/devtest/commit-sign-badge.tmpl b/templates/devtest/badge-commit-sign.tmpl index a6677c4495..a6677c4495 100644 --- a/templates/devtest/commit-sign-badge.tmpl +++ b/templates/devtest/badge-commit-sign.tmpl diff --git a/templates/devtest/devtest-header.tmpl b/templates/devtest/devtest-header.tmpl index ee08545640..0775dccc2d 100644 --- a/templates/devtest/devtest-header.tmpl +++ b/templates/devtest/devtest-header.tmpl @@ -1,2 +1,3 @@ {{template "base/head" ctx.RootData}} <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> +{{template "base/alert" .}} diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl index 11d71d56a9..0db84b0c59 100644 --- a/templates/devtest/flex-list.tmpl +++ b/templates/devtest/flex-list.tmpl @@ -68,7 +68,7 @@ <a class="text primary" href="{{$.Link}}"> gitea-org / gitea </a> - <span data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> + <span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> </div> <div class="flex-item-trailing"> <a class="muted" href="{{$.Link}}"> diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl index d41a161e86..a10dc890ce 100644 --- a/templates/devtest/fomantic-dropdown.tmpl +++ b/templates/devtest/fomantic-dropdown.tmpl @@ -75,12 +75,12 @@ <h2>Selection</h2> <div> {{/* the "selection" class is optional, it will be added by JS automatically */}} - <select class="ui dropdown selection ellipsis-items-nowrap"> + <select class="ui dropdown selection ellipsis-text-items"> <option>a</option> <option>abcdefuvwxyz</option> <option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option> </select> - <select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]"> + <select class="ui dropdown ellipsis-text-items tw-max-w-[8em]"> <option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option> <option>abcdefuvwxyz</option> <option>a</option> diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl index 838c6893a4..8e769790b2 100644 --- a/templates/devtest/fomantic-modal.tmpl +++ b/templates/devtest/fomantic-modal.tmpl @@ -2,13 +2,15 @@ <div class="page-content devtest ui container"> {{template "base/alert" .}} <div class="modal-buttons flex-text-block tw-flex-wrap"></div> - <script type="module"> - for (const el of $('.ui.modal:not([data-skip-button])')) { - const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => { - $(el).modal({onApprove() {alert('confirmed')}}).modal('show'); - }); - $('.modal-buttons').append($btn); - } + <script> + document.addEventListener('gitea:index-ready', () => { + for (const el of $('.ui.modal:not([data-skip-button])')) { + const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => { + $(el).modal({onApprove() {alert('confirmed')}}).modal('show'); + }); + $('.modal-buttons').append($btn); + } + }); </script> <div id="test-modal-form-1" class="ui mini modal"> diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 5b40268761..cb5aad7b0c 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -9,16 +9,16 @@ <a class="silenced" href="#">silenced</a> </div> <h1>Button</h1> - <div> - Style: - <label><input type="checkbox" name="button-style-compact" value="compact">compact</label> - <label><input type="radio" name="button-style-size" value="">(normal)</label> - <label><input type="radio" name="button-style-size" value="tiny">tiny</label> - <label><input type="radio" name="button-style-size" value="mini">mini</label> + ".ui.button" styles: + <div class="flex-text-block tw-gap-4"> + <label class="gt-checkbox"><input type="radio" name="button-style-size" value="">(normal)</label> + <label class="gt-checkbox"><input type="radio" name="button-style-size" value="small">small</label> + <label class="gt-checkbox"><input type="radio" name="button-style-size" value="tiny">tiny</label> + <label class="gt-checkbox"><input type="radio" name="button-style-size" value="mini">mini</label> </div> - <div> - State: - <label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> + <div class="flex-text-block tw-gap-4"> + <label class="gt-checkbox"><input type="checkbox" name="button-style-compact" value="compact">compact</label> + <label class="gt-checkbox"><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> </div> <div id="devtest-button-samples"> <ul class="button-sample-groups"> @@ -45,14 +45,16 @@ </div> </li> </ul> - <script type="module"> - const $buttons = $('#devtest-button-samples').find('button.ui'); + <script> + document.addEventListener('gitea:index-ready', () => { + const $buttons = $('#devtest-button-samples').find('button.ui'); - const $buttonStyles = $('input[name*="button-style"]'); - $buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked))); + const $buttonStyles = $('input[name*="button-style"]'); + $buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked))); - const $buttonStates = $('input[name*="button-state"]'); - $buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked))); + const $buttonStates = $('input[name*="button-state"]'); + $buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked))); + }); </script> </div> </div> diff --git a/templates/devtest/mail-preview.tmpl b/templates/devtest/mail-preview.tmpl new file mode 100644 index 0000000000..9a3d792904 --- /dev/null +++ b/templates/devtest/mail-preview.tmpl @@ -0,0 +1,27 @@ +{{template "devtest/devtest-header"}} +<div class="page-content devtest ui container"> + <div class="flex-text-block tw-flex-wrap"> + {{range $templateName := .MailTemplateNames}} + <a class="ui button" href="?tmpl={{$templateName}}">{{$templateName}}</a> + {{else}} + <p>Mailer service is not enabled or no template is found</p> + {{end}} + </div> + + {{if .RenderMailTemplateName}} + <div class="tw-my-2"> + <div>Preview of: {{.RenderMailTemplateName}}</div> + <div>Subject: {{.RenderMailSubject}}</div> + <iframe src="{{AppSubUrl}}/devtest/mail-preview/{{.RenderMailTemplateName}}" class="mail-preview-body"></iframe> + <style> + .mail-preview-body { + border: 1px solid #ccc; + width: 100%; + height: 400px; + overflow: auto; + } + </style> + </div> + {{end}} +</div> +{{template "devtest/devtest-footer"}} diff --git a/templates/devtest/markup-render.tmpl b/templates/devtest/markup-render.tmpl new file mode 100644 index 0000000000..69d29d7829 --- /dev/null +++ b/templates/devtest/markup-render.tmpl @@ -0,0 +1,71 @@ +{{template "devtest/devtest-header"}} +<div class="page-content devtest ui container"> + {{$longCode := "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"}} + <div class="tw-flex"> + <div class="tw-w-[50%] tw-p-4"> + <div class="markup render-content"> + Inline <code>code</code> content + </div> + + <div class="divider"></div> + + <div class="markup render-content"> + <p>content before</p> + <pre><code>Very long line with no code block or container: {{$longCode}}</code></pre> + <p>content after</p> + </div> + + <div class="divider"></div> + + <div class="markup render-content"> + <p>content before</p> + <div class="code-block-container code-overflow-wrap"> + <pre class="code-block"><code>Very long line with wrap: {{$longCode}}</code></pre> + </div> + <p>content after</p> + </div> + + <div class="divider"></div> + + <div class="markup render-content"> + <p>content before</p> + <div class="code-block-container code-overflow-scroll"> + <pre class="code-block"><code>Short line in scroll container</code></pre> + </div> + <div class="code-block-container code-overflow-scroll"> + <pre class="code-block"><code>Very long line with scroll: {{$longCode}}</code></pre> + </div> + <p>content after</p> + </div> + </div> + + <div class="tw-w-[50%] tw-p-4"> + <div class="markup render-content"> + <p>content before</p> + <div class="code-block-container"> + <pre class="code-block"><code class="language-math"> + \lim\limits_{n\rightarrow\infty}{\left(1+\frac{1}{n}\right)^n} + </code></pre> + </div> + <p>content after</p> + </div> + + <div class="divider"></div> + + <div class="markup render-content"> + <p>content before</p> + <div class="code-block-container"> + <pre class="code-block"><code class="language-mermaid is-loading"> + graph LR + A[Square Rect] -- Link text --> B((Circle)) + A --> C(Round Rect) + B --> D{Rhombus} + C --> D + </code></pre> + </div> + <p>content after</p> + </div> + </div> + </div> +</div> +{{template "devtest/devtest-footer"}} |