diff --git a/VERSION b/VERSION index a6534bb33..798e38995 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -6.2.5 +6.3.0 diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx index 7882b54a0..4d6123d43 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx @@ -22,12 +22,13 @@ class RoutingMenu extends React.Component & MenuProps, { if (this.props.onActiveMenuItemChanged != null) { this.props.onActiveMenuItemChanged(menuItem); } + this.props.history.push(menuItem.NavPath); } protected renderMenu(menuItems: MenuItemModel[]): React.ReactNode { return menuItems.map ((menuItem, idx) => { return ( - + this.handleMenuItemClick(menuItem)} /> ); }); } diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx index 47e88946a..6cb7b5887 100644 --- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx +++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx @@ -3,12 +3,10 @@ * Licensed under the Apache License, Version 2.0 */ -import { mdiChevronDown, mdiChevronUp } from "@mdi/js"; -import Icon from "@mdi/react"; import { Location, UnregisterCallback } from "history"; import * as React from "react"; import { Link, RouteComponentProps, withRouter } from "react-router-dom"; -import { Col, Collapse, Container, Row } from "reactstrap"; +import ListGroupItem from "reactstrap/lib/ListGroupItem"; import MenuItemModel from "../../models/MenuItemModel"; interface MenuItemProps { @@ -57,46 +55,16 @@ class RoutingMenuItem extends React.Component & MenuItem } } - private renderSubMenuItems(): React.ReactNode { - return this.props.MenuItem.SubMenuItems.map ((menuItem, idx) => - ); - } - public render(): React.ReactNode { - const bold = this.props.location.pathname === this.props.MenuItem.NavPath ? "font-bold" : ""; - const hasSubItems = this.props.MenuItem.SubMenuItems.length > 0; + const isActive = this.props.location.pathname.includes(this.props.MenuItem.NavPath); return ( -
- ) => this.handleMenuItemClick(e)}> - - - - { this.props.MenuItem.Icon != undefined && - - } - {this.props.MenuItem.Name} - - {this.props.MenuItem.Content} - - - { hasSubItems && - - } - - - - - {this.renderSubMenuItems()} - -
+ ) => this.handleMenuItemClick(e)}> + + {this.props.MenuItem.Name} + + {this.props.MenuItem.Content} + ); } } diff --git a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx new file mode 100644 index 000000000..a69e0aaff --- /dev/null +++ b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx @@ -0,0 +1,79 @@ +/* + * Copyright (c) 2020, Phoenix Contact GmbH & Co. KG + * Licensed under the Apache License, Version 2.0 +*/ + +import { mdiCogs, mdiConsole, mdiConsoleLine, mdiDatabase, mdiHexagon, mdiHexagonMultiple, mdiMonitor } from "@mdi/js"; +import Icon from "@mdi/react"; +import * as React from "react"; +import { connect } from "react-redux"; +import { Link, NavLink } from "react-router-dom"; +import { Nav, Navbar, NavItem } from "reactstrap"; +import { FailureBehaviour } from "../../modules/models/FailureBehaviour"; +import { ModuleStartBehaviour } from "../../modules/models/ModuleStartBehaviour"; +import ServerModuleModel from "../../modules/models/ServerModuleModel"; +import { updateFailureBehaviour, updateStartBehaviour } from "../../modules/redux/ModulesActions"; +import { AppState } from "../redux/AppState"; +import { ActionType } from "../redux/Types"; + +interface ModuleHeaderPropModel { + Module?: ServerModuleModel; +} + +const mapStateToProps = (state: AppState): ModuleHeaderPropModel => { + return { + }; +}; + +const mapDispatchToProps = (dispatch: React.Dispatch>): ModuleDispatchPropModel => { + return { + onUpdateStartBehaviour: (moduleName: string, startBehaviour: ModuleStartBehaviour) => dispatch(updateStartBehaviour(moduleName, startBehaviour)), + onUpdateFailureBehaviour: (moduleName: string, failureBehaviour: FailureBehaviour) => dispatch(updateFailureBehaviour(moduleName, failureBehaviour)), + }; +}; + +interface ModulePropModel { + ModuleName: string; +} + +export class ModuleHeader extends React.Component { + constructor(props: ModulePropModel & ModuleDispatchPropModel) { + super(props); + + // This.state = { HasWarningsOrErrors: false, IsNotificationDialogOpened: false, SelectedNotification: null }; + } + + public render(): React.ReactNode { + return ( + + + + ); + } +} + +interface ModuleDispatchPropModel { + onUpdateStartBehaviour?(moduleName: string, startBehaviour: ModuleStartBehaviour): void; + onUpdateFailureBehaviour?(moduleName: string, failureBehaviour: FailureBehaviour): void; +} + +export default connect<{}, ModuleDispatchPropModel>(null, mapDispatchToProps)(ModuleHeader); diff --git a/src/Moryx.CommandCenter.Web/src/common/redux/Types.ts b/src/Moryx.CommandCenter.Web/src/common/redux/Types.ts index b24115240..4b47f8660 100644 --- a/src/Moryx.CommandCenter.Web/src/common/redux/Types.ts +++ b/src/Moryx.CommandCenter.Web/src/common/redux/Types.ts @@ -7,5 +7,5 @@ interface Action { type: string; payload?: T; } - - export type ActionType = Action; + +export type ActionType = Action; diff --git a/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss b/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss index dd1ff1f70..d847f7ce9 100644 --- a/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss +++ b/src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss @@ -1,8 +1,11 @@ @import "Theme"; .menu-item { - padding: 0px 0px 0px 5px; cursor: pointer; + line-height: 1.15; + font-size: 11pt; + border-left: 0px; + border-right: 0px; } .menu-item:hover { @@ -15,4 +18,12 @@ .menu-item a:hover { text-decoration: none; +} + +.menu-item.active { + background: $gray-300; + border-color: $gray-300; + border-left: 0px; + border-right: 0px; + border-radius: 0px; } \ No newline at end of file diff --git a/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss b/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss index 70b2e8595..1b9991330 100644 --- a/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss +++ b/src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss @@ -118,6 +118,8 @@ svg.icon-red { .navbar { transition: 0.3s; overflow: hidden; + padding: 0; + height: inherit; } .navbar-default.navbar.navbar-expand-md { @@ -129,18 +131,20 @@ svg.icon-red { list-style-type: none; margin-left: 0; margin-top: 0; - height: 40px; - border: 1px solid $gray-200; - border-radius: $border-radius; + height: inherit; } .nav-item { height: 100%; display: flex; align-items: center; - padding: 5px; margin-top: 0 !important; justify-content: center; + border-right: 1px solid $gray-200; + } + + .nav-item:last-child { + border: none; } .nav-item:hover { @@ -152,12 +156,21 @@ svg.icon-red { .active { background: $gray-300; margin-top: 0 !important; - border-radius: $border-radius; } .navbar-nav-link { color: $gray-800; text-decoration: none; + height: 100%; + padding: 5px; + } + + a.navbar-nav-link { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0px 7px; } .navbar-nav-link:hover, @@ -170,6 +183,13 @@ svg.icon-red { height: 50px; } + .nav-listgroup-item { + padding: 0; + height: 40px; + border-left: none; + border-right: none; + } + /* * Content Panel */ diff --git a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx index e432d0c54..381276241 100644 --- a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx +++ b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx @@ -3,13 +3,14 @@ * Licensed under the Apache License, Version 2.0 */ -import { mdiBriefcase, mdiCheckboxMultipleBlank, mdiComment, mdiDatabase, mdiHexagonMultiple} from "@mdi/js"; +import { mdiBriefcase, mdiComment, mdiDatabase, mdiHexagonMultiple} from "@mdi/js"; import Icon from "@mdi/react"; import * as React from "react"; import NotificationSystem = require("react-notification-system"); import { connect } from "react-redux"; -import { Link, Route, Switch } from "react-router-dom"; +import { Link, Route, RouteComponentProps, Switch } from "react-router-dom"; import { Card, CardBody, CardHeader, Col, Row } from "reactstrap"; +import ListGroup from "reactstrap/lib/ListGroup"; import Nav from "reactstrap/lib/Nav"; import Navbar from "reactstrap/lib/Navbar"; import NavItem from "reactstrap/lib/NavItem"; @@ -73,10 +74,13 @@ class Database extends React.Component{namespace}

), SubMenuItems: [], }; } @@ -98,7 +102,7 @@ class Database extends React.Component - +