change system admin department style (#6915)

2025-09-16 15:19:06 +00:00 · 2024-10-17 11:35:49 +08:00
parent db75243359
commit 0483d79c81
14 changed files with 41 additions and 37 deletions
--- a/frontend/src/css/empty-tip.css
+++ b/frontend/src/css/empty-tip.css
@@ -10,6 +10,7 @@
 .empty-tip .no-items-img-tip {
  display: inline-block;
  margin-bottom: 10px;
+  -webkit-user-drag: none;
 }

 .empty-tip .empty-tip-title {
--- a/frontend/src/css/org-department-item.css
+++ b/frontend/src/css/org-department-item.css
@@ -3,26 +3,27 @@
  height: 24px;
  line-height: 24px;
 }
-.cur-view-container .no-libraty, .cur-view-container .no-member, .cur-view-container .no-group {
-  color: #a4a4a4;
-  text-align: center;
-  margin: 30px 0;
-}
+
 .cur-view-path .sf-heading a {
  color: #eb8205;
 }
+
 .cur-view-subcontainer {
  margin: 10px;
 }
+
 .cur-view-subcontainer table {
  margin: 8px 0 40px;
 }
-.org-departments>div{
+
+.org-departments>div {
  height: 100%;
 }
+
 .org-members .cur-view-content {
  padding-bottom: 40px;
 }
+
 .cur-view-path button:hover {
  cursor: pointer;
 }
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -45,7 +45,7 @@
  align-items: center;
 }

-.common-toolbar > div{
+.common-toolbar > div {
  margin-left: .5rem;
 }

--- a/frontend/src/pages/org-admin/departments/department-libraries.js
+++ b/frontend/src/pages/org-admin/departments/department-libraries.js
@@ -8,6 +8,7 @@ import ModalPortal from '../../../components/modal-portal';
 import DeleteRepoDialog from '../../../components/dialog/org-delete-repo-dialog';
 import { gettext, orgID, lang } from '../../../utils/constants';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';

 moment.locale(lang);
@@ -84,7 +85,7 @@ class OrgDepartmentItem extends React.Component {
                </tbody>
              </table>
            </div>
-            : <p className="no-libraty">{gettext('No libraries')}</p>
+            : <EmptyTip text={gettext('No libraries')} />
          }
        </Department>
      </Fragment>
--- a/frontend/src/pages/org-admin/departments/department-list.js
+++ b/frontend/src/pages/org-admin/departments/department-list.js
@@ -6,6 +6,7 @@ import ModalPortal from '../../../components/modal-portal';
 import AddDepartDialog from '../../../components/dialog/org-add-department-dialog';
 import { gettext, orgID, lang } from '../../../utils/constants';
 import GroupItem from './group-item';
+import EmptyTip from '../../../components/empty-tip';

 import '../../../css/org-department-item.css';

@@ -139,7 +140,7 @@ class OrgDepartmentsList extends React.Component {
                  </tbody>
                </table>
                :
-                <p className="no-group">{gettext('No departments')}</p>
+                <EmptyTip text={gettext('No departments')}/>
              }
            </div>
          </div>
--- a/frontend/src/pages/org-admin/departments/department-members.js
+++ b/frontend/src/pages/org-admin/departments/department-members.js
@@ -9,6 +9,7 @@ import RoleSelector from '../../../components/single-selector';
 import DeleteMemberDialog from '../../../components/dialog/org-delete-member-dialog';
 import { serviceURL, gettext, orgID, lang } from '../../../utils/constants';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';

 moment.locale(lang);
@@ -169,7 +170,7 @@ class OrgDepartmentItem extends React.Component {
        >
          <div className="cur-view-content">
            {(!members || members.length === 0) ?
-              <p className="no-member">{gettext('No members')}</p> :
+              <EmptyTip text={gettext('No members')}/> :
              <table>
                <thead>
                  <tr>
--- a/frontend/src/pages/org-admin/departments/sub-departments.js
+++ b/frontend/src/pages/org-admin/departments/sub-departments.js
@@ -5,7 +5,7 @@ import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import { gettext, orgID, lang } from '../../../utils/constants';
-
+import EmptyTip from '../../../components/empty-tip';
 import Department from './department';
 import GroupItem from './group-item';
 import '../../../css/org-department-item.css';
@@ -149,7 +149,7 @@ class OrgDepartmentItem extends React.Component {
                  })}
                </tbody>
              </table>
-              : <p className="no-group">{gettext('No sub-departments')}</p>
+              : <EmptyTip text={gettext('No sub-departments')}/>
            }
          </div>
        </Department>
--- a/frontend/src/pages/org-admin/main-panel-topbar.js
+++ b/frontend/src/pages/org-admin/main-panel-topbar.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Account from '../../components/common/account';

 const propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.any,
  search: PropTypes.any,
 };

--- a/frontend/src/pages/sys-admin/departments/department-libraries.js
+++ b/frontend/src/pages/sys-admin/departments/department-libraries.js
@@ -9,6 +9,7 @@ import DeleteRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmi
 import { gettext, lang } from '../../../utils/constants';
 import RepoItem from './repo-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';

 moment.locale(lang);
@@ -95,7 +96,7 @@ class DepartmentDetail extends React.Component {
                </tbody>
              </table>
            </div>
-            : <p className="no-libraty">{gettext('No libraries')}</p>
+            : <EmptyTip text={gettext('No libraries')} />
          }
        </Department>
        {this.state.showDeleteRepoDialog && (
--- a/frontend/src/pages/sys-admin/departments/department-list.js
+++ b/frontend/src/pages/sys-admin/departments/department-list.js
@@ -6,6 +6,7 @@ import ModalPortal from '../../../components/modal-portal';
 import AddDepartDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-department-dialog';
 import { gettext, lang } from '../../../utils/constants';
 import GroupItem from './group-item';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';

 moment.locale(lang);
@@ -84,25 +85,20 @@ class DepartmentList extends React.Component {

  render() {
    const groups = this.state.groups;
-    const topbarChildren = (
-      <Fragment>
-        <button className='btn btn-secondary operation-item' title={gettext('New Department')} onClick={this.toggleAddDepartDialog}>{gettext('New Department')}
-        </button>
-        {this.state.isShowAddDepartDialog && (
-          <ModalPortal>
-            <AddDepartDialog
-              onAddNewDepartment={this.onAddNewDepartment}
-              groupID={this.state.groupID}
-              toggle={this.toggleAddDepartDialog}
-            />
-          </ModalPortal>
-        )}
-      </Fragment>
-    );
    return (
      <Fragment>
        <MainPanelTopbar {...this.props}>
-          {topbarChildren}
+          <button className='btn btn-secondary operation-item' title={gettext('New Department')} onClick={this.toggleAddDepartDialog}>{gettext('New Department')}
+          </button>
+          {this.state.isShowAddDepartDialog && (
+            <ModalPortal>
+              <AddDepartDialog
+                onAddNewDepartment={this.onAddNewDepartment}
+                groupID={this.state.groupID}
+                toggle={this.toggleAddDepartDialog}
+              />
+            </ModalPortal>
+          )}
        </MainPanelTopbar>
        <div className="main-panel-center flex-row h-100">
          <div className="cur-view-container o-auto">
@@ -111,9 +107,9 @@ class DepartmentList extends React.Component {
                <h3 className="sf-heading">{gettext('Departments')}</h3>
              </div>
            </div>
-            <div className="cur-view-content">
+            <div className="cur-view-content pb-8">
              {groups && groups.length > 0 ?
-                <table>
+                <table className='mb-8'>
                  <thead>
                    <tr>
                      <th width="40%">{gettext('Name')}</th>
@@ -141,7 +137,7 @@ class DepartmentList extends React.Component {
                  </tbody>
                </table>
                :
-                <p className="no-group">{gettext('No departments')}</p>
+                <EmptyTip text={gettext('No departments')}/>
              }
            </div>
          </div>
--- a/frontend/src/pages/sys-admin/departments/department-members.js
+++ b/frontend/src/pages/sys-admin/departments/department-members.js
@@ -9,6 +9,7 @@ import DeleteMemberDialog from '../../../components/dialog/sysadmin-dialog/sysad
 import { gettext, lang } from '../../../utils/constants';
 import MemberItem from './member-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';

 moment.locale(lang);
@@ -118,7 +119,7 @@ class DepartmentMembers extends React.Component {
          <div className="cur-view-content">
            {membersErrorMsg ? <p className="error text-center">{membersErrorMsg}</p> :
              members.length == 0 ?
-                <p className="no-member">{gettext('No members')}</p> :
+                <EmptyTip text={gettext('No members')}/> :
                <Fragment>
                  <table>
                    <thead>
--- a/frontend/src/pages/sys-admin/departments/repo-item.js
+++ b/frontend/src/pages/sys-admin/departments/repo-item.js
@@ -42,7 +42,7 @@ class RepoItem extends React.Component {
        }
        <td>{Utils.bytesToSize(repo.size)}</td>
        <td className="cursor-pointer text-center" onClick={this.props.showDeleteRepoDialog.bind(this, repo)}>
-          <span className={`sf3-font-delete1 sf3-font action-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
+          <span className={`sf3-font-delete1 sf3-font op-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
        </td>
      </tr>
    );
--- a/frontend/src/pages/sys-admin/departments/sub-departments.js
+++ b/frontend/src/pages/sys-admin/departments/sub-departments.js
@@ -7,6 +7,7 @@ import toaster from '../../../components/toast';
 import { gettext, lang } from '../../../utils/constants';
 import GroupItem from './group-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';

 import '../../../css/org-department-item.css';

@@ -129,7 +130,7 @@ class SubDepartments extends React.Component {
                })}
              </tbody>
            </table>
-            : <p className="no-group">{gettext('No sub-departments')}</p>
+            : <EmptyTip text={gettext('No sub-departments')}/>
          }
        </div>
      </Department>
--- a/frontend/src/pages/sys-admin/main-panel-topbar.js
+++ b/frontend/src/pages/sys-admin/main-panel-topbar.js
@@ -4,7 +4,7 @@ import Account from '../../components/common/account';
 import { gettext } from '../../utils/constants';

 const propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.any,
  search: PropTypes.any,
  toggleSidePanel: PropTypes.func
 };