diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-03-26 19:31:26 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-26 19:31:26 +0800 |
| commit | 12fff36d057998fe553decdc81c881d3d0e70274 (patch) | |
| tree | 9c2255c96477680a48a26bb88f39f5943d075051 /web_src/js/features | |
| parent | ac64c8297444ade63a2a364c4afb7e6c1de5a75f (diff) | |
| download | gitea-12fff36d057998fe553decdc81c881d3d0e70274.tar.gz gitea-12fff36d057998fe553decdc81c881d3d0e70274.zip | |
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
</details>
After:
Diffstat (limited to 'web_src/js/features')
| -rw-r--r-- | web_src/js/features/common-global.js | 8 | ||||
| -rw-r--r-- | web_src/js/features/repo-home.js | 33 |
2 files changed, 18 insertions, 23 deletions
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index a10ca74ab5..a061e53d8a 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -83,7 +83,7 @@ export function initGlobalCommon() { const $uiDropdowns = $('.ui.dropdown'); // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code. - $uiDropdowns.filter(':not(.custom)').dropdown({fullTextSearch: 'exact'}); + $uiDropdowns.filter(':not(.custom)').dropdown(); // The "jump" means this dropdown is mainly used for "menu" purpose, // clicking an item will jump to somewhere else or trigger an action/function. @@ -111,14 +111,12 @@ export function initGlobalCommon() { }, }); - // special animations/popup-directions - $uiDropdowns.filter('.slide.up').dropdown({transition: 'slide up'}); - $uiDropdowns.filter('.upward').dropdown({direction: 'upward'}); + // special popup-directions + $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward'); $('.ui.checkbox').checkbox(); $('.tabular.menu .item').tab(); - $('.tabable.menu .item').tab(); $('.toggle.button').on('click', function () { toggleElem($($(this).data('target'))); diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index dfccffc794..e08e84b393 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -6,27 +6,29 @@ const {appSubUrl, csrfToken} = window.config; export function initRepoTopicBar() { const mgrBtn = $('#manage_topic'); + if (!mgrBtn.length) return; const editDiv = $('#topic_edit'); const viewDiv = $('#repo-topics'); const saveBtn = $('#save_topic'); const topicDropdown = $('#topic_edit .dropdown'); - const topicForm = $('#topic_edit.ui.form'); - const topicPrompts = getPrompts(); + const topicForm = editDiv; // the old logic, editDiv is topicForm + const topicDropdownSearch = topicDropdown.find('input.search'); + const topicPrompts = { + countPrompt: topicDropdown.attr('data-text-count-prompt'), + formatPrompt: topicDropdown.attr('data-text-format-prompt'), + }; mgrBtn.on('click', () => { hideElem(viewDiv); showElem(editDiv); + topicDropdownSearch.focus(); }); - function getPrompts() { - const hidePrompt = $('#validate_prompt'); - const prompts = { - countPrompt: hidePrompt.children('#count_prompt').text(), - formatPrompt: hidePrompt.children('#format_prompt').text() - }; - hidePrompt.remove(); - return prompts; - } + $('#cancel_topic_edit').on('click', () => { + hideElem(editDiv); + showElem(viewDiv); + mgrBtn.focus(); + }); saveBtn.on('click', () => { const topics = $('input[name=topics]').val(); @@ -39,13 +41,11 @@ export function initRepoTopicBar() { viewDiv.children('.topic').remove(); if (topics.length) { const topicArray = topics.split(','); - - const last = viewDiv.children('a').last(); for (let i = 0; i < topicArray.length; i++) { const link = $('<a class="ui repo-topic large label topic"></a>'); link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`); link.text(topicArray[i]); - link.insertBefore(last); + link.insertBefore(mgrBtn); // insert all new topics before manage button } } hideElem(editDiv); @@ -86,9 +86,6 @@ export function initRepoTopicBar() { duration: 200, variation: false, }, - className: { - label: 'ui small label' - }, apiSettings: { url: `${appSubUrl}/explore/topics/search?q={query}`, throttle: 500, @@ -101,7 +98,7 @@ export function initRepoTopicBar() { const query = stripTags(this.urlData.query.trim()); let found_query = false; const current_topics = []; - topicDropdown.find('div.label.visible.topic,a.label.visible').each((_, el) => { + topicDropdown.find('a.label.visible').each((_, el) => { current_topics.push(el.getAttribute('data-value')); }); |