git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)

Browse source 
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>

![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)

</details>

After:

![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
This commit is contained in:
wxiaoguang 2023-03-26 19:31:26 +08:00 • committed by GitHub
parent ac64c82974
commit 12fff36d05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 80 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web_src/js/features/repo-home.js
View file

@ -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'));
});