Skip to content

Commit 934bd57

Browse files
iamdharmeshiamdharmesh
committed
Design improvements.
1 parent 0c142e6 commit 934bd57

File tree

9 files changed

+210
-127
lines changed

9 files changed

+210
-127
lines changed

‎package-lock.json

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"scripts": {
88
"start": "wp-scripts start",
99
"build": "wp-scripts build",
10-
"lint:js": "wp-scripts lint-js",
10+
"lint:js": "wp-scripts lint-js ./src/js/settings",
1111
"lint:js-fix": "wp-scripts lint-js --fix",
1212
"install_tests": "./bin/install-wp-tests.sh classifai_unit_tests root password 127.0.0.1",
1313
"test": "./vendor/bin/phpunit",
@@ -55,6 +55,7 @@
5555
"dependencies": {
5656
"@wordpress/icons": "^9.43.0",
5757
"choices.js": "^10.2.0",
58+
"classnames": "^2.5.1",
5859
"tippy.js": "^6.3.7"
5960
}
6061
}

‎src/js/components/user-selector.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ import { addQueryArgs } from '@wordpress/url';
1616
* @param {Object} props The block props.
1717
* @param {string} props.value The selected user ids.
1818
* @param {string} props.onChange The change handler.
19-
* @param {string} props.label The label for the field.
2019
*/
21-
export const UserSelector = ( { value, onChange, label = null } ) => {
20+
export const UserSelector = ( { value, onChange } ) => {
2221
const [ usersByName, setUsersByName ] = useState( {} );
2322
const [ values, setValues ] = useState( [] );
2423
const [ search, setSearch ] = useState( '' );
@@ -117,7 +116,7 @@ export const UserSelector = ( { value, onChange, label = null } ) => {
117116
suggestions={ suggestions }
118117
onChange={ handleChange }
119118
onInputChange={ debouncedSearch }
120-
label={ label }
119+
label={ null }
121120
placeholder={ __( 'Search for users', 'classifai' ) }
122121
__experimentalShowHowTo={ false }
123122
messages={ {

‎src/js/settings/components/allowed-roles/index.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
1010
*/
1111
import { getFeature } from '../../utils/utils';
1212
import { STORE_NAME } from '../../data/store';
13+
import { SettingsRow } from '../settings-row';
1314

1415
export const AllowedRoles = ( { featureName } ) => {
1516
const { setFeatureSettings } = useDispatch( STORE_NAME );
@@ -19,10 +20,14 @@ export const AllowedRoles = ( { featureName } ) => {
1920
const feature = getFeature( featureName );
2021
const roles = feature.roles || {};
2122
return (
22-
<div className="classifai-settings__roles">
23-
<div className="settings-label">
24-
{ __( 'Allowed roles', 'classifai' ) }
25-
</div>
23+
<SettingsRow
24+
label={ __( 'Allowed roles', 'classifai' ) }
25+
className="settings-allowed-roles"
26+
description={ __(
27+
'Choose which roles are allowed to access this feature.',
28+
'classifai'
29+
) }
30+
>
2631
{ Object.keys( roles ).map( ( role ) => {
2732
return (
2833
<CheckboxControl
@@ -40,6 +45,6 @@ export const AllowedRoles = ( { featureName } ) => {
4045
/>
4146
);
4247
} ) }
43-
</div>
48+
</SettingsRow>
4449
);
4550
};

‎src/js/settings/components/feature-settings/index.js

+23-14
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { PluginArea } from '@wordpress/plugins';
1919
import { getFeature, getScope } from '../../utils/utils';
2020
import { useSettings } from '../../hooks';
2121
import { UserPermissions } from '../user-permissions';
22+
import { SettingsRow } from '../settings-row';
2223

2324
/**
2425
* Feature Settings component.
@@ -61,23 +62,31 @@ export const FeatureSettings = ( { featureName } ) => {
6162
// translators: %s: Feature title
6263
sprintf( __( '%s Settings', 'classifai' ), featureTitle )
6364
}
65+
className="settings-panel"
6466
>
6567
<PanelBody>
66-
<ToggleControl
67-
label={ __( 'Enable feature', 'classifai' ) }
68-
checked={ featureSettings.status === '1' }
69-
onChange={ ( status ) =>
70-
setSettings( {
71-
status: status ? '1' : '0', // TODO: Use boolean, currently using string for compatibility.
72-
} )
73-
}
74-
/>
75-
<SelectControl
68+
<SettingsRow label={ __( 'Enable feature', 'classifai' ) }>
69+
<ToggleControl
70+
label={ __( 'Enable feature', 'classifai' ) }
71+
checked={ featureSettings.status === '1' }
72+
onChange={ ( status ) =>
73+
setSettings( {
74+
status: status ? '1' : '0', // TODO: Use boolean, currently using string for compatibility.
75+
} )
76+
}
77+
/>
78+
</SettingsRow>
79+
<SettingsRow
7680
label={ __( 'Select a provider', 'classifai' ) }
77-
onChange={ ( provider ) => setSettings( { provider } ) }
78-
value={ featureSettings.provider }
79-
options={ providers }
80-
/>
81+
>
82+
<SelectControl
83+
onChange={ ( provider ) =>
84+
setSettings( { provider } )
85+
}
86+
value={ featureSettings.provider }
87+
options={ providers }
88+
/>
89+
</SettingsRow>
8190

8291
<Slot name="ClassifAIProviderSettings">
8392
{ ( fills ) => <> { fills }</> }

‎src/js/settings/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './service-settings';
44
export * from './feature-settings';
55
export * from './user-permissions';
66
export * from './allowed-roles';
7+
export * from './settings-row';

‎src/js/settings/components/settings-row/index.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import classNames from 'classnames';
5+
6+
/**
7+
* Settings row component.
8+
*
9+
* @param {Object} props All the props passed to this function.
10+
* @param {string} props.label Settings label.
11+
* @param {Object} props.children The children of the component.
12+
*/
13+
export const SettingsRow = ( props ) => {
14+
return (
15+
<div className={ classNames( 'settings-row', props?.className ) }>
16+
<div className="settings-label">{ props.label }</div>
17+
<div className="settings-control">
18+
{ props.children }
19+
<div className="settings-description">
20+
{ props.description }
21+
</div>
22+
</div>
23+
</div>
24+
);
25+
};

‎src/js/settings/components/user-permissions/index.js

+40-32
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
/**
22
* External dependencies
33
*/
4-
import { PanelBody, PanelRow, ToggleControl } from '@wordpress/components';
4+
import { PanelBody, ToggleControl } from '@wordpress/components';
55
import { __ } from '@wordpress/i18n';
66

77
/**
88
* Internal dependencies
99
*/
1010
import { UserSelector } from '../../../components';
1111
import { AllowedRoles } from '../allowed-roles';
12+
import { SettingsRow } from '../settings-row';
1213

1314
export const UserPermissions = ( {
1415
featureName,
@@ -20,37 +21,44 @@ export const UserPermissions = ( {
2021
title={ __( 'User permissions', 'classifai' ) }
2122
initialOpen={ true }
2223
>
23-
<PanelRow>
24-
<AllowedRoles featureName={ featureName } />
25-
</PanelRow>
26-
<PanelRow>
27-
<div className="classifai-settings__users">
28-
<UserSelector
29-
value={ featureSettings.users || [] }
30-
onChange={ ( users ) => {
31-
setSettings( {
32-
...featureSettings,
33-
users,
34-
} );
35-
} }
36-
label={ __( 'Allowed users', 'classifai' ) }
37-
/>
38-
</div>
39-
</PanelRow>
40-
<PanelRow>
41-
<div className="classifai-settings__user_based_opt_out">
42-
<ToggleControl
43-
checked={ featureSettings?.user_based_opt_out === '1' }
44-
label={ __( 'Enable user-based opt-out', 'classifai' ) }
45-
onChange={ ( value ) => {
46-
setSettings( {
47-
...featureSettings,
48-
user_based_opt_out: value ? '1' : 'no',
49-
} );
50-
} }
51-
/>
52-
</div>
53-
</PanelRow>
24+
<AllowedRoles featureName={ featureName } />
25+
26+
<SettingsRow
27+
label={ __( 'Allowed users', 'classifai' ) }
28+
className="classifai-settings__users"
29+
description={ __(
30+
'Select users who can access this feature.',
31+
'classifai'
32+
) }
33+
>
34+
<UserSelector
35+
value={ featureSettings.users || [] }
36+
onChange={ ( users ) => {
37+
setSettings( {
38+
...featureSettings,
39+
users,
40+
} );
41+
} }
42+
/>
43+
</SettingsRow>
44+
45+
<SettingsRow
46+
label={ __( 'Enable user-based opt-out', 'classifai' ) }
47+
description={ __(
48+
'Enables ability for users to opt-out from their user profile page.',
49+
'classifai'
50+
) }
51+
>
52+
<ToggleControl
53+
checked={ featureSettings?.user_based_opt_out === '1' }
54+
onChange={ ( value ) => {
55+
setSettings( {
56+
...featureSettings,
57+
user_based_opt_out: value ? '1' : 'no',
58+
} );
59+
} }
60+
/>
61+
</SettingsRow>
5462
</PanelBody>
5563
);
5664
};

0 commit comments

Comments
 (0)