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

Merge branch 'develop' into feature/account-menu-react

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-06-30 19:00:23 -03:00
parent 0e903b51fe 2295f5d593
commit 881f4683cc
19 changed files with 138 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/components/NoteTag.tsx
View File

@@ -97,7 +97,6 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
ref={deleteTagRef}
type="button"
className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex"
onFocus={onFocus}
onBlur={onBlur}
onClick={onDeleteTagClick}
>

25
app/assets/javascripts/components/NotesContextMenu.tsx
View File

@@ -2,13 +2,19 @@ import { AppState } from '@/ui_models/app_state';
import { toDirective, useCloseOnBlur, useCloseOnClickOutside } from './utils';
import { observer } from 'mobx-react-lite';
import { NotesOptions } from './NotesOptions';
import { useRef } from 'preact/hooks';
import { useCallback, useEffect, useRef } from 'preact/hooks';
type Props = {
appState: AppState;
};
const NotesContextMenu = observer(({ appState }: Props) => {
const {
contextMenuOpen,
contextMenuPosition,
contextMenuMaxHeight,
} = appState.notes;
const contextMenuRef = useRef<HTMLDivElement>();
const [closeOnBlur] = useCloseOnBlur(
contextMenuRef,
@@ -20,13 +26,24 @@ const NotesContextMenu = observer(({ appState }: Props) => {
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
return appState.notes.contextMenuOpen ? (
const reloadContextMenuLayout = useCallback(() => {
appState.notes.reloadContextMenuLayout();
}, [appState.notes]);
useEffect(() => {
window.addEventListener('resize', reloadContextMenuLayout);
return () => {
window.removeEventListener('resize', reloadContextMenuLayout);
};
}, [reloadContextMenuLayout]);
return contextMenuOpen ? (
<div
ref={contextMenuRef}
className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
style={{
...appState.notes.contextMenuPosition,
maxHeight: appState.notes.contextMenuMaxHeight,
...contextMenuPosition,
maxHeight: contextMenuMaxHeight,
}}
>
<NotesOptions appState={appState} closeOnBlur={closeOnBlur} />

27
app/assets/javascripts/components/SearchOptions.tsx
View File

@@ -11,6 +11,7 @@ import {
} from '@reach/disclosure';
import { Switch } from './Switch';
import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';
type Props = {
appState: AppState;
@@ -31,6 +32,7 @@ const SearchOptions = observer(({ appState }: Props) => {
top: 0,
right: 0,
});
const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>();
const panelRef = useRef<HTMLDivElement>();
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
@@ -44,15 +46,27 @@ const SearchOptions = observer(({ appState }: Props) => {
}
}
const updateWidthAndPosition = () => {
const rect = buttonRef.current.getBoundingClientRect();
setMaxWidth(rect.right - 16);
setPosition({
top: rect.bottom,
right: document.body.clientWidth - rect.right,
});
};
useEffect(() => {
window.addEventListener('resize', updateWidthAndPosition);
return () => {
window.removeEventListener('resize', updateWidthAndPosition);
};
}, []);
return (
<Disclosure
open={open}
onChange={() => {
const rect = buttonRef.current.getBoundingClientRect();
setPosition({
top: rect.bottom,
right: document.body.clientWidth - rect.right,
});
updateWidthAndPosition();
setOpen(!open);
}}
>
@@ -68,8 +82,9 @@ const SearchOptions = observer(({ appState }: Props) => {
ref={panelRef}
style={{
...position,
maxWidth,
}}
className="sn-dropdown sn-dropdown--animated min-w-80 fixed grid gap-2 py-2"
className="sn-dropdown sn-dropdown--animated w-80 fixed grid gap-2 py-2"
onBlur={closeOnBlur}
>
<Switch

4
app/assets/javascripts/components/SessionsModal.tsx
View File

@@ -41,14 +41,14 @@ function useSessions(
(async () => {
setRefreshing(true);
const response = await application.getSessions();
if ('error' in response || !response.data) {
if ('error' in response || isNullOrUndefined(response.data)) {
if (response.error?.message) {
setErrorMessage(response.error.message);
} else {
setErrorMessage('An unknown error occured while loading sessions.');
}
} else {
const sessions = response.data;
const sessions = response.data as RemoteSession[];
setSessions(sessions);
setErrorMessage('');
}

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

@@ -30,9 +30,6 @@ export class NoteTagsState {
autocompleteTagHintVisible: computed,
clearAutocompleteSearch: action,
focusNextTag: action,
focusPreviousTag: action,
setAutocompleteInputFocused: action,
setAutocompleteSearchQuery: action,
setAutocompleteTagHintFocused: action,
@@ -41,7 +38,6 @@ export class NoteTagsState {
setFocusedTagUuid: action,
setTags: action,
setTagsContainerMaxWidth: action,
reloadTags: action,
});
appEventListeners.push(

60
app/assets/javascripts/ui_models/app_state/notes_state.ts
View File

@@ -28,6 +28,7 @@ export class NotesState {
top: 0,
left: 0,
};
contextMenuClickLocation: { x: number, y: number } = { x: 0, y: 0 };
contextMenuMaxHeight: number | 'auto' = 'auto';
showProtectedWarning = false;
@@ -47,6 +48,7 @@ export class NotesState {
trashedNotesCount: computed,
setContextMenuOpen: action,
setContextMenuClickLocation: action,
setContextMenuPosition: action,
setContextMenuMaxHeight: action,
setShowProtectedWarning: action,
@@ -183,6 +185,10 @@ export class NotesState {
this.contextMenuOpen = open;
}
setContextMenuClickLocation(location: { x: number, y: number }): void {
this.contextMenuClickLocation = location;
}
setContextMenuPosition(position: {
top?: number;
left: number;
@@ -195,6 +201,60 @@ export class NotesState {
this.contextMenuMaxHeight = maxHeight;
}
reloadContextMenuLayout(): void {
const { clientHeight } = document.documentElement;
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
const footerHeight = 32;
// Open up-bottom is default behavior
let openUpBottom = true;
const bottomSpace = clientHeight - footerHeight - this.contextMenuClickLocation.y;
const upSpace = this.contextMenuClickLocation.y;
// If not enough space to open up-bottom
if (maxContextMenuHeight > bottomSpace) {
// If there's enough space, open bottom-up
if (upSpace > maxContextMenuHeight) {
openUpBottom = false;
this.setContextMenuMaxHeight(
'auto'
);
// Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
} else {
if (upSpace > bottomSpace) {
this.setContextMenuMaxHeight(
upSpace - 2
);
openUpBottom = false;
} else {
this.setContextMenuMaxHeight(
bottomSpace - 2
);
}
}
} else {
this.setContextMenuMaxHeight(
'auto'
);
}
if (openUpBottom) {
this.setContextMenuPosition({
top: this.contextMenuClickLocation.y,
left: this.contextMenuClickLocation.x,
});
} else {
this.setContextMenuPosition({
bottom: clientHeight - this.contextMenuClickLocation.y,
left: this.contextMenuClickLocation.x,
});
}
}
async changeSelectedNotes(
mutate: (mutator: NoteMutator) => void
): Promise<void> {

2
app/assets/javascripts/views/application/application_view.ts
View File

@@ -170,7 +170,7 @@ class ApplicationViewCtrl extends PureViewCtrl<unknown, {
this.$location.search().demo === 'true' &&
!this.application.hasAccount()
) {
await this.application.setHost(
await this.application.setCustomHost(
'https://syncing-server-demo.standardnotes.org'
);
this.application.signIn(

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

@@ -20,7 +20,7 @@
)
.sk-app-bar-item
a.no-decoration.sk-label.title(
href='https://standardnotes.org/help',
href='https://standardnotes.com/help',
rel='noopener',
target='_blank'
)

2
app/assets/javascripts/views/notes/notes-view.pug
View File

@@ -132,7 +132,7 @@
ng-class="{'selected' : self.isNoteSelected(note.uuid) }"
ng-click='self.selectNote(note, true)'
)
.note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
.note-flags.flex.flex-wrap(ng-show='self.noteFlags[note.uuid].length > 0')
.flag(ng-class='flag.class', ng-repeat='flag in self.noteFlags[note.uuid]')
.label {{flag.text}}
.name(ng-show='note.title')

57
app/assets/javascripts/views/notes/notes_view.ts
View File

@@ -310,58 +310,11 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
await this.selectNote(note, true);
}
if (this.state.selectedNotes[note.uuid]) {
const { clientHeight } = document.documentElement;
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxContextMenuHeight = parseFloat(defaultFontSize) * 30;
const footerHeight = 32;
// Open up-bottom is default behavior
let openUpBottom = true;
const bottomSpace = clientHeight - footerHeight - e.clientY;
const upSpace = e.clientY;
// If not enough space to open up-bottom
if (maxContextMenuHeight > bottomSpace) {
// If there's enough space, open bottom-up
if (upSpace > maxContextMenuHeight) {
openUpBottom = false;
this.appState.notes.setContextMenuMaxHeight(
'auto'
);
// Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space
} else {
if (upSpace > bottomSpace) {
this.appState.notes.setContextMenuMaxHeight(
upSpace - 2
);
openUpBottom = false;
} else {
this.appState.notes.setContextMenuMaxHeight(
bottomSpace - 2
);
}
}
} else {
this.appState.notes.setContextMenuMaxHeight(
'auto'
);
}
if (openUpBottom) {
this.appState.notes.setContextMenuPosition({
top: e.clientY,
left: e.clientX,
});
} else {
this.appState.notes.setContextMenuPosition({
bottom: clientHeight - e.clientY,
left: e.clientX,
});
}
this.appState.notes.setContextMenuClickLocation({
x: e.clientX,
y: e.clientY,
});
this.appState.notes.reloadContextMenuLayout();
this.appState.notes.setContextMenuOpen(true);
}
}

2
app/assets/stylesheets/_notes.scss
View File

@@ -169,6 +169,7 @@
flex-direction: row;
align-items: center;
margin-bottom: 8px;
margin-top: -4px;
.flag {
padding: 4px;
@@ -176,6 +177,7 @@
padding-right: 6px;
border-radius: var(--sn-stylekit-general-border-radius);
margin-right: 4px;
margin-top: 4px;
&.info {
background-color: var(--sn-stylekit-info-color);

2
app/assets/templates/directives/actions-menu.pug
View File

@@ -1,7 +1,7 @@
.sn-component
.sk-menu-panel.dropdown-menu
a.no-decoration(
href='https://standardnotes.org/extensions',
href='https://standardnotes.com/extensions',
ng-if='self.state.extensions.length == 0',
rel='noopener',
target='blank'

4
app/assets/templates/directives/component-view.pug
View File

@@ -15,7 +15,7 @@
.sk-app-bar-item-column
div
a.sk-label.sk-base(
href='https://dashboard.standardnotes.org',
href='https://dashboard.standardnotes.com',
rel='noopener',
target='_blank'
)
@@ -29,7 +29,7 @@
.sk-app-bar-item
.sk-app-bar-item-column
a.sn-button.small.warning(
href='https://standardnotes.org/help/41/expired',
href='https://standardnotes.com/help/41/expired',
rel='noopener',
target='_blank'
) Help

2
app/assets/templates/directives/editor-menu.pug
View File

@@ -26,7 +26,7 @@
ng-if='editor.conflictOf'
) Conflicted copy
a.no-decoration(
href='https://standardnotes.org/extensions',
href='https://standardnotes.com/extensions',
ng-if='self.state.editors.length == 0',
rel='noopener',
target='blank'

4
app/assets/templates/directives/permissions-modal.pug
View File

@@ -17,10 +17,10 @@
| Extensions use an offline messaging system to communicate. Learn more at
|
a.sk-a.info(
href='https://standardnotes.org/permissions',
href='https://standardnotes.com/permissions',
rel='noopener',
target='_blank'
) https://standardnotes.org/permissions.
) https://standardnotes.com/permissions.
.sk-panel-footer
button.sn-button.info.block.w-full.text-base.py-3(
ng-click='ctrl.accept()'