From e28efd1698503fc92da6cc50bde55247201ac562 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Fri, 30 Jun 2023 10:36:48 +0000 Subject: [PATCH] refactor & restyle sidebar --- packages/app/constants/defaultSettings.json | 6 +- .../constants/settings/apparence/index.jsx | 11 - .../app/constants/settings/general/index.jsx | 12 +- .../sidebar/components/editor/index.jsx | 267 -------- .../sidebar/components/editor/index.less | 14 - .../Layout/sidebar/components/index.js | 1 - .../sidebar/components/selector/index.jsx | 76 --- .../sidebar/components/selector/index.less | 4 - .../src/components/Layout/sidebar/index.jsx | 629 +++++++----------- .../src/components/Layout/sidebar/index.less | 116 +--- packages/app/src/cores/player/player.core.js | 4 +- packages/app/src/pages/live/[key].jsx | 4 +- packages/app/src/pages/lyrics/index.jsx | 8 +- packages/app/src/theme/index.less | 4 - packages/app/src/theme/vars.less | 18 +- 15 files changed, 287 insertions(+), 887 deletions(-) delete mode 100755 packages/app/src/components/Layout/sidebar/components/editor/index.jsx delete mode 100755 packages/app/src/components/Layout/sidebar/components/editor/index.less delete mode 100755 packages/app/src/components/Layout/sidebar/components/index.js delete mode 100755 packages/app/src/components/Layout/sidebar/components/selector/index.jsx delete mode 100755 packages/app/src/components/Layout/sidebar/components/selector/index.less 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} -
- )} - - - - -
-
-
- -
- -
- -
-
- -
- -
- ) - } -} diff --git a/packages/app/src/components/Layout/sidebar/components/editor/index.less b/packages/app/src/components/Layout/sidebar/components/editor/index.less deleted file mode 100755 index d6ad8388..00000000 --- a/packages/app/src/components/Layout/sidebar/components/editor/index.less +++ /dev/null @@ -1,14 +0,0 @@ -.app_sidebar_sider_edit .ant-layout-sider-children{ - margin-top: 15px!important; - - .app_sidebar_menu_wrapper { - opacity: 0; - height: 0; - overflow: hidden; - } -} - -.sidebar_editor_deleteBtn:hover{ - color: red; - cursor: pointer; -} \ No newline at end of file diff --git a/packages/app/src/components/Layout/sidebar/components/index.js b/packages/app/src/components/Layout/sidebar/components/index.js deleted file mode 100755 index 75ce2055..00000000 --- a/packages/app/src/components/Layout/sidebar/components/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as SidebarEditor } from './editor'; \ No newline at end of file diff --git a/packages/app/src/components/Layout/sidebar/components/selector/index.jsx b/packages/app/src/components/Layout/sidebar/components/selector/index.jsx deleted file mode 100755 index bfd8dcee..00000000 --- a/packages/app/src/components/Layout/sidebar/components/selector/index.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from "react" -import { Icons, createIconRender } from "components/Icons" -import { SelectableList } from "components" -import { List } from "antd" - -import sidebarItems from "schemas/sidebar" - -import "./index.less" - -const getStoragedKeys = () => { - return window.app.cores.settings.get("sidebarKeys") ?? [] -} - -const getAllItems = () => { - const obj = {} - - sidebarItems.forEach((item) => { - obj[item.id] = item - }) - - return obj -} - -const allItems = getAllItems() - -export default class SidebarItemSelector extends React.Component { - state = { - items: null, - } - - componentDidMount = () => { - const source = (this.props.items ?? getStoragedKeys() ?? []).map((key) => { - return { key } - }) - - this.setState({ items: source }) - } - - handleDone = (selectedKeys) => { - if (typeof this.props.onDone === "function") { - this.props.onDone(selectedKeys) - } - } - - render() { - return ( -
-

- 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} -
-
-} - -const handleRenderIcon = (icon) => { - if (typeof icon === "undefined") { - return null - } - return createIconRender(icon) -} +] export default class Sidebar extends React.Component { - constructor(props) { - super(props) + state = { + visible: false, + expanded: false, - this.controller = window.app["SidebarController"] = { - toggleVisibility: this.toggleVisibility, - toggleElevation: this.toggleElevation, - toggleCollapse: this.toggleExpanded, - isVisible: () => this.state.visible, - isExpanded: () => this.state.expanded, - setCustomRender: this.setRender, - closeCustomRender: this.closeRender, - updateBottomItemProps: (id, newProps) => { - let updatedValue = this.state.bottomItems - - updatedValue = updatedValue.map((item) => { - if (item.id === id) { - item.props = { - ...item.props, - ...newProps, - } - } - }) - - this.setState({ - bottomItems: updatedValue - }) - }, - attachBottomItem: (id, children, options) => { - if (!id) { - throw new Error("ID is required") - } - - 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 - }) - } - } - - this.state = { - visible: false, - elevated: false, - expanded: false, - dropdownOpen: false, - pathResolvers: null, - menus: null, - - customRenderTitle: null, - customRender: null, - - bottomItems: [], - } - - // handle sidedrawer open/close - window.app.eventBus.on("sidedrawer.hasDrawers", () => { - this.toggleElevation(true) - }) - window.app.eventBus.on("sidedrawer.noDrawers", () => { - this.toggleElevation(false) - }) + topItems: generateTopItems(), + bottomItems: [], } sidebarRef = React.createRef() collapseDebounce = null - componentDidMount = async () => { - await this.loadItems() + interface = window.app.layout.sidebar = { + toggleVisibility: this.toggleVisibility, + toggleCollapse: this.toggleExpanded, + isVisible: () => this.state.visible, + isExpanded: () => this.state.expanded, + updateBottomItemProps: (id, newProps) => { + let updatedValue = this.state.bottomItems - setTimeout(() => { - this.controller.toggleVisibility(true) - }, 100) - } - - setRender = async (render, options = {}) => { - if (!typeof render === "function") { - throw new Error("Render is required to be a function") - } - - await this.setState({ - customRenderTitle:
- { - 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)} - -
- -
- - { - this.state.bottomItems.map((item) => { - if (item.noContainer) { - return React.createElement(item.children, item.childrenProps) - } - - return - { - React.createElement(item.children, item.childrenProps) + + { + this.state.bottomItems.map((item) => { + if (item.noContainer) { + return React.createElement(item.children, item.childrenProps) } - - }) - } - } > - - {(t) => t("Search")} - - - }> - - {t => t("Notifications")} - - - }> - - {t => t("Settings")} - - - { - app.userData && - - - - - } - { - !app.userData && }> + + return + { + React.createElement(item.children, item.childrenProps) + } + + }) + } + } > - {t => t("Login")} + {(t) => t("Search")} - } - + }> + + {t => t("Notifications")} + + + }> + + {t => t("Settings")} + + + + { + app.userData && + + + + + } + + { + !app.userData && }> + + {t => t("Login")} + + + } + +
- - } -
+
+ }} + } } \ No newline at end of file diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/components/Layout/sidebar/index.less index 65ea84d6..6191d358 100755 --- a/packages/app/src/components/Layout/sidebar/index.less +++ b/packages/app/src/components/Layout/sidebar/index.less @@ -1,20 +1,32 @@ @import "theme/vars.less"; +.app_sidebar_wrapper { + position: relative; + + left: 0; + top: 0; + + z-index: 1000; + + width: fit-content; + + height: 100vh; + height: 100dvh; + + padding: 10px; +} + .app_sidebar { position: relative; display: flex; flex-direction: column; - left: 0; - top: 0; - - z-index: 1000; overflow: hidden; - width: @app_sidebar_width; - min-width: @app_sidebar_width; + width: @sidebar_width; + min-width: @sidebar_width; - height: 100dvh; + height: 100%; padding: 10px 0; @@ -22,16 +34,14 @@ background-color: var(--sidebar-background-color); - border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0; + border-radius: @sidebar_borderRadius; + box-shadow: @card-shadow; + + //border-radius: 0 @sidebar_borderRadius @sidebar_borderRadius 0; border: 1px solid var(--sidebar-background-color); - &.floating { - position: absolute; - box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1) !important; - } - &.expanded { - width: @app_sidebar_width_expanded; + width: @sidebar_width_expanded; .app_sidebar_menu_wrapper { .ant-menu { @@ -50,34 +60,10 @@ } } - &.customRender { - display: flex; - position: relative; - - width: 100%; - min-width: 34vw; - - padding: 20px; - max-width: 60vw; - - .app_sidebar_menu_wrapper { - animation: disappear 150ms ease-out forwards; - } - - .render_content_wrapper { - animation: appear 150ms ease-out forwards; - } - } - &.hidden { - flex: 0 !important; - min-width: 0 !important; - background-color: transparent !important; - width: 0 !important; - } - - &.elevated { - box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.1) !important; + width: 0; + min-width: 0; + padding: 0; } .app_sidebar_header { @@ -154,7 +140,7 @@ width: 100%; - padding: 0 0 0 calc(@app_sidebar_width / 2); + padding: 0 0 0 calc(@sidebar_width / 2); margin: 5px 0; transition: all 150ms ease-in-out; @@ -191,50 +177,4 @@ } } } - - .render_content_wrapper { - display: flex; - flex-direction: column; - - opacity: 0; - transition: all 150ms ease-in-out; - - overflow-y: hidden; - - .render_content_header { - display: inline-flex; - flex-direction: row; - - align-items: center; - justify-content: space-between; - - .render_content_header_title { - display: inline-flex; - flex-direction: row; - - align-items: center; - - h1, - h2, - h3 { - font-size: 1.8; - margin: 0 !important; - } - - svg { - font-size: 1.8rem; - } - } - } - - .render_content { - height: 100%; - - padding: 20px; - padding-left: 0; - - overflow-x: hidden; - overflow-y: scroll; - } - } } \ No newline at end of file diff --git a/packages/app/src/cores/player/player.core.js b/packages/app/src/cores/player/player.core.js index 1a5abb01..0ef933b3 100755 --- a/packages/app/src/cores/player/player.core.js +++ b/packages/app/src/cores/player/player.core.js @@ -467,11 +467,11 @@ export default class Player extends Core { } case "minimized": { if (change.object.minimized) { - app.SidebarController.attachBottomItem("player", BackgroundMediaPlayer, { + app.layout.sidebar.attachBottomItem("player", BackgroundMediaPlayer, { noContainer: true }) } else { - app.SidebarController.removeBottomItem("player") + app.layout.sidebar.removeBottomItem("player") } app.eventBus.emit("player.minimized.update", change.object.minimized) diff --git a/packages/app/src/pages/live/[key].jsx b/packages/app/src/pages/live/[key].jsx index 22484d34..21fa888b 100755 --- a/packages/app/src/pages/live/[key].jsx +++ b/packages/app/src/pages/live/[key].jsx @@ -313,8 +313,8 @@ export default class StreamViewer extends React.Component { to = !this.state.cinemaMode } - if (app.SidebarController) { - app.SidebarController.toggleVisibility(!to) + if (app.layout.sidebar) { + app.layout.sidebar.toggleVisibility(!to) } this.setState({ cinemaMode: to }) diff --git a/packages/app/src/pages/lyrics/index.jsx b/packages/app/src/pages/lyrics/index.jsx index de699cf1..f168f72e 100644 --- a/packages/app/src/pages/lyrics/index.jsx +++ b/packages/app/src/pages/lyrics/index.jsx @@ -601,8 +601,8 @@ export default class SyncLyrics extends React.Component { colorAnalysis, }) - if (app.SidebarController) { - app.SidebarController.toggleVisibility(false) + if (app.layout.sidebar) { + app.layout.sidebar.toggleVisibility(false) } if (app.layout.floatingStack) { @@ -646,8 +646,8 @@ export default class SyncLyrics extends React.Component { delete window._hacks - if (app.SidebarController) { - app.SidebarController.toggleVisibility(true) + if (app.layout.sidebar) { + app.layout.sidebar.toggleVisibility(true) } if (app.layout.floatingStack) { diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less index f25ad581..78f99e5a 100755 --- a/packages/app/src/theme/index.less +++ b/packages/app/src/theme/index.less @@ -213,10 +213,6 @@ html { padding: var(--layoutPadding); background-color: transparent; - - &.floating-sidebar { - margin-left: @app_sidebar_width; - } } .root_background { diff --git a/packages/app/src/theme/vars.less b/packages/app/src/theme/vars.less index 098ddc52..882d67e9 100755 --- a/packages/app/src/theme/vars.less +++ b/packages/app/src/theme/vars.less @@ -1,14 +1,8 @@ -@app_sidebar_width: 80px; -@app_sidebar_width_expanded: 230px; +@sidebar_width: 80px; +@sidebar_width_expanded: 230px; +@sidebar_padding: 10px; +@sidebar_borderRadius: 18px; -// borders & radius -@app_sidebar_borderRadius: 18px; - -@app_menuItemSize: 100px; -@app_menuItemIconSize: 30px; -@app_menuItemTextSize: 12px; - -// TRANSITIONS @transition-ease-in: all 0.3s ease-out; @transition-ease-out: all 0.3s ease-out; @transition-ease-inout: all 150ms ease-in-out; @@ -20,5 +14,5 @@ @top_bar_height: 52px; @top_bar_padding: 10px; -@app_bottomBar_iconSize: 45px; -@app_topBar_height: 52px; \ No newline at end of file +@bottomBar_iconSize: 45px; +@topBar_height: 52px; \ No newline at end of file