02 change classname and style

haiwen · Jun 18, 2024 · 03cd311 · 03cd311
1 parent 15445bd
commit 03cd311
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 21 deletions.
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -34,6 +34,7 @@ import MainContentWrapper from './components/main-content-wrapper';
 import './css/layout.css';
 import './css/toolbar.css';
 import './css/search.css';
+import './css/app.css';
 
 const FilesActivitiesWrapper = MainContentWrapper(FilesActivities);
 const MyFileActivitiesWrapper = MainContentWrapper(MyFileActivities);

diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
@@ -98,7 +98,7 @@ class MainSideNav extends React.Component {
       <>
         {this.state.groupItems.map(item => {
           return (
-            <li key={item.id} className="nav-item">
+            <li key={item.id} className={`nav-item ${this.getActiveClass(item.name)}`}>
               <Link
                 to={siteRoot + 'group/' + item.id + '/'}
                 className={`nav-link ellipsis ${this.getActiveClass(item.name)}`}
@@ -112,7 +112,7 @@ class MainSideNav extends React.Component {
         })}
         {canAddGroup && (
           <>
-            <li className="nav-item" onClick={this.toggleCreateGroupDialog}>
+            <li className={`nav-item ${this.getActiveClass()}`} onClick={this.toggleCreateGroupDialog}>
               <span className="nav-link" role="button">
                 <i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
                 {gettext('New Group')}
@@ -143,7 +143,7 @@ class MainSideNav extends React.Component {
     let linksNavItem = null;
     if (canGenerateShareLink) {
       linksNavItem = (
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-share-links')}`}>
           <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
@@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
       );
     } else if (canGenerateUploadLink) {
       linksNavItem = (
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-upload-links')}`}>
           <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
@@ -167,14 +167,14 @@ class MainSideNav extends React.Component {
         style={style}
       >
         {canAddRepo && (
-          <li className="nav-item">
+          <li className={`nav-item ${this.getActiveClass('share-admin-libs')}`}>
             <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
               <span aria-hidden="true" className="sharp">#</span>
               <span className="nav-text">{gettext('Libraries')}</span>
             </Link>
           </li>
         )}
-        <li className="nav-item">
+        <li className={`nav-item ${this.getActiveClass('share-admin-folders')}`}>
           <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Folders')}</span>
@@ -189,7 +189,7 @@ class MainSideNav extends React.Component {
     return (
       customNavItems.map((item, idx) => {
         return (
-          <li key={idx} className="nav-item">
+          <li key={idx} className={`nav-item ${this.getActiveClass()}`}>
             <a href={item.link} className="nav-link ellipsis" title={item.desc}>
               <span className={item.icon} aria-hidden="true"></span>
               <span className="nav-text">{item.desc}</span>
@@ -220,29 +220,29 @@ class MainSideNav extends React.Component {
         <div className="side-nav-con">
           <h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
           <ul className="nav nav-pills flex-column nav-container">
-            <li className="nav-item flex-column" id="files">
+            <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
               <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
                 <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Files')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
+                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
               </Link>
-              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0}}>
+              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0}}>
                 {canAddRepo && (
-                  <li className="nav-item">
+                  <li className={`nav-item ${this.getActiveClass('my-libs') || this.getActiveClass('deleted')}`}>
                     <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
                       <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('My Libraries')}</span>
                     </Link>
                   </li>
                 )}
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass('shared-libs')}`}>
                   <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
                     <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with me')}</span>
                   </Link>
                 </li>
                 {canViewOrg &&
-                <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
+                <li className={`nav-item ${this.getActiveClass('org')}`} onClick={(e) => this.tabItemClick(e, 'org')}>
                   <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
                     <span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with all')}</span>
@@ -253,35 +253,35 @@ class MainSideNav extends React.Component {
               </ul>
             </li>
 
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('starred')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
                 <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             {showActivity &&
-              <li className="nav-item">
+              <li className={`nav-item ${this.getActiveClass('dashboard')}`}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
                   <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
               </li>
             }
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('published')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
                 <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Wikis')}</span>
               </Link>
             </li>
             {canInvitePeople &&
-            <li className="nav-item">
+            <li className={`nav-item ${this.getActiveClass('invitations')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite Guest')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
                 <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Invite Guest')}</span>
               </Link>
             </li>
             }
-            <li className="nav-item flex-column" id="share-admin-nav">
+            <li id="share-admin-nav" className={`nav-item flex-column ${this.getActiveClass()}`}>
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
@@ -297,14 +297,14 @@ class MainSideNav extends React.Component {
             <div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>
           ) : (
             <ul className="nav nav-pills flex-column nav-container">
-              <li className="nav-item">
+              <li className={`nav-item ${this.getActiveClass()}`}>
                 <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
                   <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Help')}</span>
                 </a>
               </li>
               {enableTC &&
-                <li className="nav-item">
+                <li className={`nav-item ${this.getActiveClass()}`}>
                   <a href={`${siteRoot}terms/`} className="nav-link">
                     <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Terms')}</span>
@@ -323,7 +323,7 @@ class MainSideNav extends React.Component {
                   })}
                 </>
               )}
-              <li className="nav-item">
+              <li className={`nav-item ${this.getActiveClass()}`}>
                 <a href={siteRoot + 'download_client_program/'} className="nav-link">
                   <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Clients')}</span>

diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
@@ -0,0 +1,71 @@
+.nav .nav-item .nav-link.active {
+  color: #212529;
+  text-decoration: none;
+  border-bottom: none;
+  z-index: 1;
+}
+
+.nav-pills .nav-item .nav-link:hover {
+  background-color: #F0F0F0;
+}
+
+.nav-pills .nav-item .nav-link.active {
+  background-color: #F5F5F5;
+  color: #212529;
+  border: none;
+}
+
+.nav-pills .nav-item .nav-link.active:hover {
+  background-color: #F0F0F0;
+}
+
+.side-nav-con {
+  padding: 0.75rem 1rem;
+}
+
+.side-nav-con .active .sharp,
+.side-nav-con .active .nav-text {
+  font-weight: normal;
+}
+
+.side-nav-con .active .seafile-multicolor-icon, 
+.side-nav-con .active [class^="sf2-icon-"],
+.side-nav-con .active [class^="sf3-font-"],
+.side-nav-con .active .nav-icon,
+.side-nav-con .active .sharp {
+  color: #999;
+}
+
+.side-nav .side-nav-con .nav-item {
+  position: relative;
+  background-color: #fff;
+}
+
+.side-nav .side-nav-con .nav-item.active::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  height: 30px;
+  left: -8px;
+  top: 4px;
+  background-color: #FF8000;
+  border-radius: 2px;
+  z-index: 2;
+}
+
+.side-nav .side-nav-con #files-sub-nav .nav-item.active::before {
+  top: 2px;
+  height: 24px;
+}
+
+.side-nav-con .sub-nav {
+  overflow: visible;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .side-nav .side-nav-con .nav-item {
+    background-color: #f8f8f8;
+  }
+}