added basic root scale effect

packages/app/src/layout.jsx

@@ -90,6 +90,9 @@ export default class Layout extends React.PureComponent {
 		toggleCenteredContent: (to) => {
 			return this.layoutInterface.toggleRootContainerClassname("centered-content", to)
 		},
+		toggleRootScaleEffect: (to) => {
+			return this.layoutInterface.toggleRootContainerClassname("root-scale-effect", to)
+		},
 		toggleMobileStyle: (to) => {
 			return this.layoutInterface.toggleRootContainerClassname("mobile", to)
 		},

packages/app/src/layouts/components/draggableDrawer/index.jsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { Drawer } from "vaul"
 
-import {createIconRender} from "@components/Icons"
-import { Translation } from "react-i18next"
+import ActionsMenu from "../@mobile/actionsMenu"
 
 import "./index.less"
 
@@ -38,7 +37,7 @@ export class DraggableDrawerController extends React.Component {
     }
 
     actions = (data) => {
-        const win = this.open("actions-menu", ActionsComponent, {
+        const win = this.open("actions-menu", ActionsMenu, {
             componentProps: {
                 ...data,
             }
@@ -57,6 +56,7 @@ export class DraggableDrawerController extends React.Component {
         const win = app.cores.window_mng.render(
             id,
             <DraggableDrawer
+                options={options}
                 onClosed={() => this.handleDrawerOnClosed(drawerObj)}
             >
                 {
@@ -103,6 +103,14 @@ export class DraggableDrawerController extends React.Component {
         app.cores.window_mng.close(drawer.winId)
     }
 
+    componentDidUpdate() {
+        if (this.state.drawers.length === 0) {
+            app.layout.toggleRootScaleEffect(false)
+        } else {
+            app.layout.toggleRootScaleEffect(true)
+        }
+    }
+
     render() {
         return null
     }
@@ -145,6 +153,13 @@ export const DraggableDrawer = (props) => {
                 <Drawer.Handle
                     className="app-drawer-handle"
                 />
+
+                <Drawer.Title
+                    className="app-drawer-title"
+                >
+                    {props.options?.title ?? "Drawer Title"}
+                </Drawer.Title>
+
                 {
                     React.cloneElement(props.children, {
                         close: () => setIsOpen(false),
@@ -154,25 +169,3 @@ export const DraggableDrawer = (props) => {
         </Drawer.Portal>
     </Drawer.Root>
 }
-
-const ActionsComponent = (props) => {
-    console.log(props)
-    return <div
-        className="app-drawer-actions"
-    >
-        {
-            props.list.map((action) => {
-                return <div
-                    key={action.id}
-                    className="app-drawer-action"
-                    onClick={() => {
-                        action.onClick()
-                    }}
-                >
-                    {createIconRender(action.icon)}
-                    <span><Translation>{t => t(action.label)}</Translation></span>
-                </div>
-            })
-        }
-    </div>
-}

packages/app/src/layouts/components/draggableDrawer/index.less

@@ -38,30 +38,12 @@
     border-radius: 24px 24px 0 0;
 
     background-color: var(--background-color-accent);
+
+    .app-drawer-title {
+        display: none;
+    }
 }
 
 .app-drawer-handle {
     background-color: var(--background-color-contrast);
 }
-
-.app-drawer-actions {
-    display: flex;
-    flex-direction: column;
-
-    gap: 10px;
-
-    color: var(--text-color);
-
-    .app-drawer-action {
-        display: inline-flex;
-        flex-direction: row;
-
-        padding: 10px;
-
-        border-radius: 12px;
-
-        font-size: 1rem;
-
-        background-color: var(--background-color-primary);
-    }
-}

packages/app/src/styles/index.less

@@ -70,6 +70,8 @@ a {
 	padding: 0;
 	margin: 0;
 
+	transition: all 150ms ease-in-out;
+
 	&.electron {
 		.ant-layout-sider {
 			padding-top: 0px;
@@ -145,6 +147,15 @@ html {
 
 	-webkit-overflow-scrolling: touch;
 
+	&.root-scale-effect {
+		background-color: black !important;
+
+		#root {
+			animation: rootScaleOut 250ms ease-in-out forwards;
+			animation-delay: 0;
+		}
+	}
+
 	&.centered-content {
 		.content_layout {
 			margin: 0 auto;
@@ -191,7 +202,6 @@ span {
 
 svg {
 	color: currentColor;
-	margin-right: 10px;
 	vertical-align: -0.125em;
 }
 
@@ -357,3 +367,16 @@ svg {
 
 	gap: 10px;
 }
+
+@keyframes rootScaleOut {
+	0% {
+		transform: scale(1);
+	}
+
+	100% {
+		border-radius: 24px;
+		transform: perspective(1000px) scale(0.99);
+		box-shadow: 0 0 500px 10px var(--colorPrimary);
+		overflow: hidden;
+	}
+}