@agilemotion/oui-react-js 1.8.42 → 1.8.44

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -18,11 +18,20 @@ var _DashboardStore = require("../../redux/store/DashboardStore");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
-var _styles = require("@mui/material/styles");
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
+require("./FoldingSideTabDashboard.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let ps;
+const DATA_URL_PREFIX = 'data:image/png;base64,';
+function normalizeLogo(src) {
+  if (!src) return undefined;
+  const s = src.trim();
+  if (/^data:/i.test(s)) {
+    const dup = new RegExp(`^(${DATA_URL_PREFIX})+`, 'i');
+    return s.replace(dup, DATA_URL_PREFIX);
+  }
+  return DATA_URL_PREFIX + s;
+}
 const FoldingSideTabDashboard = props => {
   const [navDrawerOpen, setNavDrawerOpen] = _react.default.useState(true);
   const [loading, setLoading] = _react.default.useState(true);
@@ -31,7 +40,7 @@ const FoldingSideTabDashboard = props => {
   const [primaryThemeColor, setPrimaryThemeColor] = _react.default.useState('');
   const [themeTextColor, setThemeTextColor] = _react.default.useState('');
   const [routes, setRoutes] = _react.default.useState([]);
-  const [logo, setLogo] = _react.default.useState('data:image/png;base64,' + props.logo);
+  const [logo, setLogo] = _react.default.useState(normalizeLogo(props.logo));
   const [sidebarOpened, setSidebarOpened] = _react.default.useState(document.documentElement.className.indexOf('nav-open') !== -1);
   const [sidebarMini, setSidebarMini] = _react.default.useState(true);
   const [opacity, setOpacity] = _react.default.useState(0);
@@ -119,13 +128,15 @@ const FoldingSideTabDashboard = props => {
       }
       let newRoutes = [];
       let newRoute = {};
-      newRoute.name = 'Dashboard';
-      newRoute.id = 'dashboard';
-      newRoute.icon = 'fa fa-pie-chart';
-      newRoute.layout = '/admin';
-      newRoute.level = 0;
-      newRoute.isParent = true;
-      newRoutes.push(newRoute);
+      if (_Utils.default.isNull(props.showDashboardMenu) || props.showDashboardMenu) {
+        newRoute.name = 'Dashboard';
+        newRoute.id = 'dashboard';
+        newRoute.icon = 'fa fa-pie-chart';
+        newRoute.layout = '/admin';
+        newRoute.level = 0;
+        newRoute.isParent = true;
+        newRoutes.push(newRoute);
+      }
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
           let module = props.settings.systemProfileDto.modules[i];
@@ -255,10 +266,10 @@ const FoldingSideTabDashboard = props => {
     routes: routes,
     activeColor: 'agility',
     secondaryThemeColor: secondaryThemeColor,
-    activeRouteMenu: {
+    activeRouteMenu: props.showDashboardMenu ? {
       id: 'dashboard',
       name: 'Dashboard'
-    },
+    } : null,
     className: 'sidebar',
     dashboardLauncher: () => {
       launchDashboard();
@@ -269,6 +280,7 @@ const FoldingSideTabDashboard = props => {
       text: '',
       imgSrc: logo
     },
+    logoStyle: props.logoStyle,
     closeSidebar: closeSidebar
   })), ' ', /*#__PURE__*/_react.default.createElement("div", {
     className: "main-panel",

package/dist/components/dashboard/SideMenuModuleDashboard.css

@@ -9,7 +9,7 @@
 }
 
 .side-menu-module-dashboard .viewport {
-    width: calc(100% - 448px) !important;
+    width: calc(100% - 348px) !important;
 }
 
 .side-menu-module-dashboard .sidebar {
@@ -19,7 +19,7 @@
     margin-left: 0 !important;
     margin-top: 0 !important;
     border-radius: 0 !important;
-    width: 440px !important;
+    width: 340px !important;
 }
 
 .side-menu-module-dashboard .main-panel {
@@ -32,8 +32,8 @@
 }
 
 .side-menu-module-dashboard .navbar.navbar-absolute {
-    left: 440px !important;
-    width: calc(100% - 440px) !important;
+    left: 340px !important;
+    width: calc(100% - 340px) !important;
     background-color: transparent !important;
     color: #1d253b !important;
     padding: 10px 12px 10px 0 !important;
@@ -49,7 +49,7 @@
 }
 
 .side-menu-module-dashboard .main-panel > .content {
-    padding: 78px 12px 30px 448px !important;
+    padding: 78px 12px 30px 348px !important;
 }
 
 @media screen and (max-width: 991px){
@@ -60,5 +60,6 @@
 
     .side-menu-module-dashboard  .sidebar {
         width: 260px !important;
+        border: 20px solid red;
     }
 }

package/dist/components/dashboard/SideMenuModuleDashboard.js

@@ -18,6 +18,7 @@ var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManag
 var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
 require("./SideMenuModuleDashboard.css");
 var _ModuleMenuSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/ModuleMenuSidebar"));
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let ps;
@@ -60,7 +61,7 @@ const SideMenuModuleDashboard = props => {
   _react.default.useEffect(() => {
     //Sockets.init();
     return () => {
-      //Sockets.disconnect();
+      _SocketManager.default.disconnect();
     };
   }, []);
   _react.default.useEffect(() => {
@@ -284,7 +285,9 @@ const SideMenuModuleDashboard = props => {
     style: {
       width: windowPinned ? 'calc(100% - 320px)' : '100%'
     }
-  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
+    windowPinned: windowPinned
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col no-margin no-padding',
     style: {
       width: windowPinned ? '320px' : '0'

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.css

@@ -5,3 +5,97 @@
 .sidebar .nav a:before {
     content: none !important;
 }
+
+/* Root sidebar container (lives under a global header using --header-h) */
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    block-size: calc(100dvh - var(--header-h, 0px));
+    overflow: hidden; /* only the middle section scrolls */
+}
+
+/* If you don't have a global header for some screens, you can toggle this class instead */
+/* .sidebar--no-header { block-size: 100dvh; } */
+
+/* ---------- TOP: brand + heading ---------- */
+.sidebar__top {
+    padding: 32px 0 12px 0;
+    margin-left: 8px;
+    margin-right: 8px;
+    display: grid;
+    gap: 8px;
+    justify-items: center;
+    align-content: center;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+/* Control the height of the logo area via CSS var */
+:root { --sidebar-logo-h: 96px; }
+
+.sidebar__logo {
+    inline-size: 100%;
+    block-size: var(--sidebar-logo-h);
+}
+
+.sidebar__brand {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+}
+
+.sidebar__brand-img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;   /* switch to 'cover' if you want edge-to-edge crop */
+}
+
+/* Heading text under the brand (optional) */
+.sidebar__heading {
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+}
+
+/* ---------- MIDDLE: menu (the ONLY scroller) ---------- */
+.sidebar__scroll {
+    flex: 1 1 auto;
+    min-block-size: 0;     /* crucial for flex scrolling */
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 8px 0;
+}
+
+/* ---------- BOTTOM: app logo + copyright ---------- */
+.sidebar__bottom {
+    margin-top: auto;      /* pins to bottom */
+    flex: 0 0 auto;        /* never shrink off-screen */
+    padding: 12px 10px;
+    display: grid;
+    gap: 8px;
+    justify-items: center;
+    border-top: 1px solid #e1e1e1;
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.sidebar__app-logo img {
+    display: block;
+    max-block-size: 72px;
+    inline-size: auto;
+    object-fit: contain;
+}
+
+.sidebar__copyright {
+    font-size: 12px;
+    opacity: 0.8;
+    text-align: center;
+}
+
+/* Optional: basic nav spacing (keep your existing nav/link styles as needed) */
+.nav-wrapper {
+    padding: 16px;
+    margin: 8px;
+}
+