rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show all themes and premium icon if not entitled (#854)

Browse Source
This commit is contained in:
Aman Harwara
2022-02-08 20:25:12 +05:30
committed by GitHub
parent 7f5f0d9d17
commit 139853a491
7 changed files with 405 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/assets/javascripts/components/ApplicationView.tsx
View File

@@ -23,6 +23,7 @@ import { NotesContextMenu } from '@/components/NotesContextMenu';
import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper'; import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
import { render } from 'preact'; import { render } from 'preact';
import { PermissionsModal } from './PermissionsModal'; import { PermissionsModal } from './PermissionsModal';
import { PremiumModalProvider } from './Premium';
type Props = { type Props = {
application: WebApplication; application: WebApplication;
@@ -196,63 +197,65 @@ export class ApplicationView extends PureComponent<Props, State> {
render() { render() {
return ( return (
<div className={this.platformString + ' main-ui-view sn-component'}> <PremiumModalProvider state={this.appState.features}>
{!this.state.needsUnlock && this.state.launched && ( <div className={this.platformString + ' main-ui-view sn-component'}>
<div {!this.state.needsUnlock && this.state.launched && (
id="app" <div
className={this.state.appClass + ' app app-column-container'} id="app"
> className={this.state.appClass + ' app app-column-container'}
<Navigation application={this.application} /> >
<Navigation application={this.application} />
<NotesView <NotesView
application={this.application}
appState={this.appState}
/>
<NoteGroupView application={this.application} />
</div>
)}
{!this.state.needsUnlock && this.state.launched && (
<Footer
application={this.application}
applicationGroup={this.props.mainApplicationGroup}
/>
)}
<SessionsModal
application={this.application}
appState={this.appState}
/>
<PreferencesViewWrapper
appState={this.appState}
application={this.application}
/>
{this.state.challenges.map((challenge) => {
return (
<div className="sk-modal">
<ChallengeModal
key={challenge.id}
application={this.application} application={this.application}
challenge={challenge} appState={this.appState}
onDismiss={this.removeChallenge}
/> />
<NoteGroupView application={this.application} />
</div> </div>
); )}
})}
<NotesContextMenu {!this.state.needsUnlock && this.state.launched && (
application={this.application} <Footer
appState={this.appState} application={this.application}
/> applicationGroup={this.props.mainApplicationGroup}
/>
)}
<PurchaseFlowWrapper <SessionsModal
application={this.application} application={this.application}
appState={this.appState} appState={this.appState}
/> />
</div>
<PreferencesViewWrapper
appState={this.appState}
application={this.application}
/>
{this.state.challenges.map((challenge) => {
return (
<div className="sk-modal">
<ChallengeModal
key={challenge.id}
application={this.application}
challenge={challenge}
onDismiss={this.removeChallenge}
/>
</div>
);
})}
<NotesContextMenu
application={this.application}
appState={this.appState}
/>
<PurchaseFlowWrapper
application={this.application}
appState={this.appState}
/>
</div>
</PremiumModalProvider>
); );
} }
} }

63
app/assets/javascripts/components/Navigation.tsx
View File

@@ -6,7 +6,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'; import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
import { PremiumModalProvider } from './Premium';
import { import {
PanelSide, PanelSide,
ResizeFinishCallback, ResizeFinishCallback,
@@ -51,42 +50,40 @@ export const Navigation: FunctionComponent<Props> = observer(
}, [appState]); }, [appState]);
return ( return (
<PremiumModalProvider state={appState.features}> <div
<div id="navigation"
id="navigation" className="sn-component section app-column app-column-first"
className="sn-component section app-column app-column-first" data-aria-label="Navigation"
data-aria-label="Navigation" ref={setRef}
ref={setRef} >
> <div id="navigation-content" className="content">
<div id="navigation-content" className="content"> <div className="section-title-bar">
<div className="section-title-bar"> <div className="section-title-bar-header">
<div className="section-title-bar-header"> <div className="sk-h3 title">
<div className="sk-h3 title"> <span className="sk-bold">Views</span>
<span className="sk-bold">Views</span>
</div>
</div> </div>
</div> </div>
<div className="scrollable">
<SmartTagsSection appState={appState} />
<TagsSection appState={appState} />
</div>
</div> </div>
{ref && ( <div className="scrollable">
<PanelResizer <SmartTagsSection appState={appState} />
collapsable={true} <TagsSection appState={appState} />
defaultWidth={150} </div>
panel={ref}
hoverable={true}
side={PanelSide.Right}
type={PanelResizeType.WidthOnly}
resizeFinishCallback={panelResizeFinishCallback}
widthEventCallback={panelWidthEventCallback}
width={panelWidth}
left={0}
/>
)}
</div> </div>
</PremiumModalProvider> {ref && (
<PanelResizer
collapsable={true}
defaultWidth={150}
panel={ref}
hoverable={true}
side={PanelSide.Right}
type={PanelResizeType.WidthOnly}
resizeFinishCallback={panelResizeFinishCallback}
widthEventCallback={panelWidthEventCallback}
width={panelWidth}
left={0}
/>
)}
</div>
); );
} }
); );

19
app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
View File

@@ -29,7 +29,6 @@ import {
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { useEffect, useRef, useState } from 'preact/hooks'; import { useEffect, useRef, useState } from 'preact/hooks';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
import { PremiumModalProvider } from '../Premium';
import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups'; import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu'; import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';
@@ -273,16 +272,14 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
}} }}
className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto" className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
> >
<PremiumModalProvider state={appState.features}> <EditorAccordionMenu
<EditorAccordionMenu application={application}
application={application} closeOnBlur={closeOnBlur}
closeOnBlur={closeOnBlur} currentEditor={selectedEditor}
currentEditor={selectedEditor} groups={editorMenuGroups}
groups={editorMenuGroups} isOpen={changeEditorMenuOpen}
isOpen={changeEditorMenuOpen} selectComponent={selectComponent}
selectComponent={selectComponent} />
/>
</PremiumModalProvider>
</DisclosurePanel> </DisclosurePanel>
</Disclosure> </Disclosure>
); );

15
app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
View File

@@ -1,10 +1,10 @@
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs'; import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { useCallback, useState } from 'preact/hooks'; import { useCallback } from 'preact/hooks';
import { JSXInternal } from 'preact/src/jsx'; import { JSXInternal } from 'preact/src/jsx';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
import { PremiumFeaturesModal } from '../PremiumFeaturesModal'; import { usePremiumModal } from '../Premium';
import { Switch } from '../Switch'; import { Switch } from '../Switch';
type Props = { type Props = {
@@ -20,7 +20,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
onClose, onClose,
isEnabled, isEnabled,
}) => { }) => {
const [showUpgradeModal, setShowUpgradeModal] = useState(false); const premiumModal = usePremiumModal();
const isEntitled = const isEntitled =
application.getFeatureStatus(FeatureIdentifier.FocusMode) === application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
FeatureStatus.Entitled; FeatureStatus.Entitled;
@@ -33,10 +33,10 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
onToggle(!isEnabled); onToggle(!isEnabled);
onClose(); onClose();
} else { } else {
setShowUpgradeModal(true); premiumModal.activate('Focused Writing');
} }
}, },
[isEntitled, isEnabled, onToggle, setShowUpgradeModal, onClose] [isEntitled, onToggle, isEnabled, onClose, premiumModal]
); );
return ( return (
@@ -57,11 +57,6 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
</div> </div>
)} )}
</button> </button>
<PremiumFeaturesModal
showModal={showUpgradeModal}
featureName="Focus Mode"
onClose={() => setShowUpgradeModal(false)}
/>
</> </>
); );
}; };

155
app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
View File

@@ -9,6 +9,7 @@ import {
ComponentArea, ComponentArea,
ContentType, ContentType,
FeatureIdentifier, FeatureIdentifier,
Features,
SNComponent, SNComponent,
SNTheme, SNTheme,
} from '@standardnotes/snjs'; } from '@standardnotes/snjs';
@@ -31,6 +32,12 @@ const focusModeAnimationDuration = 1255;
const MENU_CLASSNAME = 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'; 'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';
export type ThemeItem = {
name: string;
identifier: FeatureIdentifier;
component?: SNTheme;
};
type MenuProps = { type MenuProps = {
appState: AppState; appState: AppState;
application: WebApplication; application: WebApplication;
@@ -72,7 +79,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
focusModeEnabled, focusModeEnabled,
setFocusModeEnabled, setFocusModeEnabled,
} = appState.quickSettingsMenu; } = appState.quickSettingsMenu;
const [themes, setThemes] = useState<SNTheme[]>([]); const [themes, setThemes] = useState<ThemeItem[]>([]);
const [toggleableComponents, setToggleableComponents] = useState< const [toggleableComponents, setToggleableComponents] = useState<
SNComponent[] SNComponent[]
>([]); >([]);
@@ -96,12 +103,39 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
}, [focusModeEnabled]); }, [focusModeEnabled]);
const reloadThemes = useCallback(() => { const reloadThemes = useCallback(() => {
const themes = application.getDisplayableItems( const themes = (
ContentType.Theme application.getDisplayableItems(ContentType.Theme) as SNTheme[]
) as SNTheme[]; )
setThemes(themes.sort(sortThemes)); .sort(sortThemes)
.map((item) => {
return {
name: item.name,
identifier: item.identifier,
component: item,
};
}) as ThemeItem[];
Features.filter(
(feature) =>
feature.content_type === ContentType.Theme && !feature.layerable
).forEach((theme) => {
if (
themes.findIndex((item) => item.identifier === theme.identifier) ===
-1
) {
themes.push({
name: theme.name as string,
identifier: theme.identifier,
});
}
});
setThemes(themes);
setDefaultThemeOn( setDefaultThemeOn(
!themes.find((theme) => theme.active && !theme.isLayerable()) !themes
.map((item) => item?.component)
.find((theme) => theme?.active && !theme.isLayerable())
); );
}, [application]); }, [application]);
@@ -117,6 +151,12 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
setToggleableComponents(toggleableComponents); setToggleableComponents(toggleableComponents);
}, [application]); }, [application]);
useEffect(() => {
if (!themes.length) {
reloadThemes();
}
}, [reloadThemes, themes.length]);
useEffect(() => { useEffect(() => {
const cleanupItemStream = application.streamItems( const cleanupItemStream = application.streamItems(
ContentType.Theme, ContentType.Theme,
@@ -153,10 +193,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
prefsButtonRef.current?.focus(); prefsButtonRef.current?.focus();
}, []); }, []);
const [closeOnBlur] = useCloseOnBlur( const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
themesMenuRef as any,
setThemesMenuOpen
);
const toggleThemesMenu = () => { const toggleThemesMenu = () => {
if (!themesMenuOpen && themesButtonRef.current) { if (!themesMenuOpen && themesButtonRef.current) {
@@ -224,9 +261,9 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
}; };
const toggleDefaultTheme = () => { const toggleDefaultTheme = () => {
const activeTheme = themes.find( const activeTheme = themes
(theme) => theme.active && !theme.isLayerable() .map((item) => item.component)
); .find((theme) => theme?.active && !theme.isLayerable());
if (activeTheme) application.toggleTheme(activeTheme); if (activeTheme) application.toggleTheme(activeTheme);
}; };
@@ -244,56 +281,54 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
<div className="px-3 mt-1 mb-2 font-semibold color-text uppercase"> <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
Quick Settings Quick Settings
</div> </div>
{themes && themes.length ? ( <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
<Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}> <DisclosureButton
<DisclosureButton onKeyDown={handleBtnKeyDown}
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} onBlur={closeOnBlur}
ref={themesButtonRef} ref={defaultThemeButtonRef}
className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
> >
<div className="flex items-center"> <div
<Icon type="themes" className="color-neutral mr-2" /> className={`pseudo-radio-btn ${
Themes defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
</div> } mr-2`}
<Icon type="chevron-right" className="color-neutral" /> ></div>
</DisclosureButton> Default
<DisclosurePanel </button>
onBlur={closeOnBlur} {themes.map((theme) => (
ref={themesMenuRef} <ThemesMenuButton
onKeyDown={handlePanelKeyDown} item={theme}
style={{ application={application}
...themesMenuPosition, key={theme.component?.uuid ?? theme.identifier}
}}
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} onBlur={closeOnBlur}
ref={defaultThemeButtonRef} />
> ))}
<div </DisclosurePanel>
className={`pseudo-radio-btn ${ </Disclosure>
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>
) : null}
{toggleableComponents.map((component) => ( {toggleableComponents.map((component) => (
<button <button
className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none" className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"

76
app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
View File

@@ -1,58 +1,94 @@
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { SNTheme } from '@standardnotes/snjs'; import { FeatureStatus } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact'; import { FunctionComponent } from 'preact';
import { useMemo } from 'preact/hooks';
import { JSXInternal } from 'preact/src/jsx'; import { JSXInternal } from 'preact/src/jsx';
import { Icon } from '../Icon';
import { usePremiumModal } from '../Premium';
import { Switch } from '../Switch'; import { Switch } from '../Switch';
import { ThemeItem } from './QuickSettingsMenu';
type Props = { type Props = {
theme: SNTheme; item: ThemeItem;
application: WebApplication; application: WebApplication;
onBlur: (event: { relatedTarget: EventTarget | null }) => void; onBlur: (event: { relatedTarget: EventTarget | null }) => void;
}; };
export const ThemesMenuButton: FunctionComponent<Props> = ({ export const ThemesMenuButton: FunctionComponent<Props> = ({
application, application,
theme, item,
onBlur, onBlur,
}) => { }) => {
const premiumModal = usePremiumModal();
const isThirdPartyTheme = useMemo(
() => application.isThirdPartyFeature(item.identifier),
[application, item.identifier]
);
const isEntitledToTheme = useMemo(
() =>
application.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
[application, item.identifier]
);
const canActivateTheme = useMemo(
() => isEntitledToTheme || isThirdPartyTheme,
[isEntitledToTheme, isThirdPartyTheme]
);
const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => { const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault(); e.preventDefault();
if (theme.isLayerable() || !theme.active) {
application.toggleTheme(theme); if (item.component && canActivateTheme) {
const themeIsLayerableOrNotActive =
item.component.isLayerable() || !item.component.active;
if (themeIsLayerableOrNotActive) {
application.toggleTheme(item.component);
}
} else {
premiumModal.activate(`${item.name} theme`);
} }
}; };
return ( return (
<button <button
className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${ className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between`}
theme.isLayerable() ? `justify-start` : `justify-between`
}`}
onClick={toggleTheme} onClick={toggleTheme}
onBlur={onBlur} onBlur={onBlur}
> >
{theme.isLayerable() ? ( {item.component?.isLayerable() ? (
<> <>
<Switch className="px-0 mr-2" checked={theme.active} /> <div className="flex items-center">
{theme.package_info.name} <Switch className="px-0 mr-2" checked={item.component?.active} />
{item.name}
</div>
{!canActivateTheme && <Icon type="premium-feature" />}
</> </>
) : ( ) : (
<> <>
<div className="flex items-center"> <div className="flex items-center">
<div <div
className={`pseudo-radio-btn ${ className={`pseudo-radio-btn ${
theme.active ? 'pseudo-radio-btn--checked' : '' item.component?.active ? 'pseudo-radio-btn--checked' : ''
} mr-2`} } mr-2`}
></div> ></div>
<span className={theme.active ? 'font-semibold' : undefined}> <span
{theme.package_info.name} className={item.component?.active ? 'font-semibold' : undefined}
>
{item.name}
</span> </span>
</div> </div>
<div {item.component && canActivateTheme ? (
className="w-5 h-5 rounded-full" <div
style={{ className="w-5 h-5 rounded-full"
backgroundColor: theme.package_info?.dock_icon?.background_color, style={{
}} backgroundColor:
></div> item.component.package_info?.dock_icon?.background_color,
}}
></div>
) : (
<Icon type="premium-feature" />
)}
</> </>
)} )}
</button> </button>

312
app/assets/javascripts/preferences/panes/Appearance.tsx
View File

@@ -1,5 +1,5 @@
import { Dropdown, DropdownItem } from '@/components/Dropdown'; import { Dropdown, DropdownItem } from '@/components/Dropdown';
import { PremiumModalProvider, usePremiumModal } from '@/components/Premium'; import { usePremiumModal } from '@/components/Premium';
import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu'; import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator'; import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
import { Switch } from '@/components/Switch'; import { Switch } from '@/components/Switch';
@@ -28,170 +28,172 @@ type Props = {
application: WebApplication; application: WebApplication;
}; };
const AppearancePane: FunctionComponent<Props> = observer(({ application }) => { export const Appearance: FunctionComponent<Props> = observer(
const premiumModal = usePremiumModal(); ({ application }) => {
const isEntitledToMidnightTheme = const premiumModal = usePremiumModal();
application.getFeatureStatus(FeatureIdentifier.MidnightTheme) === const isEntitledToMidnightTheme =
FeatureStatus.Entitled; application.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
FeatureStatus.Entitled;
const [themeItems, setThemeItems] = useState<DropdownItem[]>([]); const [themeItems, setThemeItems] = useState<DropdownItem[]>([]);
const [autoLightTheme, setAutoLightTheme] = useState<string>( const [autoLightTheme, setAutoLightTheme] = useState<string>(
() => () =>
application.getPreference( application.getPreference(
PrefKey.AutoLightThemeIdentifier, PrefKey.AutoLightThemeIdentifier,
'Default' 'Default'
) as string ) as string
); );
const [autoDarkTheme, setAutoDarkTheme] = useState<string>( const [autoDarkTheme, setAutoDarkTheme] = useState<string>(
() => () =>
application.getPreference( application.getPreference(
PrefKey.AutoDarkThemeIdentifier, PrefKey.AutoDarkThemeIdentifier,
isEntitledToMidnightTheme ? FeatureIdentifier.MidnightTheme : 'Default' isEntitledToMidnightTheme
) as string ? FeatureIdentifier.MidnightTheme
); : 'Default'
const [useDeviceSettings, setUseDeviceSettings] = useState( ) as string
() => );
application.getPreference(PrefKey.UseSystemColorScheme, false) as boolean const [useDeviceSettings, setUseDeviceSettings] = useState(
); () =>
application.getPreference(
PrefKey.UseSystemColorScheme,
false
) as boolean
);
useEffect(() => { useEffect(() => {
const themesAsItems: DropdownItem[] = ( const themesAsItems: DropdownItem[] = (
application.getDisplayableItems(ContentType.Theme) as SNTheme[] application.getDisplayableItems(ContentType.Theme) as SNTheme[]
) )
.filter((theme) => !theme.isLayerable()) .filter((theme) => !theme.isLayerable())
.sort(sortThemes) .sort(sortThemes)
.map((theme) => { .map((theme) => {
return { return {
label: theme.name, label: theme.name,
value: theme.identifier as string, value: theme.identifier as string,
}; };
});
Features.filter(
(feature) =>
feature.content_type === ContentType.Theme && !feature.layerable
).forEach((theme) => {
if (
themesAsItems.findIndex((item) => item.value === theme.identifier) ===
-1
) {
themesAsItems.push({
label: theme.name as string,
value: theme.identifier,
icon: 'premium-feature',
});
}
}); });
Features.filter( themesAsItems.unshift({
(feature) => label: 'Default',
feature.content_type === ContentType.Theme && !feature.layerable value: 'Default',
).forEach((theme) => { });
if (
themesAsItems.findIndex((item) => item.value === theme.identifier) === setThemeItems(themesAsItems);
-1 }, [application]);
) {
themesAsItems.push({ const toggleUseDeviceSettings = () => {
label: theme.name as string, application.setPreference(
value: theme.identifier, PrefKey.UseSystemColorScheme,
icon: 'premium-feature', !useDeviceSettings
}); );
if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
application.setPreference(
PrefKey.AutoLightThemeIdentifier,
autoLightTheme as FeatureIdentifier
);
} }
}); if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
application.setPreference(
PrefKey.AutoDarkThemeIdentifier,
autoDarkTheme as FeatureIdentifier
);
}
setUseDeviceSettings(!useDeviceSettings);
};
themesAsItems.unshift({ const changeAutoLightTheme = (value: string, item: DropdownItem) => {
label: 'Default', if (item.icon === 'premium-feature') {
value: 'Default', premiumModal.activate(`${item.label} theme`);
}); } else {
application.setPreference(
PrefKey.AutoLightThemeIdentifier,
value as FeatureIdentifier
);
setAutoLightTheme(value);
}
};
setThemeItems(themesAsItems); const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
}, [application]); if (item.icon === 'premium-feature') {
premiumModal.activate(`${item.label} theme`);
} else {
application.setPreference(
PrefKey.AutoDarkThemeIdentifier,
value as FeatureIdentifier
);
setAutoDarkTheme(value);
}
};
const toggleUseDeviceSettings = () => { return (
application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings); <PreferencesPane>
if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) { <PreferencesGroup>
application.setPreference( <PreferencesSegment>
PrefKey.AutoLightThemeIdentifier, <Title>Themes</Title>
autoLightTheme as FeatureIdentifier <div className="mt-2">
); <div className="flex items-center justify-between">
} <div className="flex flex-col">
if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) { <Subtitle>Use system color scheme</Subtitle>
application.setPreference( <Text>
PrefKey.AutoDarkThemeIdentifier, Automatically change active theme based on your system
autoDarkTheme as FeatureIdentifier settings.
); </Text>
} </div>
setUseDeviceSettings(!useDeviceSettings); <Switch
}; onChange={toggleUseDeviceSettings}
checked={useDeviceSettings}
const changeAutoLightTheme = (value: string, item: DropdownItem) => {
if (item.icon === 'premium-feature') {
premiumModal.activate(`${item.label} theme`);
} else {
application.setPreference(
PrefKey.AutoLightThemeIdentifier,
value as FeatureIdentifier
);
setAutoLightTheme(value);
}
};
const changeAutoDarkTheme = (value: string, item: DropdownItem) => {
if (item.icon === 'premium-feature') {
premiumModal.activate(`${item.label} theme`);
} else {
application.setPreference(
PrefKey.AutoDarkThemeIdentifier,
value as FeatureIdentifier
);
setAutoDarkTheme(value);
}
};
return (
<PreferencesPane>
<PreferencesGroup>
<PreferencesSegment>
<Title>Themes</Title>
<div className="mt-2">
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Subtitle>Use system color scheme</Subtitle>
<Text>
Automatically change active theme based on your system
settings.
</Text>
</div>
<Switch
onChange={toggleUseDeviceSettings}
checked={useDeviceSettings}
/>
</div>
<HorizontalSeparator classes="mt-5 mb-3" />
<div>
<Subtitle>Automatic Light Theme</Subtitle>
<Text>Theme to be used for system light mode:</Text>
<div className="mt-2">
<Dropdown
id="auto-light-theme-dropdown"
label="Select the automatic light theme"
items={themeItems}
value={autoLightTheme}
onChange={changeAutoLightTheme}
disabled={!useDeviceSettings}
/> />
</div> </div>
</div> <HorizontalSeparator classes="mt-5 mb-3" />
<HorizontalSeparator classes="mt-5 mb-3" /> <div>
<div> <Subtitle>Automatic Light Theme</Subtitle>
<Subtitle>Automatic Dark Theme</Subtitle> <Text>Theme to be used for system light mode:</Text>
<Text>Theme to be used for system dark mode:</Text> <div className="mt-2">
<div className="mt-2"> <Dropdown
<Dropdown id="auto-light-theme-dropdown"
id="auto-dark-theme-dropdown" label="Select the automatic light theme"
label="Select the automatic dark theme" items={themeItems}
items={themeItems} value={autoLightTheme}
value={autoDarkTheme} onChange={changeAutoLightTheme}
onChange={changeAutoDarkTheme} disabled={!useDeviceSettings}
disabled={!useDeviceSettings} />
/> </div>
</div>
<HorizontalSeparator classes="mt-5 mb-3" />
<div>
<Subtitle>Automatic Dark Theme</Subtitle>
<Text>Theme to be used for system dark mode:</Text>
<div className="mt-2">
<Dropdown
id="auto-dark-theme-dropdown"
label="Select the automatic dark theme"
items={themeItems}
value={autoDarkTheme}
onChange={changeAutoDarkTheme}
disabled={!useDeviceSettings}
/>
</div>
</div> </div>
</div> </div>
</div> </PreferencesSegment>
</PreferencesSegment> </PreferencesGroup>
</PreferencesGroup> </PreferencesPane>
</PreferencesPane> );
); }
});
export const Appearance: FunctionComponent<Props> = observer(
({ application }) => (
<PremiumModalProvider state={application.getAppState().features}>
<AppearancePane application={application} />
</PremiumModalProvider>
)
); );