From decee2d6120c1a79ffcb75689cf7803ebc3b589e Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 11 Dec 2019 20:16:33 +0900
Subject: [PATCH] add export icon button and set tags fixes

---
 .../NotePage/NoteDetail/NoteDetail.tsx        | 70 ++++++++++---------
 .../NotePage/NoteDetail/TagList.tsx           | 35 +++++++---
 src/components/atoms/Toolbar.tsx              |  7 ++
 src/components/atoms/ToolbarExportButton.tsx  |  4 +-
 4 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/src/components/NotePage/NoteDetail/NoteDetail.tsx b/src/components/NotePage/NoteDetail/NoteDetail.tsx
index fba4babfc4..f035275fbc 100644
--- a/src/components/NotePage/NoteDetail/NoteDetail.tsx
+++ b/src/components/NotePage/NoteDetail/NoteDetail.tsx
@@ -15,7 +15,8 @@ import {
   mdiArrowSplitVertical,
   mdiFormatText,
   mdiDeleteEmpty,
-  mdiRestore
+  mdiRestore,
+  mdiTagOutline
 } from '@mdi/js'
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
 import Toolbar from '../../atoms/Toolbar'
@@ -28,6 +29,7 @@ import {
 } from '../../../lib/styled/styleFunctions'
 import ToolbarExportButton from '../../atoms/ToolbarExportButton'
 import { getFileList } from '../../../lib/dnd'
+import Icon from '../../atoms/Icon'
 
 export const StyledNoteDetailContainer = styled.div`
   ${secondaryBackgroundColor}
@@ -415,10 +417,7 @@ export default class NoteDetail extends React.Component<
               )}
             </div>
             <Toolbar>
-              <TagList
-                tags={this.state.tags}
-                removeTagByName={this.removeTagByName}
-              />
+              <Icon className='icon' path={mdiTagOutline} />
               <input
                 className='tagInput'
                 ref={this.newTagNameInputRef}
@@ -427,36 +426,43 @@ export default class NoteDetail extends React.Component<
                 onChange={this.updateNewTagName}
                 onKeyDown={this.handleNewTagNameInputKeyDown}
               />
-              <ToolbarSeparator />
-              <ToolbarExportButton note={this.props.note} />
-              <ToolbarIconButton onClick={() => {}} path={mdiFormatText} />
-              <ToolbarIconButton
-                className={splitMode ? 'active' : ''}
-                onClick={toggleSplitMode}
-                path={mdiArrowSplitVertical}
-              />
-              <ToolbarIconButton
-                className={previewMode ? 'active' : ''}
-                onClick={togglePreviewMode}
-                path={mdiEyeOutline}
+
+              <TagList
+                tags={this.state.tags}
+                removeTagByName={this.removeTagByName}
               />
-              {note.trashed ? (
-                <>
-                  <ToolbarIconButton
-                    onClick={this.untrashNote}
-                    path={mdiRestore}
-                  />
-                  <ToolbarIconButton
-                    onClick={this.purgeNote}
-                    path={mdiDeleteEmpty}
-                  />
-                </>
-              ) : (
+              <ToolbarSeparator />
+              <div className='icons'>
+                <ToolbarExportButton note={this.props.note} />
+                <ToolbarIconButton onClick={() => {}} path={mdiFormatText} />
                 <ToolbarIconButton
-                  onClick={this.trashNote}
-                  path={mdiTrashCan}
+                  className={splitMode ? 'active' : ''}
+                  onClick={toggleSplitMode}
+                  path={mdiArrowSplitVertical}
                 />
-              )}
+                <ToolbarIconButton
+                  className={previewMode ? 'active' : ''}
+                  onClick={togglePreviewMode}
+                  path={mdiEyeOutline}
+                />
+                {note.trashed ? (
+                  <>
+                    <ToolbarIconButton
+                      onClick={this.untrashNote}
+                      path={mdiRestore}
+                    />
+                    <ToolbarIconButton
+                      onClick={this.purgeNote}
+                      path={mdiDeleteEmpty}
+                    />
+                  </>
+                ) : (
+                  <ToolbarIconButton
+                    onClick={this.trashNote}
+                    path={mdiTrashCan}
+                  />
+                )}
+              </div>
             </Toolbar>
           </>
         )}
diff --git a/src/components/NotePage/NoteDetail/TagList.tsx b/src/components/NotePage/NoteDetail/TagList.tsx
index fc0a159a93..93c3a3eb5b 100644
--- a/src/components/NotePage/NoteDetail/TagList.tsx
+++ b/src/components/NotePage/NoteDetail/TagList.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import Icon from '../../atoms/Icon'
-import { mdiClose, mdiTagOutline } from '@mdi/js'
+import { mdiClose } from '@mdi/js'
 import styled from '../../../lib/styled'
 import { iconColor } from '../../../lib/styled/styleFunctions'
 
@@ -24,11 +24,23 @@ const TagListItem = ({ tagName, removeTagByName }: TagListItemProps) => {
   )
 }
 
+const StyledParentContainer = styled.div`
+  flex: 0 1 auto;
+  height: 100%;
+  overflow: hidden;
+`
+
 const StyledContainer = styled.div`
   display: flex;
+  overflow: auto;
+  padding-bottom: 17px;
+  padding-rigth: 4%;
+
   .listItem {
     margin: 0 2px;
+    height: 32px;
     display: flex;
+    align-items: center;
   }
 
   .icon {
@@ -60,16 +72,17 @@ interface TagListProps {
 
 const TagList = ({ tags, removeTagByName }: TagListProps) => {
   return (
-    <StyledContainer>
-      <Icon className='icon' path={mdiTagOutline} />
-      {tags.map(tag => (
-        <TagListItem
-          key={tag}
-          tagName={tag}
-          removeTagByName={removeTagByName}
-        />
-      ))}
-    </StyledContainer>
+    <StyledParentContainer>
+      <StyledContainer>
+        {tags.map(tag => (
+          <TagListItem
+            key={tag}
+            tagName={tag}
+            removeTagByName={removeTagByName}
+          />
+        ))}
+      </StyledContainer>
+    </StyledParentContainer>
   )
 }
 
diff --git a/src/components/atoms/Toolbar.tsx b/src/components/atoms/Toolbar.tsx
index f343e58032..a26411f5ff 100644
--- a/src/components/atoms/Toolbar.tsx
+++ b/src/components/atoms/Toolbar.tsx
@@ -7,6 +7,13 @@ const Toolbar = styled.div`
   align-items: center;
   ${borderTop}
   padding: 0 5px;
+
+  .icons {
+    flex: 1 0 0;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+  }
 `
 
 export default Toolbar
diff --git a/src/components/atoms/ToolbarExportButton.tsx b/src/components/atoms/ToolbarExportButton.tsx
index c757a4cde7..365ccd241c 100644
--- a/src/components/atoms/ToolbarExportButton.tsx
+++ b/src/components/atoms/ToolbarExportButton.tsx
@@ -17,6 +17,8 @@ import { usePreferences } from '../../lib/preferences'
 import { rehypeCodeMirror } from './MarkdownPreviewer'
 import { usePreviewStyle } from '../../lib/preview'
 import { downloadString } from '../../lib/download'
+import { mdiFileExport } from '@mdi/js'
+import Icon from './Icon'
 
 const sanitizeSchema = mergeDeepRight(gh, {
   attributes: { '*': ['className'] }
@@ -132,7 +134,7 @@ const ToolbarExportButton = ({ className, note }: ToolbarExportButtonProps) => {
       onClick={openExportButtonContextMenu}
       className={className}
     >
-      <span>Export</span>
+      <Icon path={mdiFileExport} />
     </StyledButton>
   )
 }