haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-28 03:10:45 +00:00
Code Issues Releases Wiki Activity

Change modal header button style (#7271)

Browse Source 
* 01 remove useless package

* 02 change modal header icons
This commit is contained in:
Michael An 2024-12-27 17:44:13 +08:00 committed by GitHub
parent df825cdc6b
commit 58e9d1423f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 99 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/config/webpack.config.js
View File

@ -23,7 +23,6 @@ const modules = require('./modules');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const webpackBundleTracker = require('webpack-bundle-tracker');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ForkTsCheckerWebpackPlugin =
process.env.TSC_COMPILE_ON_ERROR === 'true'
@ -829,7 +828,6 @@ module.exports = function (webpackEnv) {
filename: isEnvProduction ? './webpack-stats.pro.json' : './webpack-stats.dev.json',
publicPath: isEnvProduction ? '' : paths.publicUrlOrPath
}),
// new BundleAnalyzerPlugin(),
].filter(Boolean),
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter

122
frontend/package-lock.json generated
View File

@ -116,7 +116,6 @@
"url-loader": "4.1.1",
"web-vitals": "2.1.4",
"webpack": "^5.64.4",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-bundle-tracker": "1.7.0",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
@ -2793,15 +2792,6 @@
"postcss-selector-parser": "^6.0.10"
}
},
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
"dev": true,
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/@emoji-mart/data": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
@ -4550,12 +4540,6 @@
}
}
},
"node_modules/@polka/url": {
"version": "1.0.0-next.28",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
"dev": true
},
"node_modules/@replit/codemirror-lang-csharp": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@replit/codemirror-lang-csharp/-/codemirror-lang-csharp-6.2.0.tgz",
@ -9691,12 +9675,6 @@
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
"integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
},
"node_modules/debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
"dev": true
},
"node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@ -19025,15 +19003,6 @@
"mpd-to-m3u8-json": "bin/parse.js"
}
},
"node_modules/mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
"dev": true,
"engines": {
"node": ">=10"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -19646,15 +19615,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true,
"bin": {
"opener": "bin/opener-bin.js"
}
},
"node_modules/optionator": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@ -24642,20 +24602,6 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true
},
"node_modules/sirv": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
"dev": true,
"dependencies": {
"@polka/url": "^1.0.0-next.24",
"mrmime": "^2.0.0",
"totalist": "^3.0.0"
},
"engines": {
"node": ">= 10"
}
},
"node_modules/sisteransi": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@ -26700,15 +26646,6 @@
"node": ">=0.6"
}
},
"node_modules/totalist": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/tough-cookie": {
"version": "4.1.4",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@ -27854,65 +27791,6 @@
}
}
},
"node_modules/webpack-bundle-analyzer": {
"version": "4.10.2",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
"integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
"dev": true,
"dependencies": {
"@discoveryjs/json-ext": "0.5.7",
"acorn": "^8.0.4",
"acorn-walk": "^8.0.0",
"commander": "^7.2.0",
"debounce": "^1.2.1",
"escape-string-regexp": "^4.0.0",
"gzip-size": "^6.0.0",
"html-escaper": "^2.0.2",
"opener": "^1.5.2",
"picocolors": "^1.0.0",
"sirv": "^2.0.3",
"ws": "^7.3.1"
},
"bin": {
"webpack-bundle-analyzer": "lib/bin/analyzer.js"
},
"engines": {
"node": ">= 10.13.0"
}
},
"node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": {
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
"dev": true,
"dependencies": {
"acorn": "^8.11.0"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/webpack-bundle-analyzer/node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"dev": true,
"engines": {
"node": ">= 10"
}
},
"node_modules/webpack-bundle-analyzer/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/webpack-bundle-tracker": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/webpack-bundle-tracker/-/webpack-bundle-tracker-1.7.0.tgz",

1
frontend/package.json
View File

@ -167,7 +167,6 @@
"url-loader": "4.1.1",
"web-vitals": "2.1.4",
"webpack": "^5.64.4",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-bundle-tracker": "1.7.0",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",

5
frontend/src/components/common/seahub-modal-header.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import { ModalHeader } from 'reactstrap';
import { gettext } from '../../utils/constants';
import '../../css/seahub-modal-header.css';
const SeahubModalHeader = ({ children, ...props }) => {
const customCloseBtn = (
<button type="button" className="close seahub-modal-close" data-dismiss="modal" aria-label="Close" onClick={props.toggle}>
<span className="seahub-modal-close-inner">
<button type="button" className="close seahub-modal-btn" data-dismiss="modal" aria-label={gettext('Close')} onClick={props.toggle}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>

52
frontend/src/components/dialog/copy-dirent-dialog.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader } from 'reactstrap';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import Searcher from '../file-chooser/searcher';
import SelectDirentBody from './select-dirent-body';
import { MODE_TYPE_MAP } from '../../constants';
@ -320,32 +319,33 @@ class CopyDirent extends React.Component {
return (
<Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle} close={
<div className="header-close-list">
<span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
</div>
}>
<ModalHeader toggle={this.toggle}
close={
<div className="header-buttons">
<button type="button" className="close seahub-modal-btn" data-dismiss="modal" aria-label={gettext('Close')} onClick={this.toggle}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
{(isPro && !showSearchBar) &&
<button type="button" className="close seahub-modal-btn" data-dismiss="modal" aria-label={gettext('Search')} onClick={this.onOpenSearchBar}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-search" aria-hidden="true"></i>
</span>
</button>
}
</div>
}
>
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
{isPro && (
showSearchBar ? (
<Searcher
onUpdateMode={this.updateMode}
onUpdateSearchStatus={this.onUpdateSearchStatus}
onUpdateSearchResults={this.onUpdateSearchResults}
onClose={this.onCloseSearchBar}
/>
) : (
<IconBtn
iconName="search"
size={24}
className="search"
onClick={this.onOpenSearchBar}
role="button"
onKeyDown={() => {}}
tabIndex={0}
/>
)
)}
{(isPro && showSearchBar) &&
<Searcher
onUpdateMode={this.updateMode}
onUpdateSearchStatus={this.onUpdateSearchStatus}
onUpdateSearchResults={this.onUpdateSearchResults}
onClose={this.onCloseSearchBar}
/>
}
</ModalHeader>
<SelectDirentBody
mode={mode}

52
frontend/src/components/dialog/move-dirent-dialog.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Modal, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import { IconBtn } from '@seafile/sf-metadata-ui-component';
import SelectDirentBody from './select-dirent-body';
import { gettext, isPro } from '../../utils/constants';
import { Utils } from '../../utils/utils';
@ -324,32 +323,33 @@ class MoveDirent extends React.Component {
return (
<Modal className="custom-modal" isOpen={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle} close={
<div className="header-close-list">
<span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
</div>
}>
<ModalHeader toggle={this.toggle}
close={
<div className="header-buttons">
<button type="button" className="close seahub-modal-btn" data-dismiss="modal" aria-label={gettext('Close')} onClick={this.toggle}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
{(isPro && !showSearchBar) &&
<button type="button" className="close seahub-modal-btn" data-dismiss="modal" aria-label={gettext('Search')} onClick={this.onOpenSearchBar}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-search" aria-hidden="true"></i>
</span>
</button>
}
</div>
}
>
{isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className="d-flex"></div>}
{isPro && (
showSearchBar ? (
<Searcher
onUpdateMode={this.updateMode}
onUpdateSearchStatus={this.onUpdateSearchStatus}
onUpdateSearchResults={this.onUpdateSearchResults}
onClose={this.onCloseSearchBar}
/>
) : (
<IconBtn
iconName="search"
size={24}
className="search"
onClick={this.onOpenSearchBar}
role="button"
onKeyDown={() => {}}
tabIndex={0}
/>
)
)}
{(isPro && showSearchBar) &&
<Searcher
onUpdateMode={this.updateMode}
onUpdateSearchStatus={this.onUpdateSearchStatus}
onUpdateSearchResults={this.onUpdateSearchResults}
onClose={this.onCloseSearchBar}
/>
}
</ModalHeader>
<SelectDirentBody
mode={mode}

17
frontend/src/components/dialog/trash-dialog/index.css
View File

@ -13,21 +13,16 @@
align-items: center;
}
.trash-dialog .modal-header .button-control {
display: flex;
justify-content: center;
align-items: center;
}
.trash-dialog .modal-header .trash-dialog-old-page {
margin-left: auto;
}
.trash-dialog .modal-header .trash-dialog-close-icon {
color: #000;
opacity: 0.5;
font-weight: 700;
cursor: pointer;
}
.trash-dialog .modal-header .trash-dialog-close-icon:hover {
opacity: 0.75;
}
.trash-dialog .modal-header .clean {
height: 30px;
line-height: 28px;

10
frontend/src/components/dialog/trash-dialog/index.js
View File

@ -193,13 +193,17 @@ class TrashDialog extends React.Component {
<Modal className="trash-dialog" isOpen={showTrashDialog} toggle={toggleTrashDialog}>
<ModalHeader
close={
<>
<div className="button-control">
<a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>
{(enableUserCleanTrash && !showFolder && isRepoAdmin) &&
<button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
}
<span aria-hidden="true" className="trash-dialog-close-icon sf3-font sf3-font-x-01 ml-4" onClick={toggleTrashDialog}></span>
</>
<button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
</div>
}
>
<div dangerouslySetInnerHTML={{ __html: title }}></div>

6
frontend/src/components/logo.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from '../utils/constants';
import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, gettext } from '../utils/constants';
const propTypes = {
onCloseSidePanel: PropTypes.func,
@ -23,8 +23,8 @@ class Logo extends React.Component {
<a
className="sf2-icon-x1 sf-popover-close side-panel-close action-icon d-md-none"
onClick={this.closeSide}
title="Close"
aria-label="Close"
title={gettext('Close')}
aria-label={gettext('Close')}
>
</a>
}

52
frontend/src/css/lib-content-view.css
View File

@ -342,39 +342,8 @@
max-width: calc(100% - 260px);
}
.custom-modal .modal-header .search {
position: absolute;
top: 16px;
right: 48px;
color: #000;
opacity: 0.5;
}
.custom-modal .modal-header .close {
width: 24px;
height: 24px;
position: absolute;
right: 16px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
line-height: 12px;
color: #666 !important;
opacity: 1;
}
.custom-modal .modal-header .search:hover,
.custom-modal .modal-header .close:hover {
cursor: pointer;
border-radius: 3px;
opacity: 0.75;
}
.custom-modal .modal-header .close span {
width: 16px;
height: 16px;
.custom-modal .modal-header .header-buttons .seahub-modal-btn {
padding: 14px 12px;
}
.custom-modal .modal-content {
@ -509,20 +478,3 @@
flex-shrink: 0;
margin-left: 10px;
}
.comment-close-icon {
height: 24px;
width: 24px;
text-align: center;
}
.comment-close-icon {
cursor: pointer;
color: #000;
opacity: 0.5;
font-weight: 700;
}
.comment-close-icon:hover {
opacity: 0.75;
}

10
frontend/src/css/seahub-modal-header.css
View File

@ -1,23 +1,23 @@
.modal-header .seahub-modal-close.close {
.modal-header .seahub-modal-btn.close {
padding: 14px 16px;
opacity: 1;
}
.modal-header .seahub-modal-close.close:not(:disabled):not(.disabled):hover {
.modal-header .seahub-modal-btn.close:not(:disabled):not(.disabled):hover {
opacity: 1;
}
.modal-header .seahub-modal-close .seahub-modal-close-inner {
.modal-header .seahub-modal-btn .seahub-modal-btn-inner {
display: inline-block;
width: 28px;
height: 28px;
border-radius: 3px;
}
.modal-header .seahub-modal-close .seahub-modal-close-inner:hover {
.modal-header .seahub-modal-btn .seahub-modal-btn-inner:hover {
background-color: #efefef;
}
.modal-header .seahub-modal-close .seahub-modal-close-inner .sf3-font {
.modal-header .seahub-modal-btn .seahub-modal-btn-inner .sf3-font {
color: #666;
}

29
frontend/src/css/user-notifications.css
View File

@ -12,6 +12,10 @@
display: flex;
}
.notification-header-close .seahub-modal-btn {
padding: 14px 12px;
}
.notification-header-close .notification-dropdown-toggle {
display: flex;
justify-content: center;
@ -20,31 +24,6 @@
width: 24px
}
.notification-header-close .item-dropdown-icon,
.notification-header-close .notification-close-icon {
height: 24px;
width: 24px;
cursor: pointer;
color: #000;
opacity: 0.5;
}
.notification-header-close .notification-close-icon:hover,
.notification-header-close .item-dropdown-icon:hover {
color: #000;
opacity: 0.75;
}
/* The icon "..." do not need to be bold */
.notification-header-close .item-dropdown-icon {
font-weight: 400;
}
/* The icon 'x' needs to be bold */
.notification-header-close .notification-close-icon {
font-weight: 700;
}
.notification-header-close .dropdown-menu {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

11
frontend/src/css/wiki-trash-dialog.css
View File

@ -17,17 +17,6 @@
padding: 0 0.5rem;
}
.trash-dialog .modal-header .trash-dialog-close-icon {
color: #000;
opacity: 0.5;
font-weight: 700;
cursor: pointer;
}
.trash-dialog .modal-header .trash-dialog-close-icon:hover {
opacity: 0.75;
}
.trash-dialog .modal-body {
height: 500px;
overflow-y: auto;

10
frontend/src/pages/wiki2/wiki-trash-dialog.js
View File

@ -93,11 +93,15 @@ class WikiTrashDialog extends React.Component {
<ModalHeader
close={
<>
<div className="button-control">
<div className="button-control d-flex">
{(isAdmin && enableUserCleanTrash) &&
<button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
<button className="btn btn-secondary clean" onClick={this.cleanTrash}>{gettext('Clean')}</button>
}
<span aria-hidden="true" className="trash-dialog-close-icon sf3-font sf3-font-x-01 ml-4" onClick={toggleTrashDialog}></span>
<button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
</div>
</>
}

12
frontend/src/user-notifications.js
View File

@ -110,14 +110,22 @@ class UserNotificationsDialog extends React.Component {
aria-expanded={this.state.isItemMenuShow}
className="notification-dropdown-toggle"
>
<span className="sf3-font sf3-font-more item-dropdown-icon"></span>
<button type="button" className="close seahub-modal-btn" aria-label={gettext('More')}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-more" aria-hidden="true"></i>
</span>
</button>
</DropdownToggle>
<DropdownMenu right={true} className="dtable-dropdown-menu large">
<DropdownItem onClick={this.markAllRead}>{gettext('Mark all read')}</DropdownItem>
<DropdownItem onClick={this.clearAll}>{gettext('Clear')}</DropdownItem>
</DropdownMenu>
</Dropdown>
<span className="sf3-font sf3-font-x-01 notification-close-icon" onClick={this.toggle}></span>
<button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={this.toggle}>
<span className="seahub-modal-btn-inner">
<i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
</span>
</button>
</div>
);
};