[my libs] mobile: improvement (#3839)

* [my libs] mobile: improvement * modified 'more' icon * modified background layer of op menu * added 'star/unstar' to the op menu * [my libs] mobile: redesigned 'sort'
2025-08-02 15:57:31 +00:00 · 2019-07-16 07:55:55 +08:00 · 2019-07-16 07:55:55 +08:00 · 957979254b
commit 957979254b
parent ea621c46c3
13 changed files with 140 additions and 23 deletions
--- a/frontend/src/components/dialog/sort-options.js
+++ b/frontend/src/components/dialog/sort-options.js
@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortList: PropTypes.func.isRequired
+};
+
+class SortOptions extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.sortOptions = [
+      {id: 'sort-option-1', value: 'name-asc', text: gettext('By name ascending')},
+      {id: 'sort-option-2', value: 'name-desc', text: gettext('By name descending')},
+      {id: 'sort-option-3', value: 'size-asc', text: gettext('By size ascending')},
+      {id: 'sort-option-4', value: 'size-desc', text: gettext('By size descending')},
+      {id: 'sort-option-5', value: 'time-asc', text: gettext('By time ascending')},
+      {id: 'sort-option-6', value: 'time-desc', text: gettext('By time descending')}
+    ];
+    const { sortBy, sortOrder } = this.props;
+    this.state = {
+      currentOption: `${sortBy}-${sortOrder}`
+    };
+  }
+
+  switchOption = (e) => {
+    if (!e.target.checked) {
+      return;
+    }
+
+    this.setState({
+      currentOption: e.target.value
+    });
+
+    const [sortBy, sortOrder] = e.target.value.split('-');
+    this.props.sortList(sortBy, sortOrder);
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalBody>
+          {this.sortOptions.map((item, index) => {
+            return (
+              <Fragment key={index}>
+                <input id={item.id} className="align-middle" type="radio" name="sort-options" value={item.value} checked={this.state.currentOption == item.value} onChange={this.switchOption} />
+                <label htmlFor={item.id} className="align-middle m-2">{item.text}</label><br />
+              </Fragment>
+            );
+          })}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+SortOptions.propTypes = propTypes;
+
+export default SortOptions;
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@ -11,6 +11,7 @@ import CommonToolbar from '../../components/toolbar/common-toolbar';
 import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import LibDetail from '../../components/dirent-detail/lib-details';
 import MylibRepoListView from './mylib-repo-list-view';
+import SortOptionsDialog from '../../components/dialog/sort-options';

 const propTypes = {
  onShowSidePanel: PropTypes.func.isRequired,
@ -25,6 +26,7 @@ class MyLibraries extends Component {
      isLoading: true,
      repoList: [],
      isShowDetails: false,
+      isSortOptionsDialogOpen: false,
      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
      sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
    };
@ -70,6 +72,12 @@ class MyLibraries extends Component {
    });
  }

+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
  onCreateRepo = (repo) => {
    let permission = repo.permission;
    seafileAPI.createMineRepo(repo).then((res) => {
@ -147,8 +155,9 @@ class MyLibraries extends Component {
        </div>
        <div className="main-panel-center flex-row">
          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext('My Libraries')}</h3>
+            <div className="cur-view-path align-items-center">
+              <h3 className="sf-heading m-0">{gettext('My Libraries')}</h3>
+              {(window.innerWidth < 768) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
            </div>
            <div className="cur-view-content">
              {this.state.isLoading && <Loading />}
@ -168,6 +177,14 @@ class MyLibraries extends Component {
              }
            </div>
          </div>
+          {this.state.isSortOptionsDialogOpen &&
+            <SortOptionsDialog
+              toggleDialog={this.toggleSortOptionsDialog}
+              sortBy={this.state.sortBy}
+              sortOrder={this.state.sortOrder}
+              sortList={this.sortRepoList}
+            />
+          }
          {this.state.isShowDetails && (
            <div className="cur-view-detail">
              <LibDetail 
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@ -69,6 +69,10 @@ class MylibRepoListItem extends React.Component {

  onMenuItemClick = (item) => {
    switch(item) {
+      case 'Star':
+      case 'Unstar':
+        this.onStarRepo();
+        break;
      case 'Share':
        this.onShareToggle();
        break;
@ -109,10 +113,16 @@ class MylibRepoListItem extends React.Component {
    if (this.state.isStarred) {
      seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
        this.setState({isStarred: !this.state.isStarred});
+        if (window.innerWidth < 728) {
+          toaster.success(gettext('Successfully unstarred the library.'));
+        }
      });
    } else {
      seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
        this.setState({isStarred: !this.state.isStarred});
+        if (window.innerWidth < 728) {
+          toaster.success(gettext('Successfully starred the library.'));
+        }
      });
    }
  }
@ -284,6 +294,7 @@ class MylibRepoListItem extends React.Component {
          {repo.repo_name && (
            <MylibRepoMenu
              repo={this.props.repo}
+              isStarred={this.state.isStarred}
              onMenuItemClick={this.onMenuItemClick}
              onFreezedItem={this.props.onFreezedItem}
              onUnfreezedItem={this.onUnfreezedItem}
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@ -99,17 +99,12 @@ class MylibRepoListView extends React.Component {
  }

  renderMobileUI = () => {
-    const sortIcon = this.props.sortOrder === 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
    return (
-      <table>
+      <table className="table-thead-hidden">
        <thead>
          <tr>
            <th width="10%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="84%">
-              {gettext('Sort:')}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {this.props.sortBy === 'name' && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {this.props.sortBy === 'time' && sortIcon}</a>
-            </th>
+            <th width="84%"></th>
            <th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
          </tr>
        </thead>
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@ -7,6 +7,7 @@ import { Utils } from '../../utils/utils';
 const propTypes = {
  isPC: PropTypes.bool,
  repo: PropTypes.object.isRequired,
+  isStarred: PropTypes.bool,
  onFreezedItem: PropTypes.func.isRequired,
  onUnfreezedItem: PropTypes.func.isRequired,
  onMenuItemClick: PropTypes.func.isRequired,
@ -71,6 +72,12 @@ class MylibRepoMenu extends React.Component {
  translateOperations = (item) => {
    let translateResult = '';
    switch(item) {
+      case 'Star':
+        translateResult = gettext('Star');
+        break;
+      case 'Unstar':
+        translateResult = gettext('Unstar');
+        break;
      case 'Share':
        translateResult = gettext('Share');
        break;
@ -130,14 +137,15 @@ class MylibRepoMenu extends React.Component {
    }

    // mobile menu
-    operations.unshift('Share');
    operations.unshift('Delete');
+    operations.unshift('Share');
+    this.props.isStarred ? operations.unshift('Unstar') : operations.unshift('Star');

    return (
      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
        <DropdownToggle 
          tag="i"
-          className="sf-dropdown-toggle sf2-icon-caret-down ml-0"
+          className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
          title={gettext('More Operations')}
          // onClick={this.clickOperationMenuToggle}
          data-toggle="dropdown" 
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@ -1136,8 +1136,8 @@ a.table-sort-op:focus {
      top: 0;
      bottom: 0;
      background: #000;
-      opacity: 0.1;
-      z-index: 3;
+      opacity: 0.4;
+      z-index: 103;
    }
    
    .mobile-operation-menu {
@ -1148,7 +1148,7 @@ a.table-sort-op:focus {
      padding: .5em 0;
      background: #fff;
      text-align: center;
-      z-index: 4;
+      z-index: 104;
    }

    /* toolbar icon */
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@ -1,10 +1,10 @@
@font-face {font-family: "sf3-font";
-  src: url('iconfont.eot?t=1559794552863'); /* IE9 */
-  src: url('iconfont.eot?t=1559794552863#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARkAAsAAAAACLwAAAQVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqFGIQlATYCJAMMCwgABCAFhG0HSRt2B8gOJQnBwACgoCNEPHzt93ru2/2ILggqE8/jw0IButiSrWqVqdD1JFEYFr5//vG033UQMqkciOKgtvtpnb4sA3WU050An+dyelP8rvoA3pjD9tJ7URpQoIGOMXgDxgVMMTeMXdAS9xOomxaEcpiWwwH6MnNYIB6lYgHQzzjkhupQFcoVc7N4C3RUi9da5wFvgu/HP7AV+hRKiTn26Dq1BCT8pDzTor7632iKRwDldD6wRSRsAjJxURk4Qo1Sm6jqakDbYnNjFvws/k88KhSb/cMjFESZaWhCdjVd8DMc5aUpIUV57Ysoo4ovRB2xw7qk1G61Btbm0mk1YPF1jkbjQVk2zifJiZlOkuwbJxdjozY2a7Y4zNmza5Pj3LW2K88GzOSPgsUxo2vs7Nad811Vscder9FR3uxGhzHvE7Fj62xt125leZzVp72Wr5fe0WZNT+Asp2Xxs2xndsuuXy9Yvd/+Osmdc8CfYw3GVtjMsrPz5e8gjXr4K9c6XecZ+sy0nbnc2pBj3W0NZlLs7JycZs21PUg7qmHP2xR4aJy/qsebJGM3BM9Z4gBW7bCxWaShzd0YcFXDW9kdo/V2au6fogMUq/QPN3dSzp/iOFqsbfAZ1RXnXMhivgs2sdtlmqivASeedXWyU3bllVXsqQpN3vnwZKDnnbPcf9a/Hjo9u1ipNU/4FaFlFcWDz9a2fGB8/M9YuHOOh+Xl7oqDP0rU/txwBl/xhV+RmrcBMLrvqC/lc+ZYGTeZ5ht0JXglu+zyzTdaw8og+xP0UW9DJ7cHjaEelybQbRON3IoKncMarAvsOHqGXz49FgIiZQZ5aFHiSGdikJDrwCa2nM0yaHvX1gy68bBk3SJaUZKuOmzvJ589P4wNqmdvPbLMOaG7/rJTupJy9R6GgxkAJq/S4X9a+mtyLuukWXZs8OF4/vPpZjFfq0YZ/JjeXhnIupGNmVcAqL6pYPDXbZnSQPzRaGbYmBW9RoWRTd4BnfcqgzIeNmFG+u4NN4wwLVQ1SlComEJStUhmdhMlDdsoq9pB3Yb0xQ0DOKrINaxrAwhdm1Boe4+k6wKZ2bsoGXuLsm5QUXcRVms2LIfUMBmHAgKWIMIqRCrCVKhdRBiWouzgsLoIissUAjytDjgexEulUYRJY+Sz6VAF8SkmlJaLWQSBIiiOKZE0cBhUKDBEjWMyKCJoEoJQR9HpaNWVaCJMCQwdwEECBKgEQqgKQkoEo4J6owiGnqDYggufLwKJlVEQwBsE1QAP7GCQwu4RTDQMSKYbVJ0EtyKFh5cTYyEQUAgUDqOESIM+SGGlMAh1dS8ZSIRAIxmQUItCR63QrgbaIU3K96sDmzA3TFFEiqxxSQiEChiswMSYBTzHabgal5bC4AookggIAAAAAAA=') format('woff2'),
-  url('iconfont.woff?t=1559794552863') format('woff'),
-  url('iconfont.ttf?t=1559794552863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1559794552863#sf3-font') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1562919437059'); /* IE9 */
+  src: url('iconfont.eot?t=1562919437059#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAXIAAsAAAAADBgAAAV6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDOAqLFIhzATYCJAMYCw4ABCAFhG0HXRseChGVpDuR/UzI5P6wvAd1auyv0yQR3c8g2tLZEzh2sRf8VS5JyxMxh5jo0Tq0jkfErQbAfftlu6bW3SBMhNnuztJ89b+87Pb8yYY2HqdRCiFBOBoggIDsH8de/nVe5/nuvn+wQs8IzbKmD7gbWERblPBmBUxTnIlt9giyeQWz4DN5lcuBAKBIgQxSo1YDNyQIkNsRAKRf756dIVX0EHqwBJJKxRwqgPwDERL3O3cYwN/J55NHcBIJ4CDykFdq0qNmN1S5S+625JVvCtrxCpTLWQH4RwE8ABmAAJB+rL0H+EwqJ3LKZQsoB0BSa3HAXe6u+27Lb9+IQO42F75KXAKFFv/yOPAQIAJEBSnXQtmAEiJwlxgZEgUHGaBoDi14KNzQQoCiJcogAgBUF9wkGSC3Ac4MqZRpGw1E8JAgGJGRkGgytdJBIkCiVh5qTNXh93Rk/gWAMp9S30JCvItaV9nRMWo7DO2rOffdBgZMbMEKW3TDumX22MKcuQcLQi0D1sjyvMACi2XRodx5y6ZuzPIFWkQUU5DNOZAfXGQ2L1xpj7W8fyDg3l5j9mJbMGha4HeEyaRVhWFzyNfj9Okmm+XTZzzRLfluBOeY/GHGclvO2cPOtZy70LH6dCk6NycUSKRu/U4hYrE4HOGYeWPxnWeLlpXfdq72upJ7zlQMLrFFZwDz1phM084WX1rp5NkWe3sSBgYKStTDsh6GNSeShcnHXfq1J1PEaac8szdbheiWbMO8bQ4xtjVnKAVrCUa6EYqXjS4ihPaoS7nyFykL2EjiXUj1vvlA20s8d3/fQrvoDsymc7favZMsLcPzmD/fE528eHVBCyE6f4yyhen827xbc7SzF7fWzcu8mxHdsqVd5l1Ktb7FKy+Z9m2uAQYzll5bGybJrT14pF8v9lfAtP8iUb757KQRNY90614lyM2mTveZpk9IvRkZ0YxIpqveSU+PQz1a0LXTQ8/lr9fiZ9szIxm/O6vNkYfX8vy0Ia3N8tOeHj3M/bpBvv45od70ot9+J7TpxXrqH8tznoGZ9emM4jV2/fmdtp2OlVjOd+H5w578D2dSG6CBpXSj+LaNJTfdtb/z82uhZn4G/51YVm7W3Val25RN89jEgybDb32d51bNutfb2evZD0PW7XVordUPZVh1jfmBngylUh31b7gwJ1A3HNacdKtA2cnb/6mh2a6p8Y+7Rd1K04uoQoumK8KDgc+uyzvXvXZ9w3Xu8a7ruwqiBqKftWFo/ubrm3W7Ns/SE8P+Uv9H0gXcov9N4qXeER+rWp+ypl2G+EqzQXFqref3Lff2tmJW57Z7uwwvOjsOd5ed8t2QB/YEa0Vrgit+UMV/Xpb9a+yg+JI5ly7lsHEJpbYNuum6Zd1meWW3vcQ4yDV5hQfw7bF7vCXRbKc6qyC5lX8p0y5tBrFdxUcdDRXeSGz1WrrQqKvO8X3bCjDjBRZCcBDYnMD2wOrSgzSoxjkhlAgNfxRFZQHNNhyAogA7kwbi/V1KaRoth/1RmgoOnGrJAJ4kCyFgZBAxLlCRVAaq0P3RTAJ1RKYBUOBLAGH0DRy9bcAz+kEImF8Qmf2DirEjUC26OiWT05BdK5whkv+kIcjKOseyjds8LX1A9zo7LYsS4gt0G0JUF1U9dY8Veok9treuMWNilYXuxNUwz0JJZUSwojdLl7Jk7g5FkGWXqU6BYyAi3mdEPwjEincymaFYK298/APovJo52lPzYH+BEfIBqye1QgXEvXwdVfNROMh+02kYRRlhv1gsyB1ZYVZxQRK/0QgCU+hnRJOL0unFY+XFSyqXf1kKNCDvpIojPBGISFREDXZzfkY+SydnvM37adJhQ/6O0Ds7uhhPLLqcNlHb7QAAAA==') format('woff2'),
+  url('iconfont.woff?t=1562919437059') format('woff'),
+  url('iconfont.ttf?t=1562919437059') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1562919437059#sf3-font') format('svg'); /* iOS 4.1- */
 }

 .sf3-font {
@ -23,3 +23,15 @@
  content: "\e602";
 }

+.sf3-font-add:before {
+  content: "\e653";
+}
+
+.sf3-font-form:before {
+  content: "\e654";
+}
+
+.sf3-font-sort:before {
+  content: "\e657";
+}
+
--- a/media/css/sf_font3/iconfont.eot
+++ b/media/css/sf_font3/iconfont.eot
--- a/media/css/sf_font3/iconfont.js
+++ b/media/css/sf_font3/iconfont.js
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@ -20,10 +20,19 @@ Created by iconfont
  />
    <missing-glyph />
    
-    <glyph glyph-name="dtable-logo" unicode="&#58881;" d="M960 748.8v-92.8c0-80-201.6-147.2-448-147.2S64 579.2 64 659.2V748.8C64 828.8 265.6 896 512 896s448-67.2 448-147.2z m0-204.8v-204.8c0-80-201.6-147.2-448-147.2S64 259.2 64 339.2V544c96-67.2 272-96 448-96s352 28.8 448 96z m0-320v-204.8c0-80-201.6-147.2-448-147.2S64-60.8 64 19.2V224c96-67.2 272-96 448-96s352 28.8 448 96z"  horiz-adv-x="1024" />
+    <glyph glyph-name="dtable-logo" unicode="&#58881;" d="M160 768h166.4c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32H160c-19.2 0-32 12.8-32 32V736c0 19.2 12.8 32 32 32z m0-268.8h166.4c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32H160c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m0-268.8h166.4c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32H160c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m268.8 0h166.4c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m268.8 0H864c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m0 268.8H864c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m-268.8 0h166.4c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32v166.4c0 19.2 12.8 32 32 32z m0 268.8h166.4c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32V736c0 19.2 12.8 32 32 32z m268.8 0H864c19.2 0 32-12.8 32-32v-166.4c0-19.2-12.8-32-32-32h-166.4c-19.2 0-32 12.8-32 32V736c0 19.2 12.8 32 32 32z"  horiz-adv-x="1024" />

    
-    <glyph glyph-name="enterprise-wechat" unicode="&#58882;" d="M710.4 124.8c-6.4-6.4-6.4-12.8 0-19.2l3.2-3.2c28.8-28.8 48-67.2 54.4-108.8 9.6-28.8 41.6-48 70.4-41.6s48 41.6 41.6 70.4c-6.4 25.6-28.8 41.6-48 44.8-38.4 9.6-73.6 28.8-99.2 54.4-9.6 9.6-16 9.6-22.4 3.2zM921.6 220.8c-9.6-9.6-16-22.4-16-35.2-9.6-38.4-28.8-73.6-54.4-102.4-6.4-6.4-6.4-12.8 0-19.2 6.4-6.4 12.8-6.4 19.2 0l3.2 3.2c28.8 28.8 67.2 48 108.8 54.4 28.8 9.6 48 41.6 41.6 70.4-9.6 28.8-41.6 48-70.4 41.6-12.8 0-22.4-6.4-32-12.8zM758.4 358.4c-22.4-22.4-22.4-60.8 0-83.2 9.6-9.6 22.4-16 35.2-16 38.4-9.6 73.6-28.8 102.4-54.4 6.4-6.4 12.8-6.4 19.2 0 6.4 6.4 6.4 12.8 0 19.2l-3.2 3.2c-28.8 28.8-48 67.2-54.4 108.8-9.6 28.8-41.6 48-70.4 41.6-12.8-9.6-22.4-12.8-28.8-19.2zM752 265.6c-28.8-32-67.2-51.2-108.8-57.6-28.8-9.6-48-41.6-41.6-70.4 3.2-9.6 9.6-19.2 16-28.8 22.4-22.4 60.8-22.4 83.2 0 9.6 9.6 16 22.4 16 35.2 9.6 38.4 28.8 73.6 54.4 102.4 6.4 6.4 6.4 12.8 0 19.2-3.2 6.4-12.8 6.4-19.2 0zM371.2 796.8c-105.6-12.8-201.6-57.6-268.8-128-28.8-25.6-51.2-57.6-67.2-89.6C-19.2 473.6-9.6 352 57.6 256c19.2-28.8 48-64 76.8-86.4l-9.6-102.4-3.2-6.4V51.2c3.2-16 16-28.8 35.2-28.8 6.4 0 9.6 3.2 12.8 6.4l3.2 3.2 28.8 16L291.2 96c44.8-9.6 89.6-19.2 131.2-19.2 54.4 0 108.8 9.6 163.2 28.8-25.6 9.6-44.8 32-41.6 60.8-54.4-16-108.8-22.4-166.4-16h-9.6c-19.2 3.2-41.6 6.4-60.8 12.8-9.6 3.2-22.4 3.2-32-3.2h-3.2l-73.6-44.8-3.2-3.2c-3.2 0-3.2-3.2-3.2-3.2-3.2 0-6.4 3.2-6.4 6.4l6.4 9.6 3.2 12.8 6.4 19.2 6.4 22.4c3.2 12.8 0 28.8-9.6 35.2-28.8 22.4-54.4 48-73.6 76.8-48 76.8-57.6 172.8-16 256 12.8 28.8 28.8 51.2 51.2 73.6 54.4 57.6 134.4 96 224 105.6 28.8 3.2 60.8 3.2 89.6 0 89.6-9.6 166.4-48 224-105.6 22.4-22.4 38.4-48 51.2-73.6 16-35.2 28.8-73.6 28.8-112v-9.6c22.4 12.8 51.2 9.6 70.4-9.6l3.2-3.2c6.4 57.6-6.4 115.2-32 166.4-16 32-38.4 64-64 89.6-70.4 70.4-166.4 118.4-268.8 128-41.6 3.2-76.8 3.2-115.2 0z"  horiz-adv-x="1025" />
+    <glyph glyph-name="enterprise-wechat" unicode="&#58882;" d="M672 147.20000000000005c-6.4-6.4-6.4-12.8 0-19.2h3.2c28.8-25.6 48-64 51.2-102.4 9.6-28.8 38.4-48 67.2-38.4 28.8 9.6 48 38.4 38.4 67.2-6.4 22.4-25.6 38.4-48 41.6-35.2 6.4-70.4 25.6-96 51.2-3.2 3.2-9.6 3.2-16 0zM896 233.60000000000002c-9.6-9.6-16-19.2-16-32-6.4-35.2-25.6-70.4-51.2-96-6.4-6.4-6.4-12.8 0-19.2 6.4-6.4 12.8-6.4 19.2 0l3.2 3.2c25.6 28.8 64 48 102.4 51.2 28.8 6.4 48 38.4 38.4 67.2-6.4 28.8-38.4 48-67.2 38.4-12.8 0-19.2-6.4-28.8-12.8zM742.4 390.4c-22.4-22.4-22.4-57.6 0-76.8 9.6-9.6 19.2-16 32-16 35.2-6.4 70.4-25.6 96-51.2 6.4-6.4 12.8-6.4 19.2 0 6.4 6.4 6.4 12.8 0 19.2l-3.2 3.2c-28.8 25.6-48 64-51.2 102.4-9.6 28.8-38.4 48-67.2 38.4-12.8-6.4-19.2-12.8-25.6-19.2zM713.6 304c-28.8-32-64-51.2-105.6-54.4-28.8-6.4-48-38.4-38.4-67.2 3.2-9.6 6.4-19.2 16-25.6 22.4-22.4 57.6-22.4 76.8 0 9.6 9.6 16 19.2 16 32 6.4 35.2 25.6 70.4 51.2 96 6.4 6.4 6.4 12.8 0 19.2 0 3.2-9.6 3.2-16 0zM380.8 780.8c-99.2-9.6-192-51.2-256-118.4C99.2 636.8 80 608 64 576c-48-99.2-41.6-217.6 22.4-307.2 16-25.6 48-60.8 73.6-83.2l-12.8-92.8v-12.8c0-16 16-28.8 32-28.8 3.2 0 9.6 3.2 12.8 3.2h3.2l28.8 12.8 86.4 41.6c41.6-12.8 83.2-16 124.8-16 51.2 0 102.4 9.6 153.6 25.6-25.6 9.6-41.6 32-38.4 57.6-51.2-16-105.6-22.4-156.8-16H384c-19.2 3.2-38.4 6.4-57.6 12.8-9.6 3.2-22.4 3.2-28.8-3.2h-3.2L224 128l-3.2-3.2h-3.2c-3.2 0-3.2 3.2-3.2 6.4l3.2 9.6 3.2 12.8 6.4 19.2 6.4 22.4c3.2 12.8 0 25.6-9.6 32-28.8 19.2-51.2 44.8-70.4 73.6-57.6 73.6-64 166.4-25.6 243.2 12.8 25.6 28.8 48 51.2 70.4 54.4 54.4 128 89.6 211.2 99.2 28.8 3.2 57.6 3.2 86.4 0 83.2-9.6 156.8-44.8 208-99.2 19.2-22.4 38.4-44.8 48-70.4 16-32 25.6-70.4 25.6-105.6v-12.8c22.4 12.8 51.2 9.6 67.2-6.4l3.2-3.2c3.2 54.4-6.4 108.8-28.8 156.8-16 32-35.2 60.8-60.8 86.4-67.2 67.2-156.8 112-252.8 121.6-38.4 6.4-73.6 6.4-105.6 0z"  horiz-adv-x="1025" />
+
+    
+    <glyph glyph-name="add" unicode="&#58963;" d="M473.6 422.4v147.2h73.6v-150.4h150.4v-73.6h-150.4v-150.4h-73.6v150.4h-147.2v73.6h147.2zM160 832h704c54.4 0 96-41.6 96-96v-704c0-54.4-41.6-96-96-96H160c-54.4 0-96 41.6-96 96V736c0 54.4 41.6 96 96 96z m32-64c-35.2 0-64-28.8-64-64v-640c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64V704c0 35.2-28.8 64-64 64H192z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="form" unicode="&#58964;" d="M624 496h-224v-224h224v224z m73.6 0v-224h185.6v224h-185.6z m-73.6-492.8v195.2h-224v-195.2h224z m73.6 0h153.6c19.2 0 32 12.8 32 32v163.2h-185.6v-195.2zM326.4 496H137.6v-224h188.8v224z m0-492.8v195.2H137.6v-163.2c0-19.2 12.8-32 32-32h156.8z m556.8 566.4V716.8c0 19.2-12.8 32-32 32H169.6c-19.2 0-32-12.8-32-32v-147.2h745.6zM160 832h704c54.4 0 96-41.6 96-96v-704c0-54.4-41.6-96-96-96H160c-54.4 0-96 41.6-96 96V736c0 54.4 41.6 96 96 96z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sort" unicode="&#58967;" d="M763.345455-65.939394c-31.030303 0-55.854545 21.721212-55.854546 58.957576V585.69697l-99.29697-114.812122c-12.412121-15.515152-24.824242-18.618182-40.339394-18.618181-31.030303 0-58.957576 27.927273-58.957575 58.957575 0 15.515152 3.10303 31.030303 15.515151 43.442425l189.284849 232.727272c18.618182 9.309091 31.030303 15.515152 46.545454 15.515152s31.030303-6.206061 43.442424-18.618182l192.387879-232.727273c9.309091-12.412121 12.412121-27.927273 12.412121-43.442424 0-31.030303-24.824242-58.957576-55.854545-58.957576-15.515152 0-31.030303 6.206061-43.442424 18.618182L812.993939 585.69697v-595.781818c6.206061-34.133333-12.412121-55.854545-49.648484-55.854546zM15.515152 678.787879c0-34.133333 27.927273-62.060606 58.957575-62.060606h316.509091c31.030303 0 58.957576 27.927273 58.957576 62.060606s-27.927273 62.060606-58.957576 62.060606H74.472727C40.339394 740.848485 15.515152 712.921212 15.515152 678.787879z m58.957575-372.363637h378.569697c31.030303 0 58.957576 27.927273 58.957576 62.060606s-27.927273 62.060606-58.957576 62.060607H74.472727c-31.030303 0-58.957576-27.927273-58.957575-62.060607 3.10303-34.133333 27.927273-62.060606 58.957575-62.060606z m-3.10303-310.30303h446.836364c31.030303 0 55.854545 27.927273 55.854545 62.060606s-24.824242 62.060606-55.854545 62.060606H71.369697c-31.030303 0-55.854545-27.927273-55.854545-62.060606 3.10303-34.133333 27.927273-62.060606 55.854545-62.060606z"  horiz-adv-x="1024" />

    

--- a/media/css/sf_font3/iconfont.ttf
+++ b/media/css/sf_font3/iconfont.ttf
--- a/media/css/sf_font3/iconfont.woff
+++ b/media/css/sf_font3/iconfont.woff
--- a/media/css/sf_font3/iconfont.woff2
+++ b/media/css/sf_font3/iconfont.woff2