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

fix: calculate menus height or width depending on browser font size

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-17 19:37:18 -03:00
parent 61321b8d8e
commit 3813537e5c
2 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -16,8 +16,6 @@ type Props = {
onSubmenuChange?: (submenuOpen: boolean) => void; onSubmenuChange?: (submenuOpen: boolean) => void;
}; };
const MAX_TAGS_MENU_HEIGHT = 320;
export const NotesOptions = observer( export const NotesOptions = observer(
({ appState, closeOnBlur, onSubmenuChange }: Props) => { ({ appState, closeOnBlur, onSubmenuChange }: Props) => {
const [tagsMenuOpen, setTagsMenuOpen] = useState(false); const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
@@ -28,14 +26,16 @@ export const NotesOptions = observer(
const toggleOn = (condition: (note: SNNote) => boolean) => { const toggleOn = (condition: (note: SNNote) => boolean) => {
const notesMatchingAttribute = notes.filter(condition); const notesMatchingAttribute = notes.filter(condition);
const notesNotMatchingAttribute = notes.filter((note) => !condition(note)); const notesNotMatchingAttribute = notes.filter(
return (notesMatchingAttribute.length > notesNotMatchingAttribute.length); (note) => !condition(note)
);
return notesMatchingAttribute.length > notesNotMatchingAttribute.length;
}; };
const notes = Object.values(appState.notes.selectedNotes); const notes = Object.values(appState.notes.selectedNotes);
const hidePreviews = toggleOn(note => note.hidePreview); const hidePreviews = toggleOn((note) => note.hidePreview);
const locked = toggleOn(note => note.locked); const locked = toggleOn((note) => note.locked);
const protect = toggleOn(note => note.protected); const protect = toggleOn((note) => note.protected);
const archived = notes.some((note) => note.archived); const archived = notes.some((note) => note.archived);
const unarchived = notes.some((note) => !note.archived); const unarchived = notes.some((note) => !note.archived);
const trashed = notes.some((note) => note.trashed); const trashed = notes.some((note) => note.trashed);
@@ -54,7 +54,7 @@ export const NotesOptions = observer(
useEffect(() => { useEffect(() => {
if (onSubmenuChange) { if (onSubmenuChange) {
onSubmenuChange(tagsMenuOpen); onSubmenuChange(tagsMenuOpen);
} }
}, [tagsMenuOpen, onSubmenuChange]); }, [tagsMenuOpen, onSubmenuChange]);
return ( return (
@@ -103,12 +103,17 @@ export const NotesOptions = observer(
<Disclosure <Disclosure
open={tagsMenuOpen} open={tagsMenuOpen}
onChange={() => { onChange={() => {
const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxTagsMenuWidth = parseFloat(defaultFontSize) * 20;
const buttonRect = tagsButtonRef.current.getBoundingClientRect(); const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const { offsetTop, offsetWidth } = tagsButtonRef.current; const { offsetTop, offsetWidth } = tagsButtonRef.current;
setTagsMenuPosition({ setTagsMenuPosition({
top: offsetTop, top: offsetTop,
right: right:
buttonRect.right + MAX_TAGS_MENU_HEIGHT > document.body.clientWidth buttonRect.right + maxTagsMenuWidth >
document.body.clientWidth
? offsetWidth ? offsetWidth
: -offsetWidth, : -offsetWidth,
}); });
@@ -157,7 +162,13 @@ export const NotesOptions = observer(
: appState.notes.addTagToSelectedNotes(tag); : appState.notes.addTagToSelectedNotes(tag);
}} }}
> >
<span className={appState.notes.isTagInSelectedNotes(tag) ? 'font-bold' : ''}> <span
className={
appState.notes.isTagInSelectedNotes(tag)
? 'font-bold'
: ''
}
>
{tag.title} {tag.title}
</span> </span>
</button> </button>
@@ -173,10 +184,7 @@ export const NotesOptions = observer(
appState.notes.setPinSelectedNotes(true); appState.notes.setPinSelectedNotes(true);
}} }}
> >
<Icon <Icon type="pin" className={iconClass} />
type="pin"
className={iconClass}
/>
Pin to top Pin to top
</button> </button>
)} )}
@@ -188,10 +196,7 @@ export const NotesOptions = observer(
appState.notes.setPinSelectedNotes(false); appState.notes.setPinSelectedNotes(false);
}} }}
> >
<Icon <Icon type="unpin" className={iconClass} />
type="unpin"
className={iconClass}
/>
Unpin Unpin
</button> </button>
)} )}
@@ -203,10 +208,7 @@ export const NotesOptions = observer(
appState.notes.setArchiveSelectedNotes(true); appState.notes.setArchiveSelectedNotes(true);
}} }}
> >
<Icon <Icon type="archive" className={iconClass} />
type="archive"
className={iconClass}
/>
Archive Archive
</button> </button>
)} )}
@@ -218,10 +220,7 @@ export const NotesOptions = observer(
appState.notes.setArchiveSelectedNotes(false); appState.notes.setArchiveSelectedNotes(false);
}} }}
> >
<Icon <Icon type="unarchive" className={iconClass} />
type="unarchive"
className={iconClass}
/>
Unarchive Unarchive
</button> </button>
)} )}
@@ -233,7 +232,7 @@ export const NotesOptions = observer(
await appState.notes.setTrashSelectedNotes(true); await appState.notes.setTrashSelectedNotes(true);
}} }}
> >
<Icon type='trash' className={iconClass} /> <Icon type="trash" className={iconClass} />
Move to Trash Move to Trash
</button> </button>
)} )}
@@ -246,7 +245,7 @@ export const NotesOptions = observer(
await appState.notes.setTrashSelectedNotes(false); await appState.notes.setTrashSelectedNotes(false);
}} }}
> >
<Icon type='restore' className={iconClass} /> <Icon type="restore" className={iconClass} />
Restore Restore
</button> </button>
<button <button
@@ -267,10 +266,15 @@ export const NotesOptions = observer(
}} }}
> >
<div className="flex items-start"> <div className="flex items-start">
<Icon type="trash-sweep" className="fill-current color-danger mr-2" /> <Icon
type="trash-sweep"
className="fill-current color-danger mr-2"
/>
<div className="flex-row"> <div className="flex-row">
<div className="color-danger">Empty Trash</div> <div className="color-danger">Empty Trash</div>
<div className="text-xs">{appState.notes.trashedNotesCount} notes in Trash</div> <div className="text-xs">
{appState.notes.trashedNotesCount} notes in Trash
</div>
</div> </div>
</div> </div>
</button> </button>

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

@@ -62,7 +62,6 @@ type NoteFlag = {
*/ */
const MIN_NOTE_CELL_HEIGHT = 51.0; const MIN_NOTE_CELL_HEIGHT = 51.0;
const DEFAULT_LIST_NUM_NOTES = 20; const DEFAULT_LIST_NUM_NOTES = 20;
const MAX_CONTEXT_MENU_HEIGHT = 245;
const ELEMENT_ID_SEARCH_BAR = 'search-bar'; const ELEMENT_ID_SEARCH_BAR = 'search-bar';
const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable'; const ELEMENT_ID_SCROLL_CONTAINER = 'notes-scrollable';
@@ -310,7 +309,11 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
} }
if (this.state.selectedNotes[note.uuid]) { if (this.state.selectedNotes[note.uuid]) {
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight;
if (e.clientY > clientHeight - MAX_CONTEXT_MENU_HEIGHT) { const defaultFontSize = window.getComputedStyle(
document.documentElement
).fontSize;
const maxContextMenuHeight = parseFloat(defaultFontSize) * 20;
if (e.clientY > clientHeight - maxContextMenuHeight) {
this.application.getAppState().notes.setContextMenuPosition({ this.application.getAppState().notes.setContextMenuPosition({
bottom: clientHeight - e.clientY, bottom: clientHeight - e.clientY,
left: e.clientX, left: e.clientX,