Merge branch 'develop' into feature/account-menu-react

app/assets/javascripts/components/NoteTag.tsx

@@ -97,7 +97,6 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
           ref={deleteTagRef}
           type="button"
           className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex"
-          onFocus={onFocus}
           onBlur={onBlur}
           onClick={onDeleteTagClick}
         >

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -2,13 +2,19 @@ import { AppState } from '@/ui_models/app_state';
 import { toDirective, useCloseOnBlur, useCloseOnClickOutside } from './utils';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
-import { useRef } from 'preact/hooks';
+import { useCallback, useEffect, useRef } from 'preact/hooks';
 
 type Props = {
   appState: AppState;
 };
 
 const NotesContextMenu = observer(({ appState }: Props) => {
+  const {
+    contextMenuOpen,
+    contextMenuPosition,
+    contextMenuMaxHeight,
+  } = appState.notes;
+
   const contextMenuRef = useRef<HTMLDivElement>();
   const [closeOnBlur] = useCloseOnBlur(
     contextMenuRef,
@@ -20,13 +26,24 @@ const NotesContextMenu = observer(({ appState }: Props) => {
     (open: boolean) => appState.notes.setContextMenuOpen(open)
   );
 
-  return appState.notes.contextMenuOpen ? (
+  const reloadContextMenuLayout = useCallback(() => {
+    appState.notes.reloadContextMenuLayout();
+  }, [appState.notes]);
+
+  useEffect(() => {
+    window.addEventListener('resize', reloadContextMenuLayout);
+    return () => {
+      window.removeEventListener('resize', reloadContextMenuLayout);
+    };
+  }, [reloadContextMenuLayout]);
+
+  return contextMenuOpen ? (
     <div
       ref={contextMenuRef}
       className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
       style={{
-        ...appState.notes.contextMenuPosition,
-        maxHeight: appState.notes.contextMenuMaxHeight,
+        ...contextMenuPosition,
+        maxHeight: contextMenuMaxHeight,
       }}
     >
       <NotesOptions appState={appState} closeOnBlur={closeOnBlur} />

app/assets/javascripts/components/SearchOptions.tsx

@@ -11,6 +11,7 @@ import {
 } from '@reach/disclosure';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 
 type Props = {
   appState: AppState;
@@ -31,6 +32,7 @@ const SearchOptions = observer(({ appState }: Props) => {
     top: 0,
     right: 0,
   });
+  const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
   const buttonRef = useRef<HTMLButtonElement>();
   const panelRef = useRef<HTMLDivElement>();
   const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
@@ -44,15 +46,27 @@ const SearchOptions = observer(({ appState }: Props) => {
     }
   }
 
+  const updateWidthAndPosition = () => {
+    const rect = buttonRef.current.getBoundingClientRect();
+    setMaxWidth(rect.right - 16);
+    setPosition({
+      top: rect.bottom,
+      right: document.body.clientWidth - rect.right,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateWidthAndPosition);
+    return () => {
+      window.removeEventListener('resize', updateWidthAndPosition);
+    };
+  }, []);
+
   return (
     <Disclosure
       open={open}
       onChange={() => {
-        const rect = buttonRef.current.getBoundingClientRect();
-        setPosition({
-          top: rect.bottom,
-          right: document.body.clientWidth - rect.right,
-        });
+        updateWidthAndPosition();
         setOpen(!open);
       }}
     >
@@ -68,8 +82,9 @@ const SearchOptions = observer(({ appState }: Props) => {
         ref={panelRef}
         style={{
           ...position,
+          maxWidth,
         }}
-        className="sn-dropdown sn-dropdown--animated min-w-80 fixed grid gap-2 py-2"
+        className="sn-dropdown sn-dropdown--animated w-80 fixed grid gap-2 py-2"
         onBlur={closeOnBlur}
       >
         <Switch

app/assets/javascripts/components/SessionsModal.tsx

@@ -41,14 +41,14 @@ function useSessions(
     (async () => {
       setRefreshing(true);
       const response = await application.getSessions();
-      if ('error' in response || !response.data) {
+      if ('error' in response || isNullOrUndefined(response.data)) {
         if (response.error?.message) {
           setErrorMessage(response.error.message);
         } else {
           setErrorMessage('An unknown error occured while loading sessions.');
         }
       } else {
-        const sessions = response.data;
+        const sessions = response.data as RemoteSession[];
         setSessions(sessions);
         setErrorMessage('');
       }

app/assets/javascripts/ui_models/app_state/note_tags_state.ts

@@ -30,9 +30,6 @@ export class NoteTagsState {
 
       autocompleteTagHintVisible: computed,
 
-      clearAutocompleteSearch: action,
-      focusNextTag: action,
-      focusPreviousTag: action,
       setAutocompleteInputFocused: action,
       setAutocompleteSearchQuery: action,
       setAutocompleteTagHintFocused: action,
@@ -41,7 +38,6 @@ export class NoteTagsState {
       setFocusedTagUuid: action,
       setTags: action,
       setTagsContainerMaxWidth: action,
-      reloadTags: action,
     });
 
     appEventListeners.push(

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -28,6 +28,7 @@ export class NotesState {
     top: 0,
     left: 0,
   };
+  contextMenuClickLocation: { x: number, y: number } = { x: 0, y: 0 };
   contextMenuMaxHeight: number | 'auto' = 'auto';
   showProtectedWarning = false;
 
@@ -47,6 +48,7 @@ export class NotesState {
       trashedNotesCount: computed,
 
       setContextMenuOpen: action,
+      setContextMenuClickLocation: action,
       setContextMenuPosition: action,
       setContextMenuMaxHeight: action,
       setShowProtectedWarning: action,
@@ -183,6 +185,10 @@ export class NotesState {
     this.contextMenuOpen = open;
   }
 
+  setContextMenuClickLocation(location: { x: number, y: number }): void {
+    this.contextMenuClickLocation = location;
+  }
+
   setContextMenuPosition(position: {
     top?: number;
     left: number;
@@ -195,6 +201,60 @@ export class NotesState {
     this.contextMenuMaxHeight = maxHeight;
   }
 
+  reloadContextMenuLayout(): void {
+    const { clientHeight } = document.documentElement;
+    const defaultFontSize = window.getComputedStyle(
+      document.documentElement
+    ).fontSize;
+    const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
+    const footerHeight = 32;
+
+    // Open up-bottom is default behavior
+    let openUpBottom = true;
+
+    const bottomSpace = clientHeight - footerHeight - this.contextMenuClickLocation.y;
+    const upSpace = this.contextMenuClickLocation.y;
+
+    // If not enough space to open up-bottom
+    if (maxContextMenuHeight > bottomSpace) {
+      // If there's enough space, open bottom-up
+      if (upSpace > maxContextMenuHeight) {
+        openUpBottom = false;
+        this.setContextMenuMaxHeight(
+          'auto'
+        );
+      // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
+      } else {
+        if (upSpace > bottomSpace) {
+          this.setContextMenuMaxHeight(
+            upSpace - 2
+          );
+          openUpBottom = false;
+        } else {
+          this.setContextMenuMaxHeight(
+            bottomSpace - 2
+          );
+        }
+      }
+    } else {
+      this.setContextMenuMaxHeight(
+        'auto'
+      );
+    }
+
+    if (openUpBottom) {
+      this.setContextMenuPosition({
+        top: this.contextMenuClickLocation.y,
+        left: this.contextMenuClickLocation.x,
+      });
+    } else {
+      this.setContextMenuPosition({
+        bottom: clientHeight - this.contextMenuClickLocation.y,
+        left: this.contextMenuClickLocation.x,
+      });
+    }
+  }
+
   async changeSelectedNotes(
     mutate: (mutator: NoteMutator) => void
   ): Promise<void> {

app/assets/javascripts/views/application/application_view.ts

@@ -170,7 +170,7 @@ class ApplicationViewCtrl extends PureViewCtrl<unknown, {
       this.$location.search().demo === 'true' &&
         !this.application.hasAccount()
     ) {
-      await this.application.setHost(
+      await this.application.setCustomHost(
         'https://syncing-server-demo.standardnotes.org'
       );
       this.application.signIn(

app/assets/javascripts/views/footer/footer-view.pug

@@ -20,7 +20,7 @@
         )
       .sk-app-bar-item
         a.no-decoration.sk-label.title(
-          href='https://standardnotes.org/help',
+          href='https://standardnotes.com/help',
           rel='noopener',
           target='_blank'
           )

app/assets/javascripts/views/notes/notes-view.pug

@@ -132,7 +132,7 @@
           ng-class="{'selected' : self.isNoteSelected(note.uuid) }"
           ng-click='self.selectNote(note, true)'
         )
-          .note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
+          .note-flags.flex.flex-wrap(ng-show='self.noteFlags[note.uuid].length > 0')
             .flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]')
               .label {{flag.text}}
           .name(ng-show='note.title')

app/assets/javascripts/views/notes/notes_view.ts

@@ -310,58 +310,11 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
       await this.selectNote(note, true);
     }
     if (this.state.selectedNotes[note.uuid]) {
-      const { clientHeight } = document.documentElement;
-      const defaultFontSize = window.getComputedStyle(
-        document.documentElement
-      ).fontSize;
-      const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
-      const footerHeight = 32;
-
-      // Open up-bottom is default behavior
-      let openUpBottom = true;
-
-      const bottomSpace = clientHeight - footerHeight - e.clientY;
-      const upSpace = e.clientY;
-
-      // If not enough space to open up-bottom
-      if (maxContextMenuHeight > bottomSpace) {
-        // If there's enough space, open bottom-up
-        if (upSpace > maxContextMenuHeight) {
-          openUpBottom = false;
-          this.appState.notes.setContextMenuMaxHeight(
-            'auto'
-          );
-        // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
-        } else {
-          if (upSpace > bottomSpace) {
-            this.appState.notes.setContextMenuMaxHeight(
-              upSpace - 2
-            );
-            openUpBottom = false;
-          } else {
-            this.appState.notes.setContextMenuMaxHeight(
-              bottomSpace - 2
-            );
-          }
-        }
-      } else {
-        this.appState.notes.setContextMenuMaxHeight(
-          'auto'
-        );
-      }
-
-      if (openUpBottom) {
-        this.appState.notes.setContextMenuPosition({
-          top: e.clientY,
-          left: e.clientX,
-        });
-      } else {
-        this.appState.notes.setContextMenuPosition({
-          bottom: clientHeight - e.clientY,
-          left: e.clientX,
-        });
-      }
-
+      this.appState.notes.setContextMenuClickLocation({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      this.appState.notes.reloadContextMenuLayout();
       this.appState.notes.setContextMenuOpen(true);
     }
   }