feat: Nativize "No distraction" theme as "Focus Mode" (#758)
Co-authored-by: Mo Bitar <me@bitar.io>
This commit is contained in:
Aman Harwara
@@ -0,0 +1,66 @@
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { FeatureIdentifier } from '@standardnotes/features';
|
||||
import { FeatureStatus } from '@standardnotes/snjs';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
import { JSXInternal } from 'preact/src/jsx';
|
||||
import { Icon } from '../Icon';
|
||||
import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
|
||||
import { Switch } from '../Switch';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
closeQuickSettingsMenu: () => void;
|
||||
focusModeEnabled: boolean;
|
||||
setFocusModeEnabled: (enabled: boolean) => void;
|
||||
};
|
||||
|
||||
export const FocusModeSwitch: FunctionComponent<Props> = ({
|
||||
application,
|
||||
closeQuickSettingsMenu,
|
||||
focusModeEnabled,
|
||||
setFocusModeEnabled,
|
||||
}) => {
|
||||
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
|
||||
const isEntitledToFocusMode =
|
||||
application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
|
||||
FeatureStatus.Entitled;
|
||||
|
||||
const toggleFocusMode = (
|
||||
e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
e.preventDefault();
|
||||
if (isEntitledToFocusMode) {
|
||||
setFocusModeEnabled(!focusModeEnabled);
|
||||
closeQuickSettingsMenu();
|
||||
} else {
|
||||
setShowUpgradeModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
|
||||
onClick={toggleFocusMode}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Icon type="menu-close" className="color-neutral mr-2" />
|
||||
Focused Writing
|
||||
</div>
|
||||
{isEntitledToFocusMode ? (
|
||||
<Switch className="px-0" checked={focusModeEnabled} />
|
||||
) : (
|
||||
<div title="Premium feature">
|
||||
<Icon type="premium-feature" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
<PremiumFeaturesModal
|
||||
showModal={showUpgradeModal}
|
||||
featureName="Focus Mode"
|
||||
onClose={() => setShowUpgradeModal(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,307 @@
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { AppState } from '@/ui_models/app_state';
|
||||
import {
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
} from '@reach/disclosure';
|
||||
import {
|
||||
ContentType,
|
||||
SNTheme,
|
||||
ComponentArea,
|
||||
SNComponent,
|
||||
} from '@standardnotes/snjs';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { JSXInternal } from 'preact/src/jsx';
|
||||
import { Icon } from '../Icon';
|
||||
import { Switch } from '../Switch';
|
||||
import { toDirective, useCloseOnBlur } from '../utils';
|
||||
import {
|
||||
quickSettingsKeyDownHandler,
|
||||
themesMenuKeyDownHandler,
|
||||
} from './eventHandlers';
|
||||
import { FocusModeSwitch } from './FocusModeSwitch';
|
||||
import { ThemesMenuButton } from './ThemesMenuButton';
|
||||
|
||||
const MENU_CLASSNAME =
|
||||
'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';
|
||||
|
||||
type MenuProps = {
|
||||
appState: AppState;
|
||||
application: WebApplication;
|
||||
};
|
||||
|
||||
const toggleFocusMode = (enabled: boolean) => {
|
||||
if (enabled) {
|
||||
document.body.classList.add('focus-mode');
|
||||
} else {
|
||||
if (document.body.classList.contains('focus-mode')) {
|
||||
document.body.classList.add('disable-focus-mode');
|
||||
document.body.classList.remove('focus-mode');
|
||||
setTimeout(() => {
|
||||
document.body.classList.remove('disable-focus-mode');
|
||||
}, 315);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
|
||||
({ application, appState }) => {
|
||||
const {
|
||||
closeQuickSettingsMenu,
|
||||
shouldAnimateCloseMenu,
|
||||
focusModeEnabled,
|
||||
setFocusModeEnabled,
|
||||
} = appState.quickSettingsMenu;
|
||||
const [themes, setThemes] = useState<SNTheme[]>([]);
|
||||
const [toggleableComponents, setToggleableComponents] = useState<
|
||||
SNComponent[]
|
||||
>([]);
|
||||
const [themesMenuOpen, setThemesMenuOpen] = useState(false);
|
||||
const [themesMenuPosition, setThemesMenuPosition] = useState({});
|
||||
const [defaultThemeOn, setDefaultThemeOn] = useState(false);
|
||||
|
||||
const themesMenuRef = useRef<HTMLDivElement>(null);
|
||||
const themesButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const prefsButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
|
||||
const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
toggleFocusMode(focusModeEnabled);
|
||||
}, [focusModeEnabled]);
|
||||
|
||||
const reloadThemes = useCallback(() => {
|
||||
application.streamItems(ContentType.Theme, () => {
|
||||
const themes = application.getDisplayableItems(
|
||||
ContentType.Theme
|
||||
) as SNTheme[];
|
||||
setThemes(
|
||||
themes.sort((a, b) => {
|
||||
const aIsLayerable = a.isLayerable();
|
||||
const bIsLayerable = b.isLayerable();
|
||||
|
||||
if (aIsLayerable && !bIsLayerable) {
|
||||
return 1;
|
||||
} else if (!aIsLayerable && bIsLayerable) {
|
||||
return -1;
|
||||
} else {
|
||||
return a.package_info.name.toLowerCase() <
|
||||
b.package_info.name.toLowerCase()
|
||||
? -1
|
||||
: 1;
|
||||
}
|
||||
})
|
||||
);
|
||||
setDefaultThemeOn(
|
||||
!themes.find((theme) => theme.active && !theme.isLayerable())
|
||||
);
|
||||
});
|
||||
}, [application]);
|
||||
|
||||
const reloadToggleableComponents = useCallback(() => {
|
||||
application.streamItems(ContentType.Component, () => {
|
||||
const toggleableComponents = (
|
||||
application.getDisplayableItems(
|
||||
ContentType.Component
|
||||
) as SNComponent[]
|
||||
).filter((component) =>
|
||||
[ComponentArea.EditorStack, ComponentArea.TagsList].includes(
|
||||
component.area
|
||||
)
|
||||
);
|
||||
setToggleableComponents(toggleableComponents);
|
||||
});
|
||||
}, [application]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadThemes();
|
||||
}, [reloadThemes]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadToggleableComponents();
|
||||
}, [reloadToggleableComponents]);
|
||||
|
||||
useEffect(() => {
|
||||
if (themesMenuOpen) {
|
||||
defaultThemeButtonRef.current?.focus();
|
||||
}
|
||||
}, [themesMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
prefsButtonRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const [closeOnBlur] = useCloseOnBlur(
|
||||
themesMenuRef as any,
|
||||
setThemesMenuOpen
|
||||
);
|
||||
|
||||
const toggleThemesMenu = () => {
|
||||
if (!themesMenuOpen && themesButtonRef.current) {
|
||||
const themesButtonRect =
|
||||
themesButtonRef.current.getBoundingClientRect();
|
||||
setThemesMenuPosition({
|
||||
left: themesButtonRect.right,
|
||||
bottom:
|
||||
document.documentElement.clientHeight - themesButtonRect.bottom,
|
||||
});
|
||||
setThemesMenuOpen(true);
|
||||
} else {
|
||||
setThemesMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openPreferences = () => {
|
||||
closeQuickSettingsMenu();
|
||||
appState.preferences.openPreferences();
|
||||
};
|
||||
|
||||
const toggleComponent = (component: SNComponent) => {
|
||||
application.toggleComponent(component);
|
||||
};
|
||||
|
||||
const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (
|
||||
event
|
||||
) => {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
setThemesMenuOpen(false);
|
||||
themesButtonRef.current?.focus();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
if (!themesMenuOpen) {
|
||||
toggleThemesMenu();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
|
||||
(event) => {
|
||||
quickSettingsKeyDownHandler(
|
||||
closeQuickSettingsMenu,
|
||||
event,
|
||||
quickSettingsMenuRef,
|
||||
themesMenuOpen
|
||||
);
|
||||
};
|
||||
|
||||
const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
|
||||
event
|
||||
) => {
|
||||
themesMenuKeyDownHandler(
|
||||
event,
|
||||
themesMenuRef,
|
||||
setThemesMenuOpen,
|
||||
themesButtonRef
|
||||
);
|
||||
};
|
||||
|
||||
const toggleDefaultTheme = () => {
|
||||
const activeTheme = themes.find(
|
||||
(theme) => theme.active && !theme.isLayerable()
|
||||
);
|
||||
if (activeTheme) application.toggleComponent(activeTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sn-component">
|
||||
<div
|
||||
className={`sn-quick-settings-menu absolute ${MENU_CLASSNAME} ${
|
||||
shouldAnimateCloseMenu
|
||||
? 'slide-up-animation'
|
||||
: 'sn-dropdown--animated'
|
||||
}`}
|
||||
ref={quickSettingsMenuRef}
|
||||
onKeyDown={handleQuickSettingsKeyDown}
|
||||
>
|
||||
<div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
|
||||
Quick Settings
|
||||
</div>
|
||||
<Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
|
||||
<DisclosureButton
|
||||
onKeyDown={handleBtnKeyDown}
|
||||
onBlur={closeOnBlur}
|
||||
ref={themesButtonRef}
|
||||
className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Icon type="themes" className="color-neutral mr-2" />
|
||||
Themes
|
||||
</div>
|
||||
<Icon type="chevron-right" className="color-neutral" />
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel
|
||||
onBlur={closeOnBlur}
|
||||
ref={themesMenuRef}
|
||||
onKeyDown={handlePanelKeyDown}
|
||||
style={{
|
||||
...themesMenuPosition,
|
||||
}}
|
||||
className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
|
||||
>
|
||||
<div className="px-3 my-1 font-semibold color-text uppercase">
|
||||
Themes
|
||||
</div>
|
||||
<button
|
||||
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
|
||||
onClick={toggleDefaultTheme}
|
||||
onBlur={closeOnBlur}
|
||||
ref={defaultThemeButtonRef}
|
||||
>
|
||||
<div
|
||||
className={`pseudo-radio-btn ${
|
||||
defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
|
||||
} mr-2`}
|
||||
></div>
|
||||
Default
|
||||
</button>
|
||||
{themes.map((theme) => (
|
||||
<ThemesMenuButton
|
||||
theme={theme}
|
||||
application={application}
|
||||
key={theme.uuid}
|
||||
onBlur={closeOnBlur}
|
||||
/>
|
||||
))}
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
{toggleableComponents.map((component) => (
|
||||
<Switch
|
||||
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
|
||||
checked={component.active}
|
||||
onChange={() => {
|
||||
toggleComponent(component);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Icon type="window" className="color-neutral mr-2" />
|
||||
{component.name}
|
||||
</div>
|
||||
</Switch>
|
||||
))}
|
||||
<FocusModeSwitch
|
||||
application={application}
|
||||
closeQuickSettingsMenu={closeQuickSettingsMenu}
|
||||
focusModeEnabled={focusModeEnabled}
|
||||
setFocusModeEnabled={setFocusModeEnabled}
|
||||
/>
|
||||
<div className="h-1px my-2 bg-border"></div>
|
||||
<button
|
||||
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
|
||||
onClick={openPreferences}
|
||||
ref={prefsButtonRef}
|
||||
>
|
||||
<Icon type="more" className="color-neutral mr-2" />
|
||||
Open Preferences
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const QuickSettingsMenuDirective =
|
||||
toDirective<MenuProps>(QuickSettingsMenu);
|
||||
@@ -0,0 +1,60 @@
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { SNTheme } from '@standardnotes/snjs';
|
||||
import { FunctionComponent } from 'preact';
|
||||
import { JSXInternal } from 'preact/src/jsx';
|
||||
import { Switch } from '../Switch';
|
||||
|
||||
type Props = {
|
||||
theme: SNTheme;
|
||||
application: WebApplication;
|
||||
onBlur: (event: { relatedTarget: EventTarget | null }) => void;
|
||||
};
|
||||
|
||||
export const ThemesMenuButton: FunctionComponent<Props> = ({
|
||||
application,
|
||||
theme,
|
||||
onBlur,
|
||||
}) => {
|
||||
const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
e.preventDefault();
|
||||
if (theme.isLayerable() || !theme.active) {
|
||||
application.toggleComponent(theme);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
|
||||
theme.isLayerable() ? `justify-start` : `justify-between`
|
||||
}`}
|
||||
onClick={toggleTheme}
|
||||
onBlur={onBlur}
|
||||
>
|
||||
{theme.isLayerable() ? (
|
||||
<>
|
||||
<Switch className="px-0 mr-2" checked={theme.active} />
|
||||
{theme.package_info.name}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={`pseudo-radio-btn ${
|
||||
theme.active ? 'pseudo-radio-btn--checked' : ''
|
||||
} mr-2`}
|
||||
></div>
|
||||
<span className={theme.active ? 'font-semibold' : undefined}>
|
||||
{theme.package_info.name}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="w-5 h-5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: theme.package_info?.dock_icon?.background_color,
|
||||
}}
|
||||
></div>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import { RefObject } from 'preact';
|
||||
import { StateUpdater } from 'preact/hooks';
|
||||
import { JSXInternal } from 'preact/src/jsx';
|
||||
|
||||
export const quickSettingsKeyDownHandler = (
|
||||
closeQuickSettingsMenu: () => void,
|
||||
event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
|
||||
quickSettingsMenuRef: RefObject<HTMLDivElement>,
|
||||
themesMenuOpen: boolean
|
||||
) => {
|
||||
if (quickSettingsMenuRef?.current) {
|
||||
const items: NodeListOf<HTMLButtonElement> =
|
||||
quickSettingsMenuRef.current.querySelectorAll(':scope > button');
|
||||
const currentFocusedIndex = Array.from(items).findIndex(
|
||||
(btn) => btn === document.activeElement
|
||||
);
|
||||
|
||||
if (!themesMenuOpen) {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
closeQuickSettingsMenu();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (items[currentFocusedIndex + 1]) {
|
||||
items[currentFocusedIndex + 1].focus();
|
||||
} else {
|
||||
items[0].focus();
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (items[currentFocusedIndex - 1]) {
|
||||
items[currentFocusedIndex - 1].focus();
|
||||
} else {
|
||||
items[items.length - 1].focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const themesMenuKeyDownHandler = (
|
||||
event: React.KeyboardEvent<HTMLDivElement>,
|
||||
themesMenuRef: RefObject<HTMLDivElement>,
|
||||
setThemesMenuOpen: StateUpdater<boolean>,
|
||||
themesButtonRef: RefObject<HTMLButtonElement>
|
||||
) => {
|
||||
if (themesMenuRef?.current) {
|
||||
const themes = themesMenuRef.current.querySelectorAll('button');
|
||||
const currentFocusedIndex = Array.from(themes).findIndex(
|
||||
(themeBtn) => themeBtn === document.activeElement
|
||||
);
|
||||
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
case 'ArrowLeft':
|
||||
event.stopPropagation();
|
||||
setThemesMenuOpen(false);
|
||||
themesButtonRef.current?.focus();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (themes[currentFocusedIndex + 1]) {
|
||||
themes[currentFocusedIndex + 1].focus();
|
||||
} else {
|
||||
themes[0].focus();
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (themes[currentFocusedIndex - 1]) {
|
||||
themes[currentFocusedIndex - 1].focus();
|
||||
} else {
|
||||
themes[themes.length - 1].focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user