mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-30 13:23:14 +00:00
adjust small screen button position
This commit is contained in:
parent
0a180c086a
commit
63f4b93d6f
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user