RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

support elevation

Browse Source
This commit is contained in:
srgooglo 2022-06-01 03:15:44 +02:00
parent 40b78237fe
commit 48dc8a2493
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/app/src/layout/sidebar/index.jsx
View File

@ -26,6 +26,7 @@ export default class Sidebar extends React.Component {
this.controller = window.app["SidebarController"] = { this.controller = window.app["SidebarController"] = {
toggleVisibility: this.toggleVisibility, toggleVisibility: this.toggleVisibility,
toggleEdit: this.toggleEditMode, toggleEdit: this.toggleEditMode,
toggleElevation: this.toggleElevation,
isVisible: () => this.state.visible, isVisible: () => this.state.visible,
isEditMode: () => this.state.visible, isEditMode: () => this.state.visible,
isCollapsed: () => this.state.collapsed, isCollapsed: () => this.state.collapsed,
@ -42,6 +43,7 @@ export default class Sidebar extends React.Component {
bottom: [], bottom: [],
top: [], top: [],
}, },
elevated: false,
} }
window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode()) window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
@ -49,6 +51,14 @@ export default class Sidebar extends React.Component {
window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => { window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
this.toggleCollapse(value) this.toggleCollapse(value)
}) })
// handle sidedrawer open/close
window.app.eventBus.on("sidedrawer.hasDrawers", () => {
this.toggleElevation(true)
})
window.app.eventBus.on("sidedrawer.noDrawers", () => {
this.toggleElevation(false)
})
} }
collapseDebounce = null collapseDebounce = null
@ -238,6 +248,10 @@ export default class Sidebar extends React.Component {
this.setState({ visible: to ?? !this.state.visible }) this.setState({ visible: to ?? !this.state.visible })
} }
toggleElevation = (to) => {
this.setState({ elevated: to ?? !this.state.elevated })
}
onMouseEnter = () => { onMouseEnter = () => {
if (window.app.settings.is("collapseOnLooseFocus", false)) { if (window.app.settings.is("collapseOnLooseFocus", false)) {
return false return false
@ -288,7 +302,16 @@ export default class Sidebar extends React.Component {
width={this.state.editMode ? 400 : 200} width={this.state.editMode ? 400 : 200}
collapsed={this.state.editMode ? false : this.state.collapsed} collapsed={this.state.editMode ? false : this.state.collapsed}
onCollapse={() => this.props.onCollapse()} onCollapse={() => this.props.onCollapse()}
className={classnames("sidebar", { ["edit_mode"]: this.state.editMode, ["hidden"]: !this.state.visible })} className={
classnames(
"sidebar",
{
["edit_mode"]: this.state.editMode,
["hidden"]: !this.state.visible,
["elevated"]: this.state.elevated
}
)
}
> >
<div className="app_sidebar_header"> <div className="app_sidebar_header">
<div className={classnames("app_sidebar_header_logo", { ["collapsed"]: this.state.collapsed })}> <div className={classnames("app_sidebar_header_logo", { ["collapsed"]: this.state.collapsed })}>

8
packages/app/src/layout/sidebar/index.less
View File

@ -2,12 +2,14 @@
// SIDEBAR // SIDEBAR
.ant-layout-sider { .ant-layout-sider {
z-index : 50;
background : var(--sidebar-background-color) !important; background : var(--sidebar-background-color) !important;
background-color: var(--sidebar-background-color) !important; background-color: var(--sidebar-background-color) !important;
border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0; border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
overflow : hidden; overflow : hidden;
border : 1px solid var(--sidebar-background-color) !important; border : 1px solid var(--sidebar-background-color);
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
@ -17,6 +19,10 @@
background-color: transparent !important; background-color: transparent !important;
width : 0 !important; width : 0 !important;
} }
&.elevated {
box-shadow : 0 0 5px 4px rgba(0, 0, 0, 0.1) !important;
}
} }
.ant-menu-item { .ant-menu-item {