diff --git a/packages/app/constants/defaultSettings.json b/packages/app/constants/defaultSettings.json
index c29342f5..9280f885 100755
--- a/packages/app/constants/defaultSettings.json
+++ b/packages/app/constants/defaultSettings.json
@@ -6,14 +6,12 @@
"notifications_vibrate": true,
"notifications_sound_volume": 50,
"longPressDelay": 600,
- "autoCollapseDelay": 500,
- "autoCollapseDelayEnabled": true,
+ "sidebar.collapsable": true,
+ "sidebar.collapse_delay_time": 500,
"haptic_feedback": true,
- "collapseOnLooseFocus": true,
"style.auto_darkMode": true,
"feed_max_fetch": 20,
"style.compactMode": false,
- "sidebar.floating": false,
"player.compressor": false,
"language": "en"
}
\ No newline at end of file
diff --git a/packages/app/constants/settings/apparence/index.jsx b/packages/app/constants/settings/apparence/index.jsx
index 13978853..860aace9 100755
--- a/packages/app/constants/settings/apparence/index.jsx
+++ b/packages/app/constants/settings/apparence/index.jsx
@@ -12,17 +12,6 @@ export default {
group: "app",
order: 1,
settings: [
- {
- id: "sidebar.floating",
- title: "Floating Sidebar",
- description: "Make the sidebar float over layout content.",
- component: "Switch",
- icon: "MdOutlineLastPage",
- group: "layout",
- emitEvent: "app.softReload",
- storaged: true,
- mobile: false,
- },
{
id: "style.reduceAnimations",
group: "animations",
diff --git a/packages/app/constants/settings/general/index.jsx b/packages/app/constants/settings/general/index.jsx
index 84e25b0e..a564c3dc 100755
--- a/packages/app/constants/settings/general/index.jsx
+++ b/packages/app/constants/settings/general/index.jsx
@@ -148,24 +148,23 @@ export default {
mobile: false,
},
{
- id: "collapseOnLooseFocus",
- storaged: true,
+ id: "sidebar.collapsable",
group: "sidebar",
component: "Switch",
icon: "Columns",
title: "Auto Collapse",
- description: "Collapse the sidebar when loose focus",
+ description: "Allow to collapse the sidebar when loose focus.",
emitEvent: "settingChanged.sidebar_collapse",
+ storaged: true,
mobile: false,
},
{
- id: "autoCollapseDelay",
- storaged: true,
+ id: "sidebar.collapse_delay_time",
group: "sidebar",
component: "Slider",
icon: "MdTimer",
dependsOn: {
- "collapseOnLooseFocus": true
+ "sidebar.collapsable": true
},
title: "Auto Collapse timeout",
description: "Set the delay before the sidebar is collapsed",
@@ -181,6 +180,7 @@ export default {
2000: "2s",
}
},
+ storaged: true,
mobile: false,
},
{
diff --git a/packages/app/src/components/Layout/sidebar/components/editor/index.jsx b/packages/app/src/components/Layout/sidebar/components/editor/index.jsx
deleted file mode 100755
index 8488a9dd..00000000
--- a/packages/app/src/components/Layout/sidebar/components/editor/index.jsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import React from "react"
-import { Button } from "antd"
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
-
-import { ActionsBar } from "components"
-import { Icons, createIconRender } from "components/Icons"
-
-import sidebarItems from "schemas/sidebar"
-import { sidebarKeys as defaultSidebarKeys } from "schemas/defaultSettings"
-
-import Selector from "../selector"
-import "./index.less"
-
-const allItemsMap = [...sidebarItems].map((item, index) => {
- item.key = index.toString()
- item.index = index
- return item
-})
-
-const getAllItems = () => {
- let items = {}
-
- allItemsMap.forEach((item) => {
- items[item.id] = {
- ...item,
- content: (
- <>
- {createIconRender(item.icon)} {item.title}
-
- ),
- }
- })
-
- return items
-}
-
-const allItems = getAllItems()
-
-export default class SidebarEditor extends React.Component {
- state = {
- items: [],
- lockedIndex: [],
- }
-
- componentDidMount() {
- this.loadItems()
- }
-
- loadItems = () => {
- const storagedKeys = window.app.cores.settings.get("sidebarKeys") ?? defaultSidebarKeys
- const active = []
- const lockedIndex = []
-
- // set current active items
- storagedKeys.forEach((key) => {
- if (typeof allItems[key] !== "undefined") {
- if (allItems[key].locked) {
- lockedIndex.push(allItems[key].index)
- }
- active.push(key)
- }
- })
-
- this.setState({ items: active, lockedIndex })
- }
-
- onSave = () => {
- window.app.cores.settings.set("sidebarKeys", this.state.items)
- window.app.SidebarController.toggleEdit(false)
- }
-
- onDiscard = () => {
- window.app.SidebarController.toggleEdit(false)
- }
-
- onSetDefaults = () => {
- window.app.cores.settings.set("sidebarKeys", defaultSidebarKeys)
- this.loadItems()
- }
-
- reorder = (list, startIndex, endIndex) => {
- const result = Array.from(list)
- const [removed] = result.splice(startIndex, 1)
- result.splice(endIndex, 0, removed)
-
- return result
- }
-
- onDragEnd = (result) => {
- if (!result.destination) {
- return false
- }
-
- if (this.state.lockedIndex.includes(result.destination.index)) {
- return false
- }
-
- if (allItems[result.draggableId].locked) {
- console.warn("Cannot move an locked item")
- return false
- }
-
- const items = this.reorder(this.state.items, result.source.index, result.destination.index)
-
- this.setState({ items })
- }
-
- deleteItem = (key) => {
- // check if item is locked
- if (allItems[key].locked) {
- console.warn("Cannot delete an locked item")
- return false
- }
-
- this.setState({ items: this.state.items.filter((item) => item !== key) })
- }
-
- addItem = () => {
- const keys = []
-
- // filter by active keys
- allItemsMap.forEach((item) => {
- if (!this.state.items.includes(item.id)) {
- keys.push(item.id)
- }
- })
-
- window.app.DrawerController.open("sidebar_item_selector", Selector, {
- props: {
- width: "65%",
- },
- componentProps: {
- items: keys
- },
- onDone: (drawer, selectedKeys) => {
- drawer.close()
-
- if (Array.isArray(selectedKeys)) {
- const update = this.state.items ?? []
-
- selectedKeys.forEach((key) => {
- if (update.includes(key)) {
- return false
- }
-
- update.push(key)
- })
-
- this.setState({ items: update })
- }
- },
- })
- }
-
- render() {
- const grid = 6
-
- const getItemStyle = (isDragging, draggableStyle, component, isDraggingOver) => ({
- cursor: component.locked ? "not-allowed" : "grab",
- userSelect: "none",
- padding: grid * 2,
- margin: `0 0 ${grid}px 0`,
- borderRadius: "6px",
- transition: "150ms all ease-in-out",
- width: "100%",
-
- border: isDraggingOver ? "2px dashed #e0e0e0" : "none",
-
- color: component.locked ? "rgba(145,145,145,0.6)" : "#000",
- background: component.locked
- ? "rgba(145, 145, 145, 0.2)"
- : isDragging
- ? "rgba(145, 145, 145, 0.5)"
- : "transparent",
- ...draggableStyle,
- })
-
- const getListStyle = (isDraggingOver) => ({
- background: "transparent",
- transition: "150ms all ease-in-out",
-
- padding: grid,
- width: "100%",
- })
-
- return (
-
-
-
- {(droppableProvided, droppableSnapshot) => (
-
- {this.state.items.map((key, index) => {
- const itemComponent = allItems[key]
-
- return (
-
- {(draggableProvided, draggableSnapshot) => (
-
- {!allItems[key].locked &&
- this.deleteItem(key)}
- className="sidebar_editor_deleteBtn"
- />
- }
- {itemComponent.icon && createIconRender(itemComponent.icon)}
- {itemComponent.title ?? itemComponent.id}
-
- )}
-
- )
- })}
- {droppableProvided.placeholder}
-
-
-
-
- }
- onClick={this.addItem}
- />
-
-
- }
- type="primary"
- onClick={this.onSave}
- >
- Done
-
-
-
-
- } >Cancel
-
-
-
-
-
-
-
- Select items to add
-
- {this.state.items && (
- {
- const item = allItems[i.key]
-
- return (
-
- {createIconRender(item.icon)}
- {item.title ?? item.id}
-
- )
- }}
- />
- )}
-
- )
- }
-}
diff --git a/packages/app/src/components/Layout/sidebar/components/selector/index.less b/packages/app/src/components/Layout/sidebar/components/selector/index.less
deleted file mode 100755
index a9e1a0d6..00000000
--- a/packages/app/src/components/Layout/sidebar/components/selector/index.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.sidebar_selector_item{
- height: fit-content;
- padding: 0;
-}
\ No newline at end of file
diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/components/Layout/sidebar/index.jsx
index 6623cdda..e9ba3492 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/components/Layout/sidebar/index.jsx
@@ -1,9 +1,10 @@
import React from "react"
-import { Menu, Avatar, Button, Dropdown } from "antd"
-import { Translation } from "react-i18next"
-import classnames from "classnames"
-
import config from "config"
+import classnames from "classnames"
+import { Translation } from "react-i18next"
+import { Motion, spring } from "react-motion"
+import { Menu, Avatar, Dropdown } from "antd"
+
import { Icons, createIconRender } from "components/Icons"
import sidebarItems from "schemas/sidebar"
@@ -34,259 +35,136 @@ const onClickHandlers = {
}
}
-const getSidebarComponents = () => {
- const items = {}
-
- sidebarItems.forEach((item, index) => {
- items[item.id] = {
- ...item,
- index,
- content: (
- <>
- {createIconRender(item.icon)} {item.title}
-
- ),
+const generateTopItems = () => {
+ return sidebarItems.map((item) => {
+ return {
+ key: item.id,
+ icon: createIconRender(item.icon),
+ label:
+ {t => t(item.title ?? item.id)}
+ ,
+ disabled: item.disabled,
+ children: item.children,
}
})
-
- return items
}
-const generateItems = () => {
- const components = getSidebarComponents()
-
- const itemsMap = []
- const pathResolvers = {}
-
- Object.keys(components).forEach((key, index) => {
- const component = components[key]
-
- if (typeof component.path !== "undefined") {
- pathResolvers[component.id] = component.path
- }
-
- itemsMap.push(component)
- })
-
- return {
- itemsMap,
- pathResolvers,
+const ActionMenuItems = [
+ {
+ key: "account",
+ label: <>
+
+
+ {t => t("Account")}
+
+ ,
+ },
+ {
+ type: "divider"
+ },
+ {
+ key: "switch_account",
+ label: <>
+
+
+ {t => t("Switch account")}
+
+ ,
+ },
+ {
+ key: "logout",
+ label: <>
+
+
+ {t => t("Logout")}
+
+ ,
+ danger: true
}
-}
-
-const CustomRender = (props) => {
- const handleClickOutside = (event) => {
- if (props.sidebarRef.current && !props.sidebarRef.current.contains(event.target)) {
- if (event.target.closest(".ant-select-item")) {
- return
- }
-
- props.closeRender()
- }
- }
-
- React.useEffect(() => {
- document.addEventListener("mousedown", handleClickOutside)
-
- return () => {
- document.removeEventListener("mousedown", handleClickOutside)
- }
- }, [])
-
- return
-
- {
- props.customRenderTitle ?? null
- }
-
-
-
- {props.children}
-
-
- {
- options.icon && createIconRender(options.icon)
+ updatedValue = updatedValue.map((item) => {
+ if (item.id === id) {
+ item.props = {
+ ...item.props,
+ ...newProps,
+ }
}
- {
- options.title &&
-
- {t => t(options.title)}
-
-
- }
- ,
- customRender: React.createElement(render, {
- ...options.props ?? {},
- close: this.closeRender,
})
- })
- }
- closeRender = () => {
- this.setState({
- customRenderTitle: null,
- customRender: null,
- })
- }
-
- loadItems = async () => {
- const generation = generateItems()
-
- // update states
- await this.setState({
- menus: generation.itemsMap,
- pathResolvers: generation.pathResolvers,
- })
- }
-
- renderMenuItems(items) {
- return items.map((item) => {
- if (Array.isArray(item.children)) {
- return
-
- {t => t(item.title)}
-
- }
- {...item.props}
- disabled={item.disabled ?? false}
- >
- {this.renderMenuItems(item.children)}
-
+ this.setState({
+ bottomItems: updatedValue
+ })
+ },
+ attachBottomItem: (id, children, options) => {
+ if (!id) {
+ throw new Error("ID is required")
}
- return
-
- {t => t(item.title ?? item.id)}
-
-
- })
+ if (!children) {
+ throw new Error("Children is required")
+ }
+
+ if (this.state.bottomItems.find((item) => item.id === id)) {
+ throw new Error("Item already exists")
+ }
+
+ let updatedValue = this.state.bottomItems
+
+ updatedValue.push({
+ id,
+ children,
+ ...options
+ })
+
+ this.setState({
+ bottomItems: updatedValue
+ })
+ },
+ removeBottomItem: (id) => {
+ let updatedValue = this.state.bottomItems
+
+ updatedValue = updatedValue.filter((item) => item.id !== id)
+
+ this.setState({
+ bottomItems: updatedValue
+ })
+ },
+ }
+
+ componentDidMount = async () => {
+ setTimeout(() => {
+ this.toggleVisibility(true)
+
+ if (app.cores.settings.is("sidebar.collapsable", false)) {
+ this.toggleExpanded(true)
+ }
+ }, 10)
+ }
+
+ componentWillUnmount = () => {
+ delete app.layout.sidebar
}
handleClick = (e) => {
@@ -309,13 +187,9 @@ export default class Sidebar extends React.Component {
window.app.cores.sound.useUIAudio("sidebar.switch_tab")
- if (typeof this.state.pathResolvers === "object") {
- if (typeof this.state.pathResolvers[e.key] !== "undefined") {
- return window.app.location.push(`/${this.state.pathResolvers[e.key]}`, 150)
- }
- }
+ const item = sidebarItems.find((item) => item.id === e.key)
- return window.app.location.push(`/${e.key}`, 150)
+ return window.app.location.push(`/${item.path ?? e.key}`, 150)
}
toggleExpanded = (to, force) => {
@@ -337,7 +211,7 @@ export default class Sidebar extends React.Component {
if (!to) {
this.collapseDebounce = setTimeout(() => {
this.setState({ expanded: to })
- }, window.app.cores.settings.get("autoCollapseDelay") ?? 500)
+ }, window.app.cores.settings.get("sidebar.collapse_delay_time") ?? 500)
} else {
this.setState({ expanded: to })
}
@@ -349,14 +223,16 @@ export default class Sidebar extends React.Component {
this.setState({ visible: to ?? !this.state.visible })
}
- toggleElevation = (to) => {
- this.setState({ elevated: to ?? !this.state.elevated })
- }
-
onMouseEnter = () => {
if (!this.state.visible) return
- if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
+ if (window.app.cores.settings.is("sidebar.collapsable", false)) {
+ if (!this.state.expanded) {
+ this.toggleExpanded(true)
+ }
+
+ return
+ }
this.toggleExpanded(true)
}
@@ -364,7 +240,7 @@ export default class Sidebar extends React.Component {
handleMouseLeave = () => {
if (!this.state.visible) return
- if (window.app.cores.settings.is("collapseOnLooseFocus", false)) return
+ if (window.app.cores.settings.is("sidebar.collapsable", false)) return
this.toggleExpanded(false)
}
@@ -378,42 +254,6 @@ export default class Sidebar extends React.Component {
this.setState({ dropdownOpen: to })
}
- generateDropdownItems = () => {
- return [
- {
- key: "account",
- label: <>
-
-
- {t => t("Account")}
-
- ,
- },
- {
- type: "divider"
- },
- {
- key: "switch_account",
- label: <>
-
-
- {t => t("Switch account")}
-
- ,
- },
- {
- key: "logout",
- label: <>
-
-
- {t => t("Logout")}
-
- ,
- danger: true
- }
- ]
- }
-
onClickDropdownItem = (item) => {
const handler = onClickHandlers[item.key]
@@ -423,123 +263,128 @@ export default class Sidebar extends React.Component {
}
render() {
- if (!this.state.menus) return null
-
const defaultSelectedKey = window.location.pathname.replace("/", "")
- return
- {
- this.state.customRender &&
+ {({ x }) => {
+ return
- {this.state.customRender}
-
- }
+
- {
- !this.state.customRender && <>
-
-
-
+
+
+
+
-
-
+
+
- {this.renderMenuItems(this.state.menus)}
-
-
-
-
-
+
}>
+
+ {t => t("Notifications")}
+
+
+
}>
+
+ {t => t("Settings")}
+
+
+
+ {
+ app.userData &&
+
+
+
+
+ }
+
+ {
+ !app.userData &&
}>
+
+ {t => t("Login")}
+
+
+ }
+
+
-
- }
-
+