diff --git a/.eslintrc b/.eslintrc
index 0ad9518..e17cfe0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,6 +9,16 @@
"babel",
"react"
],
+ "settings": {
+ "import/resolver": {
+ "node": {
+ "paths": ["node_modules"]
+ },
+ "webpack": {
+ "config": "webpack.config.js"
+ }
+ }
+ },
"env": {
"browser": true,
"node": true,
@@ -27,6 +37,7 @@
"no-console": "off",
"react-hooks/exhaustive-deps": "off",
"react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
+ "react/jsx-first-prop-new-line": ["error", "multiline"],
"strict": [ "error", "global" ],
"curly": "warn",
"import/order": [
@@ -47,7 +58,10 @@
"caseInsensitive": false
}
}
- ]
+ ],
+ "import/newline-after-import": ["error", {
+ "count": 1
+ }]
},
"parser": "@babel/eslint-parser"
}
diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index 72965c8..8fa3d9b 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -1,6 +1,7 @@
body {
background: #fff;
}
+
.wrap {
margin-top: 0;
}
@@ -8,21 +9,13 @@ body {
html:not([dir='rtl']) #ea11y-app {
margin-left: -20px;
background: white;
+ height: calc(100vh - 32px);
}
html[dir='rtl'] #ea11y-app {
margin-right: -20px;
background: white;
-}
-
-html:not([dir='rtl']) #ea11y-app-top-bar {
- margin-left: -20px;
- margin-bottom: 20px;
-}
-
-html[dir='rtl'] #ea11y-app-top-bar {
- margin-right: -20px;
- margin-bottom: 20px;
+ height: calc(100vh - 32px);
}
#ea11y-app * {
@@ -34,4 +27,4 @@ html[dir='rtl'] #ea11y-app-top-bar {
padding: 8px 12px;
box-shadow: none;
border-color: rgba(12, 13, 14, 0.23);
-}
\ No newline at end of file
+}
diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index a40129e..c3b2510 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -1,25 +1,15 @@
-import { ThemeProvider } from '@elementor/ui/styles';
+import { SettingsProvider, NotificationsProvider } from '@ea11y/hooks';
import { StrictMode, Fragment, createRoot } from '@wordpress/element';
import App from './app';
-import AdminTopBar from './components/admin-top-bar';
import { PluginSettingsProvider } from './contexts/plugin-settings';
-import { SettingsProvider, NotificationsProvider } from './hooks';
const rootNode = document.getElementById( 'ea11y-app' );
-const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
// Can't use the settings hook in the global scope so accessing directly
const isDevelopment = window?.ea11ySettingsData?.isDevelopment;
const AppWrapper = Boolean( isDevelopment ) ? StrictMode : Fragment;
const root = createRoot( rootNode );
-const topBar = createRoot( topBarNode );
-
-topBar.render(
-
-
- ,
-);
root.render(
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 83ba765..1a10f88 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,9 +1,12 @@
import '../css/style.css';
+import Box from '@elementor/ui/Box';
import DirectionProvider from '@elementor/ui/DirectionProvider';
+import Grid from '@elementor/ui/Grid';
import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications } from './components';
+import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components';
+import { useNotificationSettings, useSettings } from '@ea11y/hooks';
import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { useNotificationSettings } from './hooks';
+import { Sidebar } from './layouts/sidebar';
const App = () => {
const { isConnected } = usePluginSettingsContext();
@@ -11,11 +14,33 @@ const App = () => {
notificationMessage,
notificationType,
} = useNotificationSettings();
+ const { selectedMenu } = useSettings();
+ // Accessing the selected menu item
+ const selectedParent = MenuItems[ selectedMenu.parent ];
+ const selectedChild = selectedMenu.child ? selectedParent.children[ selectedMenu.child ] : null;
return (
{ ! isConnected && }
+
+
+
+
+
+ { selectedChild ? selectedChild.page : selectedParent?.page }
+
+
+
+
diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index 6df38d6..ec97e36 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -1,31 +1,25 @@
import HelpIcon from '@elementor/icons/HelpIcon';
import AppBar from '@elementor/ui/AppBar';
-import Grid from '@elementor/ui/Grid';
import Link from '@elementor/ui/Link';
import Toolbar from '@elementor/ui/Toolbar';
-import Typography from '@elementor/ui/Typography';
import { __ } from '@wordpress/i18n';
import { HELP_LINK } from '../../constants';
-import ElementorLogo from '../../icons/elementor-logo';
-const AdminTopBar = () => {
+export const AdminTopBar = () => {
+ const toolBarStyle = {
+ justifyContent: 'end',
+ alignItems: 'center',
+ backgroundColor: 'background.default',
+ gap: '10px',
+ borderBottom: '1px solid rgba(0, 0, 0, 0.12)' };
return (
-
-
+
-
-
-
- { __( 'Accessibility', 'pojo-accessibility' ) }
-
-
-
- {
);
};
-
-export default AdminTopBar;
diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/modules/settings/assets/js/components/alignment-matrix-control/index.js
index 0040c61..9153498 100644
--- a/modules/settings/assets/js/components/alignment-matrix-control/index.js
+++ b/modules/settings/assets/js/components/alignment-matrix-control/index.js
@@ -31,7 +31,8 @@ const AlignmentMatrixControl = () => {
{ __( 'Default Position', 'pojo-accessibility' ) }
- {
width: '100px',
} }
>
- { options.map( ( option, i ) => } /> ) }
diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
new file mode 100644
index 0000000..5ecc9ec
--- /dev/null
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -0,0 +1,18 @@
+import Box from '@elementor/ui/Box';
+import Button from '@elementor/ui/Button';
+import { __ } from '@wordpress/i18n';
+
+export const BottomBar = () => {
+ return (
+
+
+
+ );
+};
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/modules/settings/assets/js/components/color-picker/index.js
index 5e3222c..a3cf6ca 100644
--- a/modules/settings/assets/js/components/color-picker/index.js
+++ b/modules/settings/assets/js/components/color-picker/index.js
@@ -18,7 +18,8 @@ const ColorPicker = () => {
{ __( 'Color', 'pojo-accessibility' ) }
- {
className="widget-settings-color-picker"
/>
-
- {
>
- {
-
-
-
-
-
-
-
-
-
-
-
-
- {
strokeLinejoin="round" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index 8ea7f9c..51ea0df 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -3,8 +3,8 @@ import Button from '@elementor/ui/Button';
import Grid from '@elementor/ui/Grid';
import Modal from '@elementor/ui/Modal';
import Typography from '@elementor/ui/Typography';
+import { useAuth, useModal } from '@ea11y/hooks';
import { __ } from '@wordpress/i18n';
-import { useAuth, useModal } from '../../hooks';
function ConnectModal() {
const { isOpen } = useModal();
@@ -12,7 +12,8 @@ function ConnectModal() {
return (
-
-
{ __( 'Connect plugin on your site!', 'pojo-accessibility' ) }
-