From c16433d7b850d9deb76bb99e78ce5537a6170cf6 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 20 Jun 2024 13:47:57 +0800
Subject: [PATCH] 01 change grid mode library style (#6236)

---
 .../shared-repo-list-item.js                      |  2 +-
 frontend/src/css/files.css                        | 15 +++++++++++++--
 .../src/pages/my-libs/mylib-repo-list-item.js     |  2 +-
 frontend/src/pages/shared-libs/shared-libs.js     |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index deea188726..c493ab7593 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -678,7 +678,7 @@ class SharedRepoListItem extends React.Component {
           {this.state.isRenaming ?
             <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
             <Fragment>
-              <Link to={libPath} className="text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
+              <Link to={libPath} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
diff --git a/frontend/src/css/files.css b/frontend/src/css/files.css
index 143845a3be..bb1c25304b 100644
--- a/frontend/src/css/files.css
+++ b/frontend/src/css/files.css
@@ -37,7 +37,18 @@
   background: #f5f5f5;
 }
 
-.library-grid-item-icon {
+.library-grid-item .library-name {
+  color: #212529;
+}
+
+.library-grid-item .library-grid-item-icon {
   margin-left: 6px;
 }
-  
+
+.library-grid-item .library-grid-item-icon.sf3-font-star-empty {
+  opacity: 0;
+}
+
+.library-grid-item:hover .library-grid-item-icon.sf3-font-star-empty {
+  opacity: 1;
+}
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index 93ebabf41c..ed2e4772a8 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -391,7 +391,7 @@ class MylibRepoListItem extends React.Component {
           )}
           {!this.state.isRenaming && repo.repo_name && (
             <Fragment>
-              <Link to={repoURL} className="text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
+              <Link to={repoURL} className="library-name text-truncate" title={repo.repo_name}>{repo.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index 5ef429a67a..b989180743 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -337,7 +337,7 @@ class Item extends Component {
           >
             <div className="d-flex align-items-center text-truncate">
               <img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="36" className="mr-2" />
-              <Link to={shareRepoUrl} className="text-truncate" title={data.repo_name}>{data.repo_name}</Link>
+              <Link to={shareRepoUrl} className="text-truncate library-name" title={data.repo_name}>{data.repo_name}</Link>
               <i
                 role="button"
                 title={this.state.isStarred ? gettext('Unstar') : gettext('Star')}