use svg, fine tune styles

Author: wxiaoguang

templates/repo/home.tmpl

@@ -28,9 +28,9 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="gt-mt-3" id="repo-topics">
+		<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">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{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)}}
@@ -43,9 +43,8 @@
 				>
 					<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
-								and keep the same as template (repo-topic-label), the style is also added by Fomantic Dropdown automatically when generating new labels */}}
-						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}<i class="delete icon"></i></div>
+						{{/* keep the same as template (repo-topic-label), the style "display" is also added by Fomantic Dropdown automatically when generating new labels */}}
+						<div class="ui small label topic transition visible gt-cursor-default" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}</div>
 					{{end}}
 					<div class="text"></div>
 				</div>

web_src/js/features/repo-home.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import {stripTags} from '../utils.js';
 import {hideElem, showElem} from '../utils/dom.js';
 import {htmlEscape} from 'escape-goat';
+import {svg} from '../svg.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -21,16 +22,16 @@ export function initRepoTopicBar() {
   };
 
   function addLabelDeleteIconAria($el) {
-    $el.attr({
+    $el.removeAttr('aria-hidden').attr({
       'aria-label': topicPrompts.remove,
       'role': 'button',
-    }).addClass('gt-px-2'); // make it slightly larger to be easier to click on mobile
+    });
   }
 
   mgrBtn.on('click', () => {
     hideElem(topicListDiv);
     showElem(topicForm);
-    addLabelDeleteIconAria(topicDropdown.find('i.delete.icon'));
+    addLabelDeleteIconAria(topicDropdown.find('.delete.icon'));
     topicDropdownSearch.focus();
   });
 
@@ -151,9 +152,9 @@ export function initRepoTopicBar() {
     onLabelCreate(value) {
       value = value.toLowerCase().trim();
       // `this` is the default label jQuery element, it's "<a class="ui small label">"
-      // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `<a>` tag to affect aria focus.
-      const $el = $(`<div class="ui small label topic" data-value="${htmlEscape(value)}">${htmlEscape(value)}<i class="delete icon"></i></div>`);
-      addLabelDeleteIconAria($el.find('i.delete.icon'));
+      // we create a new div element to replace it, to keep the same as template (repo-topic-label), because we do not want the `<a>` tag which affects aria focus.
+      const $el = $(`<div class="ui small label topic gt-cursor-default" data-value="${htmlEscape(value)}">${htmlEscape(value)}${svg('octicon-x', 16, 'delete icon gt-ml-3 gt-mt-1')}</div>`);
+      addLabelDeleteIconAria($el.find('.delete.icon'));
       return $el;
     },
     onAdd(addedValue, _addedText, $addedChoice) {

web_src/less/_repository.less

@@ -3010,21 +3010,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 {
@@ -3042,14 +3031,6 @@ tbody.commit-list {
   }
 }
 
-.label + #manage_topic {
-  margin-left: 5px;
-}
-
-.ui.small.label.topic {
-  margin-bottom: 4px;
-}
-
 .repo-header {
   display: flex;
   align-items: center;

web_src/less/helpers.less

@@ -21,6 +21,7 @@
 /* below class names match Tailwind CSS */
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
+.gt-cursor-default { cursor: default !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;