mirror of
https://github.com/go-gitea/gitea.git
synced 2025-07-23 07:41:32 +02:00
3763c2ae28
Although we decided to "reduce the button amount" on the side bar, not only one user reported that the "time tracker dropdown" is not easy to use. So the best we can do at the moment is: move the buttons to the sidebar again. Fix #34979
197 lines
7.8 KiB
Handlebars
197 lines
7.8 KiB
Handlebars
{{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>
|
|
<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 $buttonStates = $('input[name*="button-state"]');
|
|
$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
|
|
});
|
|
</script>
|
|
</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><origin-url></h1>
|
|
<div><origin-url data-url="test/url"></origin-url></div>
|
|
<div><origin-url data-url="/test/url"></origin-url></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>GiteaAbsoluteDate</h1>
|
|
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div>
|
|
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div>
|
|
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div>
|
|
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
|
|
<div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
|
|
<div class="tw-text-text-light-2">relative-time: <relative-time format="datetime" datetime="2024-03-11" year="" day="numeric" month="numeric"></relative-time></div>
|
|
</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>TimeSince</h1>
|
|
<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>
|
|
<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 "MarkdownPreviewContext" "/owner/path"}}
|
|
</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"}}
|