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

Merge pull request #3327 from haiwen/fix-mobile-markdown

Browse Source 
fix mobile style
This commit is contained in:
Daniel Pan
2019-04-19 17:51:11 +08:00
committed by GitHub
parent be2d44c1dc 63f4b93d6f
commit 52fd986b31
2 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/toolbar/markdown-viewer-toolbar.js
View File

@@ -54,8 +54,9 @@ class MoreMenu extends React.PureComponent {
render() {
const editorMode = this.props.editorMode;
const isSmall = this.props.isSmallScreen;
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-lg-1">
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
<DropdownToggle id="moreButton">
<i className="fa fa-ellipsis-v"/>
<Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
@@ -69,6 +70,11 @@ class MoreMenu extends React.PureComponent {
{(this.props.openDialogs && editorMode === 'rich') &&
<DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
}
{isSmall && <DropdownItem onMouseDown={this.props.toggleShareLinkDialog}>{gettext('Share')}</DropdownItem>}
{isSmall && <DropdownItem onMouseDown={this.props.backToParentDirectory}>{gettext('Back to parent directory')}</DropdownItem>}
{(isSmall && this.props.showFileHistory) &&
<DropdownItem onMouseDown={this.props.toggleHistory}>{gettext('File History')}</DropdownItem>
}
</DropdownMenu>
</Dropdown>
);
@@ -144,6 +150,37 @@ class MarkdownViewerToolbar extends React.Component {
openDialogs={this.props.openDialogs}
editorMode={this.props.editorMode}
onEdit={this.props.onEdit}
isSmallScreen={false}
/>
</div>
</div>
<div className="sf-md-viewer-topbar-first-narrow d-flex justify-content-between">
<FileInfo
toggleStar={this.props.toggleStar}
editorUtilities={this.props.editorUtilities}
fileInfo={this.props.fileInfo}
showDraftSaved={this.props.showDraftSaved}
/>
<div className="topbar-btn-container">
<ButtonGroup>
{saving ?
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
<i className={'fa fa-spin fa-spinner'}/></button>
:
<IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'} disabled={!contentChanged}
onMouseDown={window.seafileEditor && window.seafileEditor.onRichEditorSave} isActive={contentChanged}/>
}
</ButtonGroup>
<MoreMenu
readOnly={this.props.readOnly}
openDialogs={this.props.openDialogs}
editorMode={this.props.editorMode}
onEdit={this.props.onEdit}
toggleShareLinkDialog={this.props.toggleShareLinkDialog}
backToParentDirectory={this.props.backToParentDirectory}
showFileHistory={this.props.showFileHistory}
toggleHistory={this.props.toggleHistory}
isSmallScreen={true}
/>
</div>
</div>
@@ -171,9 +208,39 @@ class MarkdownViewerToolbar extends React.Component {
openDialogs={this.props.openDialogs}
editorMode={this.props.editorMode}
onEdit={this.props.onEdit}
isSmallScreen={false}
/>
</div>
</div>
<div className="sf-md-viewer-topbar-first-narrow d-flex justify-content-between">
<FileInfo toggleStar={this.props.toggleStar} editorUtilities={this.props.editorUtilities}
fileInfo={this.props.fileInfo}/>
<div className="topbar-btn-container">
<ButtonGroup>
{saving ?
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
<i className={'fa fa-spin fa-spinner'}/></button>
:
<IconButton
id={'saveButton'}
text={gettext('Save')}
icon={'fa fa-save'}
onMouseDown={window.seafileEditor && window.seafileEditor.onPlainEditorSave}
disabled={!contentChanged}
isActive={contentChanged}
/>
}
</ButtonGroup>
<MoreMenu
readOnly={this.props.readOnly}
openDialogs={this.props.openDialogs}
editorMode={this.props.editorMode}
onEdit={this.props.onEdit}
isSmallScreen={false}
/>
</div>
</div>
</div>
);
}