width: 100vw;
height: 100vh;
}
+
+.app-banner {
+ width: calc(100% - 2rem);
+ height: 150px;
+ z-index: 11111;
+ position: fixed;
+ top: 0px;
+ background-color: #00bfa5;
+ border: 1px solid #01685a;
+ color: #ffffff;
+ margin: 1rem;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+.app-banner span {
+ font-size: 2rem;
+ text-align: center;
+ display: block;
+ margin: auto;
+ padding: 2rem;
+}
\ No newline at end of file
//
// SPDX-License-Identifier: AGPL-3.0
-import React from 'react';
+import React, { useState, useCallback } from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { Route, Switch } from "react-router";
import { ProjectPanel } from "views/project-panel/project-panel";
routes = React.createElement(React.Fragment, null, pluginConfig.centerPanelList.reduce(reduceRoutesFn, React.Children.toArray(routes.props.children)));
+const Banner = () => {
+ const [visible, setVisible] = useState(true);
+ const hideBanner = useCallback(() => setVisible(false), []);
+
+ return visible ?
+ <div id="banner" onClick={hideBanner} className="app-banner">
+ <span>
+ This is important message
+ </span>
+ </div> : null;
+}
+
export const WorkbenchPanel =
withStyles(styles)((props: WorkbenchPanelProps) =>
<Grid container item xs className={props.classes.root}>
<VirtualMachineAttributesDialog />
<FedLogin />
<WebDavS3InfoDialog />
+ <Banner />
{React.createElement(React.Fragment, null, pluginConfig.dialogs)}
</Grid>
);