[org admin] 'info' page: redesigned it (#6240)

frontend/src/css/org-admin-info-page.css

@@ -0,0 +1,50 @@
+.org-admin-info-content {
+  background: #f5f5f5;
+}
+
+.org-admin-info-content .info-content-item {
+  padding: 30px;
+  background: #fff;
+  border: 1px solid #e4e4e4;
+  border-radius: 5px;
+  width: calc(50% - 5.5px);
+  margin-bottom: 11px;
+}
+
+.org-admin-info-content .info-content-item-img {
+  margin-right: 15px;
+}
+
+.org-admin-info-content .info-content-item-heading {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 5px;
+}
+
+.org-admin-info-content .info-content-name-text {
+  font-size: .875rem;
+  margin: 0;
+}
+
+.org-admin-info-content .info-content-user-text {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 500;
+  margin: 16px 0 0;
+}
+
+.org-admin-info-content .info-content-space-text {
+  font-size: 1.875rem;
+  font-weight: 500;
+  margin: 5px 0 0;
+}
+
+.org-admin-info-content .progress {
+  height: 6px;
+  margin: 20px 0 5px;
+}
+
+.org-admin-info-content .progress-text {
+  font-size: .8125rem;
+  color: #666666;
+}

frontend/src/pages/org-admin/org-info.js

@@ -1,9 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, orgMemberQuotaEnabled} from '../../utils/constants';
+import { mediaUrl, gettext, orgMemberQuotaEnabled} from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import MainPanelTopbar from './main-panel-topbar';
 
+import '../../css/org-admin-info-page.css';
+
 class OrgInfo extends Component {
 
   constructor(props) {
@@ -20,18 +22,25 @@ class OrgInfo extends Component {
 
   componentDidMount() {
     seafileAPI.orgAdminGetOrgInfo().then(res => {
+      const {
+        org_id, org_name,
+        member_quota, member_usage, active_members,
+        storage_quota, storage_usage
+      } = res.data;
       this.setState({
-        org_name: res.data.org_name,
+        org_id, org_name,
-        storage_quota: res.data.storage_quota,
+        member_quota, member_usage, active_members,
-        storage_usage: res.data.storage_usage,
+        storage_quota, storage_usage
-        member_quota: res.data.member_quota,
-        member_usage: res.data.member_usage,
-        active_members: res.data.active_members
       });
     });
   }
 
   render() {
+    const {
+      org_id, org_name,
+      member_quota, member_usage, active_members,
+      storage_quota, storage_usage
+    } = this.state;
     return (
       <Fragment>
         <MainPanelTopbar/>
@@ -40,18 +49,62 @@ class OrgInfo extends Component {
             <div className="cur-view-path">
               <h3 className="sf-heading">{gettext('Info')}</h3>
             </div>
-            <div className="cur-view-content">
+            <div className="cur-view-content org-admin-info-content py-4">
-              <dl>
+              <div className="d-flex flex-row flex-wrap justify-content-between">
-                <strong>{this.state.org_name}</strong>
+                <div className="info-content-item d-flex">
-                <dt>{gettext('Space Used')}</dt>
+                  <img src={`${mediaUrl}img/info-organization.png`} alt="" width="46" height="46" className="info-content-item-img" />
+                  <div>
+                    <h4 className="info-content-item-heading">{gettext('Team name')}</h4>
+                    <p className="info-content-name-text">{org_name}</p>
+                  </div>
+                </div>
 
-                {(this.state.storage_quota > 0) ? <dd>{Utils.bytesToSize(this.state.storage_usage)} / {Utils.bytesToSize(this.state.storage_quota)}</dd> : <dd>{Utils.bytesToSize(this.state.storage_usage)}</dd>}
+                <div className="info-content-item d-flex">
+                  <img src={`${mediaUrl}img/info-id.png`} alt="" width="46" height="46" className="info-content-item-img" />
+                  <div>
+                    <h4 className="info-content-item-heading">{gettext('ID')}</h4>
+                    <p className="info-content-name-text">{org_id}</p>
+                  </div>
+                </div>
 
-                {orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>}
+                <div className="info-content-item w-100 d-flex justify-content-around">
 
-                {orgMemberQuotaEnabled ? <dd>{(this.state.active_members > 0) ? this.state.active_members : '--'} / {(this.state.member_usage > 0) ? this.state.member_usage : '--'} / {(this.state.member_quota > 0) ? this.state.member_quota : '--'}</dd> : <dd>{this.state.active_members > 0 ? this.state.active_members : '--'} / {this.state.member_usage > 0 ? this.state.member_usage : '--'}</dd>}
+                  <div>
+                    <h4 className="info-content-item-heading">{gettext('Active users')}</h4>
+                    <p className="info-content-user-text">{active_members}</p>
+                  </div>
 
-              </dl>
+                  <div>
+                    <h4 className="info-content-item-heading">{gettext('Total users')}</h4>
+                    <p className="info-content-user-text">{member_usage}</p>
+                  </div>
+
+                  {orgMemberQuotaEnabled &&
+                  <div>
+                    <h4 className="info-content-item-heading">{gettext('User number limit')}</h4>
+                    <p className="info-content-user-text">{member_quota > 0 ? member_quota : '--'}</p>
+                  </div>
+                  }
+
+                </div>
+
+                <div className="info-content-item">
+                  <h4 className="info-content-item-heading">{gettext('Space used')}</h4>
+                  {storage_quota > 0 ? (
+                    <>
+                      <p className="info-content-space-text">{`${(storage_usage/storage_quota * 100).toFixed(2)}%`}</p>
+                      <div className="progress-container">
+                        <div className="progress">
+                          <div className="progress-bar" role="progressbar" style={{width: `${storage_usage/storage_quota * 100}%`}} aria-valuenow={storage_usage/storage_quota * 100} aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                        <p className="progress-text m-0">{`${Utils.bytesToSize(storage_usage)} / ${Utils.bytesToSize(storage_quota)}`}</p>
+                      </div>
+                    </>
+                  ) : (
+                    <p>{Utils.bytesToSize(storage_usage)}</p>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         </div>