From 63f4b93d6fe84634d95da2368f40ef71836e9c4c Mon Sep 17 00:00:00 2001
From: Michael An <1822852997@qq.com>
Date: Fri, 19 Apr 2019 15:58:11 +0800
Subject: [PATCH] adjust small screen button position

---
 .../toolbar/markdown-viewer-toolbar.js        | 67 +++++++++++++++++++
 .../css/markdown-viewer/markdown-editor.css   | 14 +++-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/toolbar/markdown-viewer-toolbar.js b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
index 8491325012..edf6761f63 100644
--- a/frontend/src/components/toolbar/markdown-viewer-toolbar.js
+++ b/frontend/src/components/toolbar/markdown-viewer-toolbar.js
@@ -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>
       );
     }
diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css
index 7c6e5250b1..58caffab68 100644
--- a/frontend/src/css/markdown-viewer/markdown-editor.css
+++ b/frontend/src/css/markdown-viewer/markdown-editor.css
@@ -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;
+  }
+}