fix

Author: wxiaoguang

options/locale/locale_en-US.ini

@@ -2354,7 +2354,6 @@ tag.create_tag_from = Create new tag from '%s'
 tag.create_success = Tag '%s' has been created.
 
 topic.manage_topics = Manage Topics
-topic.done = Done
 topic.count_prompt = You cannot select more than 25 topics
 topic.format_prompt = Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

templates/repo/home.tmpl

@@ -29,26 +29,25 @@
 			{{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}}
+			{{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">{{.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">
+					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
+					{{range .Topics}}
+						{{/* lalels generated by Fomantic still use `<i class="delete icon">`, to avoid mixing different style together and to remind future developers, use it instead of svg*/}}
+						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}<i class="delete icon"></i></div>
+					{{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}}

web_src/js/features/repo-home.js

@@ -10,12 +10,20 @@ export function initRepoTopicBar() {
   const viewDiv = $('#repo-topics');
   const saveBtn = $('#save_topic');
   const topicDropdown = $('#topic_edit .dropdown');
-  const topicForm = $('#topic_edit.ui.form');
+  const topicDropdownSearch = topicDropdown.find('input.search');
+  const topicForm = $('#topic_edit');
   const topicPrompts = getPrompts();
 
   mgrBtn.on('click', () => {
     hideElem(viewDiv);
     showElem(editDiv);
+    topicDropdownSearch.focus();
+  });
+
+  $('#cancel_topic_edit').on('click', () => {
+    hideElem(editDiv);
+    showElem(viewDiv);
+    mgrBtn.focus();
   });
 
   function getPrompts() {
@@ -39,13 +47,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);

web_src/less/_base.less

@@ -2329,6 +2329,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;

web_src/less/_repository.less

@@ -3042,10 +3042,6 @@ tbody.commit-list {
   }
 }
 
-#manage_topic {
-  font-size: 12px;
-}
-
 .label + #manage_topic {
   margin-left: 5px;
 }