[APP 707] general setting components (#113)

* 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 modules/settings/assets/js/components/color-picker/style.css Co-authored-by: Raz Ohad <[email protected]> * update: color picker class name --------- Co-authored-by: Ohad <[email protected]> Co-authored-by: Raz Ohad <[email protected]>
elementor · Nov 20, 2024 · cf77dbe · cf77dbe
1 parent 9056e59
commit cf77dbe
Show file tree

Hide file tree

Showing 22 changed files with 905 additions and 37 deletions.
diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -10,9 +10,15 @@ import ElementorLogo from '../../icons/elementor-logo';
 
 const AdminTopBar = () => {
 	return (
-		<AppBar position="static" elevation={ 6 } sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
-			<Toolbar direction="row" sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } } padding={ 2 }>
-				<Grid container={ true } alignItems="center" gap={ 1 }>
+		<AppBar position="static"
+			elevation={ 6 }
+			sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
+			<Toolbar direction="row"
+				sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } }
+				padding={ 2 }>
+				<Grid container={ true }
+					alignItems="center"
+					gap={ 1 }>
 					<ElementorLogo size="large" />
 					<Typography color="text.primary">
 						{ __( 'Accessibility', 'pojo-accessibility' ) }

diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/modules/settings/assets/js/components/alignment-matrix-control/index.js
@@ -0,0 +1,66 @@
+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 Radio from '@elementor/ui/Radio';
+import RadioGroup from '@elementor/ui/RadioGroup';
+import Typography from '@elementor/ui/Typography';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const AlignmentMatrixControl = () => {
+	const [ selectedValue, setSelectedValue ] = useState( 'center-right' );
+
+	const handleChange = ( event ) => {
+		setSelectedValue( event.target.value );
+	};
+
+	const options = [
+		{ value: 'top-left', label: __( 'Top Left', 'pojo-accessibility' ) },
+		{ value: 'top-right', label: __( 'Top Right', 'pojo-accessibility' ) },
+		{ value: 'center-left', label: __( 'Center Left', 'pojo-accessibility' ) },
+		{ value: 'center-right', label: __( 'Center Right', 'pojo-accessibility' ) },
+		{ value: 'bottom-left', label: __( 'Bottom Left', 'pojo-accessibility' ) },
+		{ value: 'bottom-right', label: __( 'Bottom Right', 'pojo-accessibility' ) },
+	];
+
+	return (
+		<FormControl>
+			<FormLabel id="alignment-matrix-control" color="secondary">
+				<Typography variant="subtitle2" marginBottom={ 1 }>
+					{ __( '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>
+		</FormControl>
+	);
+};
+
+export default AlignmentMatrixControl;
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/modules/settings/assets/js/components/color-picker/index.js
@@ -0,0 +1,51 @@
+import Box from '@elementor/ui/Box';
+import FormControl from '@elementor/ui/FormControl';
+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 { __ } from '@wordpress/i18n';
+import './style.css';
+
+const ColorPicker = () => {
+	const [ color, setColor ] = useState( '#2563eb' );
+
+	return (
+		<FormControl>
+			<FormLabel id="color-picker-label" color="secondary">
+				<Typography variant="subtitle2" marginBottom={ 1 }>
+					{ __( 'Color', 'pojo-accessibility' ) }
+				</Typography>
+			</FormLabel>
+			<Grid padding={ 1 }
+				border={ 1 }
+				borderColor="divider"
+				borderRadius={ 1 }
+			>
+				<HexColorPicker
+					color={ color }
+					onChange={ setColor }
+					defaultValue="#fff"
+					className="widget-settings-color-picker"
+				/>
+				<Grid marginTop={ 2 } display="flex">
+					<Box padding={ 2 }
+						sx={ { backgroundColor: color } }
+						borderRadius={ 1 }
+						marginRight={ 1 }></Box>
+					<HexColorInput color={ color }
+						onChange={ setColor }
+						style={ {
+							width: '100%',
+							border: '1px solid rgba(0, 0, 0, 0.12)',
+							borderRadius: '3px',
+							paddingLeft: '10px',
+						} } />
+				</Grid>
+			</Grid>
+		</FormControl>
+	);
+};
+
+export default ColorPicker;
diff --git a/modules/settings/assets/js/components/color-picker/style.css b/modules/settings/assets/js/components/color-picker/style.css
@@ -0,0 +1,29 @@
+.widget-settings-color-picker.react-colorful {
+   min-width: 460px;
+  }
+.widget-settings-color-picker .react-colorful__saturation {
+border-radius: 0;
+border-bottom: none;
+}
+
+.widget-settings-color-picker .react-colorful__hue {
+order: 0;
+}
+
+.widget-settings-color-picker .react-colorful__hue,
+.widget-settings-color-picker .react-colorful__alpha {
+height: 14px;
+border-radius: 100px;
+margin-top: 10px;
+}
+
+.widget-settings-color-picker .react-colorful__pointer {
+width: 18px;
+height: 18px;
+}
+
+.widget-settings-color-picker .react-colorful__hue-pointer,
+.widget-settings-color-picker .react-colorful__alpha-pointer {
+width: 18px;
+height: 18px;
+}