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

added compact mode

Browse Source
This commit is contained in:
srgooglo 2022-05-12 16:51:59 +02:00
parent 735b4dbbb4
commit ac6e8c9129
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/layout/index.jsx
View File

@ -12,7 +12,7 @@ const LayoutRenders = {
mobile: (props) => { mobile: (props) => {
return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}> return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
<antd.Layout className="content_layout"> <antd.Layout className="content_layout">
<antd.Layout.Content className="layout_page"> <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
<div className={classnames("fade-transverse-active", { "fade-transverse-leave": props.isOnTransition })}> <div className={classnames("fade-transverse-active", { "fade-transverse-leave": props.isOnTransition })}>
{props.children} {props.children}
</div> </div>
@ -28,7 +28,7 @@ const LayoutRenders = {
<Sidebar user={props.user} /> <Sidebar user={props.user} />
<antd.Layout className="content_layout"> <antd.Layout className="content_layout">
<Header /> <Header />
<antd.Layout.Content className="layout_page"> <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
<div className={classnames("fade-transverse-active", { "fade-transverse-leave": props.isOnTransition })}> <div className={classnames("fade-transverse-active", { "fade-transverse-leave": props.isOnTransition })}>
{props.children} {props.children}
</div> </div>
@ -43,6 +43,7 @@ export default class Layout extends React.Component {
state = { state = {
layoutType: "default", layoutType: "default",
isOnTransition: false, isOnTransition: false,
compactMode: false,
} }
setLayout = (layout) => { setLayout = (layout) => {
@ -62,6 +63,11 @@ export default class Layout extends React.Component {
window.app.eventBus.on("transitionDone", () => { window.app.eventBus.on("transitionDone", () => {
this.setState({ isOnTransition: false }) this.setState({ isOnTransition: false })
}) })
window.app.eventBus.on("toogleCompactMode", (to) => {
this.setState({
compactMode: to ?? !this.state.compactMode,
})
})
if (window.app.settings.get("forceMobileMode") || window.app.isAppCapacitor() || Math.min(window.screen.width, window.screen.height) < 768 || navigator.userAgent.indexOf("Mobi") > -1) { if (window.app.settings.get("forceMobileMode") || window.app.isAppCapacitor() || Math.min(window.screen.width, window.screen.height) < 768 || navigator.userAgent.indexOf("Mobi") > -1) {
window.isMobile = true window.isMobile = true
@ -85,6 +91,9 @@ export default class Layout extends React.Component {
const layoutComponentProps = { const layoutComponentProps = {
...this.props, ...this.props,
...this.state, ...this.state,
layoutPageModesClassnames: [{
["noMargin"]: this.state.compactMode,
}]
} }
if (LayoutRenders[this.state.layoutType]) { if (LayoutRenders[this.state.layoutType]) {