dispatch(addActiveElement('/list/user/'))}>
@@ -97,14 +132,14 @@ const Panel = props => {
handleState("/list/updates/", event)} onKeyPress={event => event.preventDefault()}>{i18n.Updates}
- {FIREWALL_SYSTEM &&
+ {session.FIREWALL_SYSTEM &&
handleState("/list/firewall/", event)} onKeyPress={event => event.preventDefault()}>{i18n.Firewall}
}
)}
- {FILEMANAGER_KEY &&
+ {session.FILEMANAGER_KEY &&
{i18n['File Manager']}
}
- {SOFTACULOUS === "yes" &&
{i18n.Apps ?? 'Apps'}
+ {session.SOFTACULOUS === "yes" &&
{i18n.Apps ?? 'Apps'}
}
{userName === 'admin' && (
@@ -113,42 +148,26 @@ const Panel = props => {
)}
-
-
+ {renderNotifications()}
+
- {look
+ {session.look
?
- {user}
+ {session.user}
- {look}
+ {session.look}
: userName
}
-
+
-
-
-
-
-
-
-
-
-
-
-
-
{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 6720dfdb4..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,8 +28,9 @@ const style = ({ menuHeight, mobile }) => {
const Menu = props => {
const { activeElement, focusedElement } = useSelector(state => state.mainNavigation);
- const { i18n } = useSelector(state => state.session);
- const { session: { look } } = useSelector(state => state.userSession);
+ 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}
{
- 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}
+
+
+
)
+ }
);
diff --git a/src/react/src/components/MainNav/Stat-menu/Menu.scss b/src/react/src/components/MainNav/Stat-menu/Menu.scss
index b6e8010cc..e7ebccb20 100644
--- a/src/react/src/components/MainNav/Stat-menu/Menu.scss
+++ b/src/react/src/components/MainNav/Stat-menu/Menu.scss
@@ -1,13 +1,4 @@
-$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';
.menu-wrapper {
position: fixed;
@@ -18,7 +9,7 @@ $textColor: #555;
.menu-stat {
display: flex;
flex-direction: row;
- margin-top: 70px;
+ margin-top: 50px;
min-height: 45px;
max-height: 135px;
height: 145px;
@@ -108,10 +99,6 @@ $textColor: #555;
}
}
- .stat.last {
- flex: 1;
- }
-
.l-active {
border-bottom: 3px solid $primary;
@@ -152,13 +139,24 @@ $textColor: #555;
}
}
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1066px) {
.menu-wrapper {
- padding: 0 10%;
+ .menu-stat {
+ padding: 0 10%;
+ margin-top: 40px;
+ }
}
}
-@media (max-width: 900px) {
+@media screen and (max-width: 1024px) {
+ .menu-wrapper {
+ .menu-stat {
+ padding: 0 10%;
+ }
+ }
+}
+
+@media (max-width: 1066px) {
.menu-wrapper {
padding: 1%;
@@ -167,55 +165,9 @@ $textColor: #555;
min-height: auto;
.stat {
- flex-grow: 1;
- height: 30px;
- padding-left: 5px;
- min-width: 14%;
- text-align: left;
-
h3 {
padding: 0;
}
-
- .stats {
- display: none;
- }
- }
- }
- }
-}
-
-@media (max-width: 450px) {
- .main-nav .mobile-top-nav-wrapper.show .mobile-stat-menu {
- border: 1px solid black;
- border-width: 1px 0;
- margin-top: 15px;
-
- .menu-wrapper {
- height: 100%;
- padding: 0;
-
- .menu-stat {
- flex-wrap: wrap;
- max-height: 100%;
- min-height: 100%;
-
- .stat {
- display: flex;
- align-items: center;
- border: none;
- padding: 5px 5px 5px 15px;
- min-width: 50%;
- height: auto;
-
- h3 {
- margin: 0;
- }
- }
-
- .stat.l-active {
- background: #fdac020d;
- }
}
}
}
diff --git a/src/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss b/src/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss
index bfc4df8fb..18a05505e 100644
--- a/src/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss
+++ b/src/react/src/components/MainNav/Toolbar/LeftButton/LeftButton.scss
@@ -1,13 +1,4 @@
-$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';
.l-menu {
transform: translate(35px, 50%);
@@ -39,6 +30,12 @@ $textColor: #555;
}
}
+ @media screen and (max-width: 900px) {
+ span.add {
+ display: none !important;
+ }
+ }
+
&:active {
background: $primary;
@@ -72,6 +69,10 @@ $textColor: #555;
height: 21px;
}
}
+
+ @media screen and (max-width: 900px) {
+ transform: unset;
+ }
}
.l-menu.none {
diff --git a/src/react/src/components/MainNav/Toolbar/Select/Select.scss b/src/react/src/components/MainNav/Toolbar/Select/Select.scss
index 95104561f..c571b408d 100644
--- a/src/react/src/components/MainNav/Toolbar/Select/Select.scss
+++ b/src/react/src/components/MainNav/Toolbar/Select/Select.scss
@@ -1,6 +1,10 @@
.select-wrapper {
display: flex;
+ select {
+ width: auto;
+ }
+
select, button {
border-radius: 0;
}
diff --git a/src/react/src/components/MainNav/Toolbar/Toolbar.jsx b/src/react/src/components/MainNav/Toolbar/Toolbar.jsx
index 8fce58e5e..bf134a00e 100644
--- a/src/react/src/components/MainNav/Toolbar/Toolbar.jsx
+++ b/src/react/src/components/MainNav/Toolbar/Toolbar.jsx
@@ -1,70 +1,62 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
import './Toolbar.scss';
-class Toolbar extends Component {
- state = {
- toolbarHeight: 205
- }
+const Toolbar = props => {
+ const [toolbarHeight, setToolbarHeight] = useState(185);
- componentDidMount() {
- window.addEventListener("resize", this.handleToolbar);
- document.addEventListener("scroll", this.changeToolbarHeight);
- }
+ useEffect(() => {
+ window.addEventListener("resize", handleToolbar);
+ document.addEventListener("scroll", changeToolbarHeight);
- componentWillUnmount() {
- window.removeEventListener("resize", this.handleToolbar);
- document.removeEventListener("scroll", this.changeToolbarHeight);
- }
+ return () => {
+ window.removeEventListener("resize", handleToolbar);
+ document.removeEventListener("scroll", changeToolbarHeight);
+ }
+ }, []);
- handleToolbar = () => {
+ const handleToolbar = () => {
if (document.documentElement.clientWidth < 900) {
- this.setState({
- toolbarHeight: 115
- });
+ setToolbarHeight(95);
} else {
- this.setState({
- toolbarHeight: 205
- });
+ setToolbarHeight(185);
}
}
- changeToolbarHeight = () => {
+ const changeToolbarHeight = () => {
if (document.documentElement.clientWidth > 900) {
let scrollTop = window.scrollY;
- let toolbarHeight = Math.max(115, 205 - scrollTop);
- this.setState({ toolbarHeight });
+ let newToolbarHeight = Math.max(95, 185 - scrollTop);
+ setToolbarHeight(newToolbarHeight);
}
}
- className = () => {
- const { className } = this.props;
+ const className = () => {
+ const { className } = props;
if (className === "justify-right") {
- return this.state.toolbarHeight === 115 ? "toolbar t-shadow " + className : "toolbar " + className;
+ return toolbarHeight === 95 ? "toolbar t-shadow " + className : "toolbar " + className;
}
- return this.state.toolbarHeight === 115 ? "toolbar t-shadow" : "toolbar";
+ return toolbarHeight === 95 ? "toolbar t-shadow" : "toolbar";
}
- style = () => {
- if (this.props.mobile) {
+ const style = () => {
+ if (props.mobile) {
return;
}
if (document.documentElement.clientWidth > 900) {
- return { marginTop: this.state.toolbarHeight };
+ return { marginTop: toolbarHeight };
} else {
- return { marginTop: 145 };
+ return { marginTop: 33 };
}
}
- render() {
- return (
-
- {this.props.children}
-
- );
- }
+ return (
+
+ {props.children}
+
+ );
}
export default Toolbar;
\ No newline at end of file
diff --git a/src/react/src/components/MainNav/Toolbar/Toolbar.scss b/src/react/src/components/MainNav/Toolbar/Toolbar.scss
index a0c99df1b..9f1dc3764 100644
--- a/src/react/src/components/MainNav/Toolbar/Toolbar.scss
+++ b/src/react/src/components/MainNav/Toolbar/Toolbar.scss
@@ -1,15 +1,4 @@
-$primary: #2c54ac;
-$whiteBackground: #ececec;
-$primary: #2c54ac;
-$primaryLight: #d7dcef;
-$primaryActive: #1e5cb2;
-$secondary: #fcac04;
-$secondaryLight: #f8b014;
-$danger: #b00e5b;
-$secondaryActive: #fdb51c;
-$hoverButtonText: #2c54ac;
-$activeButtonText: #fff;
-$textColor: #555;
+@import 'src/utils/scss/variables';
.toolbar {
display: flex;
@@ -27,19 +16,30 @@ $textColor: #555;
.r-menu {
display: flex;
- justify-content: center;
align-items: center;
+ > div {
+ display: flex;
+ flex-wrap: unset;
+ width: 100%;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
a.button-extra,
button.button-extra {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ justify-content: flex-start;
+ padding: 5px 10px;
background: none;
border: none;
- padding: 0 0.75rem;
text-decoration: none;
color: rgb(129, 125, 125);
font-size: 14px;
display: flex;
- justify-content: center;
align-items: center;
margin-right: 10px;
border-radius: 3px;
@@ -151,12 +151,57 @@ $textColor: #555;
box-shadow: rgba(200, 200, 200, 0.5) 0px 5px 3px 0px;
}
-@media (max-width: 1350px) {
+@media (max-width: 1390px) {
.toolbar {
padding: 3px 10% 1px;
}
}
+@media (max-width: 1250px) {
+ .toolbar {
+ .r-menu {
+ a.button-extra,
+ button.button-extra {
+ max-width: 30%;
+ }
+ }
+ }
+}
+
+@media (max-width: 900px) {
+ .toolbar {
+ .r-menu {
+ overflow: scroll;
+
+ a.button-extra,
+ button.button-extra {
+ overflow: unset;
+ max-width: 100%;
+ }
+
+ > div {
+ margin-left: 3rem;
+ position: relative;
+ display: flex;
+ flex-wrap: unset;
+ width: 100%;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ .select-wrapper + div {
+ display: none;
+ }
+ }
+ }
+}
+
+@media (max-width: 450px) {
+ .toolbar {
+ padding: 3px 1% 1px;
+ }
+}
+
@media (max-width: 450px) {
.mobile-toolbar .toolbar {
display: flex;
diff --git a/src/react/src/components/Menu/Menu.jsx b/src/react/src/components/Menu/Menu.jsx
index 67b28abdc..98d966b39 100644
--- a/src/react/src/components/Menu/Menu.jsx
+++ b/src/react/src/components/Menu/Menu.jsx
@@ -1,148 +1,185 @@
-import React, { createRef, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import './Menu.scss';
-import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import React, { useCallback, useEffect, useRef } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import './Menu.scss'
+import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
const Menu = (props) => {
- const { i18n } = useSelector(state => state.session);
- const inputFile = createRef();
+ const { i18n } = useSelector((state) => state.session)
+ const inputFile = useRef()
+
+ const handleUserKeyDown = useCallback((event) => hotKeys(event), [props])
useEffect(() => {
- document.addEventListener("keydown", hotKeys);
-
- return () => document.removeEventListener("keydown", hotKeys);
- }, []);
+ document.addEventListener('keydown', handleUserKeyDown)
+ return () => document.removeEventListener('keydown', handleUserKeyDown)
+ }, [handleUserKeyDown])
const newFile = () => {
- props.openModal("Add file");
+ props.openModal('Add file')
}
const newDirectory = () => {
- props.openModal("Add directory");
+ props.openModal('Add directory')
}
const deleteFile = () => {
- const { selection, openModal, cursor } = props;
+ const { selection, openModal, cursor } = props
if (selection.length === 0) {
if (cursor === 0) {
- openModal("Nothing selected");
+ openModal('Nothing selected')
} else {
- openModal("Delete");
+ openModal('Delete')
}
} else {
- openModal("Delete", selection.length);
+ openModal('Delete', selection.length)
}
}
const rename = () => {
+ console.log(props)
if (props.cursor === 0) {
- props.openModal("Nothing selected");
+ props.openModal('Nothing selected')
} else {
- props.openModal("Rename");
+ props.openModal('Rename')
}
}
const permissions = () => {
if (props.cursor === 0) {
- props.openModal("Nothing selected");
+ props.openModal('Nothing selected')
} else {
- props.openModal("Permissions");
+ props.openModal('Permissions')
}
}
const move = () => {
- const { selection, openModal, cursor } = props;
+ const { selection, openModal, cursor } = props
if (selection.length === 0) {
if (cursor === 0) {
- openModal("Nothing selected");
+ openModal('Nothing selected')
} else {
- openModal("Move");
+ openModal('Move')
}
} else {
- openModal("Move", selection.length);
+ openModal('Move', selection.length)
}
}
const archive = () => {
- const { selection, openModal, cursor } = props;
+ const { selection, openModal, cursor } = props
if (selection.length === 0) {
if (cursor === 0) {
- openModal("Nothing selected");
+ openModal('Nothing selected')
} else {
- openModal("Archive");
+ openModal('Archive')
}
} else {
- openModal("Archive", selection.length);
+ openModal('Archive', selection.length)
}
}
const extract = () => {
if (props.cursor === 0) {
- props.openModal("Nothing selected");
+ props.openModal('Nothing selected')
} else {
- props.openModal("Extract");
+ props.openModal('Extract')
}
}
const copy = () => {
- const { selection, openModal, cursor } = props;
+ const { selection, openModal, cursor } = props
if (selection.length === 0) {
if (cursor === 0) {
- openModal("Nothing selected");
+ openModal('Nothing selected')
} else {
- openModal("Copy");
+ openModal('Copy')
}
} else {
- openModal("Copy", selection.length);
+ openModal('Copy', selection.length)
}
}
const upload = (e) => {
if (e.target.files.length === 0) {
- return;
+ return
}
- props.upload(e.target.files);
+ props.upload(e.target.files)
}
const download = () => {
if (props.cursor === 0) {
- props.openModal("Nothing selected");
- } else if (props.itemType === "d") {
- props.openModal("Nothing selected", null, true);
+ props.openModal('Nothing selected')
+ } else if (props.itemType === 'd') {
+ props.openModal('Nothing selected', null, true)
} else {
- props.download();
+ props.download()
}
}
const hotKeys = (e) => {
- let isSearchInputFocused = document.querySelector('input:focus') || document.querySelector('textarea:focus');
-
- if (props.modalVisible || isSearchInputFocused) return;
-
- if (e.shiftKey && e.keyCode === 117) {
- rename();
+ e.stopPropagation()
+ let isSearchInputFocused = document.querySelector('input:focus') || document.querySelector('textarea:focus')
+ if (props.modalVisible || isSearchInputFocused) return
+ if (e.shiftKey && e.keyCode === 118) {
+ e.preventDefault()
+ rename()
+ return
}
switch (e.keyCode) {
- case 46: return deleteFile();
- case 65: return archive();
- case 68: return download();
- case 77: return move();
- case 78: return newFile();
- case 85: return inputFile.click();
- case 113: return rename();
- case 115: return permissions();
- case 116: return copy();
- case 118: return newDirectory();
- case 119: return deleteFile();
- default: break;
+ // u
+ case 85:
+ e.preventDefault();
+ return inputFile.current.click()
+ // n
+ case 78:
+ e.preventDefault()
+ return newFile()
+ // F6
+ case 118:
+ e.preventDefault()
+ return newDirectory()
+ // d
+ case 68:
+ e.preventDefault()
+ return download()
+ // F2
+ case 113:
+ e.preventDefault()
+ return rename()
+ // m
+ case 77:
+ e.preventDefault()
+ return move()
+ // F4
+ case 115:
+ e.preventDefault()
+ return copy()
+ // a
+ case 65:
+ e.preventDefault()
+ return archive()
+ // F8
+ case 119:
+ e.preventDefault()
+ return deleteFile()
+ // Del
+ case 46:
+ e.preventDefault()
+ return deleteFile()
+ // F3
+ case 114:
+ e.preventDefault()
+ return permissions()
+ default:
+ break
}
}
- let matchArchive = props.name.match(/.zip|.tgz|.tar.gz|.gzip|.tbz|.tar.bz|.gz|.zip|.tar|.rar/g);
+ let matchArchive = props.name.match(/.zip|.tgz|.tar.gz|.gzip|.tbz|.tar.bz|.gz|.zip|.tar|.rar/g)
return (
@@ -153,30 +190,80 @@ const Menu = (props) => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {matchArchive ? null : }
- {matchArchive ? null : }
- {matchArchive ? : null}
- {matchArchive ? : null}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {matchArchive ? null : (
+
+ )}
+ {matchArchive ? null : (
+
+ )}
+ {matchArchive ? (
+
+ ) : null}
+ {matchArchive ? (
+
+ ) : null}
+
+
- );
+ )
}
-export default Menu;
+export default Menu
diff --git a/src/react/src/components/Menu/Menu.scss b/src/react/src/components/Menu/Menu.scss
index 2eb9abb7f..2e9f8c58b 100644
--- a/src/react/src/components/Menu/Menu.scss
+++ b/src/react/src/components/Menu/Menu.scss
@@ -1,13 +1,4 @@
-$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';
.menu {
display: flex;
diff --git a/src/react/src/components/Modal/AddDirectory.jsx b/src/react/src/components/Modal/AddDirectory.jsx
index d94b483b5..173fdb654 100644
--- a/src/react/src/components/Modal/AddDirectory.jsx
+++ b/src/react/src/components/Modal/AddDirectory.jsx
@@ -1,9 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
import { useSelector } from 'react-redux';
const AddDirectory = (props) => {
+ const [value, setValue] = useState(null)
const { i18n } = useSelector(state => state.session);
+ const [hasError, setHasError] = useState(value !== null && !value.length)
+
+ const onChange = (e) => {
+ setValue(e.target.value)
+ }
+
+ const save = () => {
+ if (!value) {
+ setHasError(true)
+ return;
+ }
+ props.save()
+ }
+
+ const cancel = () => {
+ props.close()
+ }
return (