aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--templates/base/footer_content.tmpl5
-rw-r--r--templates/repo/home.tmpl35
-rw-r--r--web_src/css/base.css10
-rw-r--r--web_src/css/helpers.css1
-rw-r--r--web_src/css/repository.css29
-rw-r--r--web_src/js/components/DashboardRepoList.vue2
-rw-r--r--web_src/js/features/common-global.js8
-rw-r--r--web_src/js/features/repo-home.js33
-rw-r--r--web_src/js/index.js14
-rw-r--r--web_src/js/modules/fomantic.js29
10 files changed, 80 insertions, 86 deletions
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index 53d0a2c77c..245a615735 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -19,9 +19,8 @@
{{if .ShowFooterBranding}}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/go-gitea/gitea">{{svg "octicon-mark-github"}}<span class="sr-only">GitHub</span></a>
{{end}}
- <div class="ui language bottom floating slide up dropdown link item">
- {{svg "octicon-globe"}}
- <span>{{.locale.LangName}}</span>
+ <div class="ui dropdown upward language">
+ <span>{{svg "octicon-globe"}} {{.locale.LangName}}</span>
<div class="menu language-menu">
{{range .AllLangs}}
<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f31a38fc5f..e544b7aab5 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -28,34 +28,29 @@
</div>
{{end}}
</div>
- <div class="gt-mt-3" id="repo-topics">
- {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
- {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}}
+ <div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
+ {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+ {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui button tiny tertiary gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
</div>
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
- <div class="ui repo-topic-edit grid form gt-hidden" id="topic_edit">
- <div class="fourteen wide column">
- <div class="field">
- <div class="ui fluid multiple search selection dropdown">
- <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
- {{range .Topics}}
- <div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}</div>
- {{end}}
- <div class="text"></div>
- </div>
+ <div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
+ <div class="field gt-f1 gt-mr-3">
+ <div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{.locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{.locale.Tr "repo.topic.format_prompt"}}">
+ <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
+ {{range .Topics}}
+ {{/* keey the same layout as Fomantic UI generated labels */}}
+ <a class="ui label transition visible gt-cursor-default" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+ {{end}}
+ <div class="text"></div>
</div>
</div>
- <div class="two wide column">
- <a class="ui button primary" role="button" tabindex="0" id="save_topic"
- data-link="{{.RepoLink}}/topics">{{.locale.Tr "repo.topic.done"}}</a>
+ <div>
+ <button class="ui basic button secondary" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button>
+ <button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{.locale.Tr "save"}}</button>
</div>
</div>
{{end}}
- <div class="gt-hidden" id="validate_prompt">
- <span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span>
- <span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span>
- </div>
{{if .Repository.IsArchived}}
<div class="ui warning message">
{{.locale.Tr "repo.archive.title"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e3b3fece37..d9d93da0c3 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 7c7d576db9..34d2895a5f 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 34c76b15c9..e2f2075946 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -3062,21 +3062,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 {
@@ -3092,18 +3081,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/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 997a390c18..1af53aac90 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div v-if="!isOrganization" class="ui two item tabable menu">
+ <div v-if="!isOrganization" class="ui two item menu">
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textRepository }}</a>
<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textOrganization }}</a>
</div>
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'));
});
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 84ffe8e5db..80edc05480 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -88,21 +88,15 @@ 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 {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
// script appears at the end of <body> 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 0000000000..218166249f
--- /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();
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-25 13:21:44 +0000