Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-23 10:41:24 +02:00
Code Issues Activity

extraction

Browse Source
This commit is contained in:
Nicolas 2026-04-18 21:22:22 +02:00
parent f17f89b3dd
commit 8f6f30c1ce
3 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
templates/devtest/icon-gallery.tmpl
View File

@ -3,39 +3,19 @@
<h1>Icon Gallery</h1> <h1>Icon Gallery</h1>
<p>All <strong>{{.IconCount}}</strong> SVG icons available in templates.</p> <p>All <strong>{{.IconCount}}</strong> SVG icons available in templates.</p>
<p> <p>
<input id="icon-search" type="text" placeholder="Filter icons..." class="ui input" style="width: 300px"> <input id="icon-search" type="text" placeholder="Filter icons..." class="ui input icon-gallery-search">
<label class="gt-checkbox tw-ml-4"><input id="icon-size-toggle" type="checkbox"> Large (24px)</label> <label class="gt-checkbox tw-ml-4"><input id="icon-size-toggle" type="checkbox"> Large (24px)</label>
</p> </p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const search = document.getElementById('icon-search');
const sizeToggle = document.getElementById('icon-size-toggle');
search.addEventListener('input', () => {
const q = search.value.toLowerCase();
for (const card of document.querySelectorAll('.icon-card')) {
card.style.display = card.getAttribute('data-name').includes(q) ? '' : 'none';
}
});
sizeToggle.addEventListener('change', () => {
const size = sizeToggle.checked ? '24' : '16';
for (const icon of document.querySelectorAll('.icon-card svg')) {
icon.setAttribute('width', size);
icon.setAttribute('height', size);
}
});
});
</script>
{{range $prefix := .IconGroupOrder}} {{range $prefix := .IconGroupOrder}}
{{$icons := index $.IconGroups $prefix}} {{$icons := index $.IconGroups $prefix}}
{{if $icons}} {{if $icons}}
<h2 id="group-{{$prefix}}">{{$prefix}} <span class="ui grey label">{{len $icons}}</span></h2> <h2 id="group-{{$prefix}}">{{$prefix}} <span class="ui grey label">{{len $icons}}</span></h2>
<div class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-4"> <div class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-4">
{{range $name := $icons}} {{range $name := $icons}}
<div class="icon-card tw-flex tw-flex-col tw-items-center tw-gap-1 tw-p-2 tw-border tw-border-secondary tw-rounded" style="width: 120px" data-name="{{$name}}" title="{{$name}}"> <div class="icon-card icon-gallery-card tw-flex tw-flex-col tw-items-center tw-gap-1 tw-p-2 tw-border tw-border-secondary tw-rounded" data-name="{{$name}}" title="{{$name}}">
<div class="tw-flex tw-items-center tw-justify-center" style="height: 32px">{{svg $name 16}}</div> <div class="icon-gallery-preview tw-flex tw-items-center tw-justify-center">{{svg $name 16}}</div>
<code class="gt-ellipsis" style="max-width: 108px; font-size: 10px">{{$name}}</code> <code class="gt-ellipsis icon-gallery-name">{{$name}}</code>
</div> </div>
{{end}} {{end}}
</div> </div>

17
web_src/css/devtest.css
View File

@ -18,3 +18,20 @@ h1, h2 {
.fetch-action-demo-forms .form-fetch-action { .fetch-action-demo-forms .form-fetch-action {
border: 1px red dashed; /* show the border for demo purpose */ border: 1px red dashed; /* show the border for demo purpose */
} }
.icon-gallery-search {
width: 300px;
}
.icon-gallery-card {
width: 120px;
}
.icon-gallery-preview {
height: 32px;
}
.icon-gallery-name {
max-width: 108px;
font-size: 10px;
}

19
web_src/js/modules/devtest.ts
View File

@ -8,6 +8,25 @@ import {html} from '../utils/html.ts';
type LevelMap = Record<string, (message: string) => Toast | null>; type LevelMap = Record<string, (message: string) => Toast | null>;
function initDevtestPage() { function initDevtestPage() {
const iconSearch = document.querySelector<HTMLInputElement>('#icon-search');
const iconSizeToggle = document.querySelector<HTMLInputElement>('#icon-size-toggle');
if (iconSearch && iconSizeToggle) {
iconSearch.addEventListener('input', () => {
const query = iconSearch.value.toLowerCase();
for (const card of document.querySelectorAll<HTMLElement>('.icon-card')) {
card.style.display = card.getAttribute('data-name')!.includes(query) ? '' : 'none';
}
});
iconSizeToggle.addEventListener('change', () => {
const size = iconSizeToggle.checked ? '24' : '16';
for (const icon of document.querySelectorAll<SVGElement>('.icon-card svg')) {
icon.setAttribute('width', size);
icon.setAttribute('height', size);
}
});
}
const toastButtons = document.querySelectorAll('.toast-test-button'); const toastButtons = document.querySelectorAll('.toast-test-button');
if (toastButtons.length) { if (toastButtons.length) {
const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast}; const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};