fix: notes list options menu size regression (#910)
* feat: add new utility class * fix: notes list options menu sizing * fix: remove unnecessary class * feat: remove unnecessary class
This commit is contained in:
Aman Harwara
@@ -16,10 +16,6 @@ type Props = {
|
|||||||
|
|
||||||
export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
|
export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
|
||||||
({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
|
({ closeDisplayOptionsMenu, closeOnBlur, application, isOpen }) => {
|
||||||
const menuClassName =
|
|
||||||
'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
|
|
||||||
border-1 border-solid border-main text-sm z-index-dropdown-menu \
|
|
||||||
flex flex-col py-2 top-full bottom-0 left-2 absolute';
|
|
||||||
const [sortBy, setSortBy] = useState(() =>
|
const [sortBy, setSortBy] = useState(() =>
|
||||||
application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
|
application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)
|
||||||
);
|
);
|
||||||
@@ -117,154 +113,155 @@ flex flex-col py-2 top-full bottom-0 left-2 absolute';
|
|||||||
application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
|
application.setPreference(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
|
||||||
};
|
};
|
||||||
|
|
||||||
const menuRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={menuRef} className={menuClassName}>
|
<Menu
|
||||||
<Menu
|
className={
|
||||||
a11yLabel="Notes list options menu"
|
'sn-dropdown sn-dropdown--animated min-w-70 max-h-120 overflow-y-auto \
|
||||||
closeMenu={closeDisplayOptionsMenu}
|
border-1 border-solid border-main text-sm z-index-dropdown-menu \
|
||||||
isOpen={isOpen}
|
flex flex-col py-2 top-full left-2 absolute'
|
||||||
|
}
|
||||||
|
a11yLabel="Notes list options menu"
|
||||||
|
closeMenu={closeDisplayOptionsMenu}
|
||||||
|
isOpen={isOpen}
|
||||||
|
>
|
||||||
|
<div className="px-3 my-1 text-xs font-semibold color-text uppercase">
|
||||||
|
Sort by
|
||||||
|
</div>
|
||||||
|
<MenuItem
|
||||||
|
className="py-2"
|
||||||
|
type={MenuItemType.RadioButton}
|
||||||
|
onClick={toggleSortByDateModified}
|
||||||
|
checked={sortBy === CollectionSort.UpdatedAt}
|
||||||
|
onBlur={closeOnBlur}
|
||||||
>
|
>
|
||||||
<div className="px-3 my-1 text-xs font-semibold color-text uppercase">
|
<div className="flex flex-grow items-center justify-between">
|
||||||
Sort by
|
<span>Date modified</span>
|
||||||
|
{sortBy === CollectionSort.UpdatedAt ? (
|
||||||
|
sortReverse ? (
|
||||||
|
<Icon type="arrows-sort-up" className="color-neutral" />
|
||||||
|
) : (
|
||||||
|
<Icon type="arrows-sort-down" className="color-neutral" />
|
||||||
|
)
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<MenuItem
|
</MenuItem>
|
||||||
className="py-2"
|
<MenuItem
|
||||||
type={MenuItemType.RadioButton}
|
className="py-2"
|
||||||
onClick={toggleSortByDateModified}
|
type={MenuItemType.RadioButton}
|
||||||
checked={sortBy === CollectionSort.UpdatedAt}
|
onClick={toggleSortByCreationDate}
|
||||||
onBlur={closeOnBlur}
|
checked={sortBy === CollectionSort.CreatedAt}
|
||||||
>
|
onBlur={closeOnBlur}
|
||||||
<div className="flex flex-grow items-center justify-between">
|
>
|
||||||
<span>Date modified</span>
|
<div className="flex flex-grow items-center justify-between">
|
||||||
{sortBy === CollectionSort.UpdatedAt ? (
|
<span>Creation date</span>
|
||||||
sortReverse ? (
|
{sortBy === CollectionSort.CreatedAt ? (
|
||||||
<Icon type="arrows-sort-up" className="color-neutral" />
|
sortReverse ? (
|
||||||
) : (
|
<Icon type="arrows-sort-up" className="color-neutral" />
|
||||||
<Icon type="arrows-sort-down" className="color-neutral" />
|
) : (
|
||||||
)
|
<Icon type="arrows-sort-down" className="color-neutral" />
|
||||||
) : null}
|
)
|
||||||
</div>
|
) : null}
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
className="py-2"
|
|
||||||
type={MenuItemType.RadioButton}
|
|
||||||
onClick={toggleSortByCreationDate}
|
|
||||||
checked={sortBy === CollectionSort.CreatedAt}
|
|
||||||
onBlur={closeOnBlur}
|
|
||||||
>
|
|
||||||
<div className="flex flex-grow items-center justify-between">
|
|
||||||
<span>Creation date</span>
|
|
||||||
{sortBy === CollectionSort.CreatedAt ? (
|
|
||||||
sortReverse ? (
|
|
||||||
<Icon type="arrows-sort-up" className="color-neutral" />
|
|
||||||
) : (
|
|
||||||
<Icon type="arrows-sort-down" className="color-neutral" />
|
|
||||||
)
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
className="py-2"
|
|
||||||
type={MenuItemType.RadioButton}
|
|
||||||
onClick={toggleSortByTitle}
|
|
||||||
checked={sortBy === CollectionSort.Title}
|
|
||||||
onBlur={closeOnBlur}
|
|
||||||
>
|
|
||||||
<div className="flex flex-grow items-center justify-between">
|
|
||||||
<span>Title</span>
|
|
||||||
{sortBy === CollectionSort.Title ? (
|
|
||||||
sortReverse ? (
|
|
||||||
<Icon type="arrows-sort-up" className="color-neutral" />
|
|
||||||
) : (
|
|
||||||
<Icon type="arrows-sort-down" className="color-neutral" />
|
|
||||||
)
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItemSeparator />
|
|
||||||
<div className="px-3 py-1 text-xs font-semibold color-text uppercase">
|
|
||||||
View
|
|
||||||
</div>
|
</div>
|
||||||
<MenuItem
|
</MenuItem>
|
||||||
type={MenuItemType.SwitchButton}
|
<MenuItem
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
className="py-2"
|
||||||
checked={!hidePreview}
|
type={MenuItemType.RadioButton}
|
||||||
onChange={toggleHidePreview}
|
onClick={toggleSortByTitle}
|
||||||
onBlur={closeOnBlur}
|
checked={sortBy === CollectionSort.Title}
|
||||||
>
|
onBlur={closeOnBlur}
|
||||||
<div className="flex flex-col max-w-3/4">Show note preview</div>
|
>
|
||||||
</MenuItem>
|
<div className="flex flex-grow items-center justify-between">
|
||||||
<MenuItem
|
<span>Title</span>
|
||||||
type={MenuItemType.SwitchButton}
|
{sortBy === CollectionSort.Title ? (
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
sortReverse ? (
|
||||||
checked={!hideDate}
|
<Icon type="arrows-sort-up" className="color-neutral" />
|
||||||
onChange={toggleHideDate}
|
) : (
|
||||||
onBlur={closeOnBlur}
|
<Icon type="arrows-sort-down" className="color-neutral" />
|
||||||
>
|
)
|
||||||
Show date
|
) : null}
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
type={MenuItemType.SwitchButton}
|
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
|
||||||
checked={!hideTags}
|
|
||||||
onChange={toggleHideTags}
|
|
||||||
onBlur={closeOnBlur}
|
|
||||||
>
|
|
||||||
Show tags
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
type={MenuItemType.SwitchButton}
|
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
|
||||||
checked={!hideEditorIcon}
|
|
||||||
onChange={toggleEditorIcon}
|
|
||||||
onBlur={closeOnBlur}
|
|
||||||
>
|
|
||||||
Show editor icon
|
|
||||||
</MenuItem>
|
|
||||||
<div className="h-1px my-2 bg-border"></div>
|
|
||||||
<div className="px-3 py-1 text-xs font-semibold color-text uppercase">
|
|
||||||
Other
|
|
||||||
</div>
|
</div>
|
||||||
<MenuItem
|
</MenuItem>
|
||||||
type={MenuItemType.SwitchButton}
|
<MenuItemSeparator />
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
<div className="px-3 py-1 text-xs font-semibold color-text uppercase">
|
||||||
checked={!hidePinned}
|
View
|
||||||
onChange={toggleHidePinned}
|
</div>
|
||||||
onBlur={closeOnBlur}
|
<MenuItem
|
||||||
>
|
type={MenuItemType.SwitchButton}
|
||||||
Show pinned notes
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
</MenuItem>
|
checked={!hidePreview}
|
||||||
<MenuItem
|
onChange={toggleHidePreview}
|
||||||
type={MenuItemType.SwitchButton}
|
onBlur={closeOnBlur}
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
>
|
||||||
checked={!hideProtected}
|
<div className="flex flex-col max-w-3/4">Show note preview</div>
|
||||||
onChange={toggleHideProtected}
|
</MenuItem>
|
||||||
onBlur={closeOnBlur}
|
<MenuItem
|
||||||
>
|
type={MenuItemType.SwitchButton}
|
||||||
Show protected notes
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
</MenuItem>
|
checked={!hideDate}
|
||||||
<MenuItem
|
onChange={toggleHideDate}
|
||||||
type={MenuItemType.SwitchButton}
|
onBlur={closeOnBlur}
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
>
|
||||||
checked={showArchived}
|
Show date
|
||||||
onChange={toggleShowArchived}
|
</MenuItem>
|
||||||
onBlur={closeOnBlur}
|
<MenuItem
|
||||||
>
|
type={MenuItemType.SwitchButton}
|
||||||
Show archived notes
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
</MenuItem>
|
checked={!hideTags}
|
||||||
<MenuItem
|
onChange={toggleHideTags}
|
||||||
type={MenuItemType.SwitchButton}
|
onBlur={closeOnBlur}
|
||||||
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
>
|
||||||
checked={showTrashed}
|
Show tags
|
||||||
onChange={toggleShowTrashed}
|
</MenuItem>
|
||||||
onBlur={closeOnBlur}
|
<MenuItem
|
||||||
>
|
type={MenuItemType.SwitchButton}
|
||||||
Show trashed notes
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
</MenuItem>
|
checked={!hideEditorIcon}
|
||||||
</Menu>
|
onChange={toggleEditorIcon}
|
||||||
</div>
|
onBlur={closeOnBlur}
|
||||||
|
>
|
||||||
|
Show editor icon
|
||||||
|
</MenuItem>
|
||||||
|
<div className="h-1px my-2 bg-border"></div>
|
||||||
|
<div className="px-3 py-1 text-xs font-semibold color-text uppercase">
|
||||||
|
Other
|
||||||
|
</div>
|
||||||
|
<MenuItem
|
||||||
|
type={MenuItemType.SwitchButton}
|
||||||
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
|
checked={!hidePinned}
|
||||||
|
onChange={toggleHidePinned}
|
||||||
|
onBlur={closeOnBlur}
|
||||||
|
>
|
||||||
|
Show pinned notes
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
type={MenuItemType.SwitchButton}
|
||||||
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
|
checked={!hideProtected}
|
||||||
|
onChange={toggleHideProtected}
|
||||||
|
onBlur={closeOnBlur}
|
||||||
|
>
|
||||||
|
Show protected notes
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
type={MenuItemType.SwitchButton}
|
||||||
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
|
checked={showArchived}
|
||||||
|
onChange={toggleShowArchived}
|
||||||
|
onBlur={closeOnBlur}
|
||||||
|
>
|
||||||
|
Show archived notes
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
type={MenuItemType.SwitchButton}
|
||||||
|
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
|
||||||
|
checked={showTrashed}
|
||||||
|
onChange={toggleShowTrashed}
|
||||||
|
onBlur={closeOnBlur}
|
||||||
|
>
|
||||||
|
Show trashed notes
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user