Skip to content

Commit 2b246ef

Browse files
selulselul
authored
Merge pull request #908 from Codeinwp/prf/disable-settings
feat: disable other settings tabs when image handling is disabled & improve UI
2 parents 6d45201 + fc9ffda commit 2b246ef

File tree

8 files changed

+118
-59
lines changed

8 files changed

+118
-59
lines changed

Diff for: ‎assets/src/dashboard/parts/components/Tooltip.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useState } from '@wordpress/element';
2+
import classnames from 'classnames';
3+
4+
export default function({ children, text }) {
5+
const [ isVisible, setIsVisible ] = useState( false );
6+
7+
if ( ! text ) {
8+
return children;
9+
}
10+
if ( ! children ) {
11+
return null;
12+
}
13+
14+
const classes = classnames(
15+
'absolute text-white bg-gray-800 text-xs p-2 rounded shadow-lg z-10 transition-opacity duration-200 pointer-events-none',
16+
{
17+
'opacity-100': isVisible,
18+
'opacity-0': ! isVisible
19+
}
20+
);
21+
22+
const tooltipStyles = {
23+
left: '50%',
24+
transform: 'translateX(-50%)',
25+
bottom: '120%'
26+
};
27+
28+
return (
29+
<div
30+
className="relative"
31+
onMouseEnter={() => setIsVisible( true )}
32+
onMouseLeave={() => setIsVisible( false )}
33+
>
34+
<div className={classes} style={tooltipStyles}>
35+
{text.charAt( 0 ).toUpperCase() + text.slice( 1 ).toLowerCase()}
36+
<div className="absolute -bottom-1 w-2 h-2 bg-gray-800" style={{ left: '50%', transform: 'translateX(-50%) rotate(45deg)' }}></div>
37+
</div>
38+
{children}
39+
</div>
40+
);
41+
}

Diff for: ‎assets/src/dashboard/parts/connected/OptimizationStatus.js

+22-31
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,30 @@
1-
/**
2-
* WordPress dependencies.
3-
*/
41
import { Icon } from '@wordpress/components';
52
import { closeSmall, check } from '@wordpress/icons';
63

7-
import { useSelect } from '@wordpress/data';
8-
9-
const OptimizationStatus = () => {
10-
const statuses = useSelect( select => {
11-
const { getSiteSettings } = select( 'optimole' );
12-
const siteSettings = getSiteSettings();
13-
const lazyloadEnabled = 'enabled' === siteSettings?.lazyload;
14-
return [
15-
{
16-
active: 'enabled' === siteSettings?.image_replacer,
17-
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
18-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
19-
},
20-
{
21-
active: lazyloadEnabled,
22-
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
23-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
24-
},
25-
{
26-
active: lazyloadEnabled && 'disabled' === siteSettings?.scale,
27-
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
28-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
29-
}
30-
];
31-
});
4+
const OptimizationStatus = ({ settings }) => {
5+
const lazyloadEnabled = 'enabled' === settings?.lazyload;
6+
const statuses = [
7+
{
8+
active: 'enabled' === settings?.image_replacer,
9+
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
10+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
11+
},
12+
{
13+
active: lazyloadEnabled,
14+
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
15+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
16+
},
17+
{
18+
active: lazyloadEnabled && 'disabled' === settings?.scale,
19+
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
20+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
21+
}
22+
];
3223

3324
return (
3425
<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
35-
<h3 className="text-base m-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
36-
<ul>
26+
<h3 className="text-lg mt-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
27+
<ul className="grid gap-3 m-0">
3728
{ statuses.map( ( status, index ) => {
3829
let statusClass = status.active ? 'success' : 'danger';
3930
return (
@@ -58,7 +49,7 @@ const OptimizationStatus = () => {
5849
}) }
5950
</ul>
6051
<p
61-
className="m-0 mt-3"
52+
className="m-0 mt-5"
6253
dangerouslySetInnerHTML={ {
6354
__html: optimoleDashboardApp.strings.optimization_tips
6455
} }

Diff for: ‎assets/src/dashboard/parts/connected/SPCRecommendation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const SPCRecommendation = () => {
100100
<Icon icon={ close } className="fill-current" size={ 18 } />
101101
</button>
102102
<div className="p-8 flex flex-col gap-2">
103-
<h3 className="text-gray-800 text-lg font-bold m-0">{ i18n.title }</h3>
103+
<h3 className="text-lg mt-0">{ i18n.title }</h3>
104104
<p className="text-gray-600 m-0">{ i18n.byline }</p>
105105
<ul className="grid gap-2">
106106
{ i18n.features.map( ( feature, index ) => (

Diff for: ‎assets/src/dashboard/parts/connected/Sidebar.js

+37-24
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { addQueryArgs } from '@wordpress/url';
1313

1414
import SPCRecommendation from './SPCRecommendation';
1515
import OptimizationStatus from './OptimizationStatus';
16+
import { globe, user } from '../../utils/icons';
17+
import Tooltip from '../components/Tooltip';
1618

1719
const reasons = [
1820
optimoleDashboardApp.strings.upgrade.reason_1,
@@ -21,7 +23,7 @@ const reasons = [
2123
optimoleDashboardApp.strings.upgrade.reason_4
2224
];
2325

24-
const Sidebar = () => {
26+
const Sidebar = ({ settings }) => {
2527
const {
2628
name,
2729
domain,
@@ -47,31 +49,23 @@ const Sidebar = () => {
4749

4850
return (
4951
<div className="grid md:grid-cols-2 xl:flex xl:flex-col xl:mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 gap-5 shrink-0 xl:w-[350px]">
50-
<div className="bg-white gap-5 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
51-
<TextControl
52-
label={ optimoleDashboardApp.strings.logged_in_as }
53-
value={ name }
54-
className="optml__placeholder"
55-
disabled
56-
/>
57-
58-
<TextControl
59-
label={ optimoleDashboardApp.strings.private_cdn_url }
60-
value={ domain }
61-
className="optml__placeholder"
62-
disabled
63-
/>
52+
<div className="bg-white gap-3 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
6453

65-
<hr className="m-0 border-grayish-blue"/>
54+
<div className="grid gap-4">
55+
<PlaceholderInput icon={user} value={name} tooltipText={optimoleDashboardApp.strings.logged_in_as}/>
56+
<PlaceholderInput icon={globe} value={domain} tooltipText={optimoleDashboardApp.strings.private_cdn_url}/>
57+
</div>
6658

67-
<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
59+
<hr className="m-0 border-t-grayish-blue"/>
6860

69-
<p
70-
className="m-0 -mt-3"
71-
dangerouslySetInnerHTML={ {
72-
__html: optimoleDashboardApp.strings.optml_dashboard
73-
} }
74-
/>
61+
<div className="border-t border-gray-300 block grid gap-2">
62+
<p className="font-semibold text-xs text-light-black m-0">{ optimoleDashboardApp.strings.looking_for_api_key }</p>
63+
<span
64+
dangerouslySetInnerHTML={ {
65+
__html: optimoleDashboardApp.strings.optml_dashboard
66+
} }
67+
/>
68+
</div>
7569
</div>
7670

7771
{ 'free' === plan ? (
@@ -127,7 +121,7 @@ const Sidebar = () => {
127121
</Button>
128122
) }
129123

130-
<OptimizationStatus />
124+
<OptimizationStatus settings={settings} />
131125

132126
{ showSPCRecommendation && (
133127
<SPCRecommendation />
@@ -137,3 +131,22 @@ const Sidebar = () => {
137131
};
138132

139133
export default Sidebar;
134+
135+
136+
const PlaceholderInput = ({ icon = null, value, tooltipText = '' }) => {
137+
return (
138+
<Tooltip text={tooltipText}>
139+
<div className="grid grid-cols-1 text-gray-700 hover:text-info transition-all ease-in-out duration-300">
140+
<input
141+
value={value}
142+
type="text"
143+
disabled
144+
className="col-start-1 row-start-1 block w-full rounded-md !bg-light-blue py-1.5 !pl-9 pr-3 !text-gray-500 !m-0 text-sm !py-0.5 !border-0"
145+
/>
146+
<span className="pointer-events-none col-start-1 row-start-1 flex items-center ml-3 w-4 h-4 self-center">
147+
{icon}
148+
</span>
149+
</div>
150+
</Tooltip>
151+
);
152+
};

Diff for: ‎assets/src/dashboard/parts/connected/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ const ConnectedLayout = ({
143143
{ 'help' === tab && <Help /> }
144144
</div>
145145

146-
<Sidebar/>
146+
<Sidebar settings={settings}/>
147147
</div>
148148

149149
<CSAT />

Diff for: ‎assets/src/dashboard/parts/connected/settings/Menu.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,19 @@ const Menu = ({
9393
<div className="basis-1/5">
9494
<ul className="grid m-0 gap-1">
9595
{menuItems.map( item => {
96+
const disabled = 'enabled' !== settings?.image_replacer && 'general' !== item.value;
9697
const isActive = tab === item.value || ( item.children && item.children.some( child => child.value === tab ) );
9798

9899

99-
const buttonClasses = classnames({ '!text-info': isActive }, 'w-full bg-transparent border-0 flex items-center appearance-none not-italic font-semibold text-base text-purple-gray cursor-pointer hover:text-info py-2' );
100+
const buttonClasses = classnames(
101+
{ '!text-info': isActive },
102+
{ 'opacity-50 pointer-events-none': disabled },
103+
'w-full bg-transparent border-0 flex items-center appearance-none not-italic font-semibold text-base text-purple-gray cursor-pointer hover:text-info py-2'
104+
);
100105
return (
101106
<li key={item.value} className='m-0'>
102107
<button
108+
disabled={disabled}
103109
className={buttonClasses}
104110
onClick={() => setTab( item.value )}
105111
>

Diff for: ‎assets/src/dashboard/utils/icons.js

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

Diff for: ‎inc/admin.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -2017,7 +2017,7 @@ private function get_dashboard_strings() {
20172017
'optimization_tips' => sprintf(
20182018
/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
20192019
__( '%1$sView all optimization tips%2$s', 'optimole-wp' ),
2020-
'<a class="flex justify-center font-bold rounded hover:opacity-90 transition-opacity" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
2020+
'<a class="flex justify-center items-center font-semibold" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
20212021
'<span style="text-decoration:none; font-size:15px; margin-top:2px;" class="dashicons dashicons-external"></span></a>'
20222022
),
20232023
];

0 commit comments

Comments
 (0)