From 306f04a281910899179f5d8a98cf4b56d636fb8e Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 22 Mar 2023 11:06:46 +0800 Subject: [PATCH 1/4] fix --- templates/base/footer_content.tmpl | 5 ++-- templates/repo/home.tmpl | 35 ++++++++++++---------------- web_src/css/base.css | 10 +++++--- web_src/css/helpers.css | 1 + web_src/css/repository.css | 29 +++-------------------- web_src/js/features/common-global.js | 7 +++--- web_src/js/features/repo-home.js | 33 ++++++++++++-------------- web_src/js/index.js | 14 ++++------- web_src/js/modules/fomantic.js | 29 +++++++++++++++++++++++ 9 files changed, 79 insertions(+), 84 deletions(-) create mode 100644 web_src/js/modules/fomantic.js diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index 53d0a2c77cf18..245a615735579 100644 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -19,9 +19,8 @@ {{if .ShowFooterBranding}} {{svg "octicon-mark-github"}}GitHub {{end}} -
- {{svg "octicon-globe"}} - {{.locale.LangName}} +
+ {{svg "octicon-globe"}} {{.locale.LangName}}
{{range .AllLangs}} {{.Name}} diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 73afbd663db39..70dd9c621b6f5 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -28,34 +28,29 @@
{{end}}
-
- {{range .Topics}}{{.Name}}{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{.locale.Tr "repo.topic.manage_topics"}}{{end}} +
+ {{range .Topics}}{{.Name}}{{end}} + {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}{{end}}
{{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} -
-
-
-
- - {{range .Topics}} -
{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}
- {{end}} -
-
+
+
+
+ + {{range .Topics}} + {{/* keey the same layout as Fomantic UI generated labels */}} + {{.Name}}{{svg "octicon-x" 16 "delete icon"}} + {{end}} +
-
- {{.locale.Tr "repo.topic.done"}} +
+ +
{{end}} -
- {{.locale.Tr "repo.topic.count_prompt"}} - {{.locale.Tr "repo.topic.format_prompt"}} -
{{if .Repository.IsArchived}}
{{.locale.Tr "repo.archive.title"}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 1077a0eebd022..f429b7f767788 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1854,15 +1854,15 @@ footer .container .links > *:first-child { } footer .ui.language .menu { - max-height: 500px; + height: 500px; + max-height: calc(100vh - 60px); overflow-y: auto; margin-bottom: 7px; } footer .ui.language .svg { margin-right: 0.15em; - vertical-align: top; - margin-top: calc(2em - 16px); + margin-top: 1px; } footer .ui.left, @@ -2387,6 +2387,10 @@ a.ui.label:hover { color: var(--color-text); } +.ui.tertiary.button:focus { + color: var(--color-text-dark); +} + .ui.primary.label, .ui.primary.labels .label { background-color: var(--color-primary) !important; diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 1c02de2d7a0b8..a6f89c83ad242 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -23,6 +23,7 @@ .gt-pointer-events-none { pointer-events: none !important; } .gt-relative { position: relative !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } +.gt-cursor-default { cursor: default !important; } .gt-mono { font-family: var(--fonts-monospace) !important; diff --git a/web_src/css/repository.css b/web_src/css/repository.css index eb555abec8443..87cf9763040c4 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -3061,21 +3061,10 @@ tbody.commit-list { top: -2px; } -#topic_edit { - margin-top: 5px; -} - -#repo-topics { - margin-top: 5px; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.repo-topic { - font-weight: normal !important; +#repo-topics .repo-topic { + font-weight: normal; cursor: pointer; - margin: 2px !important; + margin: 2px; } #new-dependency-drop-list.ui.selection.dropdown { @@ -3091,18 +3080,6 @@ tbody.commit-list { overflow: hidden; } -#manage_topic { - font-size: 12px; -} - -.label + #manage_topic { - margin-left: 5px; -} - -.ui.small.label.topic { - margin-bottom: 4px; -} - .repo-header { display: flex; align-items: center; diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 113ff2e1f1592..1e9666b2808f5 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -90,7 +90,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. @@ -118,9 +118,8 @@ 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(); diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index dfccffc79488a..e08e84b393cb3 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 = $(''); 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')); }); diff --git a/web_src/js/index.js b/web_src/js/index.js index 7d74ee6b944c4..c59945ca89d6e 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -89,20 +89,14 @@ import {initFormattingReplacements} from './features/formatting.js'; import {initCopyContent} from './features/copycontent.js'; import {initCaptcha} from './features/captcha.js'; import {initRepositoryActionView} from './components/RepoActionView.vue'; -import {initAriaCheckboxPatch} from './modules/aria/checkbox.js'; -import {initAriaDropdownPatch} from './modules/aria/dropdown.js'; +import {initGiteaFomantic} from './modules/fomantic.js'; // Run time-critical code as soon as possible. This is safe to do because this // script appears at the end of and rendered HTML is accessible at that point. +// TODO: replace them with CustomElements initFormattingReplacements(); - -// Silence fomantic's error logging when tabs are used without a target content element -$.fn.tab.settings.silent = true; -// Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element. -$.fn.checkbox.settings.enableEnterKey = false; -// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. -initAriaCheckboxPatch(); -initAriaDropdownPatch(); +// Init Gitea's Fomantic settings +initGiteaFomantic(); $(document).ready(() => { initGlobalCommon(); diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js new file mode 100644 index 0000000000000..218166249fb7b --- /dev/null +++ b/web_src/js/modules/fomantic.js @@ -0,0 +1,29 @@ +import $ from 'jquery'; +import {initAriaCheckboxPatch} from './aria/checkbox.js'; +import {initAriaDropdownPatch} from './aria/dropdown.js'; +import {svg} from '../svg.js'; + +export function initGiteaFomantic() { + // Silence fomantic's error logging when tabs are used without a target content element + $.fn.tab.settings.silent = true; + // Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element. + $.fn.checkbox.settings.enableEnterKey = false; + + // Prevent Fomantic from guessing the popup direction. + // Otherwise, if the viewport height is small, Fomantic would show the popup upward, + // if the dropdown is at the beginning of the page, then the top part would be clipped by the window view, eg: Issue List "Sort" dropdown + $.fn.dropdown.settings.direction = 'downward'; + // By default, use "exact match" for full text search + $.fn.dropdown.settings.fullTextSearch = 'exact'; + // Do not use "cursor: pointer" for dropdown labels + $.fn.dropdown.settings.className.label += ' gt-cursor-default'; + // Always use Gitea's SVG icons + $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) { + const escape = $.fn.dropdown.settings.templates.escape; + return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`); + }; + + // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. + initAriaCheckboxPatch(); + initAriaDropdownPatch(); +} From 4e6117607a90f16e2bd819dd2d10cdc3a5526fed Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 23 Mar 2023 13:17:45 +0800 Subject: [PATCH 2/4] use tooltip's content as aria-label if there is no aria-label --- web_src/js/modules/aria/dropdown.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/aria/dropdown.js b/web_src/js/modules/aria/dropdown.js index 70d524cfe77c7..e4c881b6af3ce 100644 --- a/web_src/js/modules/aria/dropdown.js +++ b/web_src/js/modules/aria/dropdown.js @@ -102,8 +102,9 @@ function attachStaticElements($dropdown, $focusable, $menu) { }); // use tooltip's content as aria-label if there is no aria-label - if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { - $dropdown.attr('aria-label', $dropdown.attr('data-content')); + const tooltipContent = $dropdown.attr('data-tooltip-content'); + if (tooltipContent && !$dropdown.attr('aria-label')) { + $dropdown.attr('aria-label', tooltipContent); } } From 197eaf6fb6b7099dae40bcee577b00fa7f86ac67 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 23 Mar 2023 18:23:58 +0800 Subject: [PATCH 3/4] fix merge --- web_src/js/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/index.js b/web_src/js/index.js index 3b112ef806321..80edc0548016f 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -88,6 +88,7 @@ import {initFormattingReplacements} from './features/formatting.js'; import {initCopyContent} from './features/copycontent.js'; import {initCaptcha} from './features/captcha.js'; import {initRepositoryActionView} from './components/RepoActionView.vue'; +import {initGlobalTooltips} from './modules/tippy.js'; import {initGiteaFomantic} from './modules/fomantic.js'; // Run time-critical code as soon as possible. This is safe to do because this From e86fa4298ff39373ba8c17356c209ff68e966fd1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 24 Mar 2023 09:47:34 +0800 Subject: [PATCH 4/4] remove incorrect "tabable" css class --- web_src/js/components/DashboardRepoList.vue | 2 +- web_src/js/features/common-global.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index a97cfb02babe6..03bb9018933de 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -1,6 +1,6 @@