{
- notifications && notifications.length
+ notifications.length
?
:
}
@@ -87,4 +87,4 @@ const Notifications = () => {
);
};
-export default Notifications;
\ No newline at end of file
+export default Notifications;
diff --git a/src/react/src/components/MainNav/Panel/Panel.jsx b/src/react/src/components/MainNav/Panel/Panel.jsx
index ad51de9d0..c568270fc 100644
--- a/src/react/src/components/MainNav/Panel/Panel.jsx
+++ b/src/react/src/components/MainNav/Panel/Panel.jsx
@@ -10,6 +10,7 @@ import './Panel.scss';
const Panel = props => {
const { i18n, userName } = useSelector(state => state.session);
+ const { panel } = useSelector(state => state.panel);
const { session } = useSelector(state => state.userSession);
const { activeElement, focusedElement } = useSelector(state => state.mainNavigation);
const dispatch = useDispatch();
@@ -63,6 +64,40 @@ const Panel = props => {
});
}
+ const renderNotifications = () => {
+ if (panel[userName]) {
+ if (panel[userName]['NOTIFICATIONS'] === 'yes') {
+ return
;
+ }
+ }
+ }
+
+ const renderSmallNavigation = () => {
+ if (document.documentElement.clientWidth < 900) {
+ return (
+
+
+
dispatch(addActiveElement('/list/user/'))}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderNotifications()}
+
{userName}
+
+
+
);
+ }
+ }
+
return (
{loading && }
@@ -113,8 +148,8 @@ const Panel = props => {
)}
-
-
+ {renderNotifications()}
+
{session.look
?
@@ -126,29 +161,13 @@ const Panel = props => {
}
-
+
-
-
-
-
-
-
-
-
-
-
-
-
{userName}
-
-
-
+ {renderSmallNavigation()}
);
}
-export default Panel;
\ No newline at end of file
+export default Panel;
diff --git a/src/react/src/components/MainNav/Panel/Panel.scss b/src/react/src/components/MainNav/Panel/Panel.scss
index 4d4f98f1e..2a2ce1fdb 100644
--- a/src/react/src/components/MainNav/Panel/Panel.scss
+++ b/src/react/src/components/MainNav/Panel/Panel.scss
@@ -1,13 +1,5 @@
-$whiteBackground: #ececec;
-$primary: #2c54ac;
-$primaryLight: #d7dcef;
-$primaryActive: #1e5cb2;
-$secondary: #fcac04;
-$secondaryLight: #f8b014;
-$secondaryActive: #fdb51c;
-$hoverButtonText: #2c54ac;
-$activeButtonText: #fff;
-$textColor: #555;
+@import 'src/utils/scss/variables';
+@import 'src/utils/scss/breakpoints';
.top-panel.small-device {
display: none;
@@ -24,6 +16,7 @@ $textColor: #555;
background: #222e44;
height: 34px;
align-items: center;
+ justify-content: space-between;
padding: 0 13%;
z-index: 2;
@@ -53,7 +46,7 @@ $textColor: #555;
justify-content: center;
align-items: center;
padding: 0 10px !important;
- width: 100%;
+ width: fit-content;
height: 100%;
text-decoration: none;
color: white;
@@ -94,11 +87,12 @@ $textColor: #555;
.left-menu {
width: 75%;
- padding-left: 0;
- margin-left: 0;
+ margin: 0;
+ padding: 0;
justify-content: space-between;
- div {
+ div.top-link,
+ div.nav-link {
flex: 1 1 auto;
height: 100%;
transform: translateX(-5px);
@@ -141,10 +135,12 @@ $textColor: #555;
}
.profile-menu {
- width: auto;
+ width: 25%;
+ margin: 0;
+ padding: 0;
+ justify-content: flex-end;
div {
- width: 4rem;
height: 100%;
}
@@ -155,8 +151,8 @@ $textColor: #555;
svg {
border-radius: 30px;
- width: 100%;
- height: 100%;
+ width: 40px;
+ height: 30px;
padding: 3px;
&:hover {
@@ -169,7 +165,7 @@ $textColor: #555;
}
}
- div + div a {
+ .edit-user a {
color: #a4abad;
font-weight: 700;
@@ -182,8 +178,8 @@ $textColor: #555;
}
}
- div + div + div a,
- div + div + div button {
+ .logout-button a,
+ .logout-button button {
color: white;
cursor: pointer;
font-weight: 100;
@@ -204,7 +200,7 @@ $textColor: #555;
justify-content: start;
> div {
- width: max-content;
+ width: fit-content;
flex: unset;
padding: 0 1rem;
}
@@ -217,11 +213,10 @@ $textColor: #555;
}
.profile-menu {
- justify-content: space-between;
align-items: center;
- > div + div {
- width: max-content;
+ > .edit-user {
+ width: fit-content;
}
.long-username {
@@ -247,13 +242,12 @@ $textColor: #555;
}
}
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: $desktopMin) {
.top-panel {
- padding: 0 5%;
+ padding: 0 8%;
}
}
-//Small Devices
@media (max-width: 900px) {
.top-panel {
display: none;
@@ -261,16 +255,12 @@ $textColor: #555;
.top-panel.small-device {
display: flex;
- padding: 0;
+ justify-content: space-between;
+ padding: 0 10%;
> .container {
- justify-content: center;
align-items: center;
- width: 30%;
- }
-
- .profile-menu {
- padding-left: 10%;
+ width: auto;
}
.hamburger {
@@ -288,35 +278,18 @@ $textColor: #555;
}
}
}
+}
- @keyframes toggleNav {
- from {
- transform: translateY(-20px);
- }
+@media (max-width: $phoneMax) {
+ .top-panel.small-device {
+ padding: 0;
+ }
- to {
- transform: translateY(50px);
+ .top-panel .left-menu div.logo {
+ width: unset;
+
+ a div {
+ width: 5rem;
}
}
}
-
-@media (max-width: 420px) {
- .top-panel.small-device {
- .profile-menu {
- padding: 0;
- margin-right: 5px;
-
- .bell {
- width: 20%;
- }
-
- .bell + div {
- width: 40%;
- }
-
- .bell + div + div {
- width: 40%;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/react/src/components/MainNav/Stat-menu/Menu.jsx b/src/react/src/components/MainNav/Stat-menu/Menu.jsx
index 51672d657..1e84b9c83 100644
--- a/src/react/src/components/MainNav/Stat-menu/Menu.jsx
+++ b/src/react/src/components/MainNav/Stat-menu/Menu.jsx
@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import './Menu.scss';
+import Spinner from 'src/components/Spinner/Spinner';
const className = height => {
if (height === 35) {
@@ -27,7 +28,8 @@ const style = ({ menuHeight, mobile }) => {
const Menu = props => {
const { activeElement, focusedElement } = useSelector(state => state.mainNavigation);
- const { i18n } = useSelector(state => state.session);
+ const { i18n, userName } = useSelector(state => state.session);
+ const { panel } = useSelector(state => state.panel);
const { session } = useSelector(state => state.userSession);
const { user } = useSelector(state => state.menuCounters);
const dispatch = useDispatch();
@@ -50,19 +52,7 @@ const Menu = props => {
return `stat ${activeName === activeElement && 'l-active'} ${activeName === focusedElement && 'focus'}`;
}
- const sizeFormatter = (bytes, decimals) => {
- if (!bytes) return null;
-
- if (bytes === "0") {
- return
0 b;
- }
-
- let k = 1024,
- dm = decimals <= 0 ? 0 : decimals || 2,
- sizes = ['b', 'kb', 'Mb', 'GB'],
- i = Math.floor(Math.log(bytes) / Math.log(k));
- return (
{parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} {sizes[i]});
- }
+ if (!panel[userName]) return
;
return (
@@ -72,10 +62,26 @@ const Menu = props => {
{i18n.USER}
{
- session.look
+ session.look && panel[session.look]
? (<>
-
{i18n.Disk}: {sizeFormatter(user.U_DISK)}
-
{i18n.Bandwidth}: {sizeFormatter(user.U_BANDWIDTH)}
+
+ {i18n.Disk}:
+
+
+ {panel[session.look]['U_DISK']}
+ {panel[session.look]['U_DISK_MEASURE']}
+
+
+
+
+ {i18n.Bandwidth}:
+
+
+ {panel[session.look]['U_BANDWIDTH']}
+ {panel[session.look]['U_BANDWIDTH_MEASURE']}
+
+
+
)
: (<>
{i18n.users}: {user.U_USERS}
@@ -85,62 +91,79 @@ const Menu = props => {
-
-
handleState("/list/web/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.WEB}
-
-
{i18n.domains}: {user.U_WEB_DOMAINS}
-
{i18n.aliases}: {user.U_WEB_ALIASES}
-
{i18n.spnd}: {user.SUSPENDED_WEB}
-
-
-
-
-
handleState("/list/dns/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.DNS}
-
-
{i18n.domains}: {user.U_DNS_DOMAINS}
-
{i18n.records}: {user.U_DNS_RECORDS}
-
{i18n.spnd}: {user.SUSPENDED_DNS}
-
-
-
-
-
handleState("/list/mail/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.MAIL}
-
-
{i18n.domains}: {user.U_MAIL_DOMAINS}
-
{i18n.accounts}: {user.U_MAIL_ACCOUNTS}
-
{i18n.spnd}: {user.SUSPENDED_MAIL}
-
-
-
-
-
handleState("/list/db/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.DB}
-
-
{i18n.databases}: {user.U_DATABASES}
-
{i18n.spnd}: {user.SUSPENDED_DB}
-
-
-
-
-
handleState("/list/cron/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.CRON}
-
-
{i18n.jobs}: {user.U_CRON_JOBS}
-
{i18n.spnd}: {user.SUSPENDED_CRON}
-
-
-
-
-
handleState("/list/backup/", event)} onKeyPress={event => event.preventDefault()}>
-
{i18n.BACKUP}
-
-
{i18n.backups}: {user.U_BACKUPS}
-
-
-
+ {
+ panel[userName]['WEB_DOMAINS'] !== '0' && (
+
handleState("/list/web/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.WEB}
+
+
{i18n.domains}: {user.U_WEB_DOMAINS}
+
{i18n.aliases}: {user.U_WEB_ALIASES}
+
{i18n.spnd}: {user.SUSPENDED_WEB}
+
+
+
)
+ }
+
+ {
+ panel[userName]['DNS_DOMAINS'] !== '0' && (
+
handleState("/list/dns/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.DNS}
+
+
{i18n.domains}: {user.U_DNS_DOMAINS}
+
{i18n.records}: {user.U_DNS_RECORDS}
+
{i18n.spnd}: {user.SUSPENDED_DNS}
+
+
+
)
+ }
+
+ {
+ panel[userName]['MAIL_DOMAINS'] !== '0' && (
+
handleState("/list/mail/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.MAIL}
+
+
{i18n.domains}: {user.U_MAIL_DOMAINS}
+
{i18n.accounts}: {user.U_MAIL_ACCOUNTS}
+
{i18n.spnd}: {user.SUSPENDED_MAIL}
+
+
+
)
+ }
+
+ {
+ panel[userName]['DATABASES'] !== '0' && (
+
handleState("/list/db/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.DB}
+
+
{i18n.databases}: {user.U_DATABASES}
+
{i18n.spnd}: {user.SUSPENDED_DB}
+
+
+
)
+ }
+
+ {
+ panel[userName]['CRON_JOBS'] !== '0' && (
+
handleState("/list/cron/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.CRON}
+
+
{i18n.jobs}: {user.U_CRON_JOBS}
+
{i18n.spnd}: {user.SUSPENDED_CRON}
+
+
+
)
+ }
+
+ {
+ panel[userName]['BACKUPS'] !== '0' && (
+
handleState("/list/backup/", event)} onKeyPress={event => event.preventDefault()}>
+
{i18n.BACKUP}
+
+
{i18n.backups}: {user.U_BACKUPS}
+
+
+
)
+ }