Seahub UI (#5261)

* [top toolbar] fixed the position of the vertical line between 2 sides - fixed it for all the pages - removed the duplicated 'div.main-panel' in 'lib-content-view' * [search] modified the UI * [top toolbar] redesigned the notification * [top toolbar] avatar & the triangle: modified the UI * [left side panel] updated the UI; fixup & improvement * [misc] modified links' color, op-icon, and etc. * [misc] updated UI for share dialog, other dialogs, & 'more operations' dropdown * [misc] UI: modified markdown side panels, comment panels, input/textarea placeholder * ['user settings' page] modified UI * [shared dir upload link page] modified the UI * [user settings] modified the UI * [user settings] fixup * [seafile-ui.css] use an updated one (modified color of buttons)
2025-09-20 02:48:51 +00:00 · 2022-10-12 18:10:12 +08:00
parent ddcc772e69
commit 7b56e8eace
22 changed files with 104 additions and 11260 deletions
--- a/frontend/src/components/common/account.js
+++ b/frontend/src/components/common/account.js
@@ -144,7 +144,7 @@ class Account extends Component {
    return (
      <div id="account">
        <a id="my-info" href="#" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label={gettext("View profile and more")}>
-          <span>{this.renderAvatar()}</span>
+          {this.renderAvatar()}
          <span className="fas fa-caret-down vam"></span>
        </a>
        <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label={gettext("View profile and more")} onClick={this.onClickAccount}></span>
--- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js
+++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
@@ -143,7 +143,7 @@ class ItemDropdownMenu extends React.Component {
    }

    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} className="vam">
        <DropdownToggle
          tag={tagName || 'i'}
          role="button"
--- a/frontend/src/components/main-panel.js
+++ b/frontend/src/components/main-panel.js
@@ -9,7 +9,7 @@ class MainPanel extends Component {

  render() {
    return (
-      <div className="main-panel o-hidden">
+      <div className="main-panel">
        {this.props.children}
      </div>
    );
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -210,9 +210,9 @@ class MainSideNav extends React.Component {
            }
            <li className="nav-item flex-column" id="group-nav">
              <a className="nav-link ellipsis" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
                <span className="sf2-icon-group" aria-hidden="true"></span>
                <span className="nav-text">{gettext('Shared with groups')}</span>
+                <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
              </a>
              {this.renderSharedGroups()}
            </li>
@@ -263,10 +263,8 @@ class MainSideNav extends React.Component {
              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
                <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                  <span className="sf2-icon-edit" aria-hidden="true"></span>
-                  <span className="draft-info nav-text">
-                    {gettext('Drafts')}
-                    {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
-                  </span>
+                  <span className="nav-text">{gettext('Drafts')}</span>
+                  {this.props.draftCounts > 0 && <span id="draft-num">{this.props.draftCounts}</span>}
                </Link>
              </li>
            }
@@ -286,9 +284,9 @@ class MainSideNav extends React.Component {
            }
            <li className="nav-item flex-column" id="share-admin-nav">
              <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
-                <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
                <span className="sf2-icon-wrench" aria-hidden="true"></span>
                <span className="nav-text">{gettext('Share Admin')}</span>
+                <span className={`toggle-icon fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
              </a>
              {this.renderSharedAdmin()}
            </li>
--- a/frontend/src/components/user-settings/side-nav.js
+++ b/frontend/src/components/user-settings/side-nav.js
@@ -11,7 +11,7 @@ class SideNav extends React.Component {
      <ul className="nav flex-column user-setting-nav">
        {this.props.data.map((item, index) => {
          return item.show ?
-            <li key={index} className={`nav-item ${this.props.curItemID == item.href.substr(1) && 'active'}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
+            <li key={index} className={`nav-item${this.props.curItemID == item.href.substr(1) ? ' active' : ''}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
        })}
      </ul>
    );
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -15,6 +15,7 @@
  flex: 1;
  display: flex;
  min-height: 0;
+  overflow: hidden;
 }

 .side-panel {
--- a/frontend/src/css/participants-list.css
+++ b/frontend/src/css/participants-list.css
@@ -14,7 +14,7 @@
 }
 .participants .add-participants i {
  font-size: 16px;
-  color: rgb(229, 162, 82);
+  color: #ff9800;
  border: 2px solid #fff;
  border-radius: 50%;
 }
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -33,6 +33,7 @@
 .search-input {
  height: 1.875rem;
  width: 15rem;
+  font-size: .875rem;
 }

 .search-result-container {
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -18,17 +18,16 @@
 }
@media (min-width: 768px) {
  .share-dialog-content .share-dialog-side {
-    padding: 1rem 0 0 1rem;
    border: 0;
    border-right: 1px solid #eee;
  }
  .share-dialog-side .nav {
    flex-direction: column;
  }
-}
-
-.share-dialog-side .nav-pills .nav-item .nav-link {
+  .share-dialog-side .nav-pills .nav-item .nav-link {
    width: 100%;
+    margin: 0;
+  }
 }

 .share-dialog-content .share-dialog-main {
@@ -86,7 +85,7 @@
 }

 .share-dialog .nav .nav-item .nav-link {
-    padding: 0.3125rem 1rem 0.3125rem 0.25rem;
+    padding: 0.3125rem 0.25rem;
 }

 input.expire-input {
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -11,7 +11,7 @@
 .border-left-show:before {
  position: absolute;
  top: 10px;
-  left: 0;
+  left: -1px;
  width: 1px;
  height: 30px;
  content: '';
@@ -79,6 +79,7 @@
 .common-toolbar {
  display: flex;
  margin-left: auto;
+  align-items: center;
 }

 .common-toolbar > div{
--- a/frontend/src/css/upload-link.css
+++ b/frontend/src/css/upload-link.css
@@ -29,8 +29,8 @@ body {
  list-style: decimal inside none;
 }
 #upload-link-drop-zone {
-  background: rgba(240, 159, 63, 0.1);
-  border: 2px dashed #f09f3f;
+  background: rgba(255, 152, 0, 0.1);
+  border: 2px dashed #ff9800;
  border-radius: 4px;
  padding: 28px 0;
 }
--- a/frontend/src/css/user-settings.css
+++ b/frontend/src/css/user-settings.css
@@ -13,7 +13,7 @@ body {

 .side-panel {
  flex: 0 0 22%;
-  padding: 20px;
+  padding: 1rem;
  border-right: 1px solid #eee;
 }
 .main-panel {
@@ -21,26 +21,36 @@ body {
 }
 .heading {
  padding: 8px 16px;
-    background: #f9f9f9;
-    font-size: 1rem;
-    color: #322;
-    font-weight: normal;
-    line-height: 1.5;
-    margin:0;
+  background: #f9f9f9;
+  font-size: 1rem;
+  color: #322;
+  font-weight: normal;
+  line-height: 1.5;
+  margin:0;
+  position: relative;
+}
+.heading:after {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 0;
+  content: '';
+  border-bottom: 1px solid #e8e8e8;
 }
 .content {
  padding: 0rem 1rem 8rem;
  overflow: auto;
 }
 .setting-item {
+  font-size: 0.875rem;
  margin: 1em 0 3em;
 }
 .setting-item-heading {
-  font-size: 1rem;
+  font-size: 0.9375rem;
  font-weight: normal;
-  padding-bottom: 0.2em;
+  padding-bottom: 0.3rem;
  border-bottom: 1px solid #ddd;
-  margin-bottom: 0.7em;
+  margin-bottom: 0.7rem;
 }
 .user-avatar {
  border-radius: 3px;
@@ -67,8 +77,8 @@ body {
  color: #333;
 }
 .user-setting-nav .nav-item.active .nav-link {
-  color: #eb8205;
-  border-color: #eb8205;
+  color: #ff9800;
+  border-color: #ff9800;
 }
 .user-setting-nav .nav-item .nav-link:hover {
  color: #eb8205;
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1819,7 +1819,6 @@ class LibContentView extends React.Component {

    return (
      <Fragment>
-        <div className="main-panel o-hidden">
          <div className="main-panel-north border-left-show">
            <LibContentToolbar
              isViewFile={this.state.isViewFile}
@@ -1947,7 +1946,6 @@ class LibContentView extends React.Component {
              />
            )}
          </div>
-        </div>
        {isCopyMoveProgressDialogShow && (
          <CopyMoveDirentProgressDialog
            type={this.state.asyncOperationType}
--- a/frontend/src/pages/markdown-editor/css/comments-list.css
+++ b/frontend/src/pages/markdown-editor/css/comments-list.css
@@ -3,9 +3,6 @@
  flex-direction: column;
  height: 100%;
 }
-.seafile-comment-list {
-  overflow-y: auto;
-}
 .seafile-comment-list .comment-vacant {
  padding: 1em;
  text-align: center;
--- a/frontend/src/pages/markdown-editor/css/side-panel.css
+++ b/frontend/src/pages/markdown-editor/css/side-panel.css
@@ -29,7 +29,7 @@
 }

 .seafile-markdown-editor .side-panel .nav .nav-link.active {
-  color: #f19645;
+  color: #ff9800;
  border-bottom: 0;
 }

--- a/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-panel.js
+++ b/frontend/src/pages/markdown-editor/rich-markdown-editor/comment-panel.js
@@ -69,7 +69,6 @@ class CommentPanel extends React.Component {

  addComment = () => {
    if (!this.state.comment.trim()) return;
-    console.log(filePath, repoID);
    seafileAPI.postComment(repoID, filePath, this.state.comment.trim()).then(() => {
      this.listComments(true);
    }).catch(err => {
@@ -80,7 +79,6 @@ class CommentPanel extends React.Component {

  onSubmit = () => {
    this.addParticipant(username);
-    console.log(username);
    if (this.toBeAddedParticipant.length === 0) {
      this.addComment();
    } else {
@@ -240,4 +238,4 @@ class CommentPanel extends React.Component {

 CommentPanel.propTypes = CommentPanelPropTypes;

-export default CommentPanel;
+export default CommentPanel;
--- a/frontend/src/pages/org-admin/index.js
+++ b/frontend/src/pages/org-admin/index.js
@@ -66,7 +66,7 @@ class Org extends React.Component {
    return (
      <div id="main">
        <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick}/>
-        <div className="main-panel o-hidden">
+        <div className="main-panel">
          <Router className="reach-router">
            <OrgInfo path={siteRoot + 'org/orgmanage'}/>
            <OrgUsers path={siteRoot + 'org/useradmin'} />
--- a/frontend/src/pages/sys-admin/file-scan-records.js
+++ b/frontend/src/pages/sys-admin/file-scan-records.js
@@ -104,7 +104,7 @@ class FileScanRecords extends Component {
  render() {
    return (
      <React.Fragment>
-        <div className="main-panel-north border-left-show">
+        <div className="main-panel-north">
          <div className="cur-view-toolbar">
            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
          </div>
--- a/frontend/src/pages/sys-admin/main-panel.js
+++ b/frontend/src/pages/sys-admin/main-panel.js
@@ -9,7 +9,7 @@ class MainPanel extends Component {

  render() {
    return (
-      <div className="main-panel o-hidden">
+      <div className="main-panel">
        {this.props.children}
      </div>
    );
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -83,7 +83,7 @@ class MainPanel extends Component {

    const isViewingFile = this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile;
    return (
-      <div className="main-panel wiki-main-panel o-hidden">
+      <div className="main-panel wiki-main-panel">
        <div className="main-panel-hide hide">{this.props.content}</div>
        <div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}>
          {!username &&