From 350d06068e1fc827878d19ccde4518f66bcf455b Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Mon, 23 Dec 2024 16:50:01 +0800
Subject: [PATCH] change select style (#7236)

---
 .../components/common/group-select/index.css  | 12 +---
 .../common/select/seahub-select-style.js      | 69 +++++++++++++------
 frontend/src/css/user-select.css              |  8 ---
 frontend/src/view-file-sdoc.js                |  5 +-
 4 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/common/group-select/index.css b/frontend/src/components/common/group-select/index.css
index 0fc0a0f885..3b1772acbf 100644
--- a/frontend/src/components/common/group-select/index.css
+++ b/frontend/src/components/common/group-select/index.css
@@ -11,13 +11,10 @@
   max-width: 900px;
   user-select: none;
   text-align: left;
-  border-color: hsl(0, 0%, 80%);
+  border-color: 1px solid rgba(0, 40, 100, 0.12);
   height: auto;
   min-height: 38px;
-}
-
-.group-select.custom-select:hover {
-  border-color: hsl(0, 0%, 70%);
+  cursor: pointer;
 }
 
 .group-select.custom-select:focus,
@@ -34,11 +31,6 @@
   cursor: default;
 }
 
-.group-select.custom-select:hover {
-  cursor: pointer;
-  border-color: rgb(179, 179, 179);
-}
-
 .group-select .sf3-font-down {
   display: inline-block;
   color: #999;
diff --git a/frontend/src/components/common/select/seahub-select-style.js b/frontend/src/components/common/select/seahub-select-style.js
index b2aa726170..8234fe1f72 100644
--- a/frontend/src/components/common/select/seahub-select-style.js
+++ b/frontend/src/components/common/select/seahub-select-style.js
@@ -1,3 +1,44 @@
+// Seahub select is based on seafile-ui.css, so use the following content to override the default react-select style
+const DEFAULT_CONTROL_STYLE = {
+  border: '1px solid rgba(0, 40, 100, 0.12) !important',
+};
+
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  backgroundColor: '#ffffff',
+  borderColor: '#1991eb',
+  outline: '0',
+  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)',
+};
+
+const noneCallback = () => ({
+  display: 'none',
+});
+
+const controlCallback = (provided, state) => {
+  const { isDisabled, isFocused } = state;
+  if (isFocused && !isDisabled) {
+    return {
+      ...provided,
+      ...FOCUS_CONTROL_STYLE,
+      '&:hover': {
+        ...provided,
+        ...FOCUS_CONTROL_STYLE,
+      }
+    };
+  }
+  return {
+    ...provided,
+    fontSize: '14px',
+    lineHeight: '1.5',
+    cursor: 'pointer',
+    ...DEFAULT_CONTROL_STYLE,
+    '&:hover': {
+      ...DEFAULT_CONTROL_STYLE,
+    }
+  };
+};
+
 const MenuSelectStyle = {
   option: (provided, state) => {
     const { isDisabled, isSelected, isFocused } = state;
@@ -10,14 +51,9 @@ const MenuSelectStyle = {
       },
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
+  control: controlCallback,
   menuPortal: base => ({ ...base, zIndex: 9999 }),
-  indicatorSeparator: () => {},
+  indicatorSeparator: noneCallback,
 };
 
 const UserSelectStyle = {
@@ -29,21 +65,10 @@ const UserSelectStyle = {
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
-  indicatorSeparator: () => ({
-    display: 'none',
-  }),
-  dropdownIndicator: () => ({
-    display: 'none',
-  }),
-  clearIndicator: () => ({
-    display: 'none',
-  }),
+  control: controlCallback,
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
   // multi select style
   multiValue: (provided) => {
     return {
diff --git a/frontend/src/css/user-select.css b/frontend/src/css/user-select.css
index f91e71be92..7421482900 100644
--- a/frontend/src/css/user-select.css
+++ b/frontend/src/css/user-select.css
@@ -30,11 +30,3 @@
   line-height: 20px;
   margin-left: 5px;
 }
-
-.user-select .true__control.true__control--is-focused,
-.user-select .true__control.true__control--is-focused:hover {
-  background-color: #ffffff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
diff --git a/frontend/src/view-file-sdoc.js b/frontend/src/view-file-sdoc.js
index 40a0730c66..ce9a526bba 100644
--- a/frontend/src/view-file-sdoc.js
+++ b/frontend/src/view-file-sdoc.js
@@ -14,7 +14,7 @@ const { serviceURL, avatarURL, siteRoot, lang, mediaUrl, isPro } = window.app.co
 const { username, name } = window.app.userInfo;
 const {
   repoID, repoName, repoEncrypted, parentDir, filePerm,
-  docPath, docName, docUuid, docPerm, seadocAccessToken, seadocServerUrl, assetsUrl,
+  docPath, docName, docUuid, seadocAccessToken, seadocServerUrl, assetsUrl,
   isSdocRevision, isPublished, originFilename, revisionCreatedAt, originFileVersion,
   originFilePath, originDocUuid, revisionId, isFreezed, mobileLogin, isRepoAdmin
 } = window.app.pageOptions;
@@ -62,8 +62,7 @@ ReactDom.render(
       <MetadataStatusProvider repoID={repoID} currentRepoInfo={repoInfo}>
         <CollaboratorsProvider repoID={repoID}>
           <TagsProvider repoID={repoID} repoInfo={repoInfo}>
-            {filePerm === 'rw' && <SdocEditor />}
-            {filePerm !== 'rw' && <SimpleViewer />}
+            {filePerm === 'rw' ? <SdocEditor /> : <SimpleViewer />}
           </TagsProvider>
         </CollaboratorsProvider>
       </MetadataStatusProvider>