change system admin department style (#6915)

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 {

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;
 }

frontend/src/css/toolbar.css

@@ -45,7 +45,7 @@
   align-items: center;
 }
 
-.common-toolbar > div{
+.common-toolbar > div {
   margin-left: .5rem;
 }
 

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>

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>

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>

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>

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,
 };
 

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 && (

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>

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>

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>
     );

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>

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
 };