UI Spring Cleaning: Note info panels (#2622)

Updates the note info component to match the new designs. - Split note info component into two components, NoteInfo, and NoteActions. - Remove publish note info from Share dialog - Remove redundant icons from the note toolbar Fixes #2569
Automattic · Apr 8, 2021 · 54b2428 · 54b2428
1 parent 21bd75e
commit 54b2428
Show file tree

Hide file tree

Showing 18 changed files with 562 additions and 318 deletions.
diff --git a/lib/app-layout/style.scss b/lib/app-layout/style.scss
@@ -53,19 +53,6 @@
     }
   }
 
-  // Fade content when toolbars are visible
-  &.is-showing-note-info {
-    opacity: $fade-alpha;
-    transition: $anim;
-    pointer-events: none;
-
-    @media only screen and (max-width: $single-column) {
-      .app-layout__note-column {
-        opacity: $fade-alpha;
-      }
-    }
-  }
-
   &.is-note-open {
     .app-layout__source-column {
       transition: opacity 0.2s ease-in-out;

diff --git a/lib/app.tsx b/lib/app.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import 'focus-visible/dist/focus-visible.js';
 import NoteInfo from './note-info';
+import NoteActions from './note-actions';
 import NavigationBar from './navigation-bar';
 import AppLayout from './app-layout';
 import DevBadge from './components/dev-badge';
@@ -38,6 +39,7 @@ type StateProps = {
   showAlternateLoginPrompt: boolean;
   showEmailVerification: boolean;
   showNavigation: boolean;
+  showNoteActions: boolean;
   showNoteInfo: boolean;
   showRevisions: boolean;
   theme: 'light' | 'dark';
@@ -182,6 +184,7 @@ class AppComponent extends Component<Props> {
       showAlternateLoginPrompt,
       showEmailVerification,
       showNavigation,
+      showNoteActions,
       showNoteInfo,
       showRevisions,
       theme,
@@ -193,7 +196,6 @@ class AppComponent extends Component<Props> {
     });
 
     const mainClasses = classNames('simplenote-app', {
-      'note-info-open': showNoteInfo,
       'navigation-open': showNavigation,
       'is-electron': isElectron,
       'is-macos': isElectron && isMac,
@@ -212,6 +214,7 @@ class AppComponent extends Component<Props> {
           {showNavigation && <NavigationBar />}
           <AppLayout />
           {showNoteInfo && <NoteInfo />}
+          {showNoteActions && <NoteActions />}
         </div>
         <DialogRenderer appProps={this.props} />
       </div>
@@ -228,6 +231,7 @@ const mapStateToProps: S.MapState<StateProps> = (state) => ({
   showAlternateLoginPrompt: state.ui.showAlternateLoginPrompt,
   showEmailVerification: selectors.shouldShowEmailVerification(state),
   showNavigation: state.ui.showNavigation,
+  showNoteActions: state.ui.showNoteActions,
   showNoteInfo: state.ui.showNoteInfo,
   showRevisions: state.ui.showRevisions,
   theme: selectors.getTheme(state),

diff --git a/lib/components/clipboard-button/index.tsx b/lib/components/clipboard-button/index.tsx
@@ -1,8 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import Clipboard from 'clipboard';
 
-function ClipboardButton({ text }) {
+type Props = {
+  container?: React.RefObject<HTMLElement>;
+  linkText: string;
+  text: string;
+};
+
+function ClipboardButton({ container, linkText, text }: Props) {
   const buttonRef = useRef();
   const textCallback = useRef();
   const successCallback = useRef();
@@ -30,6 +35,7 @@ function ClipboardButton({ text }) {
   // create the `Clipboard` object on mount and destroy on unmount
   useEffect(() => {
     const clipboard = new Clipboard(buttonRef.current, {
+      container: container?.current || undefined,
       text: () => textCallback.current(),
     });
     clipboard.on('success', () => successCallback.current());
@@ -39,14 +45,9 @@ function ClipboardButton({ text }) {
 
   return (
     <button ref={buttonRef} type="button" className="button button-borderless">
-      {isCopied ? 'Copied!' : 'Copy'}
+      {isCopied ? 'Copied!' : linkText}
     </button>
   );
 }
 
-ClipboardButton.propTypes = {
-  disbaled: PropTypes.bool,
-  text: PropTypes.string,
-};
-
 export default ClipboardButton;
diff --git a/lib/dialogs/share/index.tsx b/lib/dialogs/share/index.tsx
@@ -1,21 +1,16 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { includes, isEmpty } from 'lodash';
 import MD5 from 'md5.js';
 
-import ClipboardButton from '../../components/clipboard-button';
 import isEmailTag from '../../utils/is-email-tag';
 import Dialog from '../../dialog';
 import TabPanels from '../../components/tab-panels';
 import PanelTitle from '../../components/panel-title';
-import ToggleControl from '../../controls/toggle';
 import actions from '../../state/actions';
 
 import * as S from '../../state';
 import * as T from '../../types';
 
-const shareTabs = ['collaborate', 'publish'];
-
 type StateProps = {
   settings: S.State['settings'];
   noteId: T.EntityId;
@@ -26,20 +21,12 @@ type DispatchProps = {
   addCollaborator: (noteId: T.EntityId, collaborator: T.TagName) => any;
   closeDialog: () => any;
   editNote: (noteId: T.EntityId, changes: Partial<T.Note>) => any;
-  publishNote: (noteId: T.EntityId, shouldPublish: boolean) => any;
   removeCollaborator: (noteId: T.EntityId, collaborator: T.TagName) => any;
 };
 
 type Props = StateProps & DispatchProps;
 
 export class ShareDialog extends Component<Props> {
-  onTogglePublished = (shouldPublish: boolean) => {
-    this.props.publishNote(this.props.noteId, shouldPublish);
-  };
-
-  getPublishURL = (url) =>
-    isEmpty(url) ? undefined : `http://simp.ly/p/${url}`;
-
   onAddCollaborator = (event) => {
     const { noteId } = this.props;
     const collaborator = this.collaboratorElement.value.trim();
@@ -80,15 +67,12 @@ export class ShareDialog extends Component<Props> {
   };
 
   render() {
-    const { closeDialog, note } = this.props;
-    const data = note || {};
-    const isPublished = includes(data.systemTags, 'published');
-    const publishURL = this.getPublishURL(data.publishURL);
+    const { closeDialog } = this.props;
 
     return (
-      <Dialog className="settings" title="Share" onDone={closeDialog}>
-        <TabPanels tabNames={shareTabs}>
-          <div>
+      <Dialog className="settings" title="Collaborate" onDone={closeDialog}>
+        <div className="tab-panels__panel">
+          <div className="tab-panels__column">
             <div className="settings-group">
               <p>
                 Add an email address of another Simplenote user to share a note.
@@ -147,54 +131,7 @@ export class ShareDialog extends Component<Props> {
               </ul>
             </div>
           </div>
-
-          <div>
-            <div className="settings-group">
-              <div className="settings-items theme-color-border">
-                <label
-                  htmlFor="settings-field-public"
-                  className="settings-item theme-color-border"
-                >
-                  <div className="settings-item-label">Make public link</div>
-                  <div className="settings-item-control">
-                    <ToggleControl
-                      id="settings-field-public"
-                      onChange={this.onTogglePublished}
-                      checked={isPublished}
-                    />
-                  </div>
-                </label>
-              </div>
-              <p>
-                Ready to share your note with the world? Anyone with the public
-                link will be able to view the latest version.
-              </p>
-            </div>
-            {isPublished && (
-              <div className="settings-group">
-                <PanelTitle headingLevel={3}>Public link</PanelTitle>
-                <div className="settings-items theme-color-border">
-                  <div className="settings-item theme-color-border">
-                    <input
-                      ref={(e) => (this.publishUrlElement = e)}
-                      className="settings-item-text-input transparent-input"
-                      placeholder={
-                        isPublished ? 'Publishing note…' : 'Note not published'
-                      }
-                      value={publishURL}
-                      readOnly={true}
-                      spellCheck={false}
-                    />
-                    <div className="settings-item-control">
-                      {publishURL && <ClipboardButton text={publishURL} />}
-                    </div>
-                  </div>
-                </div>
-                {publishURL && <p>Note published!</p>}
-              </div>
-            )}
-          </div>
-        </TabPanels>
+        </div>
       </Dialog>
     );
   }

diff --git a/lib/icons/ellipsis-outline.tsx b/lib/icons/ellipsis-outline.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function EllipsisOutlineIcon() {
+  return (
+    <svg
+      className="icon-ellipsis-outline"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+    >
+      <rect x="0" fill="none" width="24" height="24" />
+      <path d="M12 2C6.486 2 2 6.486 2 12c0 5.514 4.486 10 10 10 5.514 0 10-4.486 10-10C22 6.486 17.514 2 12 2zM12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8S16.411 20 12 20zM13.5 12c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5 0.672-1.5 1.5-1.5S13.5 11.172 13.5 12zM9 12c0 0.828-0.672 1.5-1.5 1.5S6 12.828 6 12s0.672-1.5 1.5-1.5S9 11.172 9 12zM18 12c0 0.828-0.672 1.5-1.5 1.5S15 12.828 15 12s0.672-1.5 1.5-1.5S18 11.172 18 12z" />
+    </svg>
+  );
+}
diff --git a/lib/navigation-bar/style.scss b/lib/navigation-bar/style.scss
@@ -13,7 +13,7 @@
 }
 
 .is-macos .navigation-bar {
-  padding-top: 70px;
+  padding-top: $toolbar-height + 26px;
 }
 
 .navigation-bar__folders {