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

feat: Component toggleability and add toggleable components to quick settings menu (#707)

Browse Source 
* feat: toggleable extensions

* fix: return all themes for quick settings

* chore: bump snjs deps

* feat: Use Switch component for toggle in Quick Settings Menu

* feat: Add toggleableComponents to footer_view

* refactor: Change "components" to "toggleableComponents"

* feat: Add checked state to component toggle in quick settings menu
This commit is contained in:
Mo
2021-10-27 10:19:42 -05:00
committed by GitHub
parent 53ec0d4742
commit fd6d83655c
9 changed files with 151 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,12 +5,18 @@ import {
DisclosureButton, DisclosureButton,
DisclosurePanel, DisclosurePanel,
} from '@reach/disclosure'; } from '@reach/disclosure';
import { ContentType, SNTheme } from '@standardnotes/snjs'; import {
ContentType,
SNTheme,
ComponentArea,
SNComponent,
} 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, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { JSXInternal } from 'preact/src/jsx'; import { JSXInternal } from 'preact/src/jsx';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { Switch } from './Switch';
import { toDirective, useCloseOnBlur } from './utils'; import { toDirective, useCloseOnBlur } from './utils';
const MENU_CLASSNAME = const MENU_CLASSNAME =
@@ -75,6 +81,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const { closeQuickSettingsMenu, shouldAnimateCloseMenu } = const { closeQuickSettingsMenu, shouldAnimateCloseMenu } =
appState.quickSettingsMenu; appState.quickSettingsMenu;
const [themes, setThemes] = useState<SNTheme[]>([]); const [themes, setThemes] = useState<SNTheme[]>([]);
const [toggleableComponents, setToggleableComponents] = useState<
SNComponent[]
>([]);
const [themesMenuOpen, setThemesMenuOpen] = useState(false); const [themesMenuOpen, setThemesMenuOpen] = useState(false);
const [themesMenuPosition, setThemesMenuPosition] = useState({}); const [themesMenuPosition, setThemesMenuPosition] = useState({});
const [defaultThemeOn, setDefaultThemeOn] = useState(false); const [defaultThemeOn, setDefaultThemeOn] = useState(false);
@@ -113,10 +122,29 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
}); });
}, [application]); }, [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(() => { useEffect(() => {
reloadThemes(); reloadThemes();
}, [reloadThemes]); }, [reloadThemes]);
useEffect(() => {
reloadToggleableComponents();
}, [reloadToggleableComponents]);
useEffect(() => { useEffect(() => {
if (themesMenuOpen) { if (themesMenuOpen) {
defaultThemeButtonRef.current!.focus(); defaultThemeButtonRef.current!.focus();
@@ -127,7 +155,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
prefsButtonRef.current!.focus(); prefsButtonRef.current!.focus();
}, []); }, []);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef as any, setThemesMenuOpen); const [closeOnBlur] = useCloseOnBlur(
themesMenuRef as any,
setThemesMenuOpen
);
const toggleThemesMenu = () => { const toggleThemesMenu = () => {
if (!themesMenuOpen) { if (!themesMenuOpen) {
@@ -149,6 +180,10 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
appState.preferences.openPreferences(); appState.preferences.openPreferences();
}; };
const toggleComponent = (component: SNComponent) => {
application.toggleComponent(component);
};
const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = ( const handleBtnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (
event event
) => { ) => {
@@ -296,6 +331,22 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
))} ))}
</DisclosurePanel> </DisclosurePanel>
</Disclosure> </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>
))}
<div className="h-1px my-2 bg-border"></div> <div className="h-1px my-2 bg-border"></div>
<button <button
class="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none" class="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"

75
app/assets/javascripts/preferences/PreferencesMenu.ts
View File

@@ -58,33 +58,38 @@ export class PreferencesMenu {
private _selectedPane: PreferenceId | FeatureIdentifier = 'account'; private _selectedPane: PreferenceId | FeatureIdentifier = 'account';
private _extensionPanes: SNComponent[] = []; private _extensionPanes: SNComponent[] = [];
private _menu: PreferencesMenuItem[]; private _menu: PreferencesMenuItem[];
private _extensionLatestVersions: ExtensionsLatestVersions = new ExtensionsLatestVersions(new Map()); private _extensionLatestVersions: ExtensionsLatestVersions =
new ExtensionsLatestVersions(new Map());
constructor( constructor(
private application: WebApplication, private application: WebApplication,
private readonly _enableUnfinishedFeatures: boolean, private readonly _enableUnfinishedFeatures: boolean
) { ) {
this._menu = this._enableUnfinishedFeatures ? PREFERENCES_MENU_ITEMS : READY_PREFERENCES_MENU_ITEMS; this._menu = this._enableUnfinishedFeatures
? PREFERENCES_MENU_ITEMS
: READY_PREFERENCES_MENU_ITEMS;
this.loadExtensionsPanes(); this.loadExtensionsPanes();
this.loadLatestVersions(); this.loadLatestVersions();
makeAutoObservable<PreferencesMenu, makeAutoObservable<
'_selectedPane' | '_twoFactorAuth' | '_extensionPanes' | '_extensionLatestVersions' | 'loadLatestVersions' PreferencesMenu,
>( | '_selectedPane'
this, | '_twoFactorAuth'
{ | '_extensionPanes'
_twoFactorAuth: observable, | '_extensionLatestVersions'
_selectedPane: observable, | 'loadLatestVersions'
_extensionPanes: observable.ref, >(this, {
_extensionLatestVersions: observable.ref, _twoFactorAuth: observable,
loadLatestVersions: action, _selectedPane: observable,
} _extensionPanes: observable.ref,
); _extensionLatestVersions: observable.ref,
loadLatestVersions: action,
});
} }
private loadLatestVersions(): void { private loadLatestVersions(): void {
ExtensionsLatestVersions.load(this.application).then(versions => { ExtensionsLatestVersions.load(this.application).then((versions) => {
this._extensionLatestVersions = versions; this._extensionLatestVersions = versions;
}); });
} }
@@ -94,12 +99,22 @@ export class PreferencesMenu {
} }
loadExtensionsPanes(): void { loadExtensionsPanes(): void {
this._extensionPanes = (this.application.getItems([ const excludedComponents = [
ContentType.ActionsExtension, FeatureIdentifier.TwoFactorAuthManager,
ContentType.Component, 'org.standardnotes.batch-manager',
ContentType.Theme, 'org.standardnotes.extensions-manager',
]) as SNComponent[]) ];
.filter(extension => extension.area === ComponentArea.Modal && extension.package_info.identifier !== FeatureIdentifier.TwoFactorAuthManager); this._extensionPanes = (
this.application.getItems([
ContentType.ActionsExtension,
ContentType.Component,
ContentType.Theme,
]) as SNComponent[]
).filter(
(extension) =>
extension.area === ComponentArea.Modal &&
!excludedComponents.includes(extension.package_info.identifier)
);
} }
get menuItems(): SelectableMenuItem[] { get menuItems(): SelectableMenuItem[] {
@@ -107,15 +122,16 @@ export class PreferencesMenu {
...preference, ...preference,
selected: preference.id === this._selectedPane, selected: preference.id === this._selectedPane,
})); }));
const extensionsMenuItems: SelectableMenuItem[] = this._extensionPanes const extensionsMenuItems: SelectableMenuItem[] = this._extensionPanes.map(
.map(extension => { (extension) => {
return { return {
icon: 'window', icon: 'window',
id: extension.package_info.identifier, id: extension.package_info.identifier,
label: extension.name, label: extension.name,
selected: extension.package_info.identifier === this._selectedPane selected: extension.package_info.identifier === this._selectedPane,
}; };
}); }
);
return menuItems.concat(extensionsMenuItems); return menuItems.concat(extensionsMenuItems);
} }
@@ -125,8 +141,9 @@ export class PreferencesMenu {
} }
get selectedExtension(): SNComponent | undefined { get selectedExtension(): SNComponent | undefined {
return this._extensionPanes.find((extension) => return this._extensionPanes.find(
extension.package_info.identifier === this._selectedPane); (extension) => extension.package_info.identifier === this._selectedPane
);
} }
get selectedPaneId(): PreferenceId | FeatureIdentifier { get selectedPaneId(): PreferenceId | FeatureIdentifier {

4
app/assets/javascripts/preferences/components/Content.tsx
View File

@@ -8,6 +8,10 @@ export const Subtitle: FunctionComponent<{ className?: string }> = ({ children,
<h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4> <h4 className={`font-medium text-sm m-0 mb-1 ${className}`}>{children}</h4>
); );
export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = "" }) => (
<h4 className={`font-normal text-sm m-0 mb-1 ${className}`}>{children}</h4>
);
export const Text: FunctionComponent<{ className?: string }> = ({ export const Text: FunctionComponent<{ className?: string }> = ({
children, children,
className = '', className = '',

2
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -17,7 +17,7 @@ const loadExtensions = (application: WebApplication) => application.getItems([
ContentType.ActionsExtension, ContentType.ActionsExtension,
ContentType.Component, ContentType.Component,
ContentType.Theme, ContentType.Theme,
]) as SNComponent[]; ], true) as SNComponent[];
export const Extensions: FunctionComponent<{ export const Extensions: FunctionComponent<{
application: WebApplication application: WebApplication

27
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
View File

@@ -1,10 +1,10 @@
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
import { SNComponent } from "@standardnotes/snjs"; import { SNComponent } from "@standardnotes/snjs";
import { ComponentArea } from "@standardnotes/features";
import { PreferencesSegment, Subtitle, Title } from "@/preferences/components"; import { PreferencesSegment, SubtitleLight, Title } from "@/preferences/components";
import { Switch } from "@/components/Switch"; import { Switch } from "@/components/Switch";
import { WebApplication } from "@/ui_models/application"; import { WebApplication } from "@/ui_models/application";
import { useEffect, useRef, useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import { RenameExtension } from "./RenameExtension"; import { RenameExtension } from "./RenameExtension";
@@ -14,7 +14,7 @@ const ExtensionVersions: FunctionComponent<{
}> = ({ installedVersion, latestVersion }) => { }> = ({ installedVersion, latestVersion }) => {
return ( return (
<> <>
<Subtitle>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</Subtitle> <SubtitleLight>Installed version <b>{installedVersion}</b> {latestVersion && <>(latest is <b>{latestVersion}</b>)</>}</SubtitleLight>
</> </>
); );
}; };
@@ -24,7 +24,7 @@ const AutoUpdateLocal: FunctionComponent<{
toggleAutoupdate: () => void toggleAutoupdate: () => void
}> = ({ autoupdateDisabled, toggleAutoupdate }) => ( }> = ({ autoupdateDisabled, toggleAutoupdate }) => (
<div className="flex flex-row"> <div className="flex flex-row">
<Subtitle className="flex-grow">Autoupdate local installation</Subtitle> <SubtitleLight className="flex-grow">Autoupdate local installation</SubtitleLight>
<Switch onChange={toggleAutoupdate} checked={!autoupdateDisabled} /> <Switch onChange={toggleAutoupdate} checked={!autoupdateDisabled} />
</div> </div>
); );
@@ -33,7 +33,7 @@ const UseHosted: FunctionComponent<{
offlineOnly: boolean, toggleOfllineOnly: () => void offlineOnly: boolean, toggleOfllineOnly: () => void
}> = ({ offlineOnly, toggleOfllineOnly }) => ( }> = ({ offlineOnly, toggleOfllineOnly }) => (
<div className="flex flex-row"> <div className="flex flex-row">
<Subtitle className="flex-grow">Use hosted when local is unavailable</Subtitle> <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
<Switch onChange={toggleOfllineOnly} checked={!offlineOnly} /> <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
</div> </div>
); );
@@ -106,7 +106,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
const installedVersion = extension.package_info.version; const installedVersion = extension.package_info.version;
const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area); const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
return ( return (
<PreferencesSegment> <PreferencesSegment>
@@ -123,16 +123,17 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />} {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />} {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{isEditorOrTags || isExternal && {(isToggleable || isExternal) &&
<> <>
<div className="min-h-2" /> <div className="min-h-2" />
<div className="flex flex-row"> <div className="flex flex-row">
{isEditorOrTags && toggleActivate != undefined && ( {isToggleable && (
<> <>
{extension.active ? {(extension.active ? (
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> : <Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate!(extension)} />
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} /> ) : (
} <Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate!(extension)} />
))}
<div className="min-w-3" /> <div className="min-w-3" />
</> </>
)} )}

6
app/assets/javascripts/ui_models/app_state/preferences_state.ts
View File

@@ -1,9 +1,11 @@
import { PreferenceId } from '@/preferences/PreferencesMenu'; import { PreferenceId } from '@/preferences/PreferencesMenu';
import { action, computed, makeObservable, observable } from 'mobx'; import { action, computed, makeObservable, observable } from 'mobx';
const DEFAULT_PANE = 'account';
export class PreferencesState { export class PreferencesState {
private _open = false; private _open = false;
currentPane: PreferenceId = 'account'; currentPane: PreferenceId = DEFAULT_PANE;
constructor() { constructor() {
makeObservable<PreferencesState, '_open'>(this, { makeObservable<PreferencesState, '_open'>(this, {
@@ -26,7 +28,7 @@ export class PreferencesState {
closePreferences = (): void => { closePreferences = (): void => {
this._open = false; this._open = false;
this.currentPane = 'account'; this.currentPane = DEFAULT_PANE;
}; };
get isOpen(): boolean { get isOpen(): boolean {

28
app/assets/javascripts/views/footer/footer_view.ts
View File

@@ -8,6 +8,7 @@ import {
SNTheme, SNTheme,
ComponentArea, ComponentArea,
CollectionSort, CollectionSort,
SNComponent,
} from '@standardnotes/snjs'; } from '@standardnotes/snjs';
import template from './footer-view.pug'; import template from './footer-view.pug';
import { AppStateEvent, EventSource } from '@/ui_models/app_state'; import { AppStateEvent, EventSource } from '@/ui_models/app_state';
@@ -42,7 +43,8 @@ class FooterViewCtrl extends PureViewCtrl<
} }
> { > {
private $rootScope: ng.IRootScopeService; private $rootScope: ng.IRootScopeService;
private themesWithIcons: SNTheme[] = []; private themes: SNTheme[] = [];
private toggleableComponents: SNComponent[] = [];
private showSyncResolution = false; private showSyncResolution = false;
private unregisterComponent: any; private unregisterComponent: any;
private rootScopeListener2: any; private rootScopeListener2: any;
@@ -74,7 +76,8 @@ class FooterViewCtrl extends PureViewCtrl<
deinit() { deinit() {
for (const remove of this.observerRemovers) remove(); for (const remove of this.observerRemovers) remove();
this.observerRemovers.length = 0; this.observerRemovers.length = 0;
this.themesWithIcons.length = 0; this.themes.length = 0;
this.toggleableComponents.length = 0;
this.unregisterComponent(); this.unregisterComponent();
this.unregisterComponent = undefined; this.unregisterComponent = undefined;
this.rootScopeListener2(); this.rootScopeListener2();
@@ -270,7 +273,7 @@ class FooterViewCtrl extends PureViewCtrl<
CollectionSort.Title, CollectionSort.Title,
'asc', 'asc',
(theme: SNTheme) => { (theme: SNTheme) => {
return theme.package_info && theme.package_info.dock_icon != undefined; return !theme.errorDecrypting;
} }
); );
@@ -279,7 +282,22 @@ class FooterViewCtrl extends PureViewCtrl<
const themes = this.application.getDisplayableItems( const themes = this.application.getDisplayableItems(
ContentType.Theme ContentType.Theme
) as SNTheme[]; ) as SNTheme[];
this.themesWithIcons = themes; this.themes = themes;
})
);
this.observerRemovers.push(
this.application.streamItems(ContentType.Component, async () => {
const toggleableComponents = (
this.application.getDisplayableItems(
ContentType.Component
) as SNComponent[]
).filter((component) =>
[ComponentArea.EditorStack, ComponentArea.TagsList].includes(
component.area
)
);
this.toggleableComponents = toggleableComponents;
}) })
); );
} }
@@ -382,7 +400,7 @@ class FooterViewCtrl extends PureViewCtrl<
quickSettingsPressed() { quickSettingsPressed() {
this.appState.accountMenu.closeAccountMenu(); this.appState.accountMenu.closeAccountMenu();
if (this.themesWithIcons.length > 0) { if (this.themes.length > 0 || this.toggleableComponents.length > 0) {
this.appState.quickSettingsMenu.toggle(); this.appState.quickSettingsMenu.toggle();
} else { } else {
this.appState.preferences.openPreferences(); this.appState.preferences.openPreferences();

4
package.json
View File

@@ -70,9 +70,9 @@
"@reach/checkbox": "^0.16.0", "@reach/checkbox": "^0.16.0",
"@reach/dialog": "^0.16.2", "@reach/dialog": "^0.16.2",
"@reach/listbox": "^0.16.2", "@reach/listbox": "^0.16.2",
"@standardnotes/features": "1.7.3", "@standardnotes/features": "1.8.0",
"@standardnotes/sncrypto-web": "1.5.3", "@standardnotes/sncrypto-web": "1.5.3",
"@standardnotes/snjs": "2.16.2", "@standardnotes/snjs": "2.16.3",
"mobx": "^6.3.5", "mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1", "mobx-react-lite": "^3.2.1",
"preact": "^10.5.15", "preact": "^10.5.15",

8
yarn.lock
View File

@@ -4006,10 +4006,10 @@ eslint-config-prettier@^8.3.0:
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a" resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew== integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
eslint-plugin-react-hooks@^4.2.0: eslint-plugin-react-hooks@^4.2.1-alpha-4298ddbc5-20211023:
version "4.2.0" version "4.2.1-alpha-4298ddbc5-20211023"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.1-alpha-4298ddbc5-20211023.tgz#b227d6f900b4c86772585ae8130f2df625f05703"
integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ== integrity sha512-JK7BG4+zc4vpIMMxAiwgLQXQVrvHHKzrHmSNDFDwRwy4zVvKyp7mL9m8AsWvgFRQdWgmCeAACcrA4XqeNsxZ+w==
eslint-plugin-react@^7.26.1: eslint-plugin-react@^7.26.1:
version "7.26.1" version "7.26.1"