diff --git a/packages/ui-services/src/Preferences/PreferenceId.ts b/packages/ui-services/src/Preferences/PreferenceId.ts index 923de784d..808b34cd8 100644 --- a/packages/ui-services/src/Preferences/PreferenceId.ts +++ b/packages/ui-services/src/Preferences/PreferenceId.ts @@ -10,6 +10,7 @@ const PREFERENCE_IDS = [ 'get-free-month', 'help-feedback', 'whats-new', + 'filesend', ] as const export type PreferenceId = typeof PREFERENCE_IDS[number] diff --git a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx index 9d20c935e..c9348be00 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx @@ -84,6 +84,17 @@ const GeneralAccountMenu: FunctionComponent = ({ setMenuPane(AccountMenuPane.SignIn) }, [setMenuPane]) + const openFileSend = useCallback(() => { + const link = 'https://filesend.standardnotes.com/' + + if (application.isNativeMobileWeb()) { + application.mobileDevice().openUrl(link) + return + } + + window.open(link, '_blank') + }, [application]) + const CREATE_ACCOUNT_INDEX = 1 const SWITCHER_INDEX = 0 @@ -172,6 +183,10 @@ const GeneralAccountMenu: FunctionComponent = ({ v{application.version} + + + Open FileSend + {user ? ( <> diff --git a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx index 50ae57d8a..902ea18ec 100644 --- a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx +++ b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx @@ -2,19 +2,19 @@ import * as icons from '@standardnotes/icons' export const IconNameToSvgMapping = { 'account-circle': icons.AccountCircleIcon, - 'arrow-up': icons.ArrowUpIcon, 'arrow-down': icons.ArrowDownIcon, 'arrow-left': icons.ArrowLeftIcon, 'arrow-right': icons.ArrowRightIcon, + 'arrow-up': icons.ArrowUpIcon, 'arrows-sort-down': icons.ArrowsSortDownIcon, 'arrows-sort-up': icons.ArrowsSortUpIcon, 'attachment-file': icons.AttachmentFileIcon, 'check-bold': icons.CheckBoldIcon, 'check-circle': icons.CheckCircleIcon, - 'chevron-up': icons.ChevronUpIcon, 'chevron-down': icons.ChevronDownIcon, 'chevron-left': icons.ChevronLeftIcon, 'chevron-right': icons.ChevronRightIcon, + 'chevron-up': icons.ChevronUpIcon, 'clear-circle-filled': icons.ClearCircleFilledIcon, 'cloud-off': icons.CloudOffIcon, 'diamond-filled': icons.DiamondFilledIcon, @@ -28,6 +28,11 @@ export const IconNameToSvgMapping = { 'file-ppt': icons.FilePptIcon, 'file-xls': icons.FileXlsIcon, 'file-zip': icons.FileZipIcon, + 'format-align-center': icons.FormatAlignCenterIcon, + 'format-align-justify': icons.FormatAlignJustifyIcon, + 'format-align-left': icons.FormatAlignLeftIcon, + 'format-align-right': icons.FormatAlignRightIcon, + 'fullscreen-exit': icons.FullscreenExitIcon, 'hashtag-off': icons.HashtagOffIcon, 'link-off': icons.LinkOffIcon, 'list-bulleted': icons.ListBulleted, @@ -38,27 +43,22 @@ export const IconNameToSvgMapping = { 'menu-close': icons.MenuCloseIcon, 'menu-variant': icons.MenuVariantIcon, 'notes-filled': icons.NotesFilledIcon, + 'open-in': icons.OpenInIcon, 'pencil-filled': icons.PencilFilledIcon, 'pencil-off': icons.PencilOffIcon, 'pin-filled': icons.PinFilledIcon, 'plain-text': icons.PlainTextIcon, 'premium-feature': icons.PremiumFeatureIcon, 'rich-text': icons.RichTextIcon, + 'safe-square': icons.SafeSquareIcon, 'sort-descending': icons.SortDescendingIcon, 'star-circle-filled': icons.StarCircleFilled, 'star-filled': icons.StarFilledIcon, 'star-variant-filled': icons.StarVariantFilledIcon, - 'safe-square': icons.SafeSquareIcon, 'trash-filled': icons.TrashFilledIcon, 'trash-sweep': icons.TrashSweepIcon, 'user-add': icons.UserAddIcon, 'user-switch': icons.UserSwitch, - 'fullscreen-exit': icons.FullscreenExitIcon, - 'format-align-left': icons.FormatAlignLeftIcon, - 'format-align-center': icons.FormatAlignCenterIcon, - 'format-align-right': icons.FormatAlignRightIcon, - 'format-align-justify': icons.FormatAlignJustifyIcon, - drag: icons.DragIcon, accessibility: icons.AccessibilityIcon, add: icons.AddIcon, archive: icons.ArchiveIcon, @@ -72,6 +72,7 @@ export const IconNameToSvgMapping = { dashboard: icons.DashboardIcon, diamond: icons.DiamondIcon, download: icons.DownloadIcon, + drag: icons.DragIcon, editor: icons.EditorIcon, email: icons.EmailIcon, eye: icons.EyeIcon, diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts index 1f344d32d..2e4078e45 100644 --- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts +++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts @@ -42,6 +42,7 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [ { id: 'appearance', label: 'Appearance', icon: 'themes' }, { id: 'listed', label: 'Listed', icon: 'listed' }, { id: 'help-feedback', label: 'Help & feedback', icon: 'help' }, + { id: 'filesend', label: 'FileSend', icon: 'open-in' }, ] export class PreferencesMenu { diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx index 2aa9a5ae5..f1b15e3da 100644 --- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx +++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx @@ -1,11 +1,12 @@ import { observer } from 'mobx-react-lite' -import { FunctionComponent, useMemo } from 'react' +import { FunctionComponent, useCallback, useMemo } from 'react' import styled from 'styled-components' import Dropdown from '../Dropdown/Dropdown' import { DropdownItem } from '../Dropdown/DropdownItem' import PreferencesMenuItem from './PreferencesComponents/MenuItem' import { PreferencesMenu } from './PreferencesMenu' import { PreferenceId } from '@standardnotes/ui-services' +import { useApplication } from '../ApplicationProvider' type Props = { menu: PreferencesMenu @@ -25,18 +26,32 @@ const StyledDropdown = styled(Dropdown)` ` const PreferencesMenuView: FunctionComponent = ({ menu }) => { + const application = useApplication() const { selectedPaneId, selectPane, menuItems } = menu const dropdownMenuItems: DropdownItem[] = useMemo( () => - menuItems.map((menuItem) => ({ - icon: menuItem.icon, - label: menuItem.label, - value: menuItem.id, - })), + menuItems + .filter((pref) => pref.id !== 'filesend') + .map((menuItem) => ({ + icon: menuItem.icon, + label: menuItem.label, + value: menuItem.id, + })), [menuItems], ) + const openFileSend = useCallback(() => { + const link = 'https://filesend.standardnotes.com/' + + if (application.isNativeMobileWeb()) { + application.mobileDevice().openUrl(link) + return + } + + window.open(link, '_blank') + }, [application]) + return (
@@ -47,7 +62,13 @@ const PreferencesMenuView: FunctionComponent = ({ menu }) => { label={pref.label} selected={pref.selected} hasBubble={pref.hasBubble} - onClick={() => selectPane(pref.id)} + onClick={() => { + if (pref.id === 'filesend') { + openFileSend() + return + } + selectPane(pref.id) + }} /> ))}