mirror of
https://github.com/go-gitea/gitea
synced 2025-07-23 02:38:35 +00:00
Remove fomantic button module (#30475)
CSS-only module. Button colors are reduced to this: <img width="639" alt="Screenshot 2024-04-14 at 15 36 07" src="https://github.com/go-gitea/gitea/assets/115237/882d6c02-d1de-44f2-b707-db02a9f5070d"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
@@ -1,6 +1,15 @@
|
||||
{{template "base/head" .}}
|
||||
<div class="page-content devtest ui container">
|
||||
{{template "base/alert" .}}
|
||||
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
||||
<script type="module">
|
||||
for (const el of $('.ui.modal')) {
|
||||
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
|
||||
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
|
||||
});
|
||||
$('.modal-buttons').append($btn);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="test-modal-form-1" class="ui mini modal">
|
||||
<div class="header">Form dialog (layout 1)</div>
|
||||
@@ -54,33 +63,11 @@
|
||||
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
||||
</div>
|
||||
|
||||
<div class="ui g-modal-confirm modal" id="test-modal-blue">
|
||||
<div class="header">Blue dialog</div>
|
||||
<div class="content">hello, this is the modal dialog content</div>
|
||||
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "blue")}}
|
||||
</div>
|
||||
|
||||
<div class="ui g-modal-confirm modal" id="test-modal-yellow">
|
||||
<div class="header">yellow dialog</div>
|
||||
<div class="content">hello, this is the modal dialog content</div>
|
||||
{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
|
||||
</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="modal-buttons flex-text-block tw-flex-wrap"></div>
|
||||
<script type="module">
|
||||
for (const el of $('.ui.modal')) {
|
||||
const $btn = $('<button>').text(`${el.id}`).on('click', () => {
|
||||
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
|
||||
});
|
||||
$('.modal-buttons').append($btn);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
|
@@ -29,41 +29,13 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -198,7 +170,7 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -271,10 +243,6 @@
|
||||
<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>
|
||||
@@ -290,10 +258,6 @@
|
||||
<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>
|
||||
|
Reference in New Issue
Block a user