Feature/app 708 widget menu settings (#118)

* add: icons for menu settings * add: placeholder layout for widget preview in menu settings * update: load saved settings and updated imports * add: logics for handling and saving menu settings * add: useSavedSettings hook * update: set export as default for Sidebar layout * add: widget menu settings layout and settings * update: add widget menu settings and widget preview layouts * add: hide/show minimum option alert notification * update: styling of the save button * update: save settings logic to use async/await * fix: accessibility text icon
elementor · Dec 4, 2024 · 6f62e6d · 6f62e6d
1 parent 7f62f9f
commit 6f62e6d
Show file tree

Hide file tree

Showing 30 changed files with 641 additions and 58 deletions.
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
@@ -14,12 +14,12 @@ import {
 	useSettings,
 	useSavedSettings,
 } from '@ea11y/hooks';
+import { Sidebar } from '@ea11y/layouts';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
 	useSavedSettings();
-	const { isConnected } = usePluginSettingsContext();
+	const { isConnected, isRTL } = usePluginSettingsContext();
 	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
 
@@ -29,7 +29,7 @@ const App = () => {
 		? 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%">
@@ -38,7 +38,7 @@ const App = () => {
 						width="100%"
 						display="flex"
 						flexDirection="column"
-						justifyContent="space-between"
+						justifyContent="start"
 					>
 						<AdminTopBar />
 						{selectedChild ? selectedChild.page : selectedParent?.page}

diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -4,13 +4,29 @@ import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
 const BottomBar = () => {
-	const { selectedMenu, iconDesign, iconPosition, hasChanges, setHasChanges } =
-		useSettings();
+	const {
+		selectedMenu,
+		widgetMenuSettings,
+		iconDesign,
+		iconPosition,
+		hasChanges,
+		setHasChanges,
+	} = useSettings();
 	const { save } = useStorage();
 	const { success, error } = useToastNotification();
 
 	const saveSettings = async () => {
-		if (
+		if (selectedMenu.parent === 'widget' && selectedMenu.child === 'menu') {
+			try {
+				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'
 		) {
@@ -29,7 +45,6 @@ const BottomBar = () => {
 			}
 		}
 	};
-
 	return (
 		<Box
 			display="flex"

diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
@@ -47,6 +47,7 @@ const IconSelect = (props) => {
 							gap: 1.5,
 							p: 2,
 							minWidth: 10,
+							width: 100,
 							minHeight: 100,
 							borderColor:
 								iconDesign.icon === option.value ? 'info.main' : 'divider',
@@ -56,7 +57,12 @@ const IconSelect = (props) => {
 					>
 						{option.icon &&
 							cloneElement(option.icon, {
-								sx: { color: iconDesign.color, fontSize: 44 },
+								sx: {
+									color: iconDesign.color,
+									fontSize: 44,
+									height: 44,
+									width: 'auto',
+								},
 							})}
 						<Radio
 							value={option.value}

diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
@@ -61,7 +61,12 @@ const IconSize = (props) => {
 					>
 						{icon?.icon &&
 							cloneElement(icon.icon, {
-								sx: { color: iconDesign.color, fontSize: option.fontSize },
+								sx: {
+									color: iconDesign.color,
+									fontSize: option.fontSize,
+									height: option.fontSize,
+									width: 'auto',
+								},
 							})}
 						<Radio
 							value={option.value}

diff --git a/modules/settings/assets/js/constants/menu-settings.js b/modules/settings/assets/js/constants/menu-settings.js
@@ -0,0 +1,83 @@
+import AlignLeftIcon from '@elementor/icons/AlignLeftIcon';
+import LinkIcon from '@elementor/icons/LinkIcon';
+import {
+	GrayscaleIcon,
+	LineHeightIcon,
+	ReadableFontIcon,
+	TextSizeIcon,
+	ContrastIcon,
+	PageStructureIcon,
+	SiteMapIcon,
+	ReadingPanelIcon,
+	HideImagesIcon,
+	PauseAnimationsIcon,
+} from '@ea11y/icons';
+import { __ } from '@wordpress/i18n';
+
+const iconStyle = { color: 'black' };
+
+export const MENU_SETTINGS = {
+	'content-adjustments': {
+		title: __('Content Adjustments', 'pojo-accessibility'),
+		options: {
+			'text-size': {
+				title: __('Adjust text size', 'pojo-accessibility'),
+				icon: <TextSizeIcon sx={iconStyle} />,
+			},
+			'line-height': {
+				title: __('Adjust line height', 'pojo-accessibility'),
+				icon: <LineHeightIcon sx={iconStyle} />,
+			},
+			'align-text': {
+				title: __('Align text', 'pojo-accessibility'),
+				icon: <AlignLeftIcon sx={iconStyle} />,
+			},
+			'readable-font': {
+				title: __('Readable font', 'pojo-accessibility'),
+				icon: <ReadableFontIcon sx={iconStyle} />,
+			},
+		},
+	},
+	'color-adjustments': {
+		title: __('Color Adjustments', 'pojo-accessibility'),
+		options: {
+			greyscale: {
+				title: __('Greyscale', 'pojo-accessibility'),
+				icon: <GrayscaleIcon sx={iconStyle} />,
+			},
+			contrast: {
+				title: __('Contrast', 'pojo-accessibility'),
+				icon: <ContrastIcon sx={iconStyle} />,
+			},
+		},
+	},
+	'orientation-adjustments': {
+		title: __('Orientation Adjustments', 'pojo-accessibility'),
+		options: {
+			'page-structure': {
+				title: __('Page structure', 'pojo-accessibility'),
+				icon: <PageStructureIcon sx={iconStyle} />,
+			},
+			'site-map': {
+				title: __('Site map', 'pojo-accessibility'),
+				icon: <SiteMapIcon sx={iconStyle} />,
+			},
+			'reading-panel': {
+				title: __('Reading panel', 'pojo-accessibility'),
+				icon: <ReadingPanelIcon sx={iconStyle} />,
+			},
+			'hide-images': {
+				title: __('Hide images', 'pojo-accessibility'),
+				icon: <HideImagesIcon sx={iconStyle} />,
+			},
+			'pause-animations': {
+				title: __('Pause animations', 'pojo-accessibility'),
+				icon: <PauseAnimationsIcon sx={iconStyle} />,
+			},
+			'highlight-links': {
+				title: __('Highlight links', 'pojo-accessibility'),
+				icon: <LinkIcon sx={iconStyle} />,
+			},
+		},
+	},
+};
diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
@@ -6,6 +6,6 @@ export { useStorage } from './use-storage';
 export { useToastNotification } from './use-notifications';
 export { NotificationsProvider } from './use-notifications';
 export { useNotificationSettings } from './use-notifications';
+export { useSavedSettings } from './use-saved-settings';
 export { useIconPosition } from './use-icon-positioon';
 export { useIconDesign } from './use-icon-design';
-export { useSavedSettings } from './use-saved-settings';
diff --git a/modules/settings/assets/js/hooks/use-saved-settings.js b/modules/settings/assets/js/hooks/use-saved-settings.js
@@ -4,7 +4,12 @@ import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 export const useSavedSettings = () => {
-	const { setIconDesign, setIconPosition } = useSettings();
+	const {
+		setWidgetMenuSettings,
+		setHideMinimumOptionAlert,
+		setIconDesign,
+		setIconPosition,
+	} = useSettings();
 
 	const result = useSelect((select) => {
 		return {
@@ -18,10 +23,20 @@ export const useSavedSettings = () => {
 
 	useEffect(() => {
 		if (result.hasFinishedResolution) {
+			if (result?.data?.a11y_widget_menu_settings) {
+				setWidgetMenuSettings(result.data.a11y_widget_menu_settings);
+			}
+
 			if (result?.data?.a11y_widget_icon_settings?.style) {
 				setIconDesign(result.data.a11y_widget_icon_settings.style);
 			}
 
+			if (result?.data?.a11y_hide_minimum_active_options_alert) {
+				setHideMinimumOptionAlert(
+					result.data.a11y_hide_minimum_active_options_alert,
+				);
+			}
+
 			if (result?.data?.a11y_widget_icon_settings?.position) {
 				setIconPosition(result.data.a11y_widget_icon_settings.position);
 			}

diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
@@ -15,11 +15,30 @@ export const SettingsProvider = ({ children }) => {
 		parent: 'widget',
 		child: 'iconSettings',
 	});
+	const [widgetMenuSettings, setWidgetMenuSettings] = useState({
+		'content-adjustments': {
+			'text-size': true,
+			'line-height': true,
+			'align-text': true,
+			'readable-font': true,
+		},
+		'color-adjustments': {
+			greyscale: true,
+			contrast: true,
+		},
+		'orientation-adjustments': {
+			'page-structure': true,
+			'site-map': true,
+			'reading-panel': true,
+			'hide-images': true,
+			'pause-animations': true,
+			'highlight-links': true,
+		},
+	});
 
-	// Icon Design
-	const [widgetIcon, setWidgetIcon] = useState('person');
-	const [widgetIconSize, setWidgetIconSize] = useState('medium');
-	const [widgetIconColor, setWidgetIconColor] = useState('#2563eb');
+	// Track settings changes to enable/disable Save Changes button
+	const [hasChanges, setHasChanges] = useState(false);
+	const [hideMinimumOptionAlert, setHideMinimumOptionAlert] = useState(false);
 	const [iconDesign, setIconDesign] = useState({
 		icon: 'person',
 		size: 'medium',
@@ -63,21 +82,17 @@ export const SettingsProvider = ({ children }) => {
 			position: 'top-left',
 		},
 	});
-
-	const [hasChanges, setHasChanges] = useState(false);
 	return (
 		<SettingsContext.Provider
 			value={{
 				openSidebar,
 				setOpenSidebar,
 				selectedMenu,
 				setSelectedMenu,
-				widgetIcon,
-				setWidgetIcon,
-				widgetIconSize,
-				setWidgetIconSize,
-				widgetIconColor,
-				setWidgetIconColor,
+				widgetMenuSettings,
+				setWidgetMenuSettings,
+				hideMinimumOptionAlert,
+				setHideMinimumOptionAlert,
 				iconPosition,
 				setIconPosition,
 				iconDesign,

diff --git a/modules/settings/assets/js/icons/accessibility-controls.js b/modules/settings/assets/js/icons/accessibility-controls.js
@@ -1,6 +1,9 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
+import { useSettings } from '@ea11y/hooks';
 
 function AccessibilityControlsIcon(props) {
+	const { iconDesign } = useSettings();
+	const strokeColor = `lch(from ${iconDesign?.color || '#fff'} calc((50 - l) * 100) 0 0)`;
 	return (
 		<SvgIcon
 			viewBox="0 0 64 64"
@@ -12,7 +15,7 @@ function AccessibilityControlsIcon(props) {
 			<circle cx="32" cy="32" r="32" />
 			<path
 				d="M31.4998 25.4993C31.4998 26.1182 31.7457 26.7117 32.1833 27.1493C32.6208 27.5869 33.2143 27.8327 33.8332 27.8327C34.452 27.8327 35.0455 27.5869 35.4831 27.1493C35.9207 26.7117 36.1665 26.1182 36.1665 25.4993M31.4998 25.4993C31.4998 24.8805 31.7457 24.287 32.1833 23.8494C32.6208 23.4118 33.2143 23.166 33.8332 23.166C34.452 23.166 35.0455 23.4118 35.4831 23.8494C35.9207 24.287 36.1665 24.8805 36.1665 25.4993M31.4998 25.4993H22.1665M36.1665 25.4993H40.8332M24.4998 32.4993C24.4998 33.1182 24.7457 33.7117 25.1833 34.1493C25.6208 34.5869 26.2143 34.8327 26.8332 34.8327C27.452 34.8327 28.0455 34.5869 28.4831 34.1493C28.9207 33.7117 29.1665 33.1182 29.1665 32.4993M24.4998 32.4993C24.4998 31.8805 24.7457 31.287 25.1833 30.8494C25.6208 30.4118 26.2143 30.166 26.8332 30.166C27.452 30.166 28.0455 30.4118 28.4831 30.8494C28.9207 31.287 29.1665 31.8805 29.1665 32.4993M24.4998 32.4993H22.1665M29.1665 32.4993H40.8332M34.9998 39.4993C34.9998 40.1182 35.2457 40.7117 35.6833 41.1493C36.1208 41.5868 36.7143 41.8327 37.3332 41.8327C37.952 41.8327 38.5455 41.5868 38.9831 41.1493C39.4207 40.7117 39.6665 40.1182 39.6665 39.4993M34.9998 39.4993C34.9998 38.8805 35.2457 38.287 35.6833 37.8494C36.1208 37.4118 36.7143 37.166 37.3332 37.166C37.952 37.166 38.5455 37.4118 38.9831 37.8494C39.4207 38.287 39.6665 38.8805 39.6665 39.4993M34.9998 39.4993H22.1665M39.6665 39.4993H40.8332M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
-				stroke="white"
+				stroke={strokeColor}
 				strokeWidth="3"
 				strokeLinecap="round"
 				strokeLinejoin="round"

diff --git a/modules/settings/assets/js/icons/accessibility-eye.js b/modules/settings/assets/js/icons/accessibility-eye.js
@@ -1,6 +1,9 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
+import { useSettings } from '@ea11y/hooks';
 
 function AccessibilityEyeIcon(props) {
+	const { iconDesign } = useSettings();
+	const strokeColor = `lch(from ${iconDesign?.color || '#fff'} calc((50 - l) * 100) 0 0)`;
 	return (
 		<SvgIcon
 			viewBox="0 0 64 64"
@@ -13,7 +16,7 @@ function AccessibilityEyeIcon(props) {
 			<g clipPath="url(#clip0_3940_26698)">
 				<path
 					d="M30.3492 30.3515C29.9116 30.7892 29.6659 31.3827 29.666 32.0016C29.6661 32.6204 29.9121 33.2139 30.3497 33.6514C30.7874 34.0889 31.381 34.3347 31.9998 34.3346C32.6187 34.3345 33.2121 34.0885 33.6497 33.6508M37.4612 37.4518C35.8246 38.4758 33.9304 39.0127 32 39C27.8 39 24.3 36.6667 21.5 32C22.984 29.5267 24.664 27.709 26.54 26.547M29.8767 25.21C30.5755 25.0685 31.2869 24.9982 32 25C36.2 25 39.7 27.3333 42.5 32C41.723 33.295 40.8912 34.4115 40.0057 35.3483M21.5 21.5L42.5 42.5M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
-					stroke="white"
+					stroke={strokeColor}
 					strokeWidth="3"
 					strokeLinecap="round"
 					strokeLinejoin="round"

diff --git a/modules/settings/assets/js/icons/accessibility-person.js b/modules/settings/assets/js/icons/accessibility-person.js
@@ -1,6 +1,10 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
+import { useSettings } from '@ea11y/hooks';
 
 function AccessibilityPersonIcon(props) {
+	const { iconDesign } = useSettings();
+	const strokeColor = `lch(from ${iconDesign?.color || '#fff'} calc((50 - l) * 100) 0 0)`;
+
 	return (
 		<SvgIcon
 			viewBox="0 0 64 64"
@@ -16,7 +20,7 @@ function AccessibilityPersonIcon(props) {
 			/>
 			<path
 				d="M27 43.25L32 35.75M32 35.75L37 43.25M32 35.75V30.75M32 30.75L39.5 28.25M32 30.75L24.5 28.25M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32ZM33.25 22.75C33.25 23.4404 32.6904 24 32 24C31.3096 24 30.75 23.4404 30.75 22.75C30.75 22.0596 31.3096 21.5 32 21.5C32.6904 21.5 33.25 22.0596 33.25 22.75Z"
-				stroke="white"
+				stroke={strokeColor}
 				strokeWidth="3"
 				strokeLinecap="round"
 				strokeLinejoin="round"