Skip to content

Commit ffbaa6e

Browse files
girishpanchal30girishpanchal30
committed
feat: add badge settings
1 parent e3ad1dc commit ffbaa6e

File tree

5 files changed

+111
-3
lines changed

5 files changed

+111
-3
lines changed

‎assets/src/dashboard/parts/connected/settings/General.js

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414

1515
import { useSelect } from '@wordpress/data';
1616

17+
import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
18+
1719
/**
1820
* Internal dependencies.
1921
*/
@@ -38,11 +40,18 @@ const General = ({
3840
const isReportEnabled = 'disabled' !== settings[ 'report_script' ];
3941
const isAssetsEnabled = 'disabled' !== settings.cdn;
4042
const isBannerEnabled = 'disabled' !== settings[ 'banner_frontend'];
43+
const isOpenBadgeSetting = 'disabled' !== settings[ 'badge_setting' ];
44+
const isShowBadgeIcon = 'disabled' !== settings[ 'show_badge_icon' ];
45+
const activeBadgePosition = settings[ 'badge_position' ] || 'right';
4146

4247
const updateOption = ( option, value ) => {
4348
setCanSave( true );
4449
const data = { ...settings };
45-
data[ option ] = value ? 'enabled' : 'disabled';
50+
if ( 'badge_position' === option ) {
51+
data[ option ] = value;
52+
} else {
53+
data[ option ] = value ? 'enabled' : 'disabled';
54+
}
4655
setSettings( data );
4756
};
4857

@@ -106,6 +115,71 @@ const General = ({
106115
onChange={ value => updateOption( 'banner_frontend', value ) }
107116
/>
108117

118+
{ isBannerEnabled && (
119+
<div className="mt-4 badge-settings">
120+
<Button
121+
className={ classnames(
122+
'border border-none bg-transparent text-blue-500 px-2 py-1 rounded-sm flex items-center cursor-pointer',
123+
{
124+
'is-disabled': isLoading
125+
}
126+
) }
127+
onClick={ () => updateOption( 'badge_setting', ! isOpenBadgeSetting ) }
128+
>
129+
<span>{ optimoleDashboardApp.strings.options_strings.enable_badge_settings }</span>
130+
<Icon
131+
icon={ ! isOpenBadgeSetting ? chevronUp : chevronDown }
132+
className="h-5 w-5"
133+
style={{ fill: '#3b82f6' }}
134+
/>
135+
</Button>
136+
{ ! isOpenBadgeSetting && (
137+
<div class="mt-4 space-y-4 pl-4 pt-2">
138+
<div class="flex items-center justify-between mb-4">
139+
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_show_icon }</label>
140+
<ToggleControl
141+
label=""
142+
checked={ isShowBadgeIcon }
143+
disabled={ isLoading }
144+
className={ classnames(
145+
'flex items-center justify-between mb-4',
146+
{
147+
'is-disabled': isLoading
148+
}
149+
) }
150+
onChange={ value => updateOption( 'show_badge_icon', value ) }
151+
/>
152+
</div>
153+
<div class="flex items-center justify-between">
154+
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_position }</label>
155+
<div class="flex space-x-2">
156+
<Button
157+
className={ classnames(
158+
'px-4 py-2 border rounded border-[1px]',
159+
'left' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
160+
{
161+
'is-disabled': isLoading
162+
}
163+
) }
164+
onClick={ () => updateOption( 'badge_position', 'left' ) }
165+
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_1 }</Button>
166+
<Button
167+
className={ classnames(
168+
'px-4 py-2 border rounded',
169+
'right' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
170+
{
171+
'is-disabled': isLoading
172+
}
173+
) }
174+
onClick={ () => updateOption( 'badge_position', 'right' ) }
175+
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_2 }</Button>
176+
</div>
177+
</div>
178+
</div>
179+
)}
180+
</div>
181+
)}
182+
109183
<hr className="my-8 border-grayish-blue"/>
110184

111185
<BaseControl

‎assets/src/dashboard/style.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@ $mango-yellow: #FBBF24;
122122
text-transform: none;
123123
}
124124
}
125+
.badge-settings {
126+
.components-button {
127+
outline: none !important;
128+
box-shadow: none !important;
129+
}
130+
}
125131
}
126132

127133
.is-disabled {

‎inc/admin.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1694,6 +1694,11 @@ private function get_dashboard_strings() {
16941694
'enable_limit_dimensions_title' => __( 'Limit Image Sizes', 'optimole-wp' ),
16951695
'enable_limit_dimensions_notice' => __( 'When you enable this feature to define a max width or height for image resizing, please note that DPR (retina) images will be disabled. This is done to ensure consistency in image dimensions across your website. Although this may result in slightly lower image quality for high-resolution displays, it will help maintain uniform image sizes, improving your website\'s overall layout and potentially boosting performance.', 'optimole-wp' ),
16961696
'enable_badge_title' => __( 'Enable Optimole Badge', 'optimole-wp' ),
1697+
'enable_badge_settings' => __( 'Badge settings', 'optimole-wp' ),
1698+
'enable_badge_show_icon' => __( 'Show only Optimole icon', 'optimole-wp' ),
1699+
'enable_badge_position' => __( 'Badge Position', 'optimole-wp' ),
1700+
'badge_position_text_1' => __( 'Left', 'optimole-wp' ),
1701+
'badge_position_text_2' => __( 'Right', 'optimole-wp' ),
16971702
'enable_badge_description' => sprintf(
16981703
/* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */
16991704
__( 'Get 20.000 more visits for free by enabling the Optimole badge on your websites. %1$sLearn more%2$s', 'optimole-wp' ),

‎inc/manager.php

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,13 +177,21 @@ public function banner() {
177177
return;
178178
}
179179

180+
$badge_setting = $this->settings->get( 'badge_setting' ) === 'enabled';
181+
182+
$position = 'right';
183+
$show_icon_only = false;
184+
if ( ! $badge_setting ) {
185+
$position = $this->settings->get( 'badge_position' ) ?? 'right';
186+
$show_icon_only = $this->settings->get( 'show_badge_icon' ) === 'enabled';
187+
}
188+
180189
$string = __( 'Optimized by Optimole', 'optimole-wp' );
181190
$div_style = [
182191
'display' => 'flex',
183192
'position' => 'fixed',
184193
'align-items' => 'center',
185194
'bottom' => '15px',
186-
'right' => '15px',
187195
'background-color' => '#fff',
188196
'padding' => '8px 6px',
189197
'font-size' => '12px',
@@ -196,6 +204,8 @@ public function banner() {
196204
'font-family' => 'Arial, Helvetica, sans-serif',
197205
];
198206

207+
$div_style[ $position ] = '15px';
208+
199209
$logo = OPTML_URL . 'assets/img/logo.svg';
200210

201211
$link = tsdk_translate_link( 'https://optimole.com/wordpress/?from=badgeOn' );
@@ -239,7 +249,9 @@ public function banner() {
239249
<path d="M182.837 193.871C181.5 195.322 180.136 196.731 178.702 198.07C177.071 197.351 175.524 196.519 174.005 195.618C172.74 194.871 171.502 194.082 170.251 193.293C170.124 193.209 169.97 193.11 169.913 192.969C169.787 192.687 170.026 192.349 170.349 192.222C170.659 192.11 170.996 192.138 171.348 192.194C173.12 192.462 174.905 192.786 176.663 193.096C178.702 193.448 180.756 193.772 182.837 193.871Z" fill="#1D445C"/>
240250
<path d="M175.074 201.282C173.147 202.888 171.151 204.396 169.055 205.818C167.902 205.283 166.777 204.649 165.737 203.945C165.287 203.649 164.837 203.325 164.415 203.015C161.743 201 159.409 198.619 157.117 196.252C157.004 196.139 156.892 196.026 156.85 195.858C156.807 195.561 157.13 195.266 157.454 195.224C157.792 195.195 158.129 195.308 158.439 195.435C161.996 196.816 165.413 198.619 169.112 199.718C169.534 199.845 169.955 199.957 170.406 200.07C171.966 200.465 173.598 200.352 174.92 201.169C174.948 201.197 175.018 201.226 175.074 201.282Z" fill="#1D445C"/>
241251
</svg>';
242-
$output .= '<span>' . esc_html( $string ) . '</span>';
252+
if ( ! $show_icon_only ) {
253+
$output .= '<span>' . esc_html( $string ) . '</span>';
254+
}
243255
$output .= '</a>';
244256

245257
echo $output;

‎inc/settings.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,9 @@ class Optml_Settings {
101101
'offload_limit' => 50000,
102102
'placeholder_color' => '',
103103
'show_offload_finish_notice' => '',
104+
'badge_setting' => 'disabled',
105+
'show_badge_icon' => 'disabled',
106+
'badge_position' => 'left',
104107
];
105108
/**
106109
* Option key.
@@ -266,6 +269,8 @@ public function parse_settings( $new_settings ) {
266269
case 'rollback_status':
267270
case 'best_format':
268271
case 'offload_limit_reached':
272+
case 'show_badge_icon':
273+
case 'badge_setting':
269274
$sanitized_value = $this->to_map_values( $value, [ 'enabled', 'disabled' ], 'enabled' );
270275
break;
271276
case 'offload_limit':
@@ -352,6 +357,9 @@ function ( $value ) {
352357
Position::SOUTH_EAST
353358
);
354359
break;
360+
case 'badge_position':
361+
$sanitized_value = $this->to_map_values( $value, [ 'left', 'right' ], 'right' );
362+
break;
355363
default:
356364
$sanitized_value = '';
357365
break;
@@ -530,6 +538,9 @@ public function get_site_settings() {
530538
'offload_limit_reached' => $this->get( 'offload_limit_reached' ),
531539
'placeholder_color' => $this->get( 'placeholder_color' ),
532540
'show_offload_finish_notice' => $this->get( 'show_offload_finish_notice' ),
541+
'badge_setting' => $this->get( 'badge_setting' ),
542+
'show_badge_icon' => $this->get( 'show_badge_icon' ),
543+
'badge_position' => $this->get( 'badge_position' ),
533544
];
534545
}
535546

0 commit comments

Comments
 (0)