From ac6e8c9129ea6b1a4d47a1f79734707b81b1ff75 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Thu, 12 May 2022 16:51:59 +0200
Subject: [PATCH] added compact mode

---
 packages/app/src/layout/index.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/layout/index.jsx b/packages/app/src/layout/index.jsx
index a3bd56ef..a83f7bac 100644
--- a/packages/app/src/layout/index.jsx
+++ b/packages/app/src/layout/index.jsx
@@ -12,7 +12,7 @@ const LayoutRenders = {
 	mobile: (props) => {
 		return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
 			<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 })}>
 						{props.children}
 					</div>
@@ -28,7 +28,7 @@ const LayoutRenders = {
 			<Sidebar user={props.user} />
 			<antd.Layout className="content_layout">
 				<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 })}>
 						{props.children}
 					</div>
@@ -43,6 +43,7 @@ export default class Layout extends React.Component {
 	state = {
 		layoutType: "default",
 		isOnTransition: false,
+		compactMode: false,
 	}
 
 	setLayout = (layout) => {
@@ -62,6 +63,11 @@ export default class Layout extends React.Component {
 		window.app.eventBus.on("transitionDone", () => {
 			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) {
 			window.isMobile = true
@@ -85,6 +91,9 @@ export default class Layout extends React.Component {
 		const layoutComponentProps = {
 			...this.props,
 			...this.state,
+			layoutPageModesClassnames: [{
+				["noMargin"]: this.state.compactMode,
+			}]
 		}
 
 		if (LayoutRenders[this.state.layoutType]) {