/
gitea-ui.tmpl
331 lines (307 loc) · 12.7 KB
/
gitea-ui.tmpl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
{{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 tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input & flex-item 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>
</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" .}}