feat: remove space between buttons (#5729)

decaporg · Aug 27, 2021 · 737573a · 737573a
1 parent f0cafb5
commit 737573a
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 273 deletions.
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -301,14 +301,21 @@ export class EditorToolbar extends React.Component {
     }
   }
 
-  renderSimpleSaveControls = () => {
-    const { showDelete, onDelete, t } = this.props;
+  renderSimpleControls = () => {
+    const { collection, hasChanged, isNewEntry, showDelete, onDelete, t } = this.props;
+    const canCreate = collection.get('create');
+
     return (
-      <div>
-        {showDelete ? (
-          <DeleteButton onClick={onDelete}>{t('editor.editorToolbar.deleteEntry')}</DeleteButton>
-        ) : null}
-      </div>
+      <>
+        {!isNewEntry && !hasChanged
+          ? this.renderExistingEntrySimplePublishControls({ canCreate })
+          : this.renderNewEntrySimplePublishControls({ canCreate })}
+        <div>
+          {showDelete ? (
+            <DeleteButton onClick={onDelete}>{t('editor.editorToolbar.deleteEntry')}</DeleteButton>
+          ) : null}
+        </div>
+      </>
     );
   };
 
@@ -545,22 +552,15 @@ export class EditorToolbar extends React.Component {
     );
   };
 
-  renderSimplePublishControls = () => {
-    const { collection, hasChanged, isNewEntry, t } = this.props;
+  renderSimpleDeployPreviewControls = () => {
+    const { hasChanged, isNewEntry, t } = this.props;
 
-    const canCreate = collection.get('create');
     if (!isNewEntry && !hasChanged) {
-      return (
-        <>
-          {this.renderDeployPreviewControls(t('editor.editorToolbar.deployButtonLabel'))}
-          {this.renderExistingEntrySimplePublishControls({ canCreate })}
-        </>
-      );
+      return this.renderDeployPreviewControls(t('editor.editorToolbar.deployButtonLabel'));
     }
-    return this.renderNewEntrySimplePublishControls({ canCreate });
   };
 
-  renderWorkflowSaveControls = () => {
+  renderWorkflowControls = () => {
     const {
       onPersist,
       onDelete,
@@ -573,9 +573,15 @@ export class EditorToolbar extends React.Component {
       isDeleting,
       isNewEntry,
       isModification,
+      currentStatus,
+      collection,
       t,
     } = this.props;
 
+    const canCreate = collection.get('create');
+    const canPublish = collection.get('publish') && !useOpenAuthoring;
+    const canDelete = collection.get('delete', true);
+
     const deleteLabel =
       (hasUnpublishedChanges &&
         isModification &&
@@ -593,6 +599,13 @@ export class EditorToolbar extends React.Component {
       >
         {isPersisting ? t('editor.editorToolbar.saving') : t('editor.editorToolbar.save')}
       </SaveButton>,
+      currentStatus
+        ? [
+            this.renderWorkflowStatusControls(),
+            this.renderNewEntryWorkflowPublishControls({ canCreate, canPublish }),
+          ]
+        : !isNewEntry &&
+          this.renderExistingEntryWorkflowPublishControls({ canCreate, canPublish, canDelete }),
       (!showDelete || useOpenAuthoring) && !hasUnpublishedChanges && !isModification ? null : (
         <DeleteButton
           key="delete-button"
@@ -604,33 +617,18 @@ export class EditorToolbar extends React.Component {
     ];
   };
 
-  renderWorkflowPublishControls = () => {
-    const { collection, currentStatus, isNewEntry, useOpenAuthoring, t } = this.props;
-
-    const canCreate = collection.get('create');
-    const canPublish = collection.get('publish') && !useOpenAuthoring;
-    const canDelete = collection.get('delete', true);
+  renderWorkflowDeployPreviewControls = () => {
+    const { currentStatus, isNewEntry, t } = this.props;
 
     if (currentStatus) {
-      return (
-        <>
-          {this.renderDeployPreviewControls(t('editor.editorToolbar.deployPreviewButtonLabel'))}
-          {this.renderWorkflowStatusControls()}
-          {this.renderNewEntryWorkflowPublishControls({ canCreate, canPublish })}
-        </>
-      );
+      return this.renderDeployPreviewControls(t('editor.editorToolbar.deployPreviewButtonLabel'));
     }
 
     /**
      * Publish control for published workflow entry.
      */
     if (!isNewEntry) {
-      return (
-        <>
-          {this.renderDeployPreviewControls(t('editor.editorToolbar.deployButtonLabel'))}
-          {this.renderExistingEntryWorkflowPublishControls({ canCreate, canPublish, canDelete })}
-        </>
-      );
+      return this.renderDeployPreviewControls(t('editor.editorToolbar.deployButtonLabel'));
     }
   };
 
@@ -665,12 +663,12 @@ export class EditorToolbar extends React.Component {
         </ToolbarSectionBackLink>
         <ToolbarSectionMain>
           <ToolbarSubSectionFirst>
-            {hasWorkflow ? this.renderWorkflowSaveControls() : this.renderSimpleSaveControls()}
+            {hasWorkflow ? this.renderWorkflowControls() : this.renderSimpleControls()}
           </ToolbarSubSectionFirst>
           <ToolbarSubSectionLast>
             {hasWorkflow
-              ? this.renderWorkflowPublishControls()
-              : this.renderSimplePublishControls()}
+              ? this.renderWorkflowDeployPreviewControls()
+              : this.renderSimpleDeployPreviewControls()}
           </ToolbarSubSectionLast>
         </ToolbarSectionMain>
         <ToolbarSectionMeta>