a579a0f318
1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074 --- Conflict resolution: Trivial. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
330 lines
13 KiB
Go HTML Template
330 lines
13 KiB
Go HTML Template
{{template "base/head" .}}
|
|
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
State:
|
|
<label><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>
|
|
<button class="ui negative button">Negative</button>
|
|
<button class="ui basic negative button">Basic Negative</button>
|
|
<button class="ui positive button">Positive</button>
|
|
<button class="ui basic positive button">Basic Positive</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 primary button">Green</button>
|
|
<button class="ui basic primary button">Basic Green</button>
|
|
<button class="ui blue button">Blue</button>
|
|
<button class="ui basic blue button">Basic Blue</button>
|
|
<button class="ui orange button">Orange</button>
|
|
<button class="ui basic orange button">Basic Orange</button>
|
|
<button class="ui yellow button">Yellow</button>
|
|
<button class="ui basic yellow button">Basic Yellow</button>
|
|
</li>
|
|
<li class="sample-group">
|
|
<h2>Supported but not recommended:</h2>
|
|
<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
|
|
<button class="ui secondary button">Secondary</button>
|
|
<button class="ui basic secondary button">Basic Secondary</button>
|
|
<button class="ui olive button">Olive</button>
|
|
<button class="ui basic olive button">Basic Olive</button>
|
|
<button class="ui teal button">Teal</button>
|
|
<button class="ui basic teal button">Basic Teal</button>
|
|
<button class="ui violet button">Violet</button>
|
|
<button class="ui basic violet button">Basic Violet</button>
|
|
<button class="ui purple button">Purple</button>
|
|
<button class="ui basic purple button">Basic Purple</button>
|
|
<button class="ui pink button">Pink</button>
|
|
<button class="ui basic pink button">Basic Pink</button>
|
|
<button class="ui brown button">Brown</button>
|
|
<button class="ui basic brown button">Basic Brown</button>
|
|
</li>
|
|
<li class="sample-group">
|
|
<h2>Inline / Plain:</h2>
|
|
<div class="gt-my-2">
|
|
<button class="btn gt-p-3">Plain button</button>
|
|
<button class="btn interact-fg gt-p-3">Plain button with interact fg</button>
|
|
<button class="btn interact-bg gt-p-3">Plain button with interact bg</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<script type="module">
|
|
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 small-loading-icon tw-border tw-border-secondary gt-py-2"><span>loading ...</span></div>
|
|
<div class="is-loading tw-border tw-border-secondary gt-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: {{TimeSince .TimeNow ctx.Locale}}</div>
|
|
<div>5s past: {{TimeSince .TimePast5s ctx.Locale}}</div>
|
|
<div>5s future: {{TimeSince .TimeFuture5s ctx.Locale}}</div>
|
|
<div>2m past: {{TimeSince .TimePast2m ctx.Locale}}</div>
|
|
<div>2m future: {{TimeSince .TimeFuture2m ctx.Locale}}</div>
|
|
<div>1y past: {{TimeSince .TimePast1y ctx.Locale}}</div>
|
|
<div>1y future: {{TimeSince .TimeFuture1y ctx.Locale}}</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 yellow 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>
|
|
|
|
<h2>Dropdown with SVG</h2>
|
|
<div>
|
|
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
|
|
<span class="text">simple</span>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
<div class="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">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>
|
|
</div>
|
|
<div class="ui multiple clearable search selection dropdown">
|
|
<input type="hidden" value="1">
|
|
{{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>
|
|
</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 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 class="ui dropdown large button">
|
|
<span class="text">large 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 class="ui dropdown large compact button">
|
|
<span class="text">large compact</span>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<hr>
|
|
<div class="ui tiny button">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>
|
|
<h1>Toast</h1>
|
|
<div>
|
|
<button class="ui button" id="info-toast">Show Info Toast</button>
|
|
<button class="ui button" id="warning-toast">Show Warning Toast</button>
|
|
<button class="ui button" id="error-toast">Show Error Toast</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>ComboMarkdownEditor</h1>
|
|
<div>ps: no JS code attached, so just a layout</div>
|
|
{{template "shared/combomarkdowneditor" .}}
|
|
</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>
|
|
|
|
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
|
</div>
|
|
{{template "base/footer" .}}
|