merge: develop

.eslintrc

@@ -10,16 +10,6 @@
     "babel",
     "react"
   ],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "paths": ["node_modules"]
-      },
-      "webpack": {
-        "config": "webpack.config.js"
-      }
-    }
-  },
   "env": {
     "browser": true,
     "node": true,
@@ -62,5 +52,15 @@
       "count": 1
     }]
   },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["node_modules"]
+      },
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
   "parser": "@babel/eslint-parser"
 }

modules/settings/assets/css/style.css

@@ -15,7 +15,7 @@ html:not([dir='rtl']) #ea11y-app {
 html[dir='rtl'] #ea11y-app {
 	margin-right: -20px;
     background: white;
-	height: calc(100vh - 32px);
+	height: calc( 100vh - 32px );
 }
 
 #ea11y-app * {

modules/settings/assets/js/app.js

@@ -18,18 +18,18 @@ import { Sidebar } from '@ea11y/layouts';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 
 const App = () => {
-	const { isConnected } = usePluginSettingsContext();
+	useSavedSettings();
+	const { isConnected, isRTL } = usePluginSettingsContext();
 	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
-	useSavedSettings();
 
 	// Accessing the selected menu item
 	const selectedParent = MenuItems[selectedMenu.parent];
 	const selectedChild = selectedMenu.child
 		? selectedParent.children[selectedMenu.child]
 		: null;
 	return (
-		<DirectionProvider rtl={false /* TODO:Add RTL detection in settings */}>
+		<DirectionProvider rtl={isRTL}>
 			<ThemeProvider colorScheme="light">
 				{!isConnected && <ConnectModal />}
 				<Grid display="flex" flexDirection="row" height="100%">

modules/settings/assets/js/components/admin-top-bar/index.js

@@ -5,7 +5,7 @@ import Toolbar from '@elementor/ui/Toolbar';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
 
-export const AdminTopBar = () => {
+const AdminTopBar = () => {
 	const toolBarStyle = {
 		justifyContent: 'end',
 		alignItems: 'center',
@@ -30,3 +30,5 @@ export const AdminTopBar = () => {
 		</AppBar>
 	);
 };
+
+export default AdminTopBar;

modules/settings/assets/js/components/alignment-matrix-control/index.js

@@ -2,68 +2,89 @@ import Box from '@elementor/ui/Box';
 import FormControl from '@elementor/ui/FormControl';
 import FormControlLabel from '@elementor/ui/FormControlLabel';
 import FormLabel from '@elementor/ui/FormLabel';
+import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
+import Tooltip from '@elementor/ui/Tooltip';
 import Typography from '@elementor/ui/Typography';
-import { useState } from '@wordpress/element';
+import { useIconPosition } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
-const AlignmentMatrixControl = () => {
-	const [selectedValue, setSelectedValue] = useState('center-right');
+const AlignmentMatrixControl = ({ mode }) => {
+	const { iconPosition, updateIconPosition } = useIconPosition();
 
 	const handleChange = (event) => {
-		setSelectedValue(event.target.value);
+		updateIconPosition(mode, 'position', event.target.value);
 	};
 
+	// Define options based on the mode
 	const options = [
 		{ value: 'top-left', label: __('Top Left', 'pojo-accessibility') },
+		...(mode === 'desktop'
+			? [{ value: 'top-center', label: __('Top Center', 'pojo-accessibility') }]
+			: []),
 		{ value: 'top-right', label: __('Top Right', 'pojo-accessibility') },
 		{ value: 'center-left', label: __('Center Left', 'pojo-accessibility') },
+		...(mode === 'desktop' ? [{ value: 'empty' }] : []),
 		{ value: 'center-right', label: __('Center Right', 'pojo-accessibility') },
 		{ value: 'bottom-left', label: __('Bottom Left', 'pojo-accessibility') },
+		...(mode === 'desktop'
+			? [
+					{
+						value: 'bottom-center',
+						label: __('Bottom Center', 'pojo-accessibility'),
+					},
+				]
+			: []),
 		{ value: 'bottom-right', label: __('Bottom Right', 'pojo-accessibility') },
 	];
 
 	return (
 		<FormControl>
 			<FormLabel id="alignment-matrix-control" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBottom={3} color="text.primary">
 					{__('Default Position', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
-			<Box
-				display="flex"
-				justifyContent="center"
-				padding={2}
-				width="100%"
-				sx={{ backgroundColor: 'divider' }}
-			>
-				<RadioGroup
-					aria-labelledby="alignment-matrix-control"
-					value={selectedValue}
-					onChange={handleChange}
-					name="alignment-matrix-control"
-					sx={{
-						display: 'grid',
-						gridTemplateColumns: 'repeat(2, 1fr)',
-						gap: 1,
-						borderWidth: 5,
-						borderStyle: 'solid',
-						borderColor: 'secondary.main',
-						borderRadius: 1,
-						width: '100px',
-					}}
-				>
-					{options.map((option, i) => (
-						<FormControlLabel
-							sx={{ margin: 0 }}
-							key={i}
-							value={option.value}
-							control={<Radio color="secondary" />}
-						/>
-					))}
-				</RadioGroup>
-			</Box>
+			<Paper color="info" elevation={0}>
+				<Box display="flex" justifyContent="center" padding={4} width="100%">
+					<Paper color="secondary">
+						<RadioGroup
+							aria-labelledby="alignment-matrix-control"
+							value={iconPosition[mode].position}
+							onChange={handleChange}
+							name="alignment-matrix-control"
+							sx={{
+								display: 'grid',
+								gridTemplateColumns:
+									mode === 'desktop' ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
+								gap: 1,
+								columnGap: mode === 'desktop' ? 6 : 1,
+								alignItems: 'center',
+								borderWidth: 5,
+								borderStyle: 'solid',
+								borderColor: 'secondary.main',
+								borderRadius: 1,
+								minWidth: mode === 'desktop' ? 'auto' : '100px',
+							}}
+						>
+							{options.map((option) =>
+								'empty' === option.value ? (
+									<Box key={option.value}></Box>
+								) : (
+									<Tooltip title={option.label} key={option.value}>
+										<FormControlLabel
+											sx={{ justifyContent: 'center', margin: 0 }}
+											value={option.value}
+											control={<Radio color="secondary" />}
+										/>
+									</Tooltip>
+								),
+							)}
+						</RadioGroup>
+					</Paper>
+				</Box>
+			</Paper>
 		</FormControl>
 	);
 };

modules/settings/assets/js/components/bottom-bar/index.js

@@ -3,9 +3,15 @@ import Button from '@elementor/ui/Button';
 import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
-export const BottomBar = () => {
-	const { selectedMenu, widgetMenuSettings, hasChanges, setHasChanges } =
-		useSettings();
+const BottomBar = () => {
+	const {
+		selectedMenu,
+		widgetMenuSettings,
+		iconDesign,
+		iconPosition,
+		hasChanges,
+		setHasChanges,
+	} = useSettings();
 	const { save } = useStorage();
 	const { success, error } = useToastNotification();
 
@@ -15,6 +21,23 @@ export const BottomBar = () => {
 				await save({
 					a11y_widget_menu_settings: widgetMenuSettings,
 				});
+				success('Settings saved!');
+				setHasChanges(false);
+			} catch (e) {
+				error('Failed to save settings!');
+			}
+		} else if (
+			selectedMenu.parent === 'widget' &&
+			selectedMenu.child === 'iconSettings'
+		) {
+			try {
+				await save({
+					a11y_widget_icon_settings: {
+						style: iconDesign,
+						position: iconPosition,
+					},
+				});
+
 				success('Settings saved!');
 				setHasChanges(false);
 			} catch (e) {
@@ -41,3 +64,5 @@ export const BottomBar = () => {
 		</Box>
 	);
 };
+
+export default BottomBar;

modules/settings/assets/js/components/color-picker/index.js

@@ -4,37 +4,36 @@ import FormLabel from '@elementor/ui/FormLabel';
 import Grid from '@elementor/ui/Grid';
 import Typography from '@elementor/ui/Typography';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
-import { useState } from '@wordpress/element';
+import { useIconDesign } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 import './style.css';
 
 const ColorPicker = () => {
-	const [color, setColor] = useState('#2563eb');
+	const { iconDesign, updateIconDesign } = useIconDesign();
 
 	return (
-		<FormControl>
+		<FormControl fullWidth>
 			<FormLabel id="color-picker-label" color="secondary">
-				<Typography variant="subtitle2" marginBottom={1}>
+				<Typography variant="subtitle2" marginBottom={1} color="text.primary">
 					{__('Color', 'pojo-accessibility')}
 				</Typography>
 			</FormLabel>
 			<Grid padding={1} border={1} borderColor="divider" borderRadius={1}>
 				<HexColorPicker
-					color={color}
-					onChange={setColor}
-					defaultValue="#fff"
+					color={iconDesign.color}
+					onChange={(value) => updateIconDesign({ color: value })}
 					className="widget-settings-color-picker"
 				/>
 				<Grid marginTop={2} display="flex">
 					<Box
 						padding={2}
-						sx={{ backgroundColor: color }}
+						sx={{ backgroundColor: iconDesign.color }}
 						borderRadius={1}
 						marginRight={1}
 					></Box>
 					<HexColorInput
-						color={color}
-						onChange={setColor}
+						color={iconDesign.color}
+						onChange={(value) => updateIconDesign({ color: value })}
 						style={{
 							width: '100%',
 							border: '1px solid rgba(0, 0, 0, 0.12)',

modules/settings/assets/js/components/color-picker/style.css

@@ -1,5 +1,5 @@
 .widget-settings-color-picker.react-colorful {
-   min-width: 460px;
+   width: 100%;
   }
 .widget-settings-color-picker .react-colorful__saturation {
 border-radius: 0;