haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-21 19:37:28 +00:00
Code Issues Releases Wiki Activity

12.0 remove font awesome (#6257)

Browse Source 
* remove font-awesome

* remove font awesome 3.2.1
This commit is contained in:
Michael An
2024-06-28 08:39:44 +08:00
committed by GitHub
parent f8b98517ee
commit 6233649970
140 changed files with 448 additions and 5672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/common/common-add-tool.js
View File

@@ -6,7 +6,7 @@ function CommonAddTool(props) {
const { callBack, footerName, className, addIconClassName } = props;
return (
<div className={`add-item-btn ${className ? className : ''}`} onClick={(e) => {callBack(e);}}>
<span className={`fas fa-plus mr-2 ${addIconClassName || ''}`}></span>
<span className={`sf3-font sf3-font-enlarge mr-2 ${addIconClassName || ''}`}></span>
<span className='add-new-option' title={footerName}>{footerName}</span>
</div>
);

2
frontend/src/components/common/go-back/index.js
View File

@@ -12,7 +12,7 @@ class GoBack extends Component {
render() {
return (
<div className="go-back" onClick={this.onBackClick}>
<span className="fas fa-chevron-left"></span>
<span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span>
</div>
);
}

2
frontend/src/components/dialog/create-tag-dialog.js
View File

@@ -70,7 +70,7 @@ class CreateTagDialog extends React.Component {
return (
<Fragment>
<ModalHeader toggle={this.props.onClose}>
<span className="tag-dialog-back fas fa-sm fa-arrow-left" onClick={this.props.toggleCancel} aria-label={gettext('Back')}></span>
<span className="tag-dialog-back sf3-font sf3-font-arrow rotate-180 d-inline-block" onClick={this.props.toggleCancel} aria-label={gettext('Back')}></span>
{gettext('New Tag')}
</ModalHeader>
<ModalBody>

4
frontend/src/components/dialog/custom-permission/custom-permission-editor.js
View File

@@ -119,7 +119,7 @@ class CustomPermissionEditor extends React.Component {
<div className="permission-header">
<div className="d-flex align-items-center">
<OpIcon
className="fa fa-arrow-left back-icon"
className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon"
op={this.props.onChangeMode}
title={gettext('Back')}
/>
@@ -167,7 +167,7 @@ class CustomPermissionEditor extends React.Component {
<Label check>
<Input type="checkbox" onChange={this.onChangePermission('modify')} checked={permission.modify}/>
<span>{gettext('Modify')}</span>
<span id="modify-tip" className="fa fa-question-circle ml-2" style={{color: '#999'}}></span>
<span id="modify-tip" className="sf3-font sf3-font-tips ml-2" style={{color: '#999'}}></span>
<Tooltip
toggle={this.toggle}
delay={{show: 0, hide: 0}}

4
frontend/src/components/dialog/custom-permission/custom-permission-item.js
View File

@@ -51,12 +51,12 @@ class CustomPermissionItem extends React.Component {
{this.state.isShowOperations && (
<Fragment>
<OpIcon
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
title={gettext('Edit')}
op={this.onEditCustomPermission}
/>
<OpIcon
className="fa fa-trash attr-action-icon"
className="sf3-font sf3-font-delete1 attr-action-icon"
title={gettext('Delete')}
op={this.onDeleteCustomPermission}
/>

19
frontend/src/components/dialog/generate-upload-link.js
View File

@@ -299,7 +299,14 @@ class GenerateUploadLink extends React.Component {
<dd className="d-flex">
<div className="d-flex align-items-center">
<input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedUploadInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedUploadInfo.password.length, 10)} />
<span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
<span
tabIndex="0"
role="button"
aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
onKeyDown={this.onIconKeyDown}
onClick={this.toggleStoredPasswordVisible}
className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '': '-slash'}`}
></span>
</div>
</dd>
</FormGroup>
@@ -316,7 +323,7 @@ class GenerateUploadLink extends React.Component {
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
onClick={this.editExpirationToggle}>
</a>
)}
@@ -381,8 +388,12 @@ class GenerateUploadLink extends React.Component {
<InputGroup style={{width: inputWidth}}>
<Input id="passwd" type={this.state.passwordVisible ? 'text':'password'} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.passwordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '': '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>

2
frontend/src/components/dialog/op-menu.js
View File

@@ -49,7 +49,7 @@ class OpMenu extends React.Component {
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="i"
className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle fa fa-ellipsis-v"
className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle sf3-font sf3-font-more-vertical"
title={gettext('More operations')}
aria-label={gettext('More operations')}
data-toggle="dropdown"

8
frontend/src/components/dialog/org-add-user-dialog.js
View File

@@ -146,8 +146,12 @@ class AddOrgUserDialog extends React.Component {
<InputGroup className="passwd">
<Input id="userPwd" innerRef={input => {this.passwdInput = input;}} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}></i></Button>
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '-slash' : ''}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>

2
frontend/src/components/dialog/repo-api-token-dialog.js
View File

@@ -65,7 +65,7 @@ class APITokenItem extends React.Component {
<span>{item.api_token}</span>
{this.state.isOperationShow &&
<OpIcon
className="far fa-copy action-icon"
className="action-icon sf3-font sf3-font-copy1"
op={this.onCopyAPIToken}
title={gettext('Copy')}
/>

2
frontend/src/components/dialog/repo-share-admin/group-shares.js
View File

@@ -86,7 +86,7 @@ class Item extends Component {
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
onClick={this.onEditPermission}>
</a>
)}

2
frontend/src/components/dialog/repo-share-admin/user-shares.js
View File

@@ -86,7 +86,7 @@ class Item extends Component {
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
onClick={this.onEditPermission}>
</a>
)}

8
frontend/src/components/dialog/reset-webdav-password.js
View File

@@ -74,8 +74,12 @@ class ResetWebdavPassword extends Component {
<InputGroup>
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
<Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
<p className="form-text text-muted m-0">{passwordTip}</p>

8
frontend/src/components/dialog/set-webdav-password.js
View File

@@ -74,8 +74,12 @@ class SetWebdavPassword extends Component {
<InputGroup>
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
<Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
<Button onClick={this.togglePasswordVisible}>
<i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': 'slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
<p className="form-text text-muted m-0">{passwordTip}</p>

2
frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
View File

@@ -98,7 +98,7 @@ class SysAdminAddOrgDialog extends React.Component {
<FormGroup>
<Label>
{gettext('Owner')}
<span className="small text-secondary ml-1 fas fa-question-circle" title={gettext('Owner can use admin panel in an organization, must be a new account.')}></span>
<span className="small text-secondary ml-1 sf3-font sf3-font-tips" title={gettext('Owner can use admin panel in an organization, must be a new account.')}></span>
</Label>
<Input value={email} onChange={this.inputEmail} />
</FormGroup>

10
frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
View File

@@ -138,7 +138,7 @@ class SysAdminAddUserDialog extends React.Component {
<FormGroup>
<Label>
{gettext('Role')}
<span className="small text-secondary ml-1 fas fa-question-circle" title={gettext('You can also add a user as a guest, who will not be allowed to create libraries and groups.')}></span>
<span className="small text-secondary ml-1 sf3-font sf3-font-tips" title={gettext('You can also add a user as a guest, who will not be allowed to create libraries and groups.')}></span>
</Label>
<SysAdminUserRoleEditor
isTextMode={false}
@@ -154,8 +154,12 @@ class SysAdminAddUserDialog extends React.Component {
<InputGroup>
<Input autoComplete="new-password" type={isPasswordVisible ? 'text' : 'password'} value={password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button className="mt-0" onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
<Button className="mt-0" onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
<Button className="mt-0" onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
</Button>
<Button className="mt-0" onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>

10
frontend/src/components/dir-view-mode/dir-column-file.js
View File

@@ -1,4 +1,4 @@
import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { Utils } from '../../utils/utils';
import { gettext, siteRoot } from '../../utils/constants';
@@ -59,11 +59,9 @@ class DirColumnFile extends React.Component {
repoID={this.props.repoID}
path={this.props.path}
>
<Fragment>
<span className='wiki-open-file position-fixed' onClick={this.onOpenFile}>
<i className="fas fa-expand-arrows-alt"></i>
</span>
</Fragment>
<span className='wiki-open-file position-fixed' onClick={this.onOpenFile}>
<i className="sf3-font sf3-font-expand-arrows-alt"></i>
</span>
</SeafileMarkdownViewer>
);
}

4
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -737,7 +737,7 @@ class DirentListItem extends React.Component {
<td className="pl10">
{dirent.starred !== undefined &&
<a href="#" role="button" aria-label={dirent.starred ? gettext('Unstar') : gettext('Star')} onClick={this.onItemStarred}>
<i className={`fa-star ${dirent.starred ? 'fas' : 'far star-empty'}`}></i>
<i className={`sf3-font ${dirent.starred ? 'sf3-font-star' : 'sf3-font-star-empty'}`}></i>
</a>
}
</td>
@@ -810,7 +810,7 @@ class DirentListItem extends React.Component {
<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
title={gettext('More operations')}
aria-label={gettext('More operations')}
data-toggle="dropdown"

2
frontend/src/components/file-chooser/file-chooser.js
View File

@@ -481,7 +481,7 @@ class FileChooser extends React.Component {
<div className="file-chooser-search-input">
<Input className="search-input mb-2" placeholder={gettext('Search')} type='text' value={this.state.searchInfo} onChange={this.onSearchInfoChanged}></Input>
{this.state.searchInfo.length !== 0 && (
<span className="search-control attr-action-icon fas fa-times" onClick={this.onCloseSearching}></span>
<span className="search-control attr-action-icon sf3-font sf3-font-x-01" onClick={this.onCloseSearching}></span>
)}
</div>
)}

2
frontend/src/components/file-chooser/repo-list-item.js
View File

@@ -207,7 +207,7 @@ class RepoListItem extends React.Component {
<div className="item-left-icon">
<span className={`item-toggle icon sf3-font ${this.state.isShowChildren ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onToggleClick}></span>
<i className="tree-node-icon">
<span className="icon far fa-folder tree-node-icon"></span>
<span className="icon sf3-font sf3-font-folder tree-node-icon"></span>
</i>
</div>
</div>

2
frontend/src/components/file-chooser/tree-list-item.js
View File

@@ -110,7 +110,7 @@ class TreeViewItem extends React.Component {
<span className={`icon item-toggle sf3-font ${node.isExpanded ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onToggleClick}></span>
}
<i className="tree-node-icon">
<span className={`icon far ${node.object.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span>
<span className={`icon sf3-font ${node.object.type === 'dir' ? 'sf3-font-folder' : 'sf3-font-file'}`}></span>
</i>
</div>
</div>

4
frontend/src/components/file-content-view/image.js
View File

@@ -66,10 +66,10 @@ class FileContent extends React.Component {
return (
<div className="file-view-content flex-1 image-file-view">
{previousImage && (
<a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
<a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span></a>
)}
{nextImage && (
<a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
<a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="sf3-font sf3-font-down rotate-270 d-inline-block"></span></a>
)}
<img src={xmindSrc || thumbnailURL || rawPath} alt={fileName} id="image-view" onError={this.handleLoadFailure} />
</div>

2
frontend/src/components/file-uploader/forbid-upload-list-item.js
View File

@@ -19,7 +19,7 @@ class ForbidUploadListItem extends React.Component {
<td>{Utils.bytesToSize(file.size)}</td>
<td>
<div className="d-flex align-items-center">
<span className="upload-failure-icon fas fa-exclamation mr-2"></span>
<span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
<span className="upload-failure-msg">{gettext('File too large')}</span>
</div>
</td>

2
frontend/src/components/file-uploader/upload-list-item.js
View File

@@ -133,7 +133,7 @@ class UploadListItem extends React.Component {
)}
{this.state.uploadState === UPLOAD_ERROR && (
<div className="d-flex align-items-center">
<span className="upload-failure-icon fas fa-exclamation mr-2"></span>
<span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
<span className="upload-failure-msg" dangerouslySetInnerHTML={{__html: error}}></span>
</div>
)}

2
frontend/src/components/file-view/file-info.js
View File

@@ -33,7 +33,7 @@ class FileInfo extends React.PureComponent {
<div className="text-truncate">
<h2 className="file-title d-flex align-items-center">
<span className="file-name text-truncate" title={fileName}>{fileName}</span>
<a className={`file-star ${isStarred ? 'fa' : 'far'} fa-star`}
<a className={`file-star sf3-font ${isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'}`}
href="#"
title={starredText}
role="button"

86
frontend/src/components/file-view/file-toolbar.js
View File

@@ -90,11 +90,11 @@ class FileToolbar extends React.Component {
if (!isLocked) {
showLockUnlockBtn = true;
lockUnlockText = gettext('Lock');
lockUnlockIcon = 'fa fa-lock';
lockUnlockIcon = 'sf3-font sf3-font-lock';
} else if (lockedByMe) {
showLockUnlockBtn = true;
lockUnlockText = gettext('Unlock');
lockUnlockIcon = 'fa fa-unlock';
lockUnlockIcon = 'sf3-font sf3-font-unlock';
}
}
@@ -117,13 +117,13 @@ class FileToolbar extends React.Component {
{fileType == 'PDF' && (
<IconButton
id="seafile-pdf-print"
icon="fa fa-print"
icon="sf3-font sf3-font-print"
text={gettext('Print')}
/>
)}
<IconButton
id="open-parent-folder"
icon="fa fa-folder-open"
icon="sf3-font sf3-font-folder-open"
text={gettext('Open parent folder')}
tag="a"
href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
@@ -139,35 +139,34 @@ class FileToolbar extends React.Component {
{showShareBtn && (
<IconButton
id="share-file"
icon='fa fa-share-alt'
icon='sf3-font sf3-font-share'
text={gettext('Share')}
onClick={this.toggleShareDialog}
/>
)}
{(canEditFile && fileType != 'SDoc' && !err) &&
( this.props.isSaving ?
<button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
<i className={'fa fa-spin fa-spinner'}/></button> :
(
this.props.needSave ?
<IconButton
text={gettext('Save')}
id={'saveButton'}
icon={'fa fa-save'}
// button imported in this file does not have functionalities of
// isActive as button imported in markdowneditor has
//isActive={!isContentChanged}
onClick={this.props.onSave}
/> :
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
<i className={'fa fa-save'}/></button>
)
)}
(this.props.isSaving ?
<button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
<i className='sf3-font sf3-font-spinner'/>
</button>
:
(this.props.needSave ?
<IconButton
text={gettext('Save')}
id={'saveButton'}
icon='sf3-font sf3-font-save'
onClick={this.props.onSave}
/>
:
<button type='button' className='btn btn-icon btn-secondary btn-active' disabled>
<i className='sf3-font sf3-font-save'/>
</button>
))}
{canDownloadFile && (
<IconButton
id="download-file"
icon="fa fa-download"
icon="sf3-font sf3-font-download1"
text={gettext('Download')}
tag="a"
href="?dl=1"
@@ -175,7 +174,7 @@ class FileToolbar extends React.Component {
)}
<IconButton
id="file-details"
icon='fas fa-info'
icon='sf3-font sf3-font-info1'
text={gettext('Details')}
onClick={this.props.toggleDetailsPanel}
/>
@@ -189,8 +188,8 @@ class FileToolbar extends React.Component {
/>
)}
<ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
<DropdownToggle aria-label={gettext('More operations')}>
<span className="fas fa-ellipsis-v"></span>
<DropdownToggle className="file-toolbar-more-operations" aria-label={gettext('More operations')}>
<span className="sf3-font sf3-font-more-vertical"></span>
</DropdownToggle>
<DropdownMenu right={true}>
{filePerm == 'rw' && (
@@ -206,23 +205,22 @@ class FileToolbar extends React.Component {
<ButtonGroup >
{(canEditFile && fileType != 'SDoc' && !err) &&
(this.props.isSaving ?
<button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
<i className={'fa fa-spin fa-spinner'}/></button> :
(
this.props.needSave ?
<IconButton
text={gettext('Save')}
id={'saveButton'}
icon={'fa fa-save'}
// button imported in this file does not have functionalities of
// isActive as button imported in markdowneditor has
//isActive={!isContentChanged}
onClick={this.props.onSave}
/> :
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
<i className={'fa fa-save'}/></button>
)
)}
<button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
<i className='sf3-font sf3-font-spinner'/>
</button>
:
(this.props.needSave ?
<IconButton
text={gettext('Save')}
id={'saveButton'}
icon='sf3-font sf3-font-save'
onClick={this.props.onSave}
/>
:
<button type='button' className={'btn btn-icon btn-secondary btn-active'} disabled>
<i className={'sf3-font sf3-font-save'}/>
</button>
))}
</ButtonGroup>
<DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More operations')}></DropdownToggle>

2
frontend/src/components/history-list-view/history-list-item.js
View File

@@ -93,7 +93,7 @@ class HistoryListItem extends React.Component {
<Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
<DropdownToggle
tag='a'
className={`fas fa-ellipsis-v ${(this.state.isShowOperationIcon || isHigtlightItem) ? '' : 'invisible'}`}
className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHigtlightItem) ? '' : 'invisible'}`}
data-toggle="dropdown"
aria-expanded={this.state.isMenuShow}
title={gettext('More operations')}

2
frontend/src/components/list-and-add-group-members.js
View File

@@ -192,7 +192,7 @@ class ManageMembersDialog extends React.Component {
{groupMembers.length > 10 &&
<InputGroup className={`search-group-members rounded ${searchActive ? 'active' : ''}`}>
<InputGroupText>
<i className="fas fa-search" aria-hidden={true}></i>
<i className="sf3-font sf3-font-search" aria-hidden={true}></i>
</InputGroupText>
<Input
type="text"

2
frontend/src/components/menu-control.js
View File

@@ -10,7 +10,7 @@ class MenuControl extends React.Component {
render() {
return (
<i className={`fas fa-ellipsis-v ${this.props.isShow ? '' : 'invisible'}`} onClick={this.props.onClick}></i>
<i className={`sf3-font sf3-font-more-vertical ${this.props.isShow ? '' : 'invisible'}`} onClick={this.props.onClick}></i>
);
}
}

2
frontend/src/components/operations/internal-link-operation/index.js
View File

@@ -28,7 +28,7 @@ class InternalLinkOperation extends React.Component {
return (
<Fragment>
<span className='dialog-operation'>
<i className="file-internal-link fa fa-link" title={title} aria-label={title} onClick={this.onInternalLinkDialogToggle}/>
<i className="file-internal-link sf3-font sf3-font-link" title={title} aria-label={title} onClick={this.onInternalLinkDialogToggle}/>
</span>
{isShowInternalLinkDialog && (
<InternalLinkDialog

4
frontend/src/components/paginator.js
View File

@@ -56,7 +56,7 @@ class Paginator extends Component {
disabled={currentPage == 1}
onClick={this.goToPrevious}
>
<span className="fas fa-chevron-left"></span>
<span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span>
</button>
<span className="btn btn-primary mx-4">{currentPage}</span>
<button
@@ -64,7 +64,7 @@ class Paginator extends Component {
disabled={!this.props.hasNextPage}
onClick={this.goToNext}
>
<span className="fas fa-chevron-right"></span>
<span className="sf3-font sf3-font-down rotate-270 d-inline-block"></span>
</button>
<select

2
frontend/src/components/popover/tag-list-footer.js
View File

@@ -109,7 +109,7 @@ export default class TagListFooter extends Component {
render() {
return (
<div className="tag-list-footer">
<span className="fa fa-question-circle mr-2" style={{color: '#999'}} id="import-export-tags-tip"></span>
<span className="sf3-font sf3-font-tips mr-2" style={{color: '#999'}} id="import-export-tags-tip"></span>
<Tooltip
toggle={this.toggleTooltip}
delay={{show: 0, hide: 0}}

6
frontend/src/components/sdoc-wiki-page-viewer/index.js
View File

@@ -124,13 +124,15 @@ class SdocWikiPageViewer extends React.Component {
const containerClass = `wiki-page-container ${containerClassName}`;
// In dir-column-file width is 100%;
// In wiki-viewer width isn't 100%
const contentClassName = `wiki-page-content ${!isWiki ? + 'w-100' : ''}`;
const contentClassName = `wiki-page-content ${isWiki ? '' : 'w-100'}`;
return (
<div ref={this.scrollRef} className={containerClass}>
<div className={contentClassName}>
{this.props.children}
{this.renderMarkdown()}
<p id="wiki-page-last-modified">{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
<p id="wiki-page-last-modified">
{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span>
</p>
</div>
</div>
);

6
frontend/src/components/seafile-markdown-viewer/index.js
View File

@@ -110,13 +110,15 @@ class SeafileMarkdownViewer extends React.Component {
const containerClass = `wiki-page-container ${containerClassName}`;
// In dir-column-file width is 100%;
// In wiki-viewer width isn't 100%
const contentClassName = `wiki-page-content ${!isWiki ? + 'w-100' : ''}`;
const contentClassName = `wiki-page-content ${isWiki ? '' : 'w-100'}`;
return (
<div ref={this.scrollRef} className={containerClass}>
<div className={contentClassName}>
{this.props.children}
{this.renderMarkdown()}
<p id="wiki-page-last-modified">{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
<p id="wiki-page-last-modified">
{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span>
</p>
</div>
</div>
);

16
frontend/src/components/search/ai-search.js
View File

@@ -421,7 +421,7 @@ export default class AISearch extends Component {
return (
<div className="search-types">
<div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -433,17 +433,17 @@ export default class AISearch extends Component {
return (
<div className="search-types">
<div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this library')}</span>
</div>
<div className={`search-types-folder ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchFolder} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this folder')}</span>
</div>
<div className={`search-types-repos ${highlightIndex === 2 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -453,12 +453,12 @@ export default class AISearch extends Component {
return (
<div className="search-types">
<div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this library')}</span>
</div>
<div className={`search-types-repos ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -716,7 +716,7 @@ export default class AISearch extends Component {
}
<button
type="button"
className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4"
className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent mr-4"
onClick={this.onCloseHandler}
aria-label={gettext('Close')}
></button>
@@ -756,7 +756,7 @@ export default class AISearch extends Component {
autoComplete="off"
/>
{this.state.isCloseShow &&
<button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
<button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
}
</div>
<div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>

2
frontend/src/components/search/search-by-name.js
View File

@@ -30,7 +30,7 @@ class SearchByName extends Component {
return (
<Fragment>
<i
className="fas fa-search top-search-file-icon"
className="sf3-font sf3-font-search top-search-file-icon"
onClick={this.toggleDialog}
title={gettext('Search files in this library')}
></i>

22
frontend/src/components/search/search.js
View File

@@ -420,7 +420,7 @@ class Search extends Component {
return (
<div className="search-types">
<div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -432,17 +432,17 @@ class Search extends Component {
return (
<div className="search-types">
<div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this library')}</span>
</div>
<div className={`search-types-folder ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchFolder} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this folder')}</span>
</div>
<div className={`search-types-repos ${highlightIndex === 2 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -452,12 +452,12 @@ class Search extends Component {
return (
<div className="search-types">
<div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in this library')}</span>
</div>
<div className={`search-types-repos ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
{inputValue}
<span className="search-types-text">{gettext('in all libraries')}</span>
</div>
@@ -551,7 +551,7 @@ class Search extends Component {
<div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
<div className={`search-container ${isMaskShow ? 'show' : ''}`}>
<div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
<input
type="text"
className="form-control search-input"
@@ -565,7 +565,7 @@ class Search extends Component {
ref={this.inputRef}
/>
{this.state.isCloseShow &&
<button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
<button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
}
</div>
<div
@@ -580,14 +580,14 @@ class Search extends Component {
</MediaQuery>
<MediaQuery query="(max-width: 767.8px)">
<div className="search-icon-container">
<i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
<i className="search-icon sf3-font sf3-font-search" onClick={this.onSearchToggle}></i>
</div>
{this.state.isSearchInputShow &&
<div className="search">
<div className={`search-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
<div className="search-container">
<div className="input-icon">
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
<input
type="text"
className="form-control search-input"
@@ -600,7 +600,7 @@ class Search extends Component {
autoComplete="off"
/>
{this.state.isCloseShow &&
<button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
<button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
}
</div>
<div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>

10
frontend/src/components/search/wiki-search.js
View File

@@ -228,7 +228,7 @@ class Search extends Component {
<div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
<div className="search-container">
<div className="input-icon">
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
<input
type="text"
className="form-control search-input"
@@ -240,7 +240,7 @@ class Search extends Component {
onChange={this.onChangeHandler}
autoComplete="off"
/>
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon sf3-font sf3-font-x-01' onClick={this.onCloseHandler}></i>}
</div>
<div className="search-result-container dropdown-search-result-container">
{this.renderSearchResult()}
@@ -250,14 +250,14 @@ class Search extends Component {
</MediaQuery>
<MediaQuery query="(max-width: 767.8px)">
<div className="search-icon-container">
<i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
<i className="search-icon sf3-font sf3-font-search" onClick={this.onSearchToggle}></i>
</div>
{this.state.isSearchInputShow &&
<div className="search">
<div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
<div className="search-container">
<div className="input-icon">
<i className="search-icon-left input-icon-addon fas fa-search"></i>
<i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
<input
type="text"
className="form-control search-input"
@@ -269,7 +269,7 @@ class Search extends Component {
onChange={this.onChangeHandler}
autoComplete="off"
/>
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
{this.state.isCloseShow && <i className='search-icon-right input-icon-addon sf3-font sf3-font-x-01' onClick={this.onCloseHandler}></i>}
</div>
<div className="search-result-container dropdown-search-result-container">
{this.renderSearchResult()}

2
frontend/src/components/seatable-integration-account-setting-widgets/add-seatable-account-setting.js
View File

@@ -148,7 +148,7 @@ class AddSeatableAccountSetting extends Component {
<InputGroup>
<Input value={seatable_api_token} type={passwordType} onChange={this.onChangeSeatableApiToken}/>
<InputGroupText>
<i className={`fas ${passwordType === 'password' ? 'fa-eye-slash' : 'fa-eye'} cursor-pointer`} onClick={this.togglePasswordShow} />
<i className={`sf3-font sf3-font-eye${passwordType === 'password' ? '-slash' : ''} cursor-pointer`} onClick={this.togglePasswordShow} />
</InputGroupText>
</InputGroup>
</FormGroup>

2
frontend/src/components/select-editor/repo-api-token-permission-editor.js
View File

@@ -61,7 +61,7 @@ class RepoAPITokenPermissionEditor extends React.Component {
<Fragment>
<span>{optionTranslation}</span>
{this.props.isEditIconShow &&
<OpIcon title={gettext('Edit')} className="fa fa-pencil-alt attr-action-icon" op={this.onEditPermission} />
<OpIcon title={gettext('Edit')} className="sf3-font sf3-font-rename attr-action-icon" op={this.onEditPermission} />
}
</Fragment>
:

4
frontend/src/components/select-editor/select-editor.js
View File

@@ -62,7 +62,7 @@ class SelectEditor extends React.Component {
isDisabled: true,
label: (
<div className="permission-editor-btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}>
<i className="fa fa-plus"></i>
<i className="sf3-font sf3-font-enlarge"></i>
<span>{gettext('Add custom permission')}</span>
</div>
)
@@ -136,7 +136,7 @@ class SelectEditor extends React.Component {
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
onClick={this.onEditPermission}>
</a>
)}

10
frontend/src/components/share-link-panel/link-creation.js
View File

@@ -256,7 +256,7 @@ class LinkCreation extends React.Component {
<Fragment>
<div className="d-flex align-items-center pb-2 border-bottom">
<h6 className="font-weight-normal m-0">
<button className="fa fa-arrow-left back-icon border-0 bg-transparent text-secondary p-0 mr-2" onClick={this.goBack} title={gettext('Back')} aria-label={gettext('Back')}></button>
<button className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon border-0 bg-transparent text-secondary p-0 mr-2" onClick={this.goBack} title={gettext('Back')} aria-label={gettext('Back')}></button>
{type == 'batch' ? gettext('Generate links in batch') : gettext('Generate Link')}</h6>
</div>
<Form className="pt-4">
@@ -286,8 +286,12 @@ class LinkCreation extends React.Component {
<InputGroup style={{width: inputWidth}}>
<Input id="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword} />
<InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
<Button onClick={this.togglePasswordVisible}>
<i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
</Button>
<Button onClick={this.generatePassword}>
<i className="link-operation-icon sf3-font sf3-font-magic"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>

6
frontend/src/components/share-link-panel/link-details.js
View File

@@ -163,7 +163,7 @@ class LinkDetails extends React.Component {
return (
<div>
<button className="fa fa-arrow-left back-icon border-0 bg-transparent text-secondary p-0" onClick={this.goBack} title={gettext('Back')} aria-label={gettext('Back')}></button>
<button className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon border-0 bg-transparent text-secondary p-0" onClick={this.goBack} title={gettext('Back')} aria-label={gettext('Back')}></button>
<dl>
<dt className="text-secondary font-weight-normal">{gettext('Link:')}</dt>
<dd>
@@ -190,7 +190,7 @@ class LinkDetails extends React.Component {
<dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
<dd className="d-flex align-items-center">
<span className="mr-1">{this.state.storedPasswordVisible ? sharedLinkInfo.password : '***************'}</span>
<span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
<span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '': '-slash'}`}></span>
</dd>
</>
)}
@@ -205,7 +205,7 @@ class LinkDetails extends React.Component {
role="button"
aria-label={gettext('Edit')}
title={gettext('Edit')}
className="fa fa-pencil-alt attr-action-icon"
className="sf3-font sf3-font-rename attr-action-icon"
onClick={this.editingExpirationToggle}>
</a>
)}

2
frontend/src/components/shared-link-file-uploader/forbid-upload-list-item.js
View File

@@ -19,7 +19,7 @@ class ForbidUploadListItem extends React.Component {
<td>{Utils.bytesToSize(file.size)}</td>
<td>
<div className="d-flex align-items-center">
<span className="upload-failure-icon fas fa-exclamation mr-2"></span>
<span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
<span className="upload-failure-msg">{gettext('File too large')}</span>
</div>
</td>

2
frontend/src/components/shared-link-file-uploader/upload-list-item.js
View File

@@ -133,7 +133,7 @@ class UploadListItem extends React.Component {
)}
{this.state.uploadState === UPLOAD_ERROR && (
<div className="d-flex align-items-center">
<span className="upload-failure-icon fas fa-exclamation mr-2"></span>
<span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
<span className="upload-failure-msg" dangerouslySetInnerHTML={{__html: error}}></span>
</div>
)}

2
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@@ -468,7 +468,7 @@ class SharedRepoListItem extends React.Component {
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
title={gettext('More operations')}
aria-label={gettext('More operations')}
data-toggle="dropdown"

3
frontend/src/components/side-panel.js
View File

@@ -21,7 +21,8 @@ class SidePanel extends React.Component {
<Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
</div>
<div className="side-panel-center">
{children ? children :
{children ?
children :
<MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} />
}
</div>

10
frontend/src/components/toast/alert.js
View File

@@ -14,15 +14,15 @@ class Alert extends React.PureComponent {
getIconClass(intent) {
switch (intent) {
case 'success':
return 'fa fa-check-circle';
return 'sf3-font sf3-font-check-circle';
case 'warning':
return 'fa fa-exclamation-triangle';
return 'sf3-font sf3-font-exclamation-triangle';
case 'none':
return 'fa fa-exclamation-circle';
return 'sf3-font sf3-font-exclamation-circle';
case 'danger':
return 'fa fa-exclamation-circle';
return 'sf3-font sf3-font-exclamation-circle';
default:
return 'fa fa-check-circle';
return 'sf3-font sf3-font-check-circle';
}
}

2
frontend/src/components/toolbar/invitations-toolbar.js
View File

@@ -28,7 +28,7 @@ class InvitationsToolbar extends React.Component {
{Utils.isDesktop() ? (
<div className="operation">
<Button color="btn btn-secondary operation-item" onClick={toggleInvitePeopleDialog}>
<i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite Guest')}
<i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Invite Guest')}
</Button>
</div>
) : (

2
frontend/src/components/toolbar/my-libs-toolbar.js
View File

@@ -54,7 +54,7 @@ class MyLibsToolbar extends React.Component {
{Utils.isDesktop() ? (
<div className="operation">
<button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
<i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
<i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('New Library')}
</button>
{moreShown &&
<Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>

12
frontend/src/components/tree-view/tree-node-view.js
View File

@@ -178,25 +178,25 @@ class TreeNodeView extends React.Component {
let icon = '';
let type = '';
if (node.object.type === 'dir') {
icon = <i className="far fa-folder"></i>;
icon = <i className="sf3-font sf3-font-folder"></i>;
type = 'dir';
} else {
let index = node.object.name.lastIndexOf('.');
if (index === -1) {
icon = <i className="far fa-file"></i>;
icon = <i className="sf3-font sf3-font-file"></i>;
type = 'file';
} else {
let suffix = node.object.name.slice(index).toLowerCase();
if (suffix === '.png' || suffix === '.jpg' || suffix === '.jpeg' || suffix === '.gif' || suffix === '.bmp') {
icon = <i className="far fa-image"></i>;
icon = <i className="sf3-font sf3-font-image"></i>;
type = 'image';
}
else if (suffix === '.md' || suffix === '.markdown') {
icon = <i className="far fa-file-alt"></i>;
icon = <i className="sf3-font sf3-font-files2"></i>;
type = 'file';
}
else {
icon = <i className="far fa-file"></i>;
icon = <i className="sf3-font sf3-font-file"></i>;
type = 'file';
}
}
@@ -318,7 +318,7 @@ class TreeNodeView extends React.Component {
{((userPerm === 'rw' || permission || isCustomPermission) && this.state.isShowOperationMenu) && (
<ItemDropdownMenu
item={this.props.node}
toggleClass={'fas fa-ellipsis-v'}
toggleClass={'sf3-font sf3-font-more-vertical'}
getMenuList={this.calculateMenuList}
onMenuItemClick={this.onMenuItemClick}
freezeItem={this.props.freezeItem}

2
frontend/src/components/user-settings/linked-devices.js
View File

@@ -160,7 +160,7 @@ class Item extends Component {
<Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
title={gettext('More operations')}
aria-label={gettext('More operations')}
data-toggle="dropdown"

2
frontend/src/components/user-settings/user-avatar-form.js
View File

@@ -94,7 +94,7 @@ class UserAvatarForm extends React.Component {
<div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver} tabIndex="0">
<img src={this.state.avatarSrc} width="80" height="80" alt="" className="user-avatar" />
<input type="file" name="avatar" className="d-none" onChange={this.fileInputChange} ref={this.fileInput} />
<span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput} role="button" aria-label={gettext('Edit')} tabIndex="0" onKeyDown={this.onEditIconKeyDown}></span>
<span className={`avatar-edit sf3-font sf3-font-rename ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput} role="button" aria-label={gettext('Edit')} tabIndex="0" onKeyDown={this.onEditIconKeyDown}></span>
</div>
</form>
);

9
frontend/src/components/user-settings/web-api-auth-token.js
View File

@@ -78,7 +78,14 @@ class WebAPIAuthToken extends React.Component {
<div className="d-flex align-items-center">
<label className="m-0 mr-2" htmlFor="token">{gettext('Token:')}</label>
<input id="token" className="border-0 mr-1" type="text" value={isAuthTokenVisible ? authToken : '****************************************'} readOnly={true} size={Math.max(authToken.length, 10)} />
<span tabIndex="0" role="button" aria-label={isAuthTokenVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleAuthTokenVisible} className={`eye-icon fas ${this.state.isAuthTokenVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
<span
tabIndex="0"
role="button"
aria-label={isAuthTokenVisible ? gettext('Hide') : gettext('Show')}
onKeyDown={this.onIconKeyDown}
onClick={this.toggleAuthTokenVisible}
className={`eye-icon sf3-font sf3-font-eye${this.state.isAuthTokenVisible ? '': '-slash'}`}
></span>
</div>
<button className="btn btn-outline-primary mt-2" onClick={this.deleteAuthToken}>{gettext('Delete')}</button>
</React.Fragment>