asab_webui_shell 26.3.1 → 26.3.3

package/dist/containers/Sidepanel/Sidepanel.js

@@ -9,6 +9,23 @@ var _reactstrap = require("reactstrap");
 var _asab_webui_components = require("asab_webui_components");
 require("./Sidepanel.scss");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/*
+
+	Overlay sidepanel:
+
+		publish('Application.panel!', { mode:
+			<SidePanelContent />,
+			layout: 'overlay'
+		});
+
+	Docked sidepanel:
+
+		publish('Application.panel!', { mode:
+			<SidePanelContent />
+		});
+
+*/
+
 // Application sidepanel
 function Sidepanel(props) {
   var {
@@ -16,14 +33,21 @@ function Sidepanel(props) {
     subscribe
   } = (0, _asab_webui_components.usePubSub)();
   var [sidepanelContent, setSidepanelContent] = (0, _react.useState)(undefined);
+  var [mode, setMode] = (0, _react.useState)('dock');
+  var [isOpen, setIsOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     var handleEvent = message => {
       if (message.mode === 'close') {
-        setSidepanelContent(undefined);
-      } else {
+        setIsOpen(false);
+        return;
+      }
+      if (isOpen === false) {
+        setMode((message === null || message === void 0 ? void 0 : message.layout) === 'overlay' ? 'overlay' : 'dock');
         setSidepanelContent(message.mode);
+        setIsOpen(true);
       }
     };
+
     // Subscription to Application.panel!
     var subscriptionSidepanel = subscribe('Application.panel!', handleEvent);
     // Clean up subscription on component unmount
@@ -33,10 +57,14 @@ function Sidepanel(props) {
   }, []);
 
   // TODO: think of how to automatically close the sidepanel on screen leave
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "app-sidepanel",
-    isOpen: sidepanelContent != undefined ? true : false,
-    horizontal: true
+    className: mode === 'overlay' ? 'app-sidepanel-overlay' : ''
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+    className: "h-100",
+    isOpen: isOpen,
+    horizontal: true,
+    onExited: () => setSidepanelContent(undefined)
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Card, {
     className: "app-sidepanel-card h-100"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.CardBody, {
@@ -48,5 +76,5 @@ function Sidepanel(props) {
     onClick: () => publish('Application.panel!', {
       mode: 'close'
     })
-  }))));
+  })))));
 }

package/dist/containers/Sidepanel/Sidepanel.scss

@@ -18,3 +18,14 @@
 .app-sidepanel-chevron:hover {
 	cursor: pointer;
 }
+
+/* Overlay mode */
+
+#app-sidepanel.app-sidepanel-overlay {
+	position: fixed; /* ignore grid placement; float over content */
+	right: 0;
+	top: var(--app-header-height, 65px); /* matches App header row height */
+	bottom: 0;
+	z-index: 1050; /* above main content, below modals */
+	display: block;
+}

package/dist/screens/InvalidRouteScreen.js

@@ -15,8 +15,7 @@ function InvalidRouteScreen(props) {
     t
   } = (0, _reactI18next.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Container, {
-    className: "invalid-route-container h-100",
-    fluid: true
+    className: "invalid-route-container h-100"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Card, {
     className: "invalid-route-card"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.CardBody, {
@@ -24,7 +23,7 @@ function InvalidRouteScreen(props) {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
     className: "justify-content-center"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "h-75"
+    className: "invalid-route-img-container"
   }, /*#__PURE__*/_react.default.createElement(_asab_webui_components.FlowbiteIllustration, {
     name: "error",
     className: "pb-4",

package/dist/screens/InvalidRouteScreen.scss

@@ -16,4 +16,11 @@
 	display: flex;
 	align-items: center; /* Vertically center */
 	justify-content: center; /* Horizontally center */
+	overflow: hidden;
+	margin: 1rem;
+}
+
+.invalid-route-img-container{
+	height: 75%;
+	max-height: 60vh;
 }

package/dist/screens/UnauthorizedAccessScreen.js

@@ -55,8 +55,7 @@ function UnauthorizedAccessScreen(props) {
 
   // Else return the Not authorized screen
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Container, {
-    className: "unauthorized-container h-100",
-    fluid: true
+    className: "unauthorized-container h-100"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Card, {
     className: "unauthorized-card"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.CardBody, {
@@ -64,7 +63,7 @@ function UnauthorizedAccessScreen(props) {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
     className: "justify-content-center"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Col, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-50 mx-auto"
+    className: "unauthorized-img-container"
   }, /*#__PURE__*/_react.default.createElement(_asab_webui_components.FlowbiteIllustration, {
     name: "unauthorized",
     className: "pb-4",

package/dist/screens/UnauthorizedAccessScreen.scss

@@ -16,4 +16,11 @@
 	display: flex;
 	align-items: center; /* Vertically center */
 	justify-content: center; /* Horizontally center */
+	overflow: hidden;
+	margin: 1rem;
+}
+
+.unauthorized-img-container{
+	height: 75%;
+	max-height: 50vh;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asab_webui_shell",
-  "version": "26.3.1",
+  "version": "26.3.3",
   "license": "BSD-3-Clause",
   "description": "TeskaLabs ASAB WebUI Shell Application",
   "contributors": [