Feature/app 810 assemble icon settings page (#117)

* Initial refactor commit * ✅ Added build and tests CI/CD * update: add src for admin settings * update: incorrect constant names * update: namespace * add: accessibility settings * update: webpack to output files inside a folder * update: build output folders * update: removed commented code * update: npm scripts * add: webpack config * add: hooks * update: move admin setting to the module folder * update: assets loading logic * update: add rule to move jsx props to multiline imporving readability * add: connect modal * update: hooks import for better readability * update: replace functions with hooks * add: connect module * add: settings and get settings route * add: hooks and contexts to get settings * add: hooks * add: notification component * add: data api * add: settings provider and connect settings * add: husky * add: icon size control * fix: icon size control labels * add: icon select component * add: color picker component * add: accessibility icons * add: icon export * update: add icons to the component * fix: styling for the icon select control * update: color picker with react-colorful component * update: icon size component with live icon design * fix: styling of radio boxes * add: icon design settings layout * add: position settings layout * add: layout exports * add: alignment matrix and position control components * add: position settings & position settings for mobile layout * fix: formatting and text-domain * update: filter names * fix: hook import * add: set function for settings * add: prop-types package * update: refactor notification component and context * update: remove filter for authorize url * update: imports and exports of hooks * update: plugin settings context filename and relevant imports * update: icons and icon imports * add: sidebar(wip) * update: fix width of connect screen on mobile * update: sidebar layout * Update modules/settings/assets/js/components/color-picker/style.css Co-authored-by: Raz Ohad <[email protected]> * update: color picker class name * add: credit card and user arrow icons * update: hidden wpfooter and fixed sidebar height * update: sidebar layout * add: basic page layouts * update: sidebar layout * add: sidebar menu, sidebar app bar and my account menu components * update: add sidebar and menu settings * update: add page layouts * update: admin top bar * add: bottom bar * add: bottom bar and top bar * add: bottom bar and top bar * update: page content styling * fix: styling * fix: styling * update: text domain * add: props to wrapper * add: icon design and position setting layouts * add: in page scroll behaviour to the settings * add: widget icons and getter function * update: icon design settings getter and setter functions * update: imports * add: mobile layout for position settings * add: icon position settings * add: icon position settings hooks and handlers * fix: alignment of controls in AlignmentMatrixControl * update: useSettings and usePositionSetting hooks and relevant functions * fix: colors of AlignmentMatrixControl * fix: styling of components and layouts * add: aliases * add: container wrapper to page * update: accessibility options rendering logic * fix: order of the icons * add: aliases for components and hooks imports * fix: styling of settings panel * fix: container height for settings page * update: toggle control states * add: widget icon settings * add: load saved widget icon settings * update: move layout to page for different designs per page * update: add changes tracking and disable button logic * add: async/await to save settings * update: convert options to array of objects * Update modules/settings/assets/js/components/bottom-bar/index.js Co-authored-by: VasylD <[email protected]> * Update modules/settings/assets/js/app.js Co-authored-by: VasylD <[email protected]> * fix: remove duplicate entries --------- Co-authored-by: Ohad <[email protected]> Co-authored-by: Raz Ohad <[email protected]> Co-authored-by: VasylD <[email protected]>
elementor · Dec 4, 2024 · 7f62f9f · 7f62f9f
1 parent 761d5b8
commit 7f62f9f
Show file tree

Hide file tree

Showing 30 changed files with 600 additions and 268 deletions.
diff --git a/.eslintrc b/.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"
 }
diff --git a/modules/settings/assets/css/style.css b/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 * {

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
@@ -8,13 +8,17 @@ import {
 	Notifications,
 	MenuItems,
 	AdminTopBar,
-	BottomBar,
 } from '@ea11y/components';
-import { useNotificationSettings, useSettings } from '@ea11y/hooks';
+import {
+	useNotificationSettings,
+	useSettings,
+	useSavedSettings,
+} from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
+	useSavedSettings();
 	const { isConnected } = usePluginSettingsContext();
 	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
@@ -37,10 +41,7 @@ const App = () => {
 						justifyContent="space-between"
 					>
 						<AdminTopBar />
-						<Box p={1} height="100%">
-							{selectedChild ? selectedChild.page : selectedParent?.page}
-						</Box>
-						<BottomBar />
+						{selectedChild ? selectedChild.page : selectedParent?.page}
 					</Box>
 				</Grid>
 				<Notifications message={notificationMessage} type={notificationType} />

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/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;
diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/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>
 	);
 };

diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -1,8 +1,35 @@
 import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
+import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
 
-export const BottomBar = () => {
+const BottomBar = () => {
+	const { selectedMenu, iconDesign, iconPosition, hasChanges, setHasChanges } =
+		useSettings();
+	const { save } = useStorage();
+	const { success, error } = useToastNotification();
+
+	const saveSettings = async () => {
+		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) {
+				error('Failed to save settings!');
+			}
+		}
+	};
+
 	return (
 		<Box
 			display="flex"
@@ -11,9 +38,16 @@ export const BottomBar = () => {
 			width="100%"
 			borderTop="1px solid rgba(0, 0, 0, 0.12)"
 		>
-			<Button variant="contained" color="info">
+			<Button
+				variant="contained"
+				color="info"
+				onClick={saveSettings}
+				disabled={!hasChanges}
+			>
 				{__('Save Changes', 'pojo-accessibility')}
 			</Button>
 		</Box>
 	);
 };
+
+export default BottomBar;
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/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)',

diff --git a/modules/settings/assets/js/components/color-picker/style.css b/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;