split into two components, mostly get it working, needs lots of love …

…still dark theme on note info, dark theme hover on note actions, remove icons from menubar remove publish tab from sharing dialog ignore clickoutside on the icon, remove unused icons still terrible but slowly getting less terrible switch position of preview and checklist icon make publish checkbox work checkbox styling lint adjust note info styles, cross icon, reference link titles menu item and order changes Add checkbox styles Switching from using react-clickoutside to focus-trap-react Changing clickable divs to buttons Fix linting error in css Switch from onClickOutside to focus-trap-react on the note info dialog Fix package-lock.json file Improve note Action and Info focus management (#2737) Remove redundant focus management within note Info. React Modal provides its own focus trap logic, so wrapping with FocusTrap is unnecessary. Support ClipboardButton within focus trap for note actions. In order for clipboard.js to function properly within a focus trap, we must set a container that is "reachable" from within the focus trap. Update styles for when history is disabled Update note info styles to match designs. Update border and boxshadow of note actions Updates to the note action styles Add loading state for publishing note Remove commented out no longer needed styles Fix css linting error Testing a throttle on the pin note action Removing the throttle added in the previous commit Update styles for note info dialog
Automattic · Mar 22, 2021 · d8c3cfa · d8c3cfa
1 parent 0b2622c
commit d8c3cfa
Show file tree

Hide file tree

Showing 18 changed files with 548 additions and 313 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 {