haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 14:42:10 +00:00
Code Issues Releases Wiki Activity

adjust small screen button position

Browse Source
This commit is contained in:
Michael An
2019-04-19 15:58:11 +08:00
parent 0a180c086a
commit 63f4b93d6f
2 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,6 +54,7 @@ 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-1">
<DropdownToggle id="moreButton">
@@ -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>
);
@@ -140,6 +146,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>
@@ -167,9 +204,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>
);
}

14
frontend/src/css/markdown-viewer/markdown-editor.css
View File

@@ -4,7 +4,8 @@
position: relative;
float: none;
}
.sf-md-viewer-topbar-first {
.sf-md-viewer-topbar-first,
.sf-md-viewer-topbar-first-narrow {
padding: 4px 10px;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
@@ -156,3 +157,14 @@
.seafile-md-comment .seafile-comment .seafile-comment-toggle-resolved {
width: 100%;
}
@media (max-width: 768px) {
.sf-md-viewer-topbar-first {
display: none !important;
}
}
@media (min-width: 768px) {
.sf-md-viewer-topbar-first-narrow {
display: none !important;
}
}