Skip to content

Commit 916be13

Browse files
deyordanovdeyordanov
authored
Removed the default profile icon and added icons for all user actions, added tooltips for the administration's sections names. (#1402)
Closes SoftUni-Internal/exam-systems-issues#1457
1 parent a4f85b4 commit 916be13

File tree

7 files changed

+343
-148
lines changed

7 files changed

+343
-148
lines changed

‎Servers/UI/OJS.Servers.Ui/ClientApp/src/components/administration/common/lecturer-in-category-actions/LecturerActions.tsx renamed to ‎Servers/UI/OJS.Servers.Ui/ClientApp/src/components/administration/common/lecturer-actions/LecturerActions.tsx

File renamed without changes.

‎Servers/UI/OJS.Servers.Ui/ClientApp/src/components/administration/common/user-actions/UserActions.module.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@use 'src/styles/colors';
2+
3+
.actionsWrapper {
4+
span {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
}
9+
10+
.icon {
11+
height: 30px;
12+
width: 30px;
13+
vertical-align: middle;
14+
cursor: pointer;
15+
}
16+
17+
.activeColor {
18+
color: colors.$primary-blue;
19+
}
20+
21+
.dropdownRow {
22+
display: flex !important;
23+
align-items: center !important;
24+
gap: 0.2rem;
25+
}
26+
}
27+
28+
.dropdown {
29+
position: absolute;
30+
top: 0.8rem;
31+
32+
.dropdownIcon {
33+
font-size: 30px;
34+
}
35+
}
36+
37+
.buttons {
38+
position: absolute;
39+
display: flex;
40+
flex-direction: row;
41+
gap: 0.5rem;
42+
top: 1px;
43+
left: 1px;
44+
margin-left: 0.5rem;
45+
margin-top: 0.5rem;
46+
}

‎Servers/UI/OJS.Servers.Ui/ClientApp/src/components/administration/common/user-actions/UserActions.tsx

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import React, { ChangeEvent, FC, useState } from 'react';
2+
import { CiSquareMore } from 'react-icons/ci';
3+
import HomeIcon from '@mui/icons-material/Home';
4+
import LogoutIcon from '@mui/icons-material/Logout';
5+
import { FormControlLabel, IconButton, Menu, MenuItem, styled, Switch, Tooltip } from '@mui/material';
6+
import { ThemeMode } from 'src/common/enums';
7+
import { LinkButton, LinkButtonType } from 'src/components/guidelines/buttons/Button';
8+
import ConfirmDialog from 'src/components/guidelines/dialog/ConfirmDialog';
9+
import concatClassNames from 'src/utils/class-names';
10+
11+
import styles from './UserActions.module.scss';
12+
13+
interface IUserActionsProps {
14+
isDropdown: boolean;
15+
handleThemeChange: (event: ChangeEvent<HTMLInputElement>) => void;
16+
currentThemeMode: ThemeMode;
17+
showMenu: boolean;
18+
setShowMenu: (show: boolean) => void;
19+
iconButtonRef: React.RefObject<HTMLButtonElement>;
20+
}
21+
22+
const MaterialUISwitch = styled(Switch)(({ theme }) => ({
23+
width: 52,
24+
height: 26,
25+
padding: 7,
26+
'& .MuiSwitch-switchBase': {
27+
margin: 1,
28+
padding: 0,
29+
transform: 'translateX(6px)',
30+
'&.Mui-checked': {
31+
color: '#fff',
32+
transform: 'translateX(22px)',
33+
'& .MuiSwitch-thumb:before': { backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent('#fff')}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')` },
34+
'& + .MuiSwitch-track': {
35+
opacity: 1,
36+
backgroundColor: theme.palette.mode === 'dark'
37+
? '#8796A5'
38+
: '#aab4be',
39+
},
40+
},
41+
},
42+
'& .MuiSwitch-thumb': {
43+
backgroundColor: theme.palette.mode === 'dark'
44+
? '#003892'
45+
: '#001e3c',
46+
width: 24,
47+
height: 24,
48+
'&::before': {
49+
content: '\'\'',
50+
position: 'absolute',
51+
width: '100%',
52+
height: '100%',
53+
left: 0,
54+
top: 0,
55+
backgroundRepeat: 'no-repeat',
56+
backgroundPosition: 'center',
57+
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent('#fff')}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
58+
},
59+
},
60+
'& .MuiSwitch-track': {
61+
opacity: 1,
62+
backgroundColor: theme.palette.mode === 'dark'
63+
? '#8796A5'
64+
: '#aab4be',
65+
borderRadius: 20 / 2,
66+
},
67+
}));
68+
69+
const UserActions: FC<IUserActionsProps> = ({
70+
isDropdown,
71+
handleThemeChange,
72+
currentThemeMode,
73+
showMenu,
74+
setShowMenu,
75+
iconButtonRef,
76+
}) => {
77+
const [ showConfirmLogout, setShowConfirmLogout ] = useState<boolean>(false);
78+
79+
const onLogoutClick = () => {
80+
setShowConfirmLogout(!showConfirmLogout);
81+
};
82+
83+
const onLogout = () => {
84+
setShowConfirmLogout(false);
85+
setShowMenu(false);
86+
window.open('/logout', '_blank');
87+
};
88+
89+
const onHomeRedirection = () => {
90+
setShowMenu(false);
91+
window.open('/', '_blank');
92+
};
93+
94+
const actions = (
95+
<>
96+
<FormControlLabel
97+
control={(
98+
<MaterialUISwitch
99+
onChange={handleThemeChange}
100+
checked={currentThemeMode === ThemeMode.Light}
101+
/>
102+
)}
103+
label=""
104+
sx={{
105+
position: 'absolute',
106+
top: 1,
107+
right: 1,
108+
marginRight: '0.5rem',
109+
marginTop: '0.5rem',
110+
}}
111+
/>
112+
<div className={styles.buttons}>
113+
<Tooltip title="Go to home page" className={styles.actionsWrapper}>
114+
<span>
115+
<LinkButton to="/" isToExternal type={LinkButtonType.plain}>
116+
<HomeIcon className={concatClassNames(styles.icon, styles.activeColor)} />
117+
</LinkButton>
118+
</span>
119+
</Tooltip>
120+
<Tooltip title="Logout" className={styles.actionsWrapper}>
121+
<span>
122+
<LogoutIcon onClick={onLogoutClick} className={concatClassNames(styles.icon, styles.activeColor)} />
123+
</span>
124+
</Tooltip>
125+
</div>
126+
</>
127+
);
128+
129+
const dropdownActions = (
130+
<div className={styles.dropdown}>
131+
<IconButton
132+
className={styles.dropdownIcon}
133+
ref={iconButtonRef}
134+
aria-controls={showMenu
135+
? 'menu-list'
136+
: undefined}
137+
aria-haspopup="true"
138+
onClick={() => setShowMenu(!showMenu)}
139+
>
140+
<CiSquareMore />
141+
</IconButton>
142+
<Menu
143+
id="menu-list"
144+
anchorEl={iconButtonRef.current}
145+
open={showMenu}
146+
onClose={() => setShowMenu(false)}
147+
>
148+
<div className={styles.actionsWrapper}>
149+
<MenuItem className={styles.dropdownRow}>
150+
<FormControlLabel
151+
control={(
152+
<MaterialUISwitch
153+
onChange={handleThemeChange}
154+
checked={currentThemeMode === ThemeMode.Light}
155+
/>
156+
)}
157+
label="Theme"
158+
/>
159+
</MenuItem>
160+
<MenuItem
161+
onClick={onHomeRedirection}
162+
className={styles.dropdownRow}
163+
>
164+
<HomeIcon className={concatClassNames(styles.icon, styles.activeColor)} />
165+
Home
166+
</MenuItem>
167+
<MenuItem
168+
onClick={onLogoutClick}
169+
className={styles.dropdownRow}
170+
>
171+
<LogoutIcon className={concatClassNames(styles.icon, styles.activeColor)} />
172+
Logout
173+
</MenuItem>
174+
</div>
175+
</Menu>
176+
</div>
177+
);
178+
179+
return (
180+
<>
181+
{isDropdown
182+
? dropdownActions
183+
: actions}
184+
{showConfirmLogout && (
185+
<ConfirmDialog
186+
title="Logout"
187+
text="Are you sure you want to logout?"
188+
confirmButtonText="Logout"
189+
declineButtonText="Cancel"
190+
onClose={onLogoutClick}
191+
confirmFunction={onLogout}
192+
/>
193+
)}
194+
</>
195+
);
196+
};
197+
198+
export default UserActions;

‎Servers/UI/OJS.Servers.Ui/ClientApp/src/components/portals/administration/AdministrationPortal.module.scss

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
@use 'src/styles/colors';
22

3-
.adminHeaderLink {
4-
font-family: Roboto, Helvetica, Arial, sans-serif;
5-
text-decoration: none;
6-
text-transform: uppercase;
7-
}
8-
93
.adminNavLink {
104
color: #3e4c5d;
115
text-decoration: none;
@@ -43,8 +37,8 @@
4337
}
4438

4539
.list {
46-
overflow-x: hidden;
47-
overflow-y: scroll;
40+
overflow-x: hidden;
41+
overflow-y: scroll;
4842
}
4943

5044
.listItemIcon {
@@ -61,22 +55,17 @@
6155
}
6256

6357
.drawerHeader {
64-
align-items: flex-start;
6558
color: inherit !important;
6659
display: flex;
6760
flex-direction: column;
68-
justify-content: space-between;
69-
margin-bottom: 1rem;
70-
}
71-
72-
.profileIcon {
73-
color: #2196f3 !important;
74-
height: 3rem;
75-
width: 3rem;
76-
}
61+
min-height: 0 !important;
7762

78-
.userName {
79-
font-size: 14px;
63+
.username {
64+
display: flex;
65+
flex-direction: column;
66+
margin-top: 0.6rem;
67+
font-size: 14px;
68+
}
8069
}
8170

8271
.iconSize {

0 commit comments

Comments
 (0)