layouts
An app state of the layouts.
You can obtain the layouts state and integrate it with React components.
You can change the layout components with Layout Manager.
Data Structure
A map of Record<string, LayoutComponents> where:
string: The layout nameLayoutComponents: An array of React component class names
Get the layouts state manually:
const { layouts } = inkdrop.store.getState()
Connect the state with your React component:
import { useSelector } from 'react-redux'
const selector = ({ layouts }) => layouts
const MyComponent = props => {
const layouts = useSelector(selector)
// render
}
Example values
{
"main:full": [
"ModalLayout",
"SideBarLayout",
"NoteListBarLayout",
"EditorLayout"
],
"main:slim": [
"ModalLayout",
"NoteListBarLayout",
"EditorLayout"
],
"main:distraction-free": [
"ModalLayout",
"EditorLayout"
],
"sidebar": [
...
}
Available Layouts
main:full
The main layout that consists of 3 columns.
Default values
[
"ModalLayout",
"SideBarLayout",
"NoteListBarLayout",
"EditorLayout"
]
main:slim
The main layout that consists of 2 columns.
Default values
[
"ModalLayout",
"NoteListBarLayout",
"EditorLayout"
]
main:distraction-free
The main layout for distraction-free mode.
Default values
[
"ModalLayout",
"EditorLayout"
]
sidebar
The sidebar layout
Default values
[
"SideBarHeader",
"SideBarNavigation",
"SideBarSyncStatusView",
"SideBarPluginUpdatesNotificationView"
]
sidebar-menu
The menu layout of sidebar
Default values
[
"SideBarMenuItemAllNotes",
"SideBarMenuSectionNotebooks",
"SideBarMenuBookListRoot",
"SideBarMenuItemTrash",
"SideBarMenuSectionStatus",
"SideBarMenuStatusList",
"SideBarMenuSectionTags",
"SideBarMenuTagList"
]
sidebar-workspace-menu
The menu layout of sidebar workspace menu
Default values
[
"SidebarWorkspaceMenuTitle",
"SideBarWorkspaceMenuAllNotes",
"SideBarMenuSectionNotebooks",
"SideBarWorkspaceMenuBookList",
"SideBarMenuSectionStatus",
"SidebarWorkspaceMenuStatusList",
"SideBarMenuSectionTags",
"SidebarWorkspaceMenuTagList"
]
note-list-bar
The menu layout of note list bar
Default values
[
"NoteListHeader",
"NoteListSearchBar",
"NoteListBarContainer"
]
note-list-bar:trash
The trash menu layout of note list bar
Default values
[
"NoteListHeader",
"NoteListBarContainer"
]
mde
The mde layout
Default values
[
"Editor"
]
editor
The editor layout
Default values
[
"EditorDrawer",
"EditorFloatingActions",
"EditorHeaderLayout",
"EditorMetaLayout",
"EditorToolbar",
"MDELayout",
"MDESearchBar",
"EditorStatusBarLayout"
]
editor-header
The header layout of the editor
Default values
[
"EditorHeaderTitleInput",
"EditorHeaderMore"
]
editor-meta
The meta pane layout of the editor
Default values
[
"EditorMetaNotebook",
"EditorMetaStatusPicker",
"EditorMetaTags"
]
modal
The layout for modal components
Default values
[
"NewNotebookDialog",
"DeleteNotebookDialog",
"RenameNotebookDialog",
"TagSettingsDialog",
"DeleteTagDialog",
"AssistiveErrorDialog",
"MoveNotesDialog",
"MoveNotebookDialog",
"EmptyTrashDialog",
"ShareNoteDialog",
"NoteRevisionsDialog"
]
editor-toolbar
The toolbar layout of the editor
Default values
[]
editor-drawer-menu
The editor drawer menu items
Default values
[
"EditorDrawerSectionHeaderNoteInformation",
"EditorDrawerMenuItemNotebook",
"EditorDrawerItemStatus",
"EditorDrawerItemTags",
"EditorDrawerItemCreatedDate",
"EditorDrawerItemUpdatedDate",
"EditorDrawerSeparator-1",
"EditorDrawerSectionHeaderActions",
"EditorDrawerActionButtonDuplicate",
"EditorDrawerActionButtonCopyNoteLink",
"EditorDrawerActionButtonPinToTop",
"EditorDrawerActionButtonOpenNoteInSeparateWindow",
"EditorDrawerSeparator-2",
"EditorDrawerActionButtonDeleteNote",
"EditorDrawerActionButtonRevisionHistory",
"EditorDrawerSeparator-3",
"EditorDrawerActionButtonShare"
]
editor-status-bar
The status bar layout of the editor
Default values
[]
editor-floating-actions
The floating action buttons on the editor
Default values
[
"EditorFloatingActionTogglePreview",
"EditorFloatingActionToggleSideBySide"
]