Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Badge to the vacation acceptance icon #235

Merged
merged 1 commit into from
Jan 18, 2024
Merged

Add Badge to the vacation acceptance icon #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions view.react/src/components/sidebar/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import GroupAddOutlinedIcon from '@mui/icons-material/GroupAddOutlined';
import PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';
import WatchLaterRoundedIcon from '@mui/icons-material/WatchLaterRounded';
import WorkHistoryOutlinedIcon from '@mui/icons-material/WorkHistoryOutlined';
import { Badge } from '@mui/material';
import classNames from "classnames";
import PropTypes from 'prop-types';
import {useState} from "react";
Expand Down Expand Up @@ -47,20 +48,27 @@ export const Sidebar = ({acceptancesPresent}) => {
to="/calendar"
>
<CalendarMonthSharpIcon />
<span>Kalendarz</span>
<span className={styles['text']}>Kalendarz</span>
</Link>
<Link
testId="RequestsLink"
exact
activeClassName="active"
to="/requests"
>
<EmailRoundedIcon />
<TextWithIcon
text={isUserEC ? "Wnioski urlopowe" : "Wnioski o przerwę"}
icon={<AttentionIcon />}
showIcon={acceptancesPresent}
/>
<Badge
invisible={acceptancesPresent}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
variant="dot"
size="small"
color="warning"
>
<EmailRoundedIcon />
</Badge>
<span className={styles['text']}>{isUserEC ? "Wnioski urlopowe" : "Wnioski o przerwę"}</span>
</Link>
<Link
testId="UsersHistoryLink"
Expand All @@ -69,35 +77,35 @@ export const Sidebar = ({acceptancesPresent}) => {
to="/history"
>
<WatchLaterRoundedIcon />
<span>Historia użytkownika</span>
<span className={styles['text']}>Historia użytkownika</span>
</Link>
{isUserALeader &&
<Link to="/acceptances/history">
<WorkHistoryOutlinedIcon />
<span>Historia akceptacji</span>
<span className={styles['text']}>Historia akceptacji</span>
</Link>
}
{isUserAnAdmin && (
<>
<Link to="/associates" testId="ContractorsLink">
<PeopleOutlineRoundedIcon />
<span>Współpracownicy</span>
<span className={styles['text']}>Współpracownicy</span>
</Link>
<Link to="/workers" testId="EmployeesLink">
<GroupAddOutlinedIcon />
<span>Pracownicy</span>
<span className={styles['text']}>Pracownicy</span>
</Link>
<Link to="/holidays" testId="HolidaysLink">
<EventAvailableOutlinedIcon />
<span>Dni świąteczne</span>
<span className={styles['text']}>Dni świąteczne</span>
</Link>
<Link to="/reports" testId="ReportsLink">
<BarChartOutlinedIcon />
<span>Raporty</span>
<span className={styles['text']}>Raporty</span>
</Link>
<Link to="/automaticVacationDays">
<EventRepeatOutlinedIcon />
<span>Dni na nowy rok</span>
<span className={styles['text']}>Dni na nowy rok</span>
</Link>
</>
)}
Expand Down
84 changes: 42 additions & 42 deletions view.react/src/components/sidebar/Sidebar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "src/global-styles/color-variables";
@import 'src/global-styles/bootstrap-breakpoints.scss';
@import "src/global-styles/bootstrap-breakpoints.scss";

.main {
z-index: 6;
Expand All @@ -17,43 +17,43 @@
}

.nav {
flex-direction: column;
white-space: nowrap;
text-transform: uppercase;
margin-left: 2rem;
flex-direction: column;
white-space: nowrap;
text-transform: uppercase;
margin-left: 2rem;

button {
width: fit-content;
background-color: transparent;
border: none;
position: relative;
transition: transform 0.3s ease-in-out;
transform: translateX(0);
padding: 12px;
display: flex;
justify-content: center;
align-items: center;

button {
width: fit-content;
background-color: transparent;
border: none;
position: relative;
transition: transform 0.3s ease-in-out;
transform: translateX(0);
padding: 12px;
display: flex;
justify-content: center;
align-items: center;

&:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #9CD71E;
border-radius: 50px;
transform: scale(0);
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
&:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #9cd71e;
border-radius: 50px;
transform: scale(0);
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

&:hover:before {
transform: scale(1);
}
&:hover:before {
transform: scale(1);
}
}

&--open {
button {
Expand All @@ -63,15 +63,15 @@
}

a {
span {
.text {
width: 100%;
padding-left: 12px;
opacity: 1;
}
}
}

span {
.text {
transition: opacity 0.3s ease-in-out;
overflow: hidden;
margin-left: 0px;
Expand All @@ -96,11 +96,11 @@
height: 3px;
top: 100%;
left: 0;
background: #78A612;
background: #78a612;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .3s linear;
transition: 0.3s linear;
}

&:hover::before,
Expand All @@ -112,14 +112,14 @@
&:hover {
svg {
transform: scale(1.2);
transition: .3s linear;
transition: 0.3s linear;
}
}

&:not(:hover) {
svg {
transform: scale(1);
transition: .2s linear;
transition: 0.2s linear;
}
}
}
Expand All @@ -142,7 +142,7 @@
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}

Expand Down
Loading