asab_webui_shell 26.2.1 → 26.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
8
  var _asab_webui_components = require("asab_webui_components");
10
9
  var _ConfigReducer = _interopRequireDefault(require("./ConfigReducer"));
11
10
  var _actions = require("../actions");
12
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
11
  class ConfigService extends _asab_webui_components.Service {
15
12
  constructor(app) {
16
13
  var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ConfigService";
@@ -19,53 +16,25 @@ class ConfigService extends _asab_webui_components.Service {
19
16
  this.Config = new Config();
20
17
  }
21
18
  initialize() {
22
- var _document$getElements, _document$getElements2, _document$getElements3, _document$getElements4, _document$getElements5, _document$getElements6;
23
- // Initialization of dynamic configuration
24
- var headerLogoFull = (_document$getElements = document.getElementsByName('header-logo-full')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
25
- var headerLogoMini = (_document$getElements2 = document.getElementsByName('header-logo-minimized')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.content;
26
- var headerLogoFullDark = (_document$getElements3 = document.getElementsByName('header-logo-full-dark')[0]) === null || _document$getElements3 === void 0 ? void 0 : _document$getElements3.content;
27
- var headerLogoMiniDark = (_document$getElements4 = document.getElementsByName('header-logo-minimized-dark')[0]) === null || _document$getElements4 === void 0 ? void 0 : _document$getElements4.content;
28
- var title = (_document$getElements5 = document.getElementsByName('title')[0]) === null || _document$getElements5 === void 0 ? void 0 : _document$getElements5.content;
29
- var customCSS = (_document$getElements6 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements6 === void 0 ? void 0 : _document$getElements6.content;
19
+ var _document$getElements, _document$getElements2;
20
+ /*
21
+ Initialization of dynamic configuration
22
+ Dynamic branding of the header logo can be done via nginx location configuration.
23
+ The support of meta tags for configuration of the header logo brand image has been striped of in 09/2025
24
+ from ASAB WebUI Shell version 26.3.1
25
+ Example of setting up the nginx location for full logo. Same way it can be done for minimized variation.
26
+ ...
27
+ location /<app path>/media/logo/header-logo-full-dark.svg {
28
+ alias /<path to logo>/<logo name for dark theme>.svg;
29
+ }
30
+ location /<app path>/media/logo/header-logo-full.svg {
31
+ alias /<path to logo>/<logo name for light theme>.svg;
32
+ }
33
+ ...
34
+ */
35
+ var title = (_document$getElements = document.getElementsByName('title')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.content;
36
+ var customCSS = (_document$getElements2 = document.getElementsByName('custom-css-file')[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.content;
30
37
  var dynamicConfig = {};
31
- // determine if any logos have been dynamically configured and assign brandImage property as an empty object
32
- if (headerLogoFull != undefined && headerLogoFull != "" || headerLogoFullDark != undefined && headerLogoFullDark != "" || headerLogoMini != undefined && headerLogoMini != "" || headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
33
- dynamicConfig.brandImage = {};
34
- }
35
- // If header's full light logo has been configured, add it to dynamic config object
36
- if (headerLogoFull != undefined && headerLogoFull != "") {
37
- Object.assign(dynamicConfig.brandImage, {
38
- "light": {
39
- "full": headerLogoFull
40
- }
41
- });
42
- }
43
- // If header's full dark logo has been configured, extend/add it to dynamic config's brandImage property
44
- if (headerLogoFullDark != undefined && headerLogoFullDark != "") {
45
- Object.assign(dynamicConfig.brandImage, {
46
- "dark": {
47
- "full": headerLogoFullDark
48
- }
49
- });
50
- }
51
- // If header's minimized light logo has been configured, extend/add it to dynamic config brandImage property
52
- if (headerLogoMini != undefined && headerLogoMini != "") {
53
- var _dynamicConfig$brandI;
54
- Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
55
- "light": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI = dynamicConfig.brandImage) === null || _dynamicConfig$brandI === void 0 ? void 0 : _dynamicConfig$brandI.light), {}, {
56
- "minimized": headerLogoMini
57
- })
58
- }));
59
- }
60
- // If header's minimized dark logo has been configured, extend/add it to dynamic config brandImage property
61
- if (headerLogoMiniDark != undefined && headerLogoMiniDark != "") {
62
- var _dynamicConfig$brandI2;
63
- Object.assign(dynamicConfig.brandImage, _objectSpread(_objectSpread({}, dynamicConfig.brandImage), {}, {
64
- "dark": _objectSpread(_objectSpread({}, (_dynamicConfig$brandI2 = dynamicConfig.brandImage) === null || _dynamicConfig$brandI2 === void 0 ? void 0 : _dynamicConfig$brandI2.dark), {}, {
65
- "minimized": headerLogoMiniDark
66
- })
67
- }));
68
- }
69
38
 
70
39
  // Add custom title
71
40
  if (title != undefined && title != "") {
@@ -41,42 +41,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
41
41
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
42
42
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
43
43
  class Application extends _react.Component {
44
- /*
45
- Example of use hasSidebar.
46
- It must be set in Application.
47
- If not set, it is considered as true.
48
-
49
- ...
50
-
51
- const config = {
52
- hasSidebar: false,
53
- }
54
-
55
-
56
- ReactDOM.render((
57
- <BrowserRouter>
58
- <Application modules={modules} {...config}/>
59
- </BrowserRouter>
60
- ), document.getElementById('app'));
61
-
62
- ...
63
-
64
- Example of settings in Module of the Application
65
- Following above settings, this will show the item in
66
- the header and when the screen is diminished (e.g. screening
67
- using the mobile phone), the item is moved to the sidebar and
68
- it is accessible by the sidebar toggler button.
69
-
70
- ...
71
-
72
- app.Navigation.addItem({
73
- name: 'Item 1',
74
- url: '',
75
- });
76
-
77
- ...
78
- */
79
-
80
44
  constructor(props) {
81
45
  super(props);
82
46
 
@@ -45,6 +45,16 @@
45
45
  opacity: 0%;
46
46
  }
47
47
  }
48
+
49
+ &.sidebar-hidden {
50
+ > #app-sidebar {
51
+ display: none;
52
+ }
53
+
54
+ > #app-main {
55
+ grid-area: 2 / 1 / 4 / 3;
56
+ }
57
+ }
48
58
  }
49
59
 
50
60
  body {
@@ -9,6 +9,28 @@ var _reactI18next = require("react-i18next");
9
9
  var _asab_webui_components = require("asab_webui_components");
10
10
  require("./ApplicationScreenTitle.scss");
11
11
  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); }
12
+ /*
13
+ Example of use hasHeaderTitle.
14
+ It must be set in App configuration.
15
+ If not set to `false` or at all, it is considered as true.
16
+
17
+ ...
18
+
19
+ const ConfigDefaults = {
20
+ ...
21
+ hasHeaderTitle: false,
22
+ }
23
+
24
+ root.render(
25
+ <HashRouter>
26
+ <Application
27
+ configdefaults={ConfigDefaults}
28
+ modules={modules}
29
+ />
30
+ </HashRouter>
31
+ );
32
+ */
33
+
12
34
  var ApplicationScreenTitle = props => {
13
35
  var _props$routes;
14
36
  var subtitle = (0, _asab_webui_components.useAppSelector)(state => {
@@ -19,6 +41,10 @@ var ApplicationScreenTitle = props => {
19
41
  var _state$config;
20
42
  return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
21
43
  });
44
+ var hasHeaderTitle = (0, _asab_webui_components.useAppSelector)(state => {
45
+ var _state$config2;
46
+ return state === null || state === void 0 || (_state$config2 = state.config) === null || _state$config2 === void 0 ? void 0 : _state$config2.hasHeaderTitle;
47
+ });
22
48
  var {
23
49
  t
24
50
  } = (0, _reactI18next.useTranslation)();
@@ -33,6 +59,11 @@ var ApplicationScreenTitle = props => {
33
59
  (0, _react.useEffect)(() => {
34
60
  document.title = title && routeName ? "".concat(title, " | ").concat(routeName) : title;
35
61
  }, [routeName, t]);
62
+
63
+ // If specifically declared in the configuration, that header title should not be available, dont display header title
64
+ if (hasHeaderTitle === false) {
65
+ return null;
66
+ }
36
67
  return /*#__PURE__*/_react.default.createElement("div", {
37
68
  className: "application-screen-title text-primary"
38
69
  }, /*#__PURE__*/_react.default.createElement("h4", {
@@ -14,6 +14,28 @@ var _BrandImage = require("../../components/branding/BrandImage");
14
14
  require("./sidebar.scss");
15
15
  var _SidebarItemRenderer = require("./SidebarItemRenderer");
16
16
  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); }
17
+ /*
18
+ Example of use hasSidebar.
19
+ It must be set in App configuration.
20
+ If not set to `false` or at all, it is considered as true.
21
+
22
+ ...
23
+
24
+ const ConfigDefaults = {
25
+ ...
26
+ hasSidebar: false,
27
+ }
28
+
29
+ root.render(
30
+ <HashRouter>
31
+ <Application
32
+ configdefaults={ConfigDefaults}
33
+ modules={modules}
34
+ />
35
+ </HashRouter>
36
+ );
37
+ */
38
+
17
39
  function Sidebar(props) {
18
40
  var [isSmallResolution, setIsSmallResolution] = (0, _react.useState)(false);
19
41
  var [sidebarBottomBranding, setSidebarBottomBranding] = (0, _react.useState)({});
@@ -22,6 +44,10 @@ function Sidebar(props) {
22
44
  var _state$navigation;
23
45
  return (_state$navigation = state.navigation) === null || _state$navigation === void 0 ? void 0 : _state$navigation.navItems;
24
46
  });
47
+ var hasSidebar = (0, _asab_webui_components.useAppSelector)(state => {
48
+ var _state$config;
49
+ return state === null || state === void 0 || (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.hasSidebar;
50
+ });
25
51
  var sessionExpired = (0, _asab_webui_components.useAppSelector)(state => {
26
52
  var _state$auth;
27
53
  return (_state$auth = state.auth) === null || _state$auth === void 0 ? void 0 : _state$auth.sessionExpired;
@@ -30,6 +56,22 @@ function Sidebar(props) {
30
56
  var {
31
57
  dispatch
32
58
  } = (0, _asab_webui_components.useAppStore)();
59
+
60
+ // Handling sidebar-hidden app class
61
+ (0, _react.useEffect)(() => {
62
+ var appElement = document.getElementById("app");
63
+ if (!appElement) return;
64
+ if (hasSidebar === false) {
65
+ appElement.classList.add("sidebar-hidden");
66
+ } else {
67
+ appElement.classList.remove("sidebar-hidden");
68
+ }
69
+ }, [hasSidebar]);
70
+
71
+ // If specifically declared in the configuration, that sidebar should not be available, dont display sidebar at all
72
+ if (hasSidebar === false) {
73
+ return null;
74
+ }
33
75
  (0, _react.useEffect)(() => {
34
76
  // Collapse sidebar if innerWidth is smaller or equal to 944px on page initialization
35
77
  if (window.innerWidth <= 944) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "asab_webui_shell",
3
- "version": "26.2.1",
3
+ "version": "26.3.1",
4
4
  "license": "BSD-3-Clause",
5
5
  "description": "TeskaLabs ASAB WebUI Shell Application",
6
6
  "contributors": [