mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Menu Adjustments (#2450)

Browse Source
This commit is contained in:
Alex
2022-11-13 12:23:55 -06:00
committed by GitHub
parent e7ec3fe61f
commit 2f578010a0
8 changed files with 142 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/package.json
View File

@@ -30,7 +30,7 @@
"kbar": "^0.1.0-beta.34",
"local-storage-fallback": "^4.1.1",
"lodash": "^4.17.21",
"mds": "https://github.com/minio/mds.git#v0.0.3",
"mds": "https://github.com/minio/mds.git#v0.0.4",
"minio": "^7.0.28",
"moment": "^2.29.4",
"react": "^18.1.0",

45
portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx
View File

@@ -1,45 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import {
AGPLV3LightLogo,
EnterpriseLightLogo,
StandardLightLogo,
} from "../../../../icons";
const LicensedConsoleLogo = ({
plan,
isLoading,
}: {
plan: string;
isLoading: boolean;
}) => {
let licenseLogo = null;
if (isLoading) {
return licenseLogo;
} else if (plan === "STANDARD") {
licenseLogo = <StandardLightLogo style={{ width: 88 }} />;
} else if (plan === "ENTERPRISE") {
licenseLogo = <EnterpriseLightLogo style={{ width: 100 }} />;
} else {
licenseLogo = <AGPLV3LightLogo style={{ width: 60 }} />;
}
return licenseLogo;
};
export default LicensedConsoleLogo;

39
portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
View File

@@ -21,16 +21,13 @@ import Grid from "@mui/material/Grid";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { AppState, useAppDispatch } from "../../../../store";
import OperatorLogo from "../../../../icons/OperatorLogo";
import ConsoleLogo from "../../../../icons/ConsoleLogo";
import DirectPVLogo from "../../../../icons/DirectPVLogo";
import { CircleIcon, ObjectManagerIcon } from "../../../../icons";
import { Box } from "@mui/material";
import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
import { selFeatures } from "../../consoleSlice";
import { selDirectPVMode, selOpMode } from "../../../../systemSlice";
import { Button } from "mds";
import { ApplicationLogo, Button } from "mds";
const styles = (theme: Theme) =>
createStyles({
@@ -57,9 +54,8 @@ const styles = (theme: Theme) =>
},
logo: {
marginLeft: 34,
fill: theme.palette.primary.main,
"& .min-icon": {
width: 120,
"& svg": {
width: 150,
},
},
middleComponent: {
@@ -124,9 +120,20 @@ const PageHeader = ({
const newItems = useSelector(
(state: AppState) => state.objectBrowser.objectManager.newItems
);
const licenseInfo = useSelector(
(state: AppState) => state?.system?.licenseInfo
);
const [newObject, setNewObject] = useState<boolean>(false);
const { plan = "" } = licenseInfo || {};
let logoPlan = "AGPL";
if (plan === "STANDARD" || plan === "ENTERPRISE") {
logoPlan = plan.toLowerCase();
}
useEffect(() => {
if (managerObjects.length > 0 && !managerOpen) {
setNewObject(true);
@@ -159,10 +166,24 @@ const PageHeader = ({
{!sidebarOpen && (
<div className={classes.logo}>
{!operatorMode && !directPVMode ? (
<ConsoleLogo />
<ApplicationLogo
applicationName={"console"}
subVariant={
logoPlan as
| "AGPL"
| "simple"
| "standard"
| "enterprise"
| undefined
}
/>
) : (
<Fragment>
{directPVMode ? <DirectPVLogo /> : <OperatorLogo />}
{directPVMode ? (
<ApplicationLogo applicationName={"directpv"} />
) : (
<ApplicationLogo applicationName={"operator"} />
)}
</Fragment>
)}
</div>

16
portal-ui/src/screens/Console/Common/TooltipWrapper/TooltipWrapper.tsx
View File

@@ -21,15 +21,29 @@ interface ITooltipWrapperProps {
tooltip: string;
children: any;
errorProps?: any;
placement?:
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
}
const TooltipWrapper = ({
tooltip,
children,
errorProps = null,
placement,
}: ITooltipWrapperProps) => {
return (
<Tooltip title={tooltip}>
<Tooltip title={tooltip} placement={placement}>
<span>
{errorProps ? cloneElement(children, { ...errorProps }) : children}
</span>

7
portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx
View File

@@ -24,10 +24,13 @@ const MenuSectionHeader = ({ label }: IMenuSectionHeader) => {
return (
<div
style={{
fontSize: 18,
color: "#fff",
fontSize: 15,
color: "#b3c9d9",
marginTop: 20,
marginBottom: 10,
borderBottom: "#0F446C 1px solid",
marginRight: 25,
paddingBottom: 5,
}}
className={"menuHeader"}
>

4
portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx
View File

@@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
export const menuItemContainerStyles: any = {
padding: "12px 0",
padding: "7px 0",
"div:nth-of-type(2)": {
flexGrow: 0,
marginRight: "15px",
@@ -23,7 +23,7 @@ export const menuItemContainerStyles: any = {
"&.active": {
background:
"transparent linear-gradient(270deg, #00000000 0%, #051d39 53%, #54545400 100%) 0% 0% no-repeat padding-box",
"transparent linear-gradient(270deg, #00000000 0%, #005F81 53%, #54545400 100%) 0% 0% no-repeat padding-box",
backgroundBlendMode: "multiply",
"& span": {

140
portal-ui/src/screens/Console/Menu/MenuToggle.tsx
View File

@@ -15,13 +15,11 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, Suspense, useEffect } from "react";
import OperatorLogo from "../../../icons/OperatorLogo";
import DirectPVLogo from "../../../icons/DirectPVLogo";
import { ApplicationLogo } from "mds";
import { LoginMinIOLogo, VersionIcon } from "../../../icons";
import { VersionIcon } from "../../../icons";
import { Box, IconButton } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import LicensedConsoleLogo from "../Common/Components/LicensedConsoleLogo";
import { useSelector } from "react-redux";
import useApi from "../Common/Hooks/useApi";
import {
@@ -30,7 +28,7 @@ import {
setLicenseInfo,
} from "../../../systemSlice";
import { AppState, useAppDispatch } from "../../../store";
import MenuToggleIcon from "../../../icons/MenuToggleIcon";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
type MenuToggleProps = {
isOpen: boolean;
@@ -67,10 +65,22 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
const { plan = "" } = licenseInfo || {};
let logoPlan = "simple";
if (!isLicenseLoading) {
if (plan === "STANDARD" || plan === "ENTERPRISE") {
logoPlan = plan.toLowerCase();
} else {
logoPlan = "AGPL";
}
}
return (
<Box
className={`${stateClsName}`}
sx={{
width: "100%",
cursor: "pointer",
"&::after": {
width: "80%",
height: "1px",
@@ -79,6 +89,15 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
backgroundColor: "#0F446C",
margin: "0px auto",
},
"&.wide:hover": {
background:
"transparent linear-gradient(270deg, #00000000 0%, #051d39 53%, #54545400 100%) 0% 0% no-repeat padding-box",
},
}}
onClick={() => {
if (isOpen) {
onToggle(false);
}
}}
>
<Box
@@ -101,11 +120,15 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
},
"& .logo": {
background: "transparent",
width: "180px",
display: "flex",
alignItems: "center",
justifyContent: "center",
"&.wide": {
flex: "1",
"& svg": {
fill: "white",
width: 120,
maxWidth: 180,
},
},
"&.mini": {
@@ -119,26 +142,37 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
}}
>
{isOpen ? (
<div className={`logo ${stateClsName}`}>
{!operatorMode && !directPVMode ? (
<Fragment>
<div
style={{ marginLeft: "4px", width: 100, textAlign: "right" }}
>
<LoginMinIOLogo style={{ width: 100 }} />
<br />
<LicensedConsoleLogo
plan={plan}
isLoading={isLicenseLoading}
<TooltipWrapper
tooltip={"Click to Collapse Menu"}
placement={"right"}
>
<div className={`logo ${stateClsName}`}>
{!operatorMode && !directPVMode ? (
<Fragment>
<ApplicationLogo
applicationName={"console"}
subVariant={
logoPlan as
| "AGPL"
| "simple"
| "standard"
| "enterprise"
| undefined
}
inverse
/>
</div>
</Fragment>
) : (
<Fragment>
{directPVMode ? <DirectPVLogo /> : <OperatorLogo />}
</Fragment>
)}
</div>
</Fragment>
) : (
<Fragment>
{directPVMode ? (
<ApplicationLogo applicationName={"directpv"} inverse />
) : (
<ApplicationLogo applicationName={"operator"} inverse />
)}
</Fragment>
)}
</div>
</TooltipWrapper>
) : (
<div className={`logo ${stateClsName}`}>
<Suspense fallback={<div>...</div>}>
@@ -147,38 +181,36 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
</div>
)}
<IconButton
className={`${stateClsName}`}
sx={{
height: "30px",
width: "30px",
"&.mini": {
"&:hover": {
background: "#081C42",
{!isOpen && (
<IconButton
className={`${stateClsName}`}
sx={{
height: "30px",
width: "30px",
"&.mini": {
"&:hover": {
background: "#081C42",
},
},
},
"&:hover": {
borderRadius: "50%",
background: "#073052",
},
"& svg": {
fill: "#ffffff",
height: "18px",
width: "18px",
},
}}
onClick={() => {
if (isOpen) {
onToggle(false);
} else {
"&:hover": {
borderRadius: "50%",
background: "#073052",
},
"& svg": {
fill: "#ffffff",
height: "18px",
width: "18px",
},
}}
onClick={() => {
onToggle(true);
}
}}
size="small"
>
{isOpen ? <MenuToggleIcon /> : <MenuIcon />}
</IconButton>
}}
size="small"
>
<MenuIcon />
</IconButton>
)}
</Box>
</Box>
);

6
portal-ui/yarn.lock
View File

@@ -7969,9 +7969,9 @@ mdn-data@2.0.4:
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
"mds@https://github.com/minio/mds.git#v0.0.3":
version "0.0.3"
resolved "https://github.com/minio/mds.git#788ee3d5db7718c87abbf2d4687791ef9e04ffbc"
"mds@https://github.com/minio/mds.git#v0.0.4":
version "0.0.4"
resolved "https://github.com/minio/mds.git#7936311f13a24d772208812b983fc0c939db0532"
dependencies:
"@types/styled-components" "^5.1.25"
styled-components "^5.3.6"