Neca
/
HRCenter
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 1 Релизы 0 Вики Активность
Просмотр исходного кода

added login ui & nav

feature/1161_login_page_UI
meris.ahmatovic 3 лет назад
Родитель
1c8633c7ee
Сommit
d60582ef4b
13 измененных файлов: 273 добавлений и 180 удалений
Разделённый вид Показать статистику Diff
  1. Двоичные данные
      src/assets/images/Vector.png
  2. 4
    0
      src/assets/styles/_base.scss
  3. 4
    0
      src/assets/styles/_typography.scss
  4. 1
    0
      src/assets/styles/_variables.scss
  5. 7
    7
      src/assets/styles/components/_login.scss
  6. 20
    0
      src/assets/styles/components/_nav.scss
  7. 189
    151
      src/components/MUI/NavbarComponent.js
  8. 1
    1
      src/i18n/index.js
  9. 9
    0
      src/i18n/resources/en.js
  10. 10
    1
      src/i18n/resources/rs.js
  11. 6
    0
      src/main.scss
  12. 20
    18
      src/pages/HomePage/HomePageMUI.js
  13. 2
    2
      src/pages/LoginPage/LoginPageMUI.js

Двоичные данные
src/assets/images/Vector.png Просмотреть файл


+ 4
- 0
src/assets/styles/_base.scss Просмотреть файл

@@ -26,6 +26,10 @@ html {
}
}

body{
background-color: $grayFD !important;
overflow-x: hidden;
}
html,
body,
#root {

+ 4
- 0
src/assets/styles/_typography.scss Просмотреть файл

@@ -72,3 +72,7 @@ h5 {
letter-spacing: 0.02em !important;
text-align: center !important;
}

.text-black{
color: $mainBlack;
}

+ 1
- 0
src/assets/styles/_variables.scss Просмотреть файл

@@ -12,6 +12,7 @@ $googleGray: #f1f1f1; // color of the google auth btn
$googleGray-light: #f5f5f5;
$googleGray-dark: #e9e9e9;
$mainBlack: #272727;
$grayFD: #FDFDFD;

// Colors
$color-primary: #024f86;

+ 7
- 7
src/assets/styles/components/_login.scss Просмотреть файл

@@ -24,22 +24,22 @@

.l-t-rectangle,
.r-b-rectangle {
background: #000;
height: 240px;
width: 240px;
opacity: 0.25;
position: absolute;
filter: blur(90px);
width: 180px;
height: 180px;
filter: blur(155px);
border-radius: 18px;
// transform: rotate(-15deg);
}

.l-t-rectangle {
left: 0px;
left: -60px;
top: 0px;
background: $diligPurple;
}

.r-b-rectangle {
right: 0px;
right: -60px;
bottom: 0px;
background: $mainBlue;
}

+ 20
- 0
src/assets/styles/components/_nav.scss Просмотреть файл

@@ -0,0 +1,20 @@
.full-rounded{
height: 40px;
width: 40px;
font-size: 16px;
@include flex-center;
border-radius: 50%;
background-color: $mainBlue;
color: white;
margin-right: 50px;
}

// smooth transition from app-bg color to navbar bg-color
.navLinks-cont{
background: linear-gradient(90deg, rgba(255,255,255,0.25) 15%, white);
}

.search-Icon{
margin-right: 50px;
cursor: pointer;
}

+ 189
- 151
src/components/MUI/NavbarComponent.js Просмотреть файл

@@ -1,160 +1,198 @@
import React, { useState, useMemo, useContext } from 'react';
import React, { useState, useMemo, useContext } from "react";
import {
AppBar,
Badge,
Box,
IconButton,
Toolbar,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from '@mui/material';
import { useTheme } from '@mui/system';
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import MenuList from './MenuListComponent';
import Drawer from './DrawerComponent';
import { ColorModeContext } from '../../context/ColorModeContext';
AppBar,
// Badge,
Box,
IconButton,
Toolbar,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from "@mui/material";
import HrLogo from "../../assets/images/hrcenter.png";
import searchIcon from "../../assets/images/Vector.png";
import { useTheme } from "@mui/system";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
// import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket";
import Brightness4Icon from "@mui/icons-material/Brightness4";
import Brightness7Icon from "@mui/icons-material/Brightness7";
// import MenuList from "./MenuListComponent";
import Drawer from "./DrawerComponent";
import { ColorModeContext } from "../../context/ColorModeContext";
import { useTranslation } from "react-i18next";

const NavbarComponent = () => {
const [openDrawer, setOpenDrawer] = useState(false);
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const toggleColorMode = useContext(ColorModeContext);
const navItems = [
"ads",
"selectionFlow",
"candidates",
"planer",
"patterns",
"stats",
"users",
];
const [openDrawer, setOpenDrawer] = useState(false);
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down("sm"));
const toggleColorMode = useContext(ColorModeContext);

const handleToggleDrawer = () => {
setOpenDrawer(!openDrawer);
};
const { t } = useTranslation();

const drawerContent = useMemo(
() => (
<List>
<ListItemButton divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 1</ListItemText>
</ListItemIcon>
</ListItemButton>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 2</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemText>Link 3</ListItemText>
</ListItem>
<ListItem divider>
<IconButton onClick={toggleColorMode}>
<ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</ListItem>
</List>
),
[handleToggleDrawer]
);
const handleToggleDrawer = () => {
setOpenDrawer(!openDrawer);
};

return (
<AppBar
elevation={2}
sx={{ backgroundColor: 'background.default', position: 'relative' }}
>
<Toolbar>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
>
{matches ? (
<Drawer
open={openDrawer}
toggleOpen={handleToggleDrawer}
content={drawerContent}
/>
) : (
<Box sx={{ display: 'flex' }}>
<Typography
variant="h6"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 1
</Typography>
<Typography
variant="body1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 2
</Typography>
<Typography
variant="subtitle1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 3
</Typography>
</Box>
)}
<Box>
<MenuList />
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{matches ? (
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<Box>
<IconButton>
<Badge badgeContent={3} color="primary">
<ShoppingBasketIcon color="action" />
</Badge>
</IconButton>
<IconButton sx={{ ml: 1 }} onClick={toggleColorMode}>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</Box>
)}
</Box>
</Box>
</Toolbar>
</AppBar>
);
const drawerContent = useMemo(
() => (
<List>
{navItems.map((n) => (
<ListItemButton key={n} divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText
variant="body1"
sx={{
marginRight: "50px",
cursor: "pointer",
textAlign: "right",
lineHeight: "20.11px",
fontWeight: "400",
color: "text.primary",
marginY: "0",
padding: "0",
}}
className="text-black"
>
{t("nav." + n)}
</ListItemText>
</ListItemIcon>
</ListItemButton>
))}
<ListItem divider>
<IconButton onClick={toggleColorMode}>
<ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
{theme.palette.mode === "dark" ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</ListItem>
</List>
),
[handleToggleDrawer]
);

return (
<AppBar
elevation={0}
sx={{
backgroundColor: "transparent",
position: "relative",
width: "100%",
padding: "0",
}}
>
<Toolbar
sx={{
padding: "0px",
margin: "0px",
width: "100%",
}}
>
<Box
component="div"
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
padding: "0px",
margin: "0px",
// md: {paddingX: "72px"}
// paddingX: "72px"
}}
>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
{matches ? (
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<Box>
{/* <IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton> */}
<img
style={{ height: "37px", width: "37px", marginLeft: "72px" }}
src={HrLogo}
/>
</Box>
)}
</Box>
{matches ? (
<Drawer
open={openDrawer}
toggleOpen={handleToggleDrawer}
content={drawerContent}
/>
) : (
<Box
sx={{
display: "flex",
alignItems: "center",
paddingRight: "20px",
justifyContent: "flex-end",
height: "81px",
width: "1076px",
borderBottom: "1px solid #F4F4F4",
boxSizing: "border-box",
}}
className="navLinks-cont"
>
{navItems.map((n) => (
<Typography
variant="body1"
key={n}
sx={{
marginRight: "50px",
cursor: "pointer",
textAlign: "right",
lineHeight: "20.11px",
fontWeight: "400",
// color: "text.primary",
marginY: "0",
padding: "0",
}}
className="text-black"
>
{t("nav." + n)}
</Typography>
))}
<div className="search-Icon">
<img src={searchIcon} />
</div>
<div className="full-rounded">DR</div>
</Box>
)}
{/* <Box>
<MenuList />
</Box> */}
</Box>
</Toolbar>
</AppBar>
);
};

export default NavbarComponent;

+ 1
- 1
src/i18n/index.js Просмотреть файл

@@ -6,7 +6,7 @@ import enTranslations from './resources/en';
import rsTranslations from './resources/rs';

i18n.use(initReactI18next).init({
lng: 'en',
lng: 'rs',
fallbackLng: 'en',
debug: false,
supportedLngs: ['en','rs'],

+ 9
- 0
src/i18n/resources/en.js Просмотреть файл

@@ -91,5 +91,14 @@ export default {
apiErrors:{
ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty",
UsernameDoesNotExist: "Username does not exist"
},
nav:{
ads: 'Ads',
selectionFlow: 'Selection flow',
candidates: 'Candidates',
planer: 'Planer',
patterns: 'Patterns',
stats: 'Stats',
users: 'Users'
}
};

+ 10
- 1
src/i18n/resources/rs.js Просмотреть файл

@@ -96,6 +96,15 @@ export default {
// apiErrors:{
// ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty",
// UsernameDoesNotExist: "Username does not exist"
// }
// },
nav:{
ads: 'Oglasi',
selectionFlow: 'Tok Selekcije',
candidates: 'Kandidati',
planer: 'Planer',
patterns: 'Šabloni',
stats: 'Statistika',
users: 'Korisnici'
}
};

+ 6
- 0
src/main.scss Просмотреть файл

@@ -18,10 +18,16 @@
@import './assets/styles/components/input';
@import './assets/styles/components/error-page';
@import './assets/styles/components/rules';
@import './assets/styles/components/nav';
@import './assets/styles/layout';
@import './assets/styles/overwrite';
@import './assets/styles/utility';

.flex-center{
@include flex-center;
}

// ================= mui overrides
.css-122f4x8-MuiToolbar-root {
padding: 0 !important;
}

+ 20
- 18
src/pages/HomePage/HomePageMUI.js Просмотреть файл

@@ -1,17 +1,19 @@
import React from 'react';
import { Box, Grid } from '@mui/material';
import Navbar from '../../components/MUI/NavbarComponent';
import Modals from '../../components/MUI/Examples/ModalsExample';
import DataGrid from '../../components/MUI/Examples/DataGridExample';
import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
import PagingSortingFilteringServerSide from '../../components/MUI/Examples/PagingSortingFilteringExampleServerSide';
import RandomDataProvider from '../../context/RandomDataContext';
import React from "react";
// import { Box, Grid } from '@mui/material';
import Navbar from "../../components/MUI/NavbarComponent";
// import Modals from '../../components/MUI/Examples/ModalsExample';
// import DataGrid from '../../components/MUI/Examples/DataGridExample';
// import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
// import PagingSortingFilteringServerSide from '../../components/MUI/Examples/PagingSortingFilteringExampleServerSide';
// import RandomDataProvider from '../../context/RandomDataContext';

const HomePage = () => {
return (
<>
<Navbar />
<Box sx={{ mt: 4, mx: 4 }}>
return (
<div>
<Navbar />
<div className="l-t-rectangle"></div>
<div className="r-b-rectangle"></div>
{/* <Box sx={{ mt: 4, mx: 4 }}>
<Grid container spacing={2} justifyContent="center">
<Grid item xs={12} md={3}>
<Modals />
@@ -22,16 +24,16 @@ const HomePage = () => {
<Grid item xs={12} md={9}>
<PagingSortingFiltering />
</Grid>
<Grid item xs={12} md={9}>
{/* Move to higher components? */}
<RandomDataProvider>
<Grid item xs={12} md={9}> */}
{/* Move to higher components? */}
{/* <RandomDataProvider>
<PagingSortingFilteringServerSide />
</RandomDataProvider>
</Grid>
</Grid>
</Box>
</>
);
</Box> */}
</div>
);
};

export default HomePage;

+ 2
- 2
src/pages/LoginPage/LoginPageMUI.js Просмотреть файл

@@ -100,8 +100,8 @@ const LoginPage = ({ history }) => {
className="c-login-container"
fullwidth="true"
>
<div className="l-t-rectangle">s</div>
<div className="r-b-rectangle">s</div>
<div className="l-t-rectangle"></div>
<div className="r-b-rectangle"></div>
<Box
sx={{
marginTop: 2,

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить