Skip to content

Commit d912ac3

Browse files
selulselul
authored
Merge pull request #969 from Codeinwp/feat/watermark_submenu
feat: add watermark to the advanced submenu
2 parents b5564ee + f5636ef commit d912ac3

4 files changed

Lines changed: 109 additions & 9 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ const menuItems = [
2828
label: strings.advanced_settings_menu_item,
2929
value: 'compression',
3030
children: [
31+
{
32+
label: strings.settings_watermark_menu_item,
33+
value: 'watermark'
34+
},
3135
{
3236
label: strings.settings_compression_menu_item,
3337
value: 'compression'

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import {
5+
BaseControl,
6+
Button
7+
} from '@wordpress/components';
8+
9+
import { Icon, external } from '@wordpress/icons';
10+
11+
const Watermark = () => {
12+
const { options_strings } = optimoleDashboardApp.strings;
13+
14+
const containerStyle = {
15+
border: '2px solid #DCDCDC',
16+
borderRadius: '8px',
17+
padding: '16px'
18+
};
19+
20+
return (
21+
<>
22+
<div>
23+
<h1 className="text-xl font-bold">
24+
{options_strings.watermark_media_title}
25+
</h1>
26+
<p className="text-gray-600 mt-2 mb-2" >
27+
{options_strings.watermark_media_desc}
28+
</p>
29+
</div>
30+
31+
<div style={containerStyle}>
32+
<div className="mb-4 space-y-2">
33+
<div className="flex items-center gap-2 align-center">
34+
<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
35+
<span className="text-gray-700 text-left">{options_strings.watermark_info_1}</span>
36+
</div>
37+
<div className="flex items-center gap-2 align-center">
38+
<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
39+
<span className="text-gray-700 text-left ">{options_strings.watermark_info_2}</span>
40+
</div>
41+
<div className="flex items-center gap-2 align-center">
42+
<div className="w-2 h-2 bg-gray-900 rounded-full flex-shrink-0"></div>
43+
<span className="text-gray-700 text-left">{options_strings.watermark_info_3}</span>
44+
</div>
45+
</div>
46+
47+
<div className="flex gap-4 mb-4">
48+
<Button
49+
variant="primary"
50+
className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 hover:bg-blue-700"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
href="https://dashboard.optimole.com/dashboard"
54+
>
55+
<Icon
56+
icon={external}
57+
className="w-4 h-4"
58+
/>
59+
{options_strings.open_optimole_dashboard}
60+
</Button>
61+
<Button
62+
variant="secondary"
63+
className="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
href="https://docs.optimole.com/article/1475-adding-watermarks-to-your-images"
67+
>
68+
{options_strings.learn_more}
69+
</Button>
70+
</div>
71+
<span className="text-gray-500">
72+
{options_strings.watermark_footer}
73+
</span>
74+
</div>
75+
</>
76+
);
77+
};
78+
79+
export default Watermark;

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Lazyload from './Lazyload';
1010
import Exclusions from './Exclusions';
1111
import OffloadMedia from './OffloadMedia';
1212
import CloudLibrary from './CloudLibrary';
13+
import Watermark from './Watermark';
1314
import { saveSettings } from '../../../utils/api';
1415
import { toggleDamSidebarLink } from '../../../utils/helpers';
1516

@@ -129,16 +130,23 @@ const Settings = ({
129130
/>
130131
) }
131132

133+
{ 'watermark' === tab && (
134+
<Watermark
135+
/>
136+
) }
137+
132138
<div className="flex justify-start items-center gap-5 mt-8">
133-
<Button
134-
variant="primary"
135-
isBusy={ isLoading }
136-
disabled={ ! canSave }
137-
className="optml__button flex w-full justify-center rounded font-bold min-h-40 basis-1/5"
138-
onClick={ onSaveSettings }
139-
>
140-
{ optimoleDashboardApp.strings.options_strings.save_changes }
141-
</Button>
139+
{ 'watermark' !== tab && (
140+
<Button
141+
variant="primary"
142+
isBusy={ isLoading }
143+
disabled={ ! canSave }
144+
className="optml__button flex w-full justify-center rounded font-bold min-h-40 basis-1/5"
145+
onClick={ onSaveSettings }
146+
>
147+
{ optimoleDashboardApp.strings.options_strings.save_changes }
148+
</Button>
149+
) }
142150

143151
{ ( 'disabled' === settings.autoquality && 'compression' === tab ) && (
144152
<Button

‎inc/admin.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1681,6 +1681,7 @@ private function get_dashboard_strings() {
16811681
'dashboard_menu_item' => __( 'Dashboard', 'optimole-wp' ),
16821682
'settings_menu_item' => __( 'Settings', 'optimole-wp' ),
16831683
'help_menu_item' => __( 'Help', 'optimole-wp' ),
1684+
'settings_watermark_menu_item' => __( 'Watermark', 'optimole-wp' ),
16841685
'settings_exclusions_menu_item' => __( 'Exclusions', 'optimole-wp' ),
16851686
'settings_resize_menu_item' => __( 'Resize', 'optimole-wp' ),
16861687
'settings_compression_menu_item' => __( 'Compression', 'optimole-wp' ),
@@ -1735,6 +1736,14 @@ private function get_dashboard_strings() {
17351736
'configure_settings' => __( 'Configure settings', 'optimole-wp' ),
17361737
],
17371738
'options_strings' => [
1739+
'watermark_media_desc' => __( 'Protect your brand by adding a watermark to your images. Configure placement, opacity, and rules directly in your Optimole Dashboard.', 'optimole-wp' ),
1740+
'watermark_media_title' => __( 'Watermarks', 'optimole-wp' ),
1741+
'learn_more' => __( 'Learn more', 'optimole-wp' ),
1742+
'open_optimole_dashboard' => __( 'Open Optimole Dashboard', 'optimole-wp' ),
1743+
'watermark_footer' => __( 'Watermark rules and exclusions are fully managed in your Optimole Dashboard.', 'optimole-wp' ),
1744+
'watermark_info_1' => __( 'Choose from multiple watermark positions and set opacity.', 'optimole-wp' ),
1745+
'watermark_info_2' => __( 'Set different watermarks for different image sizes.', 'optimole-wp' ),
1746+
'watermark_info_3' => __( 'Create rule-based targeting by filename, page URL, class, and more.', 'optimole-wp' ),
17381747
'compression_mode' => __( 'Compression Mode', 'optimole-wp' ),
17391748
'compression_mode_speed_optimized' => __( 'Speed Optimized', 'optimole-wp' ),
17401749
'compression_mode_quality_optimized' => __( 'Quality Optimized', 'optimole-wp' ),

0 commit comments

Comments
 (0)