From 6b5047cd70d57f048cf2106fa8b823b3c1f793f3 Mon Sep 17 00:00:00 2001 From: abaicus Date: Thu, 3 Apr 2025 11:34:30 +0300 Subject: [PATCH 1/5] feat: disable other settings tabs when image handling is disabled [closes Codeinwp/optimole-service#1386] --- assets/src/dashboard/parts/connected/settings/Menu.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/src/dashboard/parts/connected/settings/Menu.js b/assets/src/dashboard/parts/connected/settings/Menu.js index 10db854c..c688113d 100644 --- a/assets/src/dashboard/parts/connected/settings/Menu.js +++ b/assets/src/dashboard/parts/connected/settings/Menu.js @@ -93,13 +93,19 @@ const Menu = ({
- + From f9f1f9b427eb8cebc291028244ed93b1555ae30a Mon Sep 17 00:00:00 2001 From: abaicus Date: Thu, 3 Apr 2025 11:38:45 +0300 Subject: [PATCH 3/5] enh: improve optimization status card layout and style --- assets/src/dashboard/parts/connected/OptimizationStatus.js | 6 +++--- inc/admin.php | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/src/dashboard/parts/connected/OptimizationStatus.js b/assets/src/dashboard/parts/connected/OptimizationStatus.js index 34f79cd4..c53a0839 100644 --- a/assets/src/dashboard/parts/connected/OptimizationStatus.js +++ b/assets/src/dashboard/parts/connected/OptimizationStatus.js @@ -23,8 +23,8 @@ const OptimizationStatus = ({ settings }) => { return (
-

{ optimoleDashboardApp.strings.optimization_status.title }

-
    +

    { optimoleDashboardApp.strings.optimization_status.title }

    +
      { statuses.map( ( status, index ) => { let statusClass = status.active ? 'success' : 'danger'; return ( @@ -49,7 +49,7 @@ const OptimizationStatus = ({ settings }) => { }) }

    sprintf( /* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */ __( '%1$sView all optimization tips%2$s', 'optimole-wp' ), - ' ', + ' ', '' ), ]; From 965bad467e5e4fcb3fea5fa80f336d00a78e8520 Mon Sep 17 00:00:00 2001 From: abaicus Date: Thu, 3 Apr 2025 11:43:08 +0300 Subject: [PATCH 4/5] fix: consistency in sidebar card titles styling --- assets/src/dashboard/parts/connected/OptimizationStatus.js | 2 +- assets/src/dashboard/parts/connected/SPCRecommendation.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/dashboard/parts/connected/OptimizationStatus.js b/assets/src/dashboard/parts/connected/OptimizationStatus.js index c53a0839..bda0b480 100644 --- a/assets/src/dashboard/parts/connected/OptimizationStatus.js +++ b/assets/src/dashboard/parts/connected/OptimizationStatus.js @@ -23,7 +23,7 @@ const OptimizationStatus = ({ settings }) => { return (

    -

    { optimoleDashboardApp.strings.optimization_status.title }

    +

    { optimoleDashboardApp.strings.optimization_status.title }

      { statuses.map( ( status, index ) => { let statusClass = status.active ? 'success' : 'danger'; diff --git a/assets/src/dashboard/parts/connected/SPCRecommendation.js b/assets/src/dashboard/parts/connected/SPCRecommendation.js index 3f91fcc7..3410db1c 100644 --- a/assets/src/dashboard/parts/connected/SPCRecommendation.js +++ b/assets/src/dashboard/parts/connected/SPCRecommendation.js @@ -100,7 +100,7 @@ const SPCRecommendation = () => {
      -

      { i18n.title }

      +

      { i18n.title }

      { i18n.byline }

        { i18n.features.map( ( feature, index ) => ( From fc9ffda370fecc61f8b6f638e2e5809293808e0b Mon Sep 17 00:00:00 2001 From: abaicus Date: Thu, 3 Apr 2025 12:50:30 +0300 Subject: [PATCH 5/5] feat: make the connection details card more compact --- .../src/dashboard/parts/components/Tooltip.js | 41 +++++++++++++ .../src/dashboard/parts/connected/Sidebar.js | 57 ++++++++++++------- assets/src/dashboard/utils/icons.js | 8 +++ 3 files changed, 84 insertions(+), 22 deletions(-) create mode 100644 assets/src/dashboard/parts/components/Tooltip.js diff --git a/assets/src/dashboard/parts/components/Tooltip.js b/assets/src/dashboard/parts/components/Tooltip.js new file mode 100644 index 00000000..0b3a7ee7 --- /dev/null +++ b/assets/src/dashboard/parts/components/Tooltip.js @@ -0,0 +1,41 @@ +import { useState } from '@wordpress/element'; +import classnames from 'classnames'; + +export default function({ children, text }) { + const [ isVisible, setIsVisible ] = useState( false ); + + if ( ! text ) { + return children; + } + if ( ! children ) { + return null; + } + + const classes = classnames( + 'absolute text-white bg-gray-800 text-xs p-2 rounded shadow-lg z-10 transition-opacity duration-200 pointer-events-none', + { + 'opacity-100': isVisible, + 'opacity-0': ! isVisible + } + ); + + const tooltipStyles = { + left: '50%', + transform: 'translateX(-50%)', + bottom: '120%' + }; + + return ( +
        setIsVisible( true )} + onMouseLeave={() => setIsVisible( false )} + > +
        + {text.charAt( 0 ).toUpperCase() + text.slice( 1 ).toLowerCase()} +
        +
        + {children} +
        + ); +} diff --git a/assets/src/dashboard/parts/connected/Sidebar.js b/assets/src/dashboard/parts/connected/Sidebar.js index 77b8a459..ad85c5b9 100644 --- a/assets/src/dashboard/parts/connected/Sidebar.js +++ b/assets/src/dashboard/parts/connected/Sidebar.js @@ -13,6 +13,8 @@ import { addQueryArgs } from '@wordpress/url'; import SPCRecommendation from './SPCRecommendation'; import OptimizationStatus from './OptimizationStatus'; +import { globe, user } from '../../utils/icons'; +import Tooltip from '../components/Tooltip'; const reasons = [ optimoleDashboardApp.strings.upgrade.reason_1, @@ -47,31 +49,23 @@ const Sidebar = ({ settings }) => { return (
        -
        - - - +
        -
        +
        + + +
        -

        { optimoleDashboardApp.strings.looking_for_api_key }

        +
        -

        +

        +

        { optimoleDashboardApp.strings.looking_for_api_key }

        + +
        { 'free' === plan ? ( @@ -137,3 +131,22 @@ const Sidebar = ({ settings }) => { }; export default Sidebar; + + +const PlaceholderInput = ({ icon = null, value, tooltipText = '' }) => { + return ( + +
        + + + {icon} + +
        +         + ); +}; diff --git a/assets/src/dashboard/utils/icons.js b/assets/src/dashboard/utils/icons.js index 69e905e0..4520a328 100644 --- a/assets/src/dashboard/utils/icons.js +++ b/assets/src/dashboard/utils/icons.js @@ -166,3 +166,11 @@ export const settings = ( ); +export const globe = ( + +); + +export const user = ( + +); +