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

feat: Add quick settings menu with theme switcher and other changes (#673)

Browse Source 
Co-authored-by: Mo Bitar <mo@standardnotes.org>
Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>
This commit is contained in:
Aman Harwara
2021-10-19 09:58:46 +05:30
committed by GitHub
parent bbeab4f623
commit c8dc07d42b
14 changed files with 529 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/app.ts
View File

@@ -64,6 +64,7 @@ import { IconDirective } from './components/Icon';
import { NoteTagsContainerDirective } from './components/NoteTagsContainer';
import { PreferencesDirective } from './preferences';
import { AppVersion, IsWebPlatform } from '@/version';
import { QuickSettingsMenuDirective } from './components/QuickSettingsMenu';
function reloadHiddenFirefoxTab(): boolean {
/**
@@ -154,6 +155,7 @@ const startApplication: StartApplication = async function startApplication(
.directive('syncResolutionMenu', () => new SyncResolutionMenu())
.directive('sessionsModal', SessionsModalDirective)
.directive('accountMenu', AccountMenuDirective)
.directive('quickSettingsMenu', QuickSettingsMenuDirective)
.directive('noAccountWarning', NoAccountWarningDirective)
.directive('protectedNotePanel', NoProtectionsdNoteWarningDirective)
.directive('searchOptions', SearchOptionsDirective)

2
app/assets/javascripts/components/AccountMenu/AdvancedOptions.tsx
View File

@@ -39,7 +39,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
return (
<>
<button
className="sn-dropdown-item font-bold"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none font-bold"
onClick={toggleShowAdvanced}
>
<div className="flex items-center">

6
app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
View File

@@ -3,7 +3,7 @@ import { WebApplication } from '@/ui_models/application';
import { AppState } from '@/ui_models/app_state';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { StateUpdater, useRef, useState } from 'preact/hooks';
import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
import { AccountMenuPane } from '.';
import { Button } from '../Button';
import { Checkbox } from '../Checkbox';
@@ -31,6 +31,10 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
const passwordInputRef = useRef<HTMLInputElement>();
useEffect(() => {
passwordInputRef?.current?.focus();
}, []);
const handlePasswordChange = (e: Event) => {
if (e.target instanceof HTMLInputElement) {
setConfirmPassword(e.target.value);

67
app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx
View File

@@ -5,9 +5,10 @@ import { Icon } from '../Icon';
import { formatLastSyncDate } from '@/preferences/panes/account/Sync';
import { SyncQueueStrategy } from '@standardnotes/snjs';
import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
import { useState } from 'preact/hooks';
import { useEffect, useRef, useState } from 'preact/hooks';
import { AccountMenuPane } from '.';
import { FunctionComponent } from 'preact';
import { JSXInternal } from 'preact/src/jsx';
import { AppVersion } from '@/version';
type Props = {
@@ -25,6 +26,9 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
const [lastSyncDate, setLastSyncDate] = useState(
formatLastSyncDate(application.getLastSyncDate() as Date)
);
const [currentFocusedIndex, setCurrentFocusedIndex] = useState(0);
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
const doSynchronization = async () => {
setIsSyncingInProgress(true);
@@ -53,9 +57,49 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
const user = application.getUser();
const accountMenuRef = useRef<HTMLDivElement>();
const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
switch (event.key) {
case 'ArrowDown':
setCurrentFocusedIndex((index) => {
console.log(index, buttonRefs.current.length);
if (index + 1 < buttonRefs.current.length) {
return index + 1;
} else {
return 0;
}
});
break;
case 'ArrowUp':
setCurrentFocusedIndex((index) => {
if (index - 1 > -1) {
return index - 1;
} else {
return buttonRefs.current.length - 1;
}
});
break;
}
};
useEffect(() => {
if (buttonRefs.current[currentFocusedIndex]) {
buttonRefs.current[currentFocusedIndex]?.focus();
}
}, [currentFocusedIndex]);
const pushRefToArray = (ref: HTMLButtonElement | null) => {
if (ref && !buttonRefs.current.includes(ref)) {
buttonRefs.current.push(ref);
}
};
return (
<>
<div className="flex items-center justify-between px-3 mt-1 mb-2">
<div ref={accountMenuRef} onKeyDown={handleKeyDown}>
<div className="flex items-center justify-between px-3 mt-1 mb-3">
<div className="sn-account-menu-headline">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="color-grey-1" />
@@ -105,7 +149,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
<div className="h-1px my-2 bg-border"></div>
{user ? (
<button
className="sn-dropdown-item"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('account');
@@ -118,7 +163,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
) : (
<>
<button
className="sn-dropdown-item"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
setMenuPane(AccountMenuPane.Register);
}}
@@ -127,7 +173,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
Create free account
</button>
<button
className="sn-dropdown-item"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
setMenuPane(AccountMenuPane.SignIn);
}}
@@ -138,7 +185,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</>
)}
<button
className="sn-dropdown-item justify-between"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
appState.accountMenu.closeAccountMenu();
appState.preferences.setCurrentPane('help-feedback');
@@ -155,7 +203,8 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
<>
<div className="h-1px my-2 bg-border"></div>
<button
className="sn-dropdown-item"
className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
ref={pushRefToArray}
onClick={() => {
appState.accountMenu.setSigningOut(true);
}}
@@ -165,7 +214,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</button>
</>
) : null}
</>
</div>
);
}
);

20
app/assets/javascripts/components/AccountMenu/index.tsx
View File

@@ -9,6 +9,7 @@ import { SignInPane } from './SignIn';
import { CreateAccount } from './CreateAccount';
import { ConfirmSignoutContainer } from '../ConfirmSignoutModal';
import { ConfirmPassword } from './ConfirmPassword';
import { JSXInternal } from 'preact/src/jsx';
export enum AccountMenuPane {
GeneralMenu,
@@ -87,14 +88,31 @@ const AccountMenu: FunctionComponent<Props> = observer(
closeAccountMenu,
} = appState.accountMenu;
const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
switch (event.key) {
case 'Escape':
if (currentPane === AccountMenuPane.GeneralMenu) {
closeAccountMenu();
} else if (currentPane === AccountMenuPane.ConfirmPassword) {
setCurrentPane(AccountMenuPane.Register);
} else {
setCurrentPane(AccountMenuPane.GeneralMenu);
}
break;
}
};
return (
<div className="sn-component">
<div
className={`sn-account-menu sn-dropdown ${
className={`sn-menu-border sn-account-menu sn-dropdown ${
shouldAnimateCloseMenu
? 'slide-up-animation'
: 'sn-dropdown--animated'
} min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
onKeyDown={handleKeyDown}
>
<MenuPaneSelector
appState={appState}

315
app/assets/javascripts/components/QuickSettingsMenu.tsx Normal file
View File

@@ -0,0 +1,315 @@
import { WebApplication } from '@/ui_models/application';
import { AppState } from '@/ui_models/app_state';
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@reach/disclosure';
import { ContentType, SNTheme } 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 { toDirective, useCloseOnBlur } from './utils';
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 ThemeButtonProps = {
theme: SNTheme;
application: WebApplication;
onBlur: (event: { relatedTarget: EventTarget | null }) => void;
};
type MenuProps = {
appState: AppState;
application: WebApplication;
};
const ThemeButton: FunctionComponent<ThemeButtonProps> = ({
application,
theme,
onBlur,
}) => {
const toggleTheme = () => {
if (theme.isLayerable() || !theme.active) {
application.toggleComponent(theme);
}
};
return (
<button
className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
onClick={toggleTheme}
onBlur={onBlur}
>
<div className="flex items-center">
{theme.isLayerable() ? (
theme.active ? (
<Icon type="check" className="color-info mr-2" />
) : null
) : (
<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>
);
};
const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
({ application, appState }) => {
const { closeQuickSettingsMenu, shouldAnimateCloseMenu } =
appState.quickSettingsMenu;
const [themes, setThemes] = useState<SNTheme[]>([]);
const [themesMenuOpen, setThemesMenuOpen] = useState(false);
const [themesMenuPosition, setThemesMenuPosition] = useState({});
const [defaultThemeOn, setDefaultThemeOn] = useState(false);
const themesMenuRef = useRef<HTMLDivElement>();
const themesButtonRef = useRef<HTMLButtonElement>();
const prefsButtonRef = useRef<HTMLButtonElement>();
const quickSettingsMenuRef = useRef<HTMLDivElement>();
const defaultThemeButtonRef = useRef<HTMLButtonElement>();
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]);
useEffect(() => {
reloadThemes();
}, [reloadThemes]);
useEffect(() => {
if (themesMenuOpen) {
defaultThemeButtonRef.current.focus();
}
}, [themesMenuOpen]);
useEffect(() => {
prefsButtonRef.current.focus();
}, []);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
const toggleThemesMenu = () => {
if (!themesMenuOpen) {
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 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) => {
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;
}
}
};
const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
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;
}
};
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) => (
<ThemeButton
theme={theme}
application={application}
key={theme.uuid}
onBlur={closeOnBlur}
/>
))}
</DisclosurePanel>
</Disclosure>
<div className="h-1px my-2 bg-border"></div>
<button
class="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);

15
app/assets/javascripts/ui_models/app_state/account_menu_state.ts
View File

@@ -52,6 +52,7 @@ export class AccountMenuState {
shouldAnimateCloseMenu: observable,
setShow: action,
setShouldAnimateClose: action,
toggleShow: action,
setSigningOut: action,
setIsEncryptionEnabled: action,
@@ -95,11 +96,15 @@ export class AccountMenuState {
this.show = show;
};
setShouldAnimateClose = (shouldAnimateCloseMenu: boolean): void => {
this.shouldAnimateCloseMenu = shouldAnimateCloseMenu;
};
closeAccountMenu = (): void => {
this.shouldAnimateCloseMenu = true;
this.setShouldAnimateClose(true);
setTimeout(() => {
this.setShow(false);
this.shouldAnimateCloseMenu = false;
this.setShouldAnimateClose(false);
this.setCurrentPane(AccountMenuPane.GeneralMenu);
}, 150);
};
@@ -137,7 +142,11 @@ export class AccountMenuState {
};
toggleShow = (): void => {
this.show = !this.show;
if (this.show) {
this.closeAccountMenu();
} else {
this.setShow(true);
}
};
setOtherSessionsSignOut = (otherSessionsSignOut: boolean): void => {

4
app/assets/javascripts/ui_models/app_state/app_state.ts
View File

@@ -23,6 +23,7 @@ import { NotesState } from './notes_state';
import { TagsState } from './tags_state';
import { AccountMenuState } from '@/ui_models/app_state/account_menu_state';
import { PreferencesState } from './preferences_state';
import { QuickSettingsState } from './quick_settings_state';
export enum AppStateEvent {
TagChanged,
@@ -62,6 +63,7 @@ export class AppState {
onVisibilityChange: any;
selectedTag?: SNTag;
showBetaWarning: boolean;
readonly quickSettingsMenu = new QuickSettingsState();
readonly accountMenu: AccountMenuState;
readonly actionsMenu = new ActionsMenuState();
readonly preferences = new PreferencesState();
@@ -105,7 +107,7 @@ export class AppState {
);
this.accountMenu = new AccountMenuState(
application,
this.appEventObserverRemovers,
this.appEventObserverRemovers
);
this.searchOptions = new SearchOptionsState(
application,

42
app/assets/javascripts/ui_models/app_state/quick_settings_state.ts Normal file
View File

@@ -0,0 +1,42 @@
import { action, makeObservable, observable } from 'mobx';
export class QuickSettingsState {
open = false;
shouldAnimateCloseMenu = false;
constructor() {
makeObservable(this, {
open: observable,
shouldAnimateCloseMenu: observable,
setOpen: action,
setShouldAnimateCloseMenu: action,
toggle: action,
closeQuickSettingsMenu: action,
});
}
setOpen = (open: boolean): void => {
this.open = open;
};
setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => {
this.shouldAnimateCloseMenu = shouldAnimate;
};
toggle = (): void => {
if (this.open) {
this.closeQuickSettingsMenu();
} else {
this.setOpen(true);
}
};
closeQuickSettingsMenu = (): void => {
this.setShouldAnimateCloseMenu(true);
setTimeout(() => {
this.setOpen(false);
this.setShouldAnimateCloseMenu(false);
}, 150);
};
}

10
app/assets/javascripts/views/footer/footer-view.pug
View File

@@ -23,14 +23,22 @@
ng-if='ctrl.showAccountMenu',
)
.sk-app-bar-item.ml-0-important(
ng-click='ctrl.clickPreferences()'
click-outside='ctrl.clickOutsideQuickSettingsMenu()',
is-open='ctrl.showQuickSettingsMenu',
ng-click='ctrl.quickSettingsPressed()'
)
.w-8.h-full.flex.items-center.justify-center.cursor-pointer
.h-5
icon(
type="tune"
class-name="rounded hover:color-info"
ng-class="{'color-info': ctrl.showQuickSettingsMenu}"
)
quick-settings-menu(
ng-click='$event.stopPropagation()',
app-state='ctrl.appState'
application='ctrl.application'
ng-if='ctrl.showQuickSettingsMenu',)
.sk-app-bar-item
a.no-decoration.sk-label.title(
href='https://standardnotes.com/help',

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

@@ -64,6 +64,7 @@ class FooterViewCtrl extends PureViewCtrl<
public user?: any;
private offline = true;
public showAccountMenu = false;
public showQuickSettingsMenu = false;
private didCheckForOffline = false;
private queueExtReload = false;
private reloadInProgress = false;
@@ -115,6 +116,7 @@ class FooterViewCtrl extends PureViewCtrl<
this.autorun(() => {
const showBetaWarning = this.appState.showBetaWarning;
this.showAccountMenu = this.appState.accountMenu.show;
this.showQuickSettingsMenu = this.appState.quickSettingsMenu.open;
this.setState({
showBetaWarning: showBetaWarning,
showDataUpgrade: !showBetaWarning,
@@ -449,10 +451,21 @@ class FooterViewCtrl extends PureViewCtrl<
}
accountMenuPressed() {
this.appState.quickSettingsMenu.closeQuickSettingsMenu();
this.appState.accountMenu.toggleShow();
this.closeAllRooms();
}
quickSettingsPressed() {
this.appState.accountMenu.closeAccountMenu();
if (this.themesWithIcons.length > 0) {
this.appState.quickSettingsMenu.toggle();
} else {
this.appState.preferences.openPreferences();
}
this.closeAllRooms();
}
toggleSyncResolutionMenu() {
this.showSyncResolution = !this.showSyncResolution;
}
@@ -476,22 +489,7 @@ class FooterViewCtrl extends PureViewCtrl<
}
reloadDockShortcuts() {
const shortcuts = [];
for (const theme of this.themesWithIcons) {
if (!theme.package_info) {
continue;
}
const name = theme.package_info.name;
const icon = theme.package_info.dock_icon;
if (!icon) {
continue;
}
shortcuts.push({
name: name,
component: theme,
icon: icon,
} as DockShortcut);
}
const shortcuts: DockShortcut[] = [];
this.setState({
dockShortcuts: shortcuts.sort((a, b) => {
/** Circles first, then images */
@@ -556,8 +554,8 @@ class FooterViewCtrl extends PureViewCtrl<
this.appState.accountMenu.closeAccountMenu();
}
clickPreferences() {
this.appState.preferences.openPreferences();
clickOutsideQuickSettingsMenu() {
this.appState.quickSettingsMenu.closeQuickSettingsMenu();
}
}