asab_webui_shell 25.1.12 → 25.2.1-alpha.1

package/dist/services/TitleService.js

@@ -4,42 +4,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _asab_webui_components = require("asab_webui_components");
 var _actions = require("../actions");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var TitleService = exports["default"] = /*#__PURE__*/function (_Service) {
-  function TitleService(app) {
-    var _this;
+class TitleService extends _asab_webui_components.Service {
+  constructor(app) {
     var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "TitleService";
-    (0, _classCallCheck2["default"])(this, TitleService);
-    _this = _callSuper(this, TitleService, [app, serviceName]);
+    super(app, serviceName);
     // Method for setting the subtitle
-    (0, _defineProperty2["default"])(_this, "setSubtitle", function (subtitle) {
-      _this._updateSubtitle(subtitle);
+    (0, _defineProperty2.default)(this, "setSubtitle", subtitle => {
+      this._updateSubtitle(subtitle);
     });
     // Method for clearing the subtitle
-    (0, _defineProperty2["default"])(_this, "clearSubtitle", function () {
-      _this._updateSubtitle(undefined);
+    (0, _defineProperty2.default)(this, "clearSubtitle", () => {
+      this._updateSubtitle(undefined);
     });
     // Method for dispatching subtitle update to Redux store
-    (0, _defineProperty2["default"])(_this, "_updateSubtitle", function (subtitle) {
-      _this.App.Store.dispatch({
+    (0, _defineProperty2.default)(this, "_updateSubtitle", subtitle => {
+      this.App.Store.dispatch({
         type: _actions.SET_SUBTITLE,
         subtitle: subtitle
       });
     });
-    _this.App = app;
-    return _this;
+    this.App = app;
   }
-  (0, _inherits2["default"])(TitleService, _Service);
-  return (0, _createClass2["default"])(TitleService);
-}(_asab_webui_components.Service);
+}
+exports.default = TitleService;

package/dist/styles/components/alert.scss

@@ -0,0 +1,53 @@
+.alert {
+	border: none;
+	--bs-alert-padding-y: 0.75rem;
+	>.btn-close {
+		padding: 1rem;
+	}
+}
+
+[data-bs-theme=dark] {
+	.alert {
+		color: inherit;
+	}
+
+	.alert- {
+
+		&primary {
+			background-color: rgba(var(--bs-primary-rgb));
+		}
+
+		&secondary {
+			background-color: rgba(var(--bs-secondary-rgb));
+		}
+
+		&success {
+			background-color: rgba(var(--bs-success-rgb));
+		}
+
+		&danger {
+			background-color: rgba(var(--bs-danger-rgb));
+		}
+
+		&warning {
+			background-color: rgba(var(--bs-warning-rgb));
+		}
+
+		&info {
+			background-color: rgba(var(--bs-info-rgb));
+			color: rgba(var(--bs-alert-info-color-rgb));
+			> .btn-close {
+				// This will align color of close btn with text color
+				filter: unset;
+			}
+		}
+
+		&light {
+			background-color: rgba(var(--bs-light-rgb));
+		}
+
+		&dark {
+			background-color: rgba(var(--bs-dark-rgb));
+		}
+	}
+}

package/dist/styles/components/button.scss

@@ -0,0 +1,105 @@
+[class^="btn btn-"] {
+	border: none;
+}
+
+.btn {
+	--bs-btn-font-size: var(--bs-body-font-size);
+	--bs-btn-border-radius: 0px;  // No radius for buttons
+	--bs-btn-border-color: transparent; // No border color for buttons
+}
+
+.btn-link {
+	text-decoration: none;
+}
+
+[class^="btn btn-outline"].disabled {
+	//this will enable pointer events, so the 'title' attribute is shown on hover
+	pointer-events: auto;
+	cursor: default;
+	
+	&:hover {
+		background-color: unset;
+		filter: unset;
+	}
+
+	&:active {
+		--bs-btn-active-color: var(--bs-btn-disabled-color);
+		filter: unset;
+	}
+}
+
+[class^="btn"].btn.disabled {
+		//this will enable pointer events, so the 'title' attribute is shown on hover
+		pointer-events: auto;
+		cursor: default;
+		
+		&:hover {
+			filter: unset;
+		}
+
+		&:active {
+			//background should not change on :active to appear still disabled
+			--bs-btn-active-bg: var(--bs-btn-disabled-bg);
+			filter: unset;
+		}
+}
+
+.btn-primary {
+	--bs-btn-bg: var(--royal-blue);
+}
+
+.btn-outline-primary{
+	--bs-btn-color: var(--royal-blue);
+	&:active {
+		--bs-btn-active-bg: var(--royal-blue);
+	}
+}
+
+[data-bs-theme=dark] {
+	.btn-primary {
+		--bs-btn-bg: var(--soft-sky-blue);
+	}
+
+	.btn-outline-primary {
+		--bs-btn-color: var(--soft-sky-blue);
+		&:active {
+		--bs-btn-active-bg: var(--soft-sky-blue);
+		}
+	}
+
+	.btn-info {
+		--bs-btn-color: var(--deep-space-blue);
+	}
+}
+
+.btn-primary {
+	&:hover {
+		filter: brightness(80%);    
+	}
+}
+
+.btn-outline- {
+	&primary:hover {
+		background-color: rgba(var(--bs-primary-rgb), 0.75);
+	} 
+
+	&secondary:hover {
+		background-color: rgba(var(--bs-secondary-rgb), 0.75);
+	}
+
+	&success:hover {
+		background-color: rgba(var(--bs-success-rgb), 0.75);
+	}
+
+	&danger:hover {
+		background-color: rgba(var(--bs-danger-rgb), 0.75);
+	}
+
+	&warning:hover {
+		background-color: rgba(var(--bs-warning-rgb), 0.75);
+	}
+
+	&info:hover {
+		background-color: rgba(var(--bs-info-rgb), 0.75);
+	}
+}

package/dist/styles/components/card.scss

@@ -0,0 +1,174 @@
+[data-bs-theme=dark] .card {
+	--bs-card-cap-bg: unset;
+}
+
+.card {
+	--bs-card-border-color: var(--bs-border-color);
+	--bs-card-cap-bg: var(--white);
+	--bs-card-cap-padding-y: 0.9rem;
+
+	> .card-header h3,  > .card-header-flex h3 {
+		font-size: 1.2rem;
+		color: var(--bs-body-color);
+	}
+
+	button[class*="btn-outline"],
+	button[class*="btn-outline"]:disabled {
+		--bs-btn-border-color: inherit;
+	}
+}
+
+$card-flex-height: 3.2rem;
+
+// Extending `.card-header` class to accept flex sub-items
+.card-header-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex !important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center !important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+	}
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: var(--bs-border-radius) 0 0 0;
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 var(--bs-border-radius) 0 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+
+	> .nav {
+		padding: 0;
+		display: contents;
+
+		.nav-item a {
+			border: none;
+			background: inherit;
+			border-bottom: 2px solid transparent;
+		}
+
+		.nav-item a:hover {
+			cursor: pointer;
+			border-bottom: 2px solid var(--bs-secondary);
+		}
+
+		.nav-item a.active {
+			border-bottom: 2px solid var(--bs-primary);
+		}
+	}
+
+	h2, h3, h4, h5, h6 {
+		margin-bottom: 0;
+	}
+}
+
+
+.card-footer-flex {	
+	// @extend .d-flex from bootstrap
+	display: flex!important;
+
+	// @extend .align-items-center from bootstrap
+	align-items: center!important;
+
+	min-height: $card-flex-height; // The height must be set for flex class
+
+	// @extend .card-header from bootstrap
+	color: var(--bs-card-cap-color);
+	background-color: var(--bs-card-cap-bg);
+	border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+
+	padding: 0;
+	margin: 0;
+
+	> * {
+		padding: 0 var(--bs-card-cap-padding-x);
+
+		display: flex;
+		height: $card-flex-height;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	> .btn {
+		--bs-btn-border-color: transparent;
+		border-radius: 0;
+
+		&:first-child {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+	}
+
+
+	> .dropdown {
+		padding: 0;
+
+		&:first-child > .btn {
+			border-radius: 0 0 0 var(--bs-border-radius);
+		}
+
+		&:last-child > .btn {
+			border-radius: 0 0 var(--bs-border-radius) 0;
+		}
+
+		.dropdown-toggle {
+			--bs-btn-border-color: transparent;
+			border-radius: 0;
+			height: 100%;
+		}
+	}
+}
+
+// Styles for enabling fullscreen mode covering header and sidebar
+.card-fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+}

package/dist/styles/components/form.scss

@@ -0,0 +1,20 @@
+.form-control, .form-select, .form-check-input {
+	font-size: var(--bs-body-font-size);
+	border-radius: 0px;
+	background-color: var(--bs-input-bg-color);
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+.form-select, .form-check-input {
+	cursor: pointer;
+	&:disabled {
+		cursor: default;
+	}
+}
+
+.form-select option:checked {
+	color: white;
+	background-color: var(--bs-primary);
+}

package/dist/styles/components/html.scss

@@ -0,0 +1,18 @@
+a {
+	text-decoration: none;
+}
+
+hr {
+	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+	opacity: 1;
+}
+
+pre code {
+	color: var(--bs-code-color);  // The colour of the pre-formatted code has to match <code>
+	tab-size: 4;
+}
+
+code {
+	font-size: var(--asab-monospace-font-size);
+	tab-size: 4;
+}

package/dist/styles/constants/colors.scss

@@ -0,0 +1,69 @@
+// Colors for themes
+// IMPORTANT: Always enter two variants (hex and RGB)
+
+:root {
+	--soft-sky-blue: #7A9CFF; // The link color for a dark theme
+	--soft-sky-blue-rgb: 122, 156, 255;
+
+	--pastel-sky-blue: #DBEEFF; // The link-hover color and body-bg color for a dark theme
+	--pastel-sky-blue-rgb: 219, 238, 255;
+
+	--deep-space-blue: #0E1426; // The dark for a light, dark theme and dark for body bg, tertiary color for a light theme
+	--deep-space-blue-rgb: 14, 20, 38;
+
+	--nightfall-blue: #19223f; // The card-bg and table-bg color for a dark theme
+
+	--deep-ocean-blue: #24366D; // The border and card-border color for dark theme
+	--deep-ocean-blue-rgb: 36, 54, 109;
+
+	--polar-mist: #F3F4FA; // The light for a light and dark theme
+	--polar-mist-rgb: 243, 244, 250;
+
+	--white: #FFFFFF; // The card-bg, table-bg, input-bg color for light theme
+	--white-rgb: 255, 255, 255;
+
+	--royal-blue: #315EE3; // The link and primary color for a light theme
+	--royal-blue-rgb: 49, 94, 227;
+
+	--tropical-rainforest: #3DC9B0;  // Corresponds with vs-dark color (from the Monaco editor)
+	--tropical-rainforest-rgb: 61, 201, 176;
+
+	--teal: #008080; // Corresponds with vs color (from the Monaco editor)
+	--teal-rgb: 0 128 128;
+
+	--lavender-mist: #DDE1F8; // The secondary for a light and dark theme, the border-color for light theme
+	--lavender-mist-rgb: 221, 225, 248;
+
+	--vibrant-magenta: #d63384; // The code color for light theme
+	--vibrant-magenta-rgb: 214, 51, 132;
+
+	--black: #000000; // The body-color for light theme
+	--black-rgb: 0, 0, 0;
+
+	--midnight-blue: #131C37; // The input-bg color for a dark theme
+	--midnight-blue-rgb: 19, 28, 55;
+
+	--slate-smoke: #6a6a6a8f; // The color of the disabled item text in the TreeMenu
+	--slate-smoke-rgb: 106, 106, 106;
+
+	--light-honey: #ffe082; // The color of the lowest Alert severity
+	--light-honey-rgb: 255, 224, 130;
+
+	--bright-orange: #ff9800; // The color of the medium Alert severity
+	--bright-orange-rgb: 255, 125, 0;
+
+	--fiery-sunset: #ff5722; // The color of the high Alert severity
+	--fiery-sunset-rgb: 255, 87, 34;
+
+	--charcoal: #494949; // Console background dark theme
+	--charcoal-rgb: 0, 43, 54;
+
+	--old-lace: #FDF6E3; // Console background light theme
+	--old-lace-rgb: 253, 246, 227;
+
+	--gainsboro: #E0E0E0; // Console font color for dark theme
+	--gainsboro-rgb: rgb(224, 224, 224);
+
+	--moody-blues: #586E75; // Console font color for light theme
+	--moody-blues-rgb: rgb(88, 110, 117);
+}

package/dist/styles/constants/index.scss

@@ -0,0 +1,70 @@
+@use './colors.scss';
+@use './theme-light.scss';
+@use './theme-dark.scss';
+@use './theme-print.scss';
+
+// Universal styling goes here
+// It means fonts, borders but no colors
+// Set only `--bs-*` variables here.
+
+:root {
+	// Font and typography
+	--bs-font-sans-serif: 'Verdana', sans-serif;
+	--bs-body-font-size: 14px;
+
+	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	--asab-monospace-font-size: 14px;
+
+	--bs-body-line-height: 1.5;
+
+	// Borders
+	--bs-border-radius: 8px;
+	
+}
+
+// Specific components
+
+.list-group {
+	--bs-list-group-bg: transparent;
+}
+
+.dropdown-menu {
+	--bs-dropdown-border-radius: 0px;  // No radius for dropdowns
+	--bs-dropdown-font-size: var(--bs-body-font-size);
+
+	--bs-dropdown-header-color: var(--bs-heading-color);
+	--bs-dropdown-link-color: var(--bs-link-color);
+}
+
+.progress-bar {
+	--bs-progress-height: 16px;
+}
+
+.card {
+	--bs-card-bg: var(--bs-element-bg-color);
+}
+
+.table {
+	--bs-table-bg: var(--bs-body-bg);
+	thead th {
+		/*Setting table header background color*/
+		background-color: transparent;
+	}
+}
+
+.dropdown-menu {
+	--bs-dropdown-bg: var(--bs-element-bg-color);
+}
+
+.input-group-text {
+	border-radius: 0;
+}
+
+.react-json-view {
+	background-color: transparent !important;
+}
+
+/*Fix the position of the monaco hover marker tooltip*/
+.monaco-hover {
+	position: fixed;
+}

package/dist/styles/constants/theme-dark.scss

@@ -0,0 +1,62 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+[data-bs-theme=dark] {
+
+	/* Bootstrap color variables */
+
+	--bs-primary: var(--soft-sky-blue);
+	--bs-primary-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--soft-sky-blue);
+	--bs-link-color-rgb: var(--soft-sky-blue-rgb);
+
+	--bs-link-hover-color: var(--pastel-sky-blue);
+	--bs-link-hover-color-rgb: var(--pastel-sky-rgb);
+
+	--bs-code-color: var(--tropical-rainforest);
+	--bs-code-color-rgb: var(--tropical-rainforest-rgb);
+
+	--bs-body-bg: var(--deep-space-blue);
+	--bs-body-bg-rgb: var(--deep-space-blue-rgb);
+
+	--bs-body-color: var(--pastel-sky-blue);
+	--bs-body-color-rgb: var(--pastel-sky-blue-rgb);
+
+	--bs-border-color: var(--deep-ocean-blue);
+	--bs-border-color-rgb: var(--deep-ocean-blue-rgb);
+
+	--bs-input-bg-color: var(--midnight-blue);
+	--bs-input-bg-color-rgb: var(--midnight-blue);
+
+	--bs-element-bg-color: var(--nightfall-blue);
+	--bs-element-bg-color-rgb: var(--nightfall-blue);
+
+	--bs-alert-info-color: var(--deep-space-blue);
+	--bs-alert-info-color-rgb: var(--deep-space-blue-rgb);
+
+	/* Non bootstrap color variables */
+
+	--table-row-hover-bg-color: var(--charcoal-blue);
+	--table-row-hover-bg-color-rgb: var(--charcoal-blue-rgb);
+}
+
+[data-bs-theme=dark] {
+	.progress-bar {
+		--bs-progress-bar-color: var(--white);
+		--bs-progress-bar-bg: var(--soft-sky-blue);
+	}
+
+	.badge.bg-info {
+		--bs-badge-color: var(--deep-space-blue);
+	}
+}

package/dist/styles/constants/theme-light.scss

@@ -0,0 +1,53 @@
+// Set only `--bs-*-color` and `--bs-*-color-rgb` variables from Bootstrap 5
+// https://getbootstrap.com/docs/5.3/customize/css-variables/
+
+:root, [data-bs-theme=light] {
+
+	/* Bootstrap color variables */
+
+	--bs-primary: var(--royal-blue);
+	--bs-primary-rgb: var(--royal-blue-rgb);
+
+	--bs-secondary: var(--lavender-mist);
+	--bs-secondary-rgb: var(--lavender-mist-rgb);
+
+	--bs-light: var(--polar-mist);
+	--bs-light-rgb: var(--polar-mist-rgb);
+
+	--bs-dark: var(--deep-space-blue);
+	--bs-dark-rgb: var(--deep-space-blue-rgb);
+
+	--bs-link-color: var(--royal-blue);
+	--bs-link-color-rgb: var(--royal-blue-rgb);
+
+	--bs-link-hover-color: var(--royal-blue);
+	--bs-link-hover-color-rgb: var(--royal-blue-rgb);
+
+	--bs-code-color: var(--teal);
+	--bs-code-color-rgb: var(--teal-rgb);
+
+	--bs-body-bg: var(--polar-mist);
+	--bs-body-bg-rgb: var(--polar-mist-rgb); 
+
+	--bs-body-color: var(--black);
+	--bs-body-color-rgb: var(--black-rgb);
+
+	--bs-border-color: var(--lavender-mist);
+	--bs-border-color-rgb: var(--lavender-mist-rgb);
+
+	--bs-input-bg-color: var(--white);
+	--bs-input-bg-color-rgb: var(--white-rgb);
+
+	--bs-element-bg-color: var(--white);
+	--bs-element-bg-color-rgb: var(--white-rgb);
+
+	/* Non bootstrap color variables */
+
+	--table-row-hover-bg-color: var(--soft-gray);
+	--table-row-hover-bg-color-rgb: var(--soft-gray-rgb);
+}
+
+:root, [data-bs-theme=light] .progress-bar {
+	--bs-progress-bar-color: var(--white);
+	--bs-progress-bar-bg: var(--royal-blue);
+}