selenaaasi
/
trampa-frontend
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Navbar components added

feature/code-cleanup-joca
Jovan Petrovic vor 3 Jahren
Ursprung
2f280df1b6
Commit
d40dd83e3c
7 geänderte Dateien mit 364 neuen und 267 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 25
    267
      src/components/MUI/NavbarComponent.js
  2. 84
    0
      src/components/Popovers/MyMessages/MyMessages.js
  3. 18
    0
      src/components/Popovers/MyMessages/MyMessages.styled.js
  4. 102
    0
      src/components/Popovers/MyPosts/MyPosts.js
  5. 29
    0
      src/components/Popovers/MyPosts/MyPosts.styled.js
  6. 75
    0
      src/components/Popovers/MyProfile/MyProfile.js
  7. 31
    0
      src/components/Popovers/MyProfile/MyProfile.styled.js

+ 25
- 267
src/components/MUI/NavbarComponent.js Datei anzeigen

import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import { SearchInput } from "./NavbarComponent.styled"; import { SearchInput } from "./NavbarComponent.styled";
import { import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Avatar,
Divider,
AppBar, AppBar,
Badge, Badge,
Box, Box,
useMediaQuery, useMediaQuery,
SvgIcon, SvgIcon,
Typography, Typography,
Button,
} from "@mui/material"; } from "@mui/material";
import { useTheme } from "@mui/system"; import { useTheme } from "@mui/system";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined"; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import MailIcon from "@mui/icons-material/EmailOutlined";
import Autorenew from "@mui/icons-material/Autorenew"; import Autorenew from "@mui/icons-material/Autorenew";
import MailIcon from "@mui/icons-material/Mail";
import AccountCircle from "@mui/icons-material/AccountCircle";
import AccountCircle from "@mui/icons-material/PersonOutlineOutlined";
import SearchIcon from "@mui/icons-material/Search";
import Drawer from "./DrawerComponent"; import Drawer from "./DrawerComponent";
import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton"; import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants"; import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants";
import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants"; import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
import EyeOn from "@mui/icons-material/Visibility";
import SearchIcon from "@mui/icons-material/Search";
import PopoverComponent from "./PopoverComponent"; import PopoverComponent from "./PopoverComponent";
import { MyPosts } from "../Popovers/MyPosts/MyPosts";
import { MyMessages } from "../Popovers/MyMessages/MyMessages";
import { MyProfile } from "../Popovers/MyProfile/MyProfile";


const NavbarComponent = () => { const NavbarComponent = () => {
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
setPostsPopoverOpen(true); setPostsPopoverOpen(true);
setPostsAnchorEl(e.currentTarget); setPostsAnchorEl(e.currentTarget);
}} }}
sx={{ borderRadius: "4px" }}
> >
<Autorenew /> <Autorenew />
<Typography sx={{ ml: 2 }}>Moje objave</Typography> <Typography sx={{ ml: 2 }}>Moje objave</Typography>
setMsgPopoverOpen(true); setMsgPopoverOpen(true);
setMsgAnchorEl(e.currentTarget); setMsgAnchorEl(e.currentTarget);
}} }}
sx={{ borderRadius: "4px" }}
> >
<Badge badgeContent={3} color="primary"> <Badge badgeContent={3} color="primary">
<MailIcon color="action" /> <MailIcon color="action" />
setUserPopoverOpen(true); setUserPopoverOpen(true);
setUserAnchorEl(e.currentTarget); setUserAnchorEl(e.currentTarget);
}} }}
sx={{ borderRadius: "4px" }}
> >
<AccountCircle /> <AccountCircle />
<Typography sx={{ ml: 2 }}>Moj profil</Typography> <Typography sx={{ ml: 2 }}>Moj profil</Typography>
setPostsPopoverOpen(true); setPostsPopoverOpen(true);
setPostsAnchorEl(e.currentTarget); setPostsAnchorEl(e.currentTarget);
}} }}
sx={{ ml: 4, mr: 2 }}
sx={{
ml: 4,
mr: 2,
background: "#E4E4E4",
color: PRIMARY_PURPLE_COLOR,
}}
> >
<Autorenew /> <Autorenew />
</IconButton> </IconButton>
setMsgPopoverOpen(true); setMsgPopoverOpen(true);
setMsgAnchorEl(e.currentTarget); setMsgAnchorEl(e.currentTarget);
}} }}
sx={{ mr: 2 }}
sx={{
mr: 2,
background: "#E4E4E4",
color: PRIMARY_PURPLE_COLOR,
}}
> >
<Badge badgeContent={3} color="primary"> <Badge badgeContent={3} color="primary">
<MailIcon color="action" />
<MailIcon />
</Badge> </Badge>
</IconButton> </IconButton>
<IconButton <IconButton
setUserPopoverOpen(true); setUserPopoverOpen(true);
setUserAnchorEl(e.currentTarget); setUserAnchorEl(e.currentTarget);
}} }}
sx={{ background: "#E4E4E4", color: PRIMARY_PURPLE_COLOR }}
> >
<AccountCircle /> <AccountCircle />
</IconButton> </IconButton>
setPostsPopoverOpen(false); setPostsPopoverOpen(false);
setPostsAnchorEl(null); setPostsAnchorEl(null);
}} }}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moje objave
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Travis Howard"
src="/static/images/avatar/2.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</ListItemAvatar>
<ListItemText
primary="Oui Oui"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Sandra Adams
</Typography>
{" — Do you have Paris recommendations? Have you ever…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj sve
</Button>
</>
}
content={<MyPosts />}
/> />
<PopoverComponent <PopoverComponent
anchorEl={msgAnchorEl} anchorEl={msgAnchorEl}
setMsgPopoverOpen(false); setMsgPopoverOpen(false);
setMsgAnchorEl(null); setMsgAnchorEl(null);
}} }}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moje poruke
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Travis Howard"
src="/static/images/avatar/2.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</ListItemAvatar>
<ListItemText
primary="Oui Oui"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Sandra Adams
</Typography>
{" — Do you have Paris recommendations? Have you ever…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj sve
</Button>
</>
}
content={<MyMessages />}
/> />
<PopoverComponent <PopoverComponent
anchorEl={userAnchorEl} anchorEl={userAnchorEl}
setUserPopoverOpen(false); setUserPopoverOpen(false);
setUserAnchorEl(null); setUserAnchorEl(null);
}} }}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moj profil
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj profil
</Button>
</>
}
content={<MyProfile />}
/> />
</AppBar> </AppBar>
); );

+ 84
- 0
src/components/Popovers/MyMessages/MyMessages.js Datei anzeigen

import React from "react";
//import { SearchInput } from "./MyMessages.styled";
import EyeOn from "@mui/icons-material/Visibility";
import {
PRIMARY_PURPLE_COLOR,
PRIMARY_YELLOW_COLOR,
} from "../../../constants/stylesConstants";
import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Avatar,
Divider,
Typography,
Button,
} from "@mui/material";

export const MyMessages = () => {
return (
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
minWidth: "270px"
}}
>
Moje poruke
</Typography>
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
fontWeight: 700,
color: PRIMARY_PURPLE_COLOR,
}}
primary="Coca-Cola"
secondaryTypographyProps={{ fontSize: ".81rem" }}
secondary={
<React.Fragment>{"Kompresor je stigao. Samo..."}</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
fontWeight: 700,
color: PRIMARY_PURPLE_COLOR,
}}
primary="Voda Vrnjci"
secondaryTypographyProps={{ fontSize: ".81rem" }}
secondary={
<React.Fragment>{"Poslao sam vodu. Ukupno i..."}</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj sve
</Button>
</>
);
};

+ 18
- 0
src/components/Popovers/MyMessages/MyMessages.styled.js Datei anzeigen

import { TextField } from "@mui/material";
import styled from "styled-components";

export const SearchInput = styled(TextField)`
margin-left: 3.8rem;
background-color: #F4F4F4;
width: 45%;
max-width: 100%;
@media (max-width: 1100px) {
width: 36%;
}
@media (max-width: 900px) {
width: 54%;
}
@media (max-width: 600px) {
width: 36%;
}
`

+ 102
- 0
src/components/Popovers/MyPosts/MyPosts.js Datei anzeigen

import React from "react";
import { PostsAvatar, PostsImgSuit } from "./MyPosts.styled";
import EyeOn from "@mui/icons-material/Visibility";
import {
PRIMARY_PURPLE_COLOR,
PRIMARY_YELLOW_COLOR,
} from "../../../constants/stylesConstants";
import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Divider,
Typography,
Button,
Grid,
} from "@mui/material";

export const MyPosts = () => {
return (
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
minWidth: "270px"
}}
>
Moje objave
</Typography>
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<PostsAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
fontWeight: 700,
color: PRIMARY_PURPLE_COLOR,
}}
primary="Gitara"
secondaryTypographyProps={{ fontSize: ".81rem" }}
secondary={
<Grid
container
direction="row"
justifyContent="start"
alignItems="center"
sx={{ fontFamily: "inherit" }}
>
<PostsImgSuit />
<React.Fragment>{"Player.rs"}</React.Fragment>
</Grid>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<PostsAvatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
fontWeight: 700,
color: PRIMARY_PURPLE_COLOR,
}}
primary="Kompresor"
secondaryTypographyProps={{ fontSize: ".81rem" }}
secondary={
<Grid
container
direction="row"
justifyContent="start"
alignItems="center"
sx={{ fontFamily: "inherit" }}
>
<PostsImgSuit />
<React.Fragment>{"Player.rs"}</React.Fragment>
</Grid>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500
}}
>
Pogledaj sve
</Button>
</>
);
};

+ 29
- 0
src/components/Popovers/MyPosts/MyPosts.styled.js Datei anzeigen

import { TextField, Avatar } from "@mui/material";
import Suit from '@mui/icons-material/WorkOutline';
import styled from "styled-components";

export const PostsImgSuit = styled(Suit)`
width: 1rem;
height: 1rem;
margin-right: .36rem;
`

export const PostsAvatar = styled(Avatar)`
border-radius: 4px;
`

export const SearchInput = styled(TextField)`
margin-left: 3.8rem;
background-color: #F4F4F4;
width: 45%;
max-width: 100%;
@media (max-width: 1100px) {
width: 36%;
}
@media (max-width: 900px) {
width: 54%;
}
@media (max-width: 600px) {
width: 36%;
}
`

+ 75
- 0
src/components/Popovers/MyProfile/MyProfile.js Datei anzeigen

import React from "react";
import { ProfileAvatar, ProfileImgPIB } from "./MyProfile.styled";
import EyeOn from "@mui/icons-material/Visibility";
import {
PRIMARY_PURPLE_COLOR,
PRIMARY_YELLOW_COLOR,
} from "../../../constants/stylesConstants";
import {
List,
ListItem,
ListItemAvatar,
Typography,
Button,
ListItemText,
Grid,
} from "@mui/material";

export const MyProfile = () => {
return (
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
minWidth: "270px"
}}
>
Moj profil
</Typography>
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<ProfileAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primaryTypographyProps={{
fontWeight: 700,
color: PRIMARY_PURPLE_COLOR,
}}
primary="Player.rs"
secondaryTypographyProps={{ fontSize: ".81rem" }}
secondary={
<Grid
container
direction="row"
justifyContent="start"
alignItems="center"
sx={{ fontFamily: "inherit" }}
>
<ProfileImgPIB />
<React.Fragment>{"PIB - 1234567890"}</React.Fragment>
</Grid>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn sx={{ color: PRIMARY_YELLOW_COLOR }} />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj profil
</Button>
</>
);
};

+ 31
- 0
src/components/Popovers/MyProfile/MyProfile.styled.js Datei anzeigen

import { TextField, Avatar } from "@mui/material";
import styled from "styled-components";
import PIB from '@mui/icons-material/AdminPanelSettingsOutlined';

export const ProfileImgPIB = styled(PIB)`
width: 1rem;
height: 1rem;
margin-right: .36rem;
`

export const ProfileAvatar = styled(Avatar)`
width: 63px;
height: 63px;
margin-right: 1rem;
`

export const SearchInput = styled(TextField)`
margin-left: 3.8rem;
background-color: #F4F4F4;
width: 45%;
max-width: 100%;
@media (max-width: 1100px) {
width: 36%;
}
@media (max-width: 900px) {
width: 54%;
}
@media (max-width: 600px) {
width: 36%;
}
`

Verfassen Vorschau
Laden…
Abbrechen
Speichern