Change tag list UI (#5637)

* 01 change file tags list

* 02 change select tags UI

* change edit icons

frontend/src/css/common-add-tool.css

@@ -0,0 +1,33 @@
+.add-item-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  border-top: 1px solid #dedede;
+  background: #fff;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  position: relative;
+  height: 30px;
+  padding: 0 10px;
+  overflow: hidden;
+}
+
+.add-item-btn:hover {
+  background-color: #f5f5f5;
+}
+
+.add-item-btn .dtable-icon-add-table {
+  margin-right: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  transform: none;
+}
+
+.add-item-btn .add-new-option {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/src/css/dirent-detail.css

@@ -106,24 +106,10 @@
   list-style: none;
 }
 
-.file-tag-list li {
-  display: flex;
-  align-items: center;
-  max-width: 180px;
-}
-
-.file-tag-list .file-tag-item .file-tag {
-  width: 12px;
-  height: 12px;
-}
-
-.file-tag-list .tag-name {
-  display: inline-block;
-  margin-left: 5px;
-  width: 80px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.dirent-table-container .seafile-multicolor-icon.seafile-multicolor-icon-tag {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
 }
 
 .file-related-files th {

frontend/src/css/edit-filetag-popover.css

@@ -0,0 +1,46 @@
+.edit-filetag-popover .edit-filetag-popover-input {
+  max-height: 30px;
+  font-size: 14px;
+  color: #212529;
+  height: 30px;
+}
+
+.edit-filetag-popover .popover {
+  padding: 10px;
+  width: 200px;
+  padding-bottom: 0px;
+}
+
+.edit-filetag-popover .tag-list-container {
+  padding: 10px 0;
+}
+
+.edit-filetag-popover .tag-list-container .tag-not-found {
+  opacity: 0.5;
+}
+
+.edit-filetag-popover .tag-list-item {
+  height: 30px;
+}
+
+.edit-filetag-popover .tag-item {
+  display: flex;
+  align-items: center;
+  max-width: 130px;
+  margin: 0.25rem 0;
+  padding: 0 0.5rem;
+  width: fit-content;
+  border-radius: 10px;
+}
+
+.edit-filetag-popover .tag-item .tag-name {
+  color: #fff;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.edit-filetag-popover .add-item-btn {
+  margin: 0 -10px;
+}

frontend/src/css/file-tag-list.css

@@ -0,0 +1,17 @@
+.file-tag-list .file-tag-item {
+  display: flex;
+  align-items: center;
+  max-width: 180px;
+  margin: 0.25rem 0;
+  padding: 0 0.5rem;
+  width: fit-content;
+  border-radius: 10px;
+}
+
+.file-tag-list .file-tag-item .tag-name {
+  color: #fff;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

frontend/src/css/repo-tag.css

@@ -35,19 +35,6 @@
   color: #444;
 }
 
-.file-tag-item {
-  margin: 0.25rem 0;
-  padding: 0 0.5rem;
-  width: max-content;
-  cursor: pointer;
-  background-color: #eee;
-  border-radius: 1rem;
-}
-
-.file-tag-item:hover {
-  background-color: #bbb;
-}
-
 .tag-dialog-back {
   color: #888;
   cursor: pointer;
@@ -65,9 +52,9 @@
 }
 
 .tag-color-option .color-selected {
-    opacity: 0;
+  opacity: 0;
 }
 
 .tag-color-option .colorinput-input:checked ~ .colorinput-color .color-selected {
-    opacity: 1;
+  opacity: 1;
 }