Skip to content

Commit febe9f9

Browse files
selulselul
authored
Merge pull request #887 from Codeinwp/feat/opml-service/1338
feat: add badge settings
2 parents e4ff594 + 73296e8 commit febe9f9

File tree

5 files changed

+111
-4
lines changed

5 files changed

+111
-4
lines changed

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

Lines changed: 84 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ import {
1414

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

17+
import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
18+
19+
import {
20+
useState
21+
} from '@wordpress/element';
22+
1723
/**
1824
* Internal dependencies.
1925
*/
@@ -38,11 +44,19 @@ const General = ({
3844
const isReportEnabled = 'disabled' !== settings[ 'report_script' ];
3945
const isAssetsEnabled = 'disabled' !== settings.cdn;
4046
const isBannerEnabled = 'disabled' !== settings[ 'banner_frontend'];
47+
const isShowBadgeIcon = 'disabled' !== settings[ 'show_badge_icon' ];
48+
const activeBadgePosition = settings[ 'badge_position' ] || 'right';
49+
50+
const [ showBadgeSettings, setBadgeSettings ] = useState( isBannerEnabled );
4151

4252
const updateOption = ( option, value ) => {
4353
setCanSave( true );
4454
const data = { ...settings };
45-
data[ option ] = value ? 'enabled' : 'disabled';
55+
if ( 'badge_position' === option ) {
56+
data[ option ] = value;
57+
} else {
58+
data[ option ] = value ? 'enabled' : 'disabled';
59+
}
4660
setSettings( data );
4761
};
4862

@@ -103,9 +117,77 @@ const General = ({
103117
'is-disabled': isLoading
104118
}
105119
) }
106-
onChange={ value => updateOption( 'banner_frontend', value ) }
120+
onChange={ ( value ) => {
121+
updateOption( 'banner_frontend', value );
122+
setBadgeSettings( value );
123+
} }
107124
/>
108125

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

111193
<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
@@ -1705,6 +1705,11 @@ private function get_dashboard_strings() {
17051705
'enable_limit_dimensions_title' => __( 'Limit Image Sizes', 'optimole-wp' ),
17061706
'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' ),
17071707
'enable_badge_title' => __( 'Enable Optimole Badge', 'optimole-wp' ),
1708+
'enable_badge_settings' => __( 'Badge settings', 'optimole-wp' ),
1709+
'enable_badge_show_icon' => __( 'Show only Optimole icon', 'optimole-wp' ),
1710+
'enable_badge_position' => __( 'Badge Position', 'optimole-wp' ),
1711+
'badge_position_text_1' => __( 'Left', 'optimole-wp' ),
1712+
'badge_position_text_2' => __( 'Right', 'optimole-wp' ),
17081713
'enable_badge_description' => sprintf(
17091714
/* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */
17101715
__( '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: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,13 +177,15 @@ public function banner() {
177177
return;
178178
}
179179

180+
$position = $this->settings->get( 'badge_position' ) ?? 'right';
181+
$show_icon_only = $this->settings->get( 'show_badge_icon' ) === 'enabled';
182+
180183
$string = __( 'Optimized by Optimole', 'optimole-wp' );
181184
$div_style = [
182185
'display' => 'flex',
183186
'position' => 'fixed',
184187
'align-items' => 'center',
185188
'bottom' => '15px',
186-
'right' => '15px',
187189
'background-color' => '#fff',
188190
'padding' => '8px 6px',
189191
'font-size' => '12px',
@@ -196,6 +198,8 @@ public function banner() {
196198
'font-family' => 'Arial, Helvetica, sans-serif',
197199
];
198200

201+
$div_style[ $position ] = '15px';
202+
199203
$logo = OPTML_URL . 'assets/img/logo.svg';
200204

201205
$link = tsdk_translate_link( 'https://optimole.com/wordpress/?from=badgeOn' );
@@ -239,7 +243,9 @@ public function banner() {
239243
<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"/>
240244
<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"/>
241245
</svg>';
242-
$output .= '<span>' . esc_html( $string ) . '</span>';
246+
if ( ! $show_icon_only ) {
247+
$output .= '<span>' . esc_html( $string ) . '</span>';
248+
}
243249
$output .= '</a>';
244250

245251
echo $output;

‎inc/settings.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ class Optml_Settings {
101101
'offload_limit' => 50000,
102102
'placeholder_color' => '',
103103
'show_offload_finish_notice' => '',
104+
'show_badge_icon' => 'disabled',
105+
'badge_position' => 'left',
104106
];
105107
/**
106108
* Option key.
@@ -266,6 +268,7 @@ public function parse_settings( $new_settings ) {
266268
case 'rollback_status':
267269
case 'best_format':
268270
case 'offload_limit_reached':
271+
case 'show_badge_icon':
269272
$sanitized_value = $this->to_map_values( $value, [ 'enabled', 'disabled' ], 'enabled' );
270273
break;
271274
case 'offload_limit':
@@ -352,6 +355,9 @@ function ( $value ) {
352355
Position::SOUTH_EAST
353356
);
354357
break;
358+
case 'badge_position':
359+
$sanitized_value = $this->to_map_values( $value, [ 'left', 'right' ], 'right' );
360+
break;
355361
default:
356362
$sanitized_value = '';
357363
break;
@@ -530,6 +536,8 @@ public function get_site_settings() {
530536
'offload_limit_reached' => $this->get( 'offload_limit_reached' ),
531537
'placeholder_color' => $this->get( 'placeholder_color' ),
532538
'show_offload_finish_notice' => $this->get( 'show_offload_finish_notice' ),
539+
'show_badge_icon' => $this->get( 'show_badge_icon' ),
540+
'badge_position' => $this->get( 'badge_position' ),
533541
];
534542
}
535543

0 commit comments

Comments
 (0)