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

UX Top bar height (#2146)

Browse Source
This commit is contained in:
Prakash Senthil Vel
2022-06-24 17:25:30 +00:00
committed by GitHub
parent beeb188d7e
commit b4d2d65c5c
3 changed files with 93 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@ const styles = (theme: Theme) =>
createStyles({
headerContainer: {
width: "100%",
minHeight: 79,
minHeight: 83,
display: "flex",
backgroundColor: "#fff",
left: 0,

6
portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx
View File

@@ -68,7 +68,6 @@ const ConsoleMenuList = ({
justifyContent: "space-between",
height: "100%",
flex: 1,
marginTop: "35px",
paddingRight: "8px",
"&.wide": {
@@ -77,10 +76,6 @@ const ConsoleMenuList = ({
"&.mini": {
marginLeft: "10px",
marginTop: "30px",
xs: {
marginTop: "30px",
},
},
}}
>
@@ -131,7 +126,6 @@ const ConsoleMenuList = ({
paddingTop: 0,
"&.mini": {
padding: 0,
margin: "auto",
display: "flex",
alignItems: "center",
justifyContent: "center",

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

@@ -63,96 +63,108 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
return (
<Box
className={`${stateClsName}`}
sx={{
marginLeft: "26px",
marginTop: "28px",
marginRight: "8px",
display: "flex",
height: "36px",
"&.mini": {
flexFlow: "column",
alignItems: "center",
margin: "auto",
marginTop: "28px",
},
"& .logo": {
background: "transparent",
"&.wide": {
flex: "1",
"& svg": {
fill: "white",
width: 120,
},
},
"&.mini": {
marginBottom: "5px",
flex: "1",
color: "#ffffff",
"& svg": {
width: 24,
fill: "rgba(255, 255, 255, 0.8)",
},
},
},
width: "100%",
boxShadow: "0 3px 10px -6px #426198",
}}
>
{isOpen ? (
<div className={`logo ${stateClsName}`}>
{operatorMode ? (
<OperatorLogo />
) : (
<Fragment>
<div style={{ margin: "auto", width: 100, textAlign: "right" }}>
<LoginMinIOLogo style={{ width: 100 }} />
<br />
<LicensedConsoleLogo plan={plan} isLoading={isLicenseLoading} />
</div>
</Fragment>
)}
</div>
) : (
<div className={`logo ${stateClsName}`}>
<Suspense fallback={<div>...</div>}>
<VersionIcon />
</Suspense>
</div>
)}
<IconButton
<Box
className={`${stateClsName}`}
sx={{
height: "30px",
width: "30px",
marginLeft: "26px",
marginRight: "8px",
display: "flex",
alignItems: "center",
height: "83px",
"&.mini": {
marginBottom: "10px",
"&:hover": {
background: "#081C42",
flexFlow: "column",
display: "flex",
justifyContent: "center",
gap: "3px",
alignItems: "center",
marginLeft: "auto",
marginRight: "auto",
},
"& .logo": {
background: "transparent",
"&.wide": {
flex: "1",
"& svg": {
fill: "white",
width: 120,
},
},
"&.mini": {
color: "#ffffff",
"& svg": {
width: 24,
fill: "rgba(255, 255, 255, 0.8)",
},
},
},
"&:hover": {
borderRadius: "50%",
background: "#073052",
},
"& svg": {
fill: "#ffffff",
height: "18px",
width: "18px",
},
}}
onClick={() => {
if (isOpen) {
onToggle(false);
} else {
onToggle(true);
}
}}
size="small"
>
{isOpen ? <MenuToggleIcon /> : <MenuIcon />}
</IconButton>
{isOpen ? (
<div className={`logo ${stateClsName}`}>
{operatorMode ? (
<OperatorLogo />
) : (
<Fragment>
<div
style={{ marginLeft: "4px", width: 100, textAlign: "right" }}
>
<LoginMinIOLogo style={{ width: 100 }} />
<br />
<LicensedConsoleLogo
plan={plan}
isLoading={isLicenseLoading}
/>
</div>
</Fragment>
)}
</div>
) : (
<div className={`logo ${stateClsName}`}>
<Suspense fallback={<div>...</div>}>
<VersionIcon />
</Suspense>
</div>
)}
<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 {
onToggle(true);
}
}}
size="small"
>
{isOpen ? <MenuToggleIcon /> : <MenuIcon />}
</IconButton>
</Box>
</Box>
);
};