初始提交: Gitea 项目代码
This commit is contained in:
root
@@ -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"}}
|
||||
@@ -0,0 +1,13 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Commit Sign Badges</h1>
|
||||
{{range $commit := .MockCommits}}
|
||||
<div class="flex-text-block tw-my-2">
|
||||
{{template "repo/commit_sign_badge" dict "Commit" $commit "CommitBaseLink" "/devtest/commit" "CommitSignVerification" $commit.Verification}}
|
||||
{{template "repo/commit_sign_badge" dict "CommitSignVerification" $commit.Verification}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1 @@
|
||||
{{template "base/footer" ctx.RootData}}
|
||||
@@ -0,0 +1,4 @@
|
||||
{{template "base/head" ctx.RootData}}
|
||||
<link rel="stylesheet" href="{{AssetURI "web_src/css/devtest.css"}}">
|
||||
<div class="tw-hidden" data-global-init="initDevtestPage"></div>
|
||||
<div class="ui container tw-mt-4">{{template "base/alert" ctx.RootData}}</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<ul>
|
||||
{{range .SubNames}}
|
||||
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
line-height: 2em;
|
||||
}
|
||||
</style>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,34 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>link-action</h1>
|
||||
<div>
|
||||
The request is defined in an "A" or "BUTTON" element.
|
||||
It might be renamed to "link-fetch-action" to match the "form-fetch-action".
|
||||
</div>
|
||||
<div>
|
||||
<button class="link-action" data-url="fetch-action-test?k=1">test action</button>
|
||||
<button class="link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with confirm</button>
|
||||
<button class="ui red button link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with risky confirm</button>
|
||||
<button class="ui button link-action" data-url="fetch-action-test?k=1" data-modal-confirm-header="confirm header" data-modal-confirm-content="confirm content">test with confirm header</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1>form-fetch-action</h1>
|
||||
<div class="flex-relaxed-list fetch-action-demo-forms">
|
||||
<form method="get" action="./fetch-action-test?k=1" class="form-fetch-action">
|
||||
<button name="btn">submit get</button>
|
||||
</form>
|
||||
<form method="post" action="./fetch-action-test?k=1" class="form-fetch-action">
|
||||
<div><textarea name="text" rows="3"></textarea></div>
|
||||
<div><label><input name="check" type="checkbox"> check</label></div>
|
||||
<div><button name="btn">submit post</button></div>
|
||||
</form>
|
||||
<form method="post" action="/-/no-such-uri" class="form-fetch-action">
|
||||
<div class="tw-py-8">bad action url</div>
|
||||
<div><button name="btn">submit test</button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,136 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest">
|
||||
<div class="ui container">
|
||||
<h3>Flex List (standalone)</h3>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-divided-list items-with-main">
|
||||
<div class="item">
|
||||
<div class="item-leading">
|
||||
{{svg "octicon-info" 32}}
|
||||
</div>
|
||||
<div class="item-main">
|
||||
<div class="item-title">
|
||||
Flex Item
|
||||
<span class="ui basic label">
|
||||
with label
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
consists of leading/main/trailing part
|
||||
</div>
|
||||
<div class="item-body">
|
||||
main part contains title and (multiple) body lines
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-trailing">
|
||||
<button class="ui tiny red button">
|
||||
{{svg "octicon-alert" 14}} CJK文本测试
|
||||
</button>
|
||||
<button class="ui tiny primary button">
|
||||
{{svg "octicon-info" 14}} Button
|
||||
</button>
|
||||
<button class="ui tiny primary button">
|
||||
Button with long text
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-leading">
|
||||
{{svg "octicon-info" 32}}
|
||||
</div>
|
||||
<div class="item-main">
|
||||
<div class="item-title">
|
||||
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
|
||||
</div>
|
||||
<div class="item-body">
|
||||
consists of leading/main/trailing part
|
||||
</div>
|
||||
<div class="item-body">
|
||||
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
|
||||
<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-trailing">
|
||||
<button class="ui tiny red button">
|
||||
{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-leading">
|
||||
{{svg "octicon-repo" 32}}
|
||||
</div>
|
||||
<div class="item-main">
|
||||
<div class="item-header">
|
||||
<div class="item-title">
|
||||
<a class="tw-text-primary" href="{{$.Link}}">
|
||||
gitea-org / gitea
|
||||
</a>
|
||||
<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
|
||||
</div>
|
||||
<div class="item-trailing">
|
||||
<a class="muted" href="{{$.Link}}">
|
||||
<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
|
||||
</a>
|
||||
<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
|
||||
<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
when inside header, the trailing part will wrap below the title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<h3>Flex List (with "ui segment")</h3>
|
||||
<div class="ui attached segment">
|
||||
<div class="flex-divided-list">
|
||||
<div class="item">item 1</div>
|
||||
<div class="item">item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<h4>segment header</h4>
|
||||
<div class="flex-divided-list">
|
||||
<div class="item">item 1</div>
|
||||
<div class="item">item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Flex List (with "ui segment fitted", items have their own padding)</h3>
|
||||
<div class="ui fitted segment">
|
||||
<div class="flex-divided-list items-px-default">
|
||||
<div class="item">item 1</div>
|
||||
<div class="item">item 2</div>
|
||||
<div class="item">item 3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>If parent provides padding or items need their own flex and/or padding:</h3>
|
||||
<div class="tw-border tw-border-secondary">
|
||||
<div class="tw-m-3">before divider</div>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-divided-list flex-items-block items-px-default">
|
||||
<div class="item">item 1</div>
|
||||
<div class="item">item 2</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="tw-m-3">after divider</div>
|
||||
</div>
|
||||
<div class="tw-border tw-border-secondary tw-p-4 tw-my-2">
|
||||
<div>before divider</div>
|
||||
<div class="divider"></div>
|
||||
<div class="flex-divided-list">
|
||||
<div class="item">item 1</div>
|
||||
<div class="item">item 2</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div>after divider</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,130 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h2>Dropdown</h2>
|
||||
<div>
|
||||
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
|
||||
<span class="text">search-input & flexed items in menu</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="menu flex-items-menu">
|
||||
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
|
||||
<div class="item"><input type="radio">item</div>
|
||||
<div class="item"><input type="radio">item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui search selection dropdown">
|
||||
<span class="text">search ...</span>
|
||||
<input name="value" class="search">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
{{svg "octicon-x" 14 "remove icon"}}
|
||||
<div class="menu">
|
||||
<div class="item">item</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui multiple selection dropdown">
|
||||
<input class="hidden" value="1">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
{{svg "octicon-x" 14 "remove icon"}}
|
||||
<div class="default text">empty multiple dropdown</div>
|
||||
<div class="menu">
|
||||
<div class="item">item</div>
|
||||
<div class="item">sm1</div>
|
||||
<div class="item">sm2</div>
|
||||
<div class="item">medium1</div>
|
||||
<div class="item">medium2</div>
|
||||
<div class="item">large item1</div>
|
||||
<div class="item">large item2</div>
|
||||
<div class="item">large item3</div>
|
||||
<div class="item">very large item test 1</div>
|
||||
<div class="item">very large item test 2</div>
|
||||
<div class="item">very large item test 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui buttons">
|
||||
<button class="ui button">Button with Dropdown</button>
|
||||
<div class="ui dropdown button icon">
|
||||
{{svg "octicon-triangle-down"}}
|
||||
<div class="menu">
|
||||
<div class="item">item</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ui multiple clearable search selection dropdown tw-max-w-[220px]">
|
||||
<input type="hidden" value="1,2,3,4,5,10">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
{{svg "octicon-x" 14 "remove icon"}}
|
||||
<div class="default text">clearable search dropdown</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="1">item</div>
|
||||
<div class="item" data-value="2">sm1</div>
|
||||
<div class="item" data-value="3">sm2</div>
|
||||
<div class="item" data-value="4">medium1</div>
|
||||
<div class="item" data-value="5">medium2</div>
|
||||
<div class="item" data-value="6">large item1</div>
|
||||
<div class="item" data-value="7">large item2</div>
|
||||
<div class="item" data-value="8">large item3</div>
|
||||
<div class="item" data-value="9">very large item test 1</div>
|
||||
<div class="item" data-value="10">very large item test 2</div>
|
||||
<div class="item" data-value="11">very large item test 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Selection</h2>
|
||||
<div>
|
||||
{{/* the "selection" class is optional, it will be added by JS automatically */}}
|
||||
<select class="ui dropdown selection ellipsis-text-items">
|
||||
<option>a</option>
|
||||
<option>abcdefuvwxyz</option>
|
||||
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
|
||||
</select>
|
||||
<select class="ui dropdown ellipsis-text-items tw-max-w-[8em]">
|
||||
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
|
||||
<option>abcdefuvwxyz</option>
|
||||
<option>a</option>
|
||||
</select>
|
||||
</div>
|
||||
<h2>Dropdown Button (demo only without menu)</h2>
|
||||
<div>
|
||||
<div class="ui dropdown mini button">
|
||||
<span class="text">mini dropdown</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
<div class="ui dropdown tiny button">
|
||||
<span class="text">tiny dropdown</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
<div class="ui button dropdown">
|
||||
<span class="text">button dropdown</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="ui dropdown mini compact button">
|
||||
<span class="text">mini compact</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
<div class="ui dropdown tiny compact button">
|
||||
<span class="text">tiny compact</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
<div class="ui button compact dropdown">
|
||||
<span class="text">button compact</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
<div class="ui tiny button">Other button align with ...</div>
|
||||
<div class="ui dropdown tiny button">
|
||||
<span class="text">... Dropdown Button</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,95 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
||||
<div id="test-modal-form-1" class="ui mini modal">
|
||||
<div class="header">Form dialog (layout 1)</div>
|
||||
<form class="content" method="post" action="?mock_response_delay=1">
|
||||
<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" action="?mock_response_delay=1">
|
||||
<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" action="?mock_response_delay=1">
|
||||
<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" action="?mock_response_delay=1">
|
||||
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="test-modal-form-5" class="ui mini modal">
|
||||
<div class="header">Form dialog (layout 5)</div>
|
||||
<div class="content">
|
||||
<form method="post" action="?mock_response_delay=1">
|
||||
<div class="ui input tw-w-full"><input name="user_input"></div>
|
||||
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
||||
</form>
|
||||
</div>
|
||||
</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-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="divider"></div>
|
||||
|
||||
<button class="show-modal" data-modal="#test-modal-fill-values"
|
||||
data-modal-fill-by-id="value for id"
|
||||
data-modal-fill-by-name="value for name"
|
||||
data-modal-fill-by-class="value for class"
|
||||
data-modal-p="value for tag"
|
||||
data-modal-a.text-content="fill with attr"
|
||||
>test-modal-fill-values</button>
|
||||
|
||||
<div id="test-modal-fill-values" class="ui mini modal" data-skip-button>
|
||||
<div class="header">Modal dialog (fill values)</div>
|
||||
<form class="content">
|
||||
<div id="fill-by-id"></div>
|
||||
<input name="fill-by-name">
|
||||
<div class="fill-by-class"></div>
|
||||
<p></p>
|
||||
<a href="#">link</a>
|
||||
{{template "base/modal_actions_confirm" dict}}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,109 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<form class="ui form left-right-form">
|
||||
<h4 class="ui dividing header">Input</h4>
|
||||
<div class="inline field">
|
||||
<label>Normal</label>
|
||||
<input type="text" value="value">
|
||||
</div>
|
||||
<div class="inline field">
|
||||
<label>Readonly</label>
|
||||
<input type="text" value="value" readonly>
|
||||
</div>
|
||||
<div class="inline disabled field">
|
||||
<label>Disabled</label>
|
||||
<input type="text" value="value" disabled>
|
||||
</div>
|
||||
<div class="inline field error">
|
||||
<label>Error</label>
|
||||
<input type="text" value="value">
|
||||
</div>
|
||||
|
||||
<h4 class="ui dividing header">Textarea</h4>
|
||||
<div class="inline field">
|
||||
<label>Normal</label>
|
||||
<textarea rows="2">value</textarea>
|
||||
</div>
|
||||
<div class="inline field">
|
||||
<label>Readonly</label>
|
||||
<textarea rows="2" readonly>value</textarea>
|
||||
</div>
|
||||
<div class="inline disabled field">
|
||||
<label>Disabled</label>
|
||||
<textarea rows="2" disabled>value</textarea>
|
||||
</div>
|
||||
<div class="inline field error">
|
||||
<label>Error</label>
|
||||
<textarea rows="2">value</textarea>
|
||||
</div>
|
||||
|
||||
<h4 class="ui dividing header">Dropdown</h4>
|
||||
<div class="inline field">
|
||||
<label>Normal</label>
|
||||
<div class="ui selection dropdown">
|
||||
<input type="hidden" value="a">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="text">Option A</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="a">Option A</div>
|
||||
<div class="item" data-value="b">Option B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline field">
|
||||
<label>Readonly</label>
|
||||
<div class="ui selection dropdown" readonly>
|
||||
<input type="hidden" value="a">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="text">Option A</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="a">Option A</div>
|
||||
<div class="item" data-value="b">Option B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline disabled field">
|
||||
<label>Disabled</label>
|
||||
<div class="ui selection dropdown">
|
||||
<input type="hidden" value="a">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="text">Option A</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="a">Option A</div>
|
||||
<div class="item" data-value="b">Option B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline field error">
|
||||
<label>Error</label>
|
||||
<div class="ui selection dropdown">
|
||||
<input type="hidden" value="a">
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="text">Option A</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-value="a">Option A</div>
|
||||
<div class="item" data-value="b">Option B</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="ui dividing header">Required</h4>
|
||||
<div class="inline required field">
|
||||
<label>Normal</label>
|
||||
<input type="text" value="value">
|
||||
</div>
|
||||
<div class="inline required field">
|
||||
<label>Readonly</label>
|
||||
<input type="text" value="value" readonly>
|
||||
</div>
|
||||
<div class="inline required disabled field">
|
||||
<label>Disabled</label>
|
||||
<input type="text" value="value" disabled>
|
||||
</div>
|
||||
<div class="inline required field error">
|
||||
<label>Error</label>
|
||||
<input type="text" value="value">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,158 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Link</h1>
|
||||
<div>
|
||||
<a href="#">normal</a>
|
||||
<a class="muted" href="#">muted</a>
|
||||
<a class="suppressed" href="#">suppressed</a>
|
||||
<a class="silenced" href="#">silenced</a>
|
||||
</div>
|
||||
<h1>Button</h1>
|
||||
".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 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">
|
||||
<li class="sample-group">
|
||||
<h2>General purpose:</h2>
|
||||
<button class="ui button">Unclassed</button>
|
||||
<button class="ui basic button">Basic Unclassed</button>
|
||||
<button class="ui primary button">Primary</button>
|
||||
<button class="ui basic primary button">Basic Primary</button>
|
||||
</li>
|
||||
<li class="sample-group">
|
||||
<h2>Recommended colors:</h2>
|
||||
<button class="ui red button">Red</button>
|
||||
<button class="ui basic red button">Basic Red</button>
|
||||
<button class="ui green button">Green</button>
|
||||
<button class="ui basic green button">Basic Green</button>
|
||||
</li>
|
||||
<li class="sample-group">
|
||||
<h2>Inline / Plain:</h2>
|
||||
<div class="tw-my-1">
|
||||
<button class="btn tw-p-2">Plain button</button>
|
||||
<button class="btn interact-fg tw-p-2">Plain button with interact fg</button>
|
||||
<button class="btn interact-bg tw-p-2">Plain button with interact bg</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Buttons</h1>
|
||||
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
|
||||
<div class="ui buttons"><button class="ui button active">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
|
||||
<div class="ui buttons"><button class="ui button">1</button><button class="ui button active">2</button><button class="ui button">3</button></div>
|
||||
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button active">3</button></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Tooltip</h1>
|
||||
<div><span data-tooltip-content="test tooltip">text with tooltip</span></div>
|
||||
<div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Loading</h1>
|
||||
<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
|
||||
<div class="is-loading tw-border tw-border-secondary tw-py-4">
|
||||
<p>loading ...</p>
|
||||
<p>loading ...</p>
|
||||
<p>loading ...</p>
|
||||
<p>loading ...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1><overflow-menu></h1>
|
||||
<overflow-menu class="ui secondary pointing tabular borderless menu">
|
||||
<div class="overflow-menu-items">
|
||||
<a class="active item">item</a>
|
||||
<a class="item">item 1</a>
|
||||
<a class="item">item 2</a>
|
||||
<a class="item">item 3</a>
|
||||
<a class="item">item 4</a>
|
||||
<a class="item">item 5</a>
|
||||
<a class="item">item 6</a>
|
||||
<a class="item">item 7</a>
|
||||
<a class="item">item 8</a>
|
||||
<a class="item">item 9</a>
|
||||
<a class="item">item 10</a>
|
||||
<a class="item">item 11</a>
|
||||
<a class="item">item 12</a>
|
||||
<a class="item">item 13</a>
|
||||
<a class="item">item 14</a>
|
||||
<a class="item">item 15</a>
|
||||
<a class="item">item 16</a>
|
||||
<a class="item">item 17</a>
|
||||
<a class="item">item 18</a>
|
||||
</div>
|
||||
</overflow-menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>LocaleNumber</h1>
|
||||
<div>{{ctx.Locale.PrettyNumber 1}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 12}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 123}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 1234}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 12345}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 123456}}</div>
|
||||
<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>SVG alignment</h1>
|
||||
|
||||
<h2>Text with SVG</h2>
|
||||
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
|
||||
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
|
||||
|
||||
<div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
|
||||
|
||||
<div class="flex-items-block">
|
||||
<div class="item">{{svg "octicon-alert"}} flex every line</div>
|
||||
<div class="item">{{svg "octicon-alert"}} flex every item</div>
|
||||
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
|
||||
</div>
|
||||
|
||||
<h2>Button with SVG</h2>
|
||||
<div>
|
||||
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
|
||||
<div class="ui labeled button">
|
||||
<button class="ui basic button">labeled button</button>
|
||||
<a class="ui basic label">123</a>
|
||||
</div>
|
||||
<button class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
|
||||
</div>
|
||||
|
||||
<h2>Input with SVG</h2>
|
||||
<div>
|
||||
<div class="ui icon search input">
|
||||
<i class="icon">{{svg "octicon-search"}}</i>
|
||||
<input type="text" placeholder="place holder">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>ComboMarkdownEditor</h1>
|
||||
{{template "shared/combomarkdowneditor" dict "MarkdownEditorContext" (ctx.MiscUtils.MarkdownEditorGeneral nil)}}
|
||||
</div>
|
||||
|
||||
<h1>Tailwind CSS Demo</h1>
|
||||
<div>
|
||||
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,16 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Show/Hide panel</h1>
|
||||
<div>
|
||||
<!-- to test Space/Enter also works on non-button buttons with children -->
|
||||
<div tabindex="0" class="ui button show-panel toggle" data-panel="#devtest-panel-show-hide"><span>Toggle panel 1</span></div>
|
||||
<span tabindex="0" class="ui button show-panel" data-panel="#devtest-panel-show-hide"><span>Show panel 1</span></span>
|
||||
</div>
|
||||
<div id="devtest-panel-show-hide">
|
||||
<div>Panel 1 content</div>
|
||||
<div class="ui button hide-panel" data-panel-closest="div">Hide panel 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,23 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<h1>Keyboard Shortcut</h1>
|
||||
|
||||
<div>
|
||||
<div class="ui input global-shortcut-wrapper">
|
||||
<input class="ui input" placeholder="Press S to focus">
|
||||
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="s">S</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tw-mt-2">
|
||||
<div class="ui action input">
|
||||
<div class="ui input global-shortcut-wrapper">
|
||||
<input class="ui input" placeholder="Press T to focus">
|
||||
<kbd data-global-init="onGlobalShortcut" data-shortcut-keys="t">T</kbd>
|
||||
</div>
|
||||
<button class="ui button">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,26 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Label</h1>
|
||||
<div class="flex-text-block tw-my-2">
|
||||
<span class="ui label">simple label</span>
|
||||
<span class="ui red label">red label</span>
|
||||
<span class="ui green label">green label</span>
|
||||
</div>
|
||||
<div class="flex-text-block tw-my-2">
|
||||
<span class="ui basic label">basic label</span>
|
||||
<span class="ui basic red label">basic red label</span>
|
||||
<span class="ui basic green label">basic green label</span>
|
||||
</div>
|
||||
<div class="flex-text-block tw-my-2">
|
||||
<span class="ui label">long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span>
|
||||
</div>
|
||||
<div class="flex-text-block tw-my-2">
|
||||
<span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
|
||||
</div>
|
||||
<div class="tw-my-2">
|
||||
<span class="ui label tw-max-w-full"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -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"}}
|
||||
@@ -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"}}
|
||||
@@ -0,0 +1,67 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div class="tw-grid tw-grid-cols-3 tw-gap-4">
|
||||
<div>
|
||||
<h2>Relative (auto)</h2>
|
||||
<div>now: <relative-time data-testid="relative-time-now" datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>3m ago: <relative-time datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>3h ago: <relative-time datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>1d ago: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>3d ago: <relative-time datetime="{{.TimePast3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>3d future: <relative-time datetime="{{.TimeFuture3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>40d ago (threshold): <relative-time datetime="{{.TimePast40d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>tense=past</h2>
|
||||
<div>3m ago: <relative-time tense="past" datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>future clamped: <relative-time tense="past" datetime="{{.TimeFuture1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>60d ago: <relative-time tense="past" datetime="{{.TimePast60d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>tense=future</h2>
|
||||
<div>3h future: <relative-time tense="future" datetime="{{.TimeFuture3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>past clamped: <relative-time tense="future" datetime="{{.TimePast1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Duration</h2>
|
||||
<div>0s: <relative-time format="duration" datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>3h: <relative-time format="duration" datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>1d 2h: <relative-time format="duration" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>short: <relative-time format="duration" format-style="short" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>narrow: <relative-time format="duration" format-style="narrow" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Datetime (absolute)</h2>
|
||||
<div>default: <relative-time format="datetime" datetime="2024-03-11"></relative-time></div>
|
||||
<div>month=short: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
|
||||
<div>month=long: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
|
||||
<div>numeric: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
|
||||
<div>weekday: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
|
||||
<div>with time: <relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
|
||||
<div>minutes: <relative-time datetime="2024-03-11T19:30:45-05:00" threshold="P0Y" prefix="" weekday="" year="numeric" month="short" hour="numeric" minute="2-digit"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Threshold</h2>
|
||||
<div>P0Y: <relative-time threshold="P0Y" prefix="" weekday="" year="numeric" month="short" datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>P1D: <relative-time threshold="P1D" datetime="{{.TimePast2d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
<div>P30D: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Prefix</h2>
|
||||
<div>default: <relative-time datetime="2024-03-11"></relative-time></div>
|
||||
<div>prefix="": <relative-time prefix="" datetime="2024-03-11"></relative-time></div>
|
||||
<div>prefix="at": <relative-time prefix="at" datetime="2024-03-11"></relative-time></div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>TimeSince (Go helper)</h2>
|
||||
<div>now: {{DateUtils.TimeSince .TimeNow}}</div>
|
||||
<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
|
||||
<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
|
||||
<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
|
||||
<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
|
||||
<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
|
||||
<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,15 @@
|
||||
{{template "base/head" .}}
|
||||
<div class="page-content">
|
||||
<div class="flex-text-block tw-justify-center tw-gap-5">
|
||||
<a href="/devtest/repo-action-view/runs/10">Run:CanCancel</a>
|
||||
<a href="/devtest/repo-action-view/runs/20">Run:CanApprove</a>
|
||||
<a href="/devtest/repo-action-view/runs/30">Run:CanRerunLatest</a>
|
||||
<a href="/devtest/repo-action-view/runs/10/attempts/2">Run:PreviousAttempt</a>
|
||||
<a href="/devtest/repo-action-view/runs/40">Run:ReusableCaller</a>
|
||||
</div>
|
||||
{{template "repo/actions/view_component" (dict
|
||||
"JobID" (or .JobID 0)
|
||||
"ActionsViewURL" $.ActionsViewURL
|
||||
)}}
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
@@ -0,0 +1,115 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<h1>Severity Colors</h1>
|
||||
|
||||
<h2>Messages</h2>
|
||||
<div class="ui error message">
|
||||
<div class="header">Error Message</div>
|
||||
<p>This is an error message using --color-error-* variables.</p>
|
||||
</div>
|
||||
<div class="ui warning message">
|
||||
<div class="header">Warning Message</div>
|
||||
<p>This is a warning message using --color-warning-* variables.</p>
|
||||
</div>
|
||||
<div class="ui success message">
|
||||
<div class="header">Success Message</div>
|
||||
<p>This is a success message using --color-success-* variables.</p>
|
||||
</div>
|
||||
<div class="ui info message">
|
||||
<div class="header">Info Message</div>
|
||||
<p>This is an info message using --color-info-* variables.</p>
|
||||
</div>
|
||||
|
||||
<h2>Markdown Attention Blocks</h2>
|
||||
<div class="markup render-content">
|
||||
<blockquote class="attention-header attention-note"><p>{{svg "octicon-info" 16 "attention-icon attention-note"}}<strong class="attention-note">Note</strong></p>
|
||||
<p>Useful information that users should know, even when skimming content.</p>
|
||||
</blockquote>
|
||||
<blockquote class="attention-header attention-tip"><p>{{svg "octicon-light-bulb" 16 "attention-icon attention-tip"}}<strong class="attention-tip">Tip</strong></p>
|
||||
<p>Helpful advice for doing things better or more easily.</p>
|
||||
</blockquote>
|
||||
<blockquote class="attention-header attention-important"><p>{{svg "octicon-report" 16 "attention-icon attention-important"}}<strong class="attention-important">Important</strong></p>
|
||||
<p>Key information users need to know to achieve their goal.</p>
|
||||
</blockquote>
|
||||
<blockquote class="attention-header attention-warning"><p>{{svg "octicon-alert" 16 "attention-icon attention-warning"}}<strong class="attention-warning">Warning</strong></p>
|
||||
<p>Urgent info that needs immediate user attention to avoid problems.</p>
|
||||
</blockquote>
|
||||
<blockquote class="attention-header attention-caution"><p>{{svg "octicon-stop" 16 "attention-icon attention-caution"}}<strong class="attention-caution">Caution</strong></p>
|
||||
<p>Advises about risks or negative outcomes of certain actions.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<h2>Form Fields</h2>
|
||||
<div class="ui form">
|
||||
<div class="field error">
|
||||
<label>Error Field</label>
|
||||
<input type="text" value="Invalid input" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Error Input</h2>
|
||||
<div class="ui input error">
|
||||
<input type="text" value="Invalid input" readonly>
|
||||
</div>
|
||||
|
||||
<h2>Attached Section Boxes</h2>
|
||||
<h3 class="ui top attached error header">Error Header</h3>
|
||||
<div class="ui attached error segment">Error section body content.</div>
|
||||
<h3 class="ui top attached warning header tw-mt-3">Warning Header</h3>
|
||||
<div class="ui attached warning segment">Warning section body content.</div>
|
||||
|
||||
<h2>Banner Preview (info-tinted)</h2>
|
||||
<div class="web-banner-content-editor">
|
||||
<div class="render-content render-preview">Banner preview content</div>
|
||||
</div>
|
||||
|
||||
<h2>Labels</h2>
|
||||
<div class="flex-text-block tw-gap-2">
|
||||
<div class="ui red label">Red</div>
|
||||
<div class="ui orange label">Orange</div>
|
||||
<div class="ui yellow label">Yellow</div>
|
||||
<div class="ui green label">Green</div>
|
||||
<div class="ui blue label">Blue</div>
|
||||
<div class="ui violet label">Violet</div>
|
||||
<div class="ui purple label">Purple</div>
|
||||
</div>
|
||||
|
||||
<h2>Color Swatches</h2>
|
||||
<h3>Error</h3>
|
||||
<div class="flex-text-block tw-gap-4">
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg tw-text-error-text tw-border tw-border-error-border">Text</div>
|
||||
<code>error-bg</code>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg-hover tw-text-error-text tw-border tw-border-error-border">Hover</div>
|
||||
<code>error-bg-hover</code>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-error-bg-active tw-text-error-text tw-border tw-border-error-border">Active</div>
|
||||
<code>error-bg-active</code>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Warning</h3>
|
||||
<div class="flex-text-block tw-gap-4">
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-warning-bg tw-text-warning-text tw-border tw-border-warning-border">Text</div>
|
||||
<code>warning-bg</code>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Success</h3>
|
||||
<div class="flex-text-block tw-gap-4">
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-success-bg tw-text-success-text tw-border tw-border-success-border">Text</div>
|
||||
<code>success-bg</code>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Info</h3>
|
||||
<div class="flex-text-block tw-gap-4">
|
||||
<div class="tw-inline-flex tw-flex-col tw-items-center tw-gap-1 tw-min-w-[120px]">
|
||||
<div class="tw-w-[100px] tw-h-[60px] tw-rounded tw-flex tw-items-center tw-justify-center tw-text-xs tw-bg-info-bg tw-text-info-text tw-border tw-border-info-border">Text</div>
|
||||
<code>info-bg</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,3 @@
|
||||
sub template triggers an executing error
|
||||
|
||||
{{ctx.Locale.NoSuch "asdf"}}
|
||||
@@ -0,0 +1,12 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest">
|
||||
<div class="tw-flex">
|
||||
<div class="tw-w-4/5">
|
||||
hello hello hello hello hello hello hello hello hello hello
|
||||
</div>
|
||||
<div class="tw-w-1/5">
|
||||
{{template "devtest/tmplerr-sub" .}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,14 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content">
|
||||
<div data-global-init="initDevtestDetailsErrorMessage"></div>
|
||||
<div class="ui container">
|
||||
<h1>Toast</h1>
|
||||
<div>
|
||||
<button class="ui button toast-test-button" data-toast-level="info" data-toast-message="test info">Show Info Toast</button>
|
||||
<button class="ui button toast-test-button" data-toast-level="warning" data-toast-message="test warning">Show Warning Toast</button>
|
||||
<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="test error">Show Error Toast</button>
|
||||
<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong message">Show Error Toast (long)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -0,0 +1,17 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content repository">
|
||||
<div class="file-content">
|
||||
<table class="file-view unicode-escaped">
|
||||
<tbody>
|
||||
{{range $idx, $line := .HighlightLines}}
|
||||
<tr>
|
||||
<td class="lines-num"><span data-line-number="{{$line.Num}}"></span></td>
|
||||
{{ctx.RenderUtils.RenderUnicodeEscapeToggleTd $.EscapeStatus (index $.LineEscapeStatus $idx)}}
|
||||
<td class="lines-code chroma"><div class="code-inner">{{$line.FormattedContent}}</div></td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
Reference in New Issue
Block a user