Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance/plugin header section redesign #2461

Merged
merged 12 commits into from
Dec 10, 2024
Merged

Enhance/plugin header section redesign #2461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fd309bf
[initialization]
osmansufy Nov 28, 2024
6b5629c
[design] upgrade
osmansufy Dec 2, 2024
ef8b401
[centralized] pro-award svg icon
osmansufy Dec 2, 2024
ab40471
[refactor] [sanitize] code
osmansufy Dec 2, 2024
e135250
isset args in award icon
osmansufy Dec 2, 2024
950efc4
[refactor] award icon
osmansufy Dec 2, 2024
4b1483a
[update] zoom icon color in VendorCapabilities.vue
osmansufy Dec 4, 2024
9150148
fix dokan_pro() check
osmansufy Dec 5, 2024
385004f
removed dokan_pro() check
osmansufy Dec 5, 2024
3ff1f85
[responsive] header section
osmansufy Dec 9, 2024
5aac1c3
[hide] pro button when active not has license
osmansufy Dec 10, 2024
dcccb9e
[Skip] payment in Setup wizard
osmansufy Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 104 additions & 25 deletions assets/src/less/admin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,88 @@

.dokan-admin-header {
background: #fff;
padding: 15px 15px 15px 22px;
margin: 0 0 0 -20px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
margin: 20px 20px 0 2px;
border-radius: 8px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.06);

.dokan-admin-header-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.dokan-admin-logo-wrap {
display: flex;
flex: 1;
.dokan-admin-header-logo {
display: flex;
align-items: center;

img {
height: 25px;
height: 32px;
width: auto;
margin-right: 12px;
}
}

.dokan-version-tags {
display: flex;
align-items: center;
gap: 12px;
margin-right: 24px;
flex: 1;
.version-tag {

border-radius: 20px;
font-size: 1rem;
line-height: 20px;
font-weight: 400;
padding: 0.5rem 1rem;
max-height: 2rem;
&.lite {
background: #FF9B5366;
color: #7B4E2E;
display: flex;
align-items: center;
}

span {
color: #F1634C;
background: #FFF4F2;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
font-family: "SF Pro Text", sans-serif;
border: 1px solid rgba(241, 99, 76, 0.2);
border-radius: 93px;
&.pro {
background: #D8D8FE;
color: @dokan-color;
display: flex;
align-items: center;
gap: 8px;
text-transform: capitalize;
font-weight: 450;
& .version-tag-pro-badge{
background: @dokan-color;
color: white;
border-radius: 28px;
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-size: 16px;
margin: -10px 0 -10px -10px;
}
}
}
}
}
.upgrade-button {
display: flex;
align-items: center;
gap: 8px;
background: @dokan-color;
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s;
margin-left: auto;
&:hover {
background: @dokan-dark-purple;
}
}

Expand All @@ -56,7 +112,6 @@
border-radius: 42px;
cursor: pointer;
transition: all .2s ease;

.notification-count {
position: absolute;
top: -5px;
Expand All @@ -71,7 +126,6 @@
align-items: center;
justify-content: center;
}

.whats-new-pointer {
position: absolute;
top: 0;
Expand All @@ -81,7 +135,7 @@
background-color: #ff5a40;
border-radius: 53px;
border: 2px solid #fff;
box-sizing: content-box;
box-sizing: content-box;
}

&:hover {
Expand Down Expand Up @@ -137,10 +191,10 @@
}

h3 {
margin: 0;
font-weight: bold;
font-size: 18px;
font-family: "SF Pro Text", sans-serif;
margin: 0;
font-weight: bold;
font-size: 18px;
font-family: "SF Pro Text", sans-serif;
}

.list-item {
Expand All @@ -158,7 +212,7 @@
margin-bottom: 10px;

&:last-child {
margin-bottom: 0;
margin-bottom: 0;
}

&.active {
Expand Down Expand Up @@ -201,7 +255,7 @@
background-color: @dokan-light-gray;

svg path {
fill:@dokan-color;
fill: @dokan-color;
}
}
}
Expand All @@ -217,6 +271,31 @@
}
}

// Responsive styles
@media screen and (max-width: 782px) {
.dokan-admin-logo-wrap {
flex-direction: column;
}

.dokan-admin-header {
margin: 10px 10px 0 2px;
padding: 12px 16px;

.dokan-admin-header-content {
gap: 16px;
align-items:start;
}

.dokan-version-tags {
margin: 12px 0;
flex-wrap: wrap;
}

.upgrade-button {
margin: 0;
}
}
}
.dokan-dashboard {
.post-box-container {
width: 49%;
Expand Down
3 changes: 2 additions & 1 deletion src/admin/pages/VendorCapabilities.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ export default {
</script>

<style lang="less">
@import "../../../assets/src/less/variables.less";
#dokan-vendor-capabilities {
padding: 20px 70px;

Expand Down Expand Up @@ -233,7 +234,7 @@ export default {
}

.zoom {
background-color: #FFB24B;
background-color: @dokan-color;
border-radius: 9px;
color: white;
font-size: 24px;
Expand Down
64 changes: 60 additions & 4 deletions templates/admin-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,64 @@
<div class="dokan-admin-header">
<div class="dokan-admin-header-logo">
<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSEST . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>
<span class="dokan-admin-header-version">v<?php echo esc_html( DOKAN_PLUGIN_VERSION ); ?></span>
</div>
<div class="dokan-admin-header-content">

<div class="dokan-admin-logo-wrap">
<!-- Logo Section -->
<div class="dokan-admin-header-logo">
<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSEST . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Typo in constant name 'DOKAN_PLUGIN_ASSEST'

It appears that the constant DOKAN_PLUGIN_ASSEST may be misspelled. It should likely be DOKAN_PLUGIN_ASSETS to correctly reference the assets directory.

Please apply the following fix:

-<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSEST . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>
+<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSETS . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSEST . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>
<img src="<?php echo esc_url( DOKAN_PLUGIN_ASSETS . '/images/dokan-logo.png' ); ?>" alt="Dokan Logo"/>

</div>

<!-- Version Tags Section -->
<div class="dokan-version-tags">
<?php
// Always show Lite version
$lite_version = DOKAN_PLUGIN_VERSION;
?>
<div class="version-tag lite ">
Lite: <?php echo esc_html( $lite_version ); ?>
</div>

<?php
// Show Pro version if installed
if ( dokan()->is_pro_exists() && dokan_pro()->license->is_valid() ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Potential method call on null object

In the condition if ( dokan()->is_pro_exists() && dokan_pro()->license->is_valid() ), there is a possibility that dokan_pro() may return null if the Pro plugin is not installed. This could lead to a fatal error when attempting to access the license property.

Consider updating the condition to ensure that dokan_pro() returns a valid object before accessing its properties:

-if ( dokan()->is_pro_exists() && dokan_pro()->license->is_valid() ) {
+if ( dokan()->is_pro_exists() && dokan_pro() && dokan_pro()->license->is_valid() ) {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if ( dokan()->is_pro_exists() && dokan_pro()->license->is_valid() ) {
if ( dokan()->is_pro_exists() && dokan_pro() && dokan_pro()->license->is_valid() ) {

$pro_version = DOKAN_PRO_PLUGIN_VERSION;
$license_plan = dokan_pro()->license->get_plan();
?>
<div class="version-tag pro">
<span class="version-tag-pro-badge">Pro
<?php
dokan_get_template_part(
'svg-icons/pro-award', null,
[
'width' => 20,
'height' => 20,
]
);
?>
</span>
<?php echo esc_html( $license_plan ); ?>: <?php echo esc_html( $pro_version ); ?>
</div>
<?php
} elseif ( ! dokan()->is_pro_exists() ) {
// Show upgrade button if Pro not installed
$upgrade_url = 'https://dokan.co/wordpress/pricing/';
?>
<a target="_blank" href="<?php echo esc_url( $upgrade_url ); ?>" class="upgrade-button">
Upgrade
Comment on lines +43 to +46
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve external link handling

The upgrade URL should be:

  1. Configurable rather than hardcoded
  2. Include proper security attributes for external links

Apply these changes:

-$upgrade_url = 'https://dokan.co/wordpress/pricing/';
+$upgrade_url = apply_filters( 'dokan_admin_upgrade_url', 'https://dokan.co/wordpress/pricing/' );
-<a target="_blank" href="<?php echo esc_url( $upgrade_url ); ?>" class="upgrade-button">
+<a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url( $upgrade_url ); ?>" class="upgrade-button">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
$upgrade_url = 'https://dokan.co/wordpress/pricing/';
?>
<a target="_blank" href="<?php echo esc_url( $upgrade_url ); ?>" class="upgrade-button">
Upgrade
$upgrade_url = apply_filters( 'dokan_admin_upgrade_url', 'https://dokan.co/wordpress/pricing/' );
?>
<a target="_blank" rel="noopener noreferrer" href="<?php echo esc_url( $upgrade_url ); ?>" class="upgrade-button">
Upgrade

<?php
dokan_get_template_part(
'svg-icons/pro-award', null,
[
'width' => 20,
'height' => 20,
]
);
?>
</a>
<?php
}
?>
</div>
</div>
<div class="dokan-admin-header-menu">
<div class="menu-item">
<div class="menu-icon">
Expand Down Expand Up @@ -109,4 +164,5 @@
</div>
</div>
</div>
</div>
</div>
19 changes: 19 additions & 0 deletions templates/svg-icons/pro-award.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?php
/**
* Dokan Pro Award SVG Icon
*
* @since 3.3.0
*/
$args = isset( $args ) ? $args : [];
$width = $args['width'] ?? 20;
$height = $args['height'] ?? 20;
Comment on lines +8 to +9
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Initialize $args to prevent undefined variable notice

To prevent a potential undefined variable notice when $args is not provided, it's recommended to initialize $args before using it.

Apply this fix:

<?php
+$args = isset( $args ) ? $args : [];
$width = $args['width'] ?? 20;
$height = $args['height'] ?? 20;
?>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
$width = $args['width'] ?? 20;
$height = $args['height'] ?? 20;
<?php
$args = isset( $args ) ? $args : [];
$width = $args['width'] ?? 20;
$height = $args['height'] ?? 20;
?>



?>
<svg width="<?php echo esc_attr( $width ); ?>"
height="<?php echo esc_attr( $height ); ?>"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<path fill-rule="evenodd" clip-rule="evenodd" d="M7.17566 3.52563C7.30278 3.45067 7.44772 3.41113 7.59529 3.41113C7.74291 3.41113 7.8878 3.45067 8.01497 3.52563C8.14197 3.60052 8.24662 3.70803 8.31809 3.837M8.3183 3.8374L9.83426 6.57021C9.83488 6.57112 9.83578 6.57182 9.83686 6.57215C9.83802 6.57253 9.8393 6.57248 9.84041 6.57203C9.84037 6.57207 9.84045 6.57203 9.84041 6.57203L12.4523 5.41061L12.4537 5.41C12.5947 5.34793 12.7502 5.3265 12.9027 5.34814C13.0552 5.36976 13.1986 5.43359 13.3168 5.53241C13.435 5.63123 13.5231 5.76111 13.5714 5.9074C13.6195 6.05328 13.626 6.20966 13.5902 6.35905C13.59 6.35942 13.59 6.35984 13.5899 6.36025L12.2728 11.9539C12.2465 12.0618 12.1989 12.1634 12.1327 12.2527C12.0665 12.3419 11.9831 12.417 11.8874 12.4734C11.7917 12.5299 11.6857 12.5666 11.5756 12.5814C11.4654 12.5962 11.3535 12.5887 11.2463 12.5595L11.2447 12.5591C8.85502 11.8974 6.33044 11.8974 3.94075 12.5591L3.93913 12.5595C3.83194 12.5887 3.71997 12.5962 3.60986 12.5814C3.49974 12.5666 3.3937 12.5299 3.29802 12.4734C3.20233 12.417 3.11892 12.3419 3.05273 12.2527C2.98654 12.1634 2.9389 12.0618 2.91264 11.9539L2.91183 11.9505L1.60073 6.36025C1.60061 6.35971 1.60048 6.35918 1.60036 6.35868C1.56461 6.20941 1.57115 6.05316 1.61923 5.9074C1.66748 5.76111 1.75567 5.63123 1.87382 5.53241C1.99197 5.43359 2.13539 5.36976 2.2879 5.34814C2.4404 5.32651 2.59591 5.34793 2.73688 5.41L2.73827 5.41061L5.35005 6.57199C5.35001 6.57195 5.35009 6.57199 5.35005 6.57199C5.35116 6.57244 5.35257 6.57253 5.35377 6.57215C5.3548 6.57182 5.35571 6.57112 5.35633 6.57021L6.87253 3.837C6.94397 3.70803 7.04862 3.60052 7.17566 3.52563M6.07438 6.97923C5.97249 7.15783 5.80802 7.29235 5.61277 7.3568C5.41747 7.42125 5.20528 7.41109 5.01707 7.32821L5.0157 7.32759L2.40393 6.16624L2.40457 6.16888L3.71559 11.7589C3.71577 11.7594 3.71603 11.7599 3.71638 11.7604C3.71664 11.7607 3.71696 11.7611 3.71732 11.7614C3.7175 11.7615 3.71769 11.7616 3.7179 11.7618C3.7185 11.7621 3.71916 11.7623 3.71983 11.7624C3.72047 11.7625 3.72111 11.7625 3.72173 11.7623C6.25525 11.0611 8.9317 11.0612 11.4652 11.7628L11.3549 12.1609L11.4635 11.7623C11.4642 11.7625 11.4649 11.7625 11.4656 11.7624C11.4663 11.7623 11.4669 11.7621 11.4675 11.7618C11.4681 11.7614 11.4687 11.7609 11.4691 11.7604C11.4693 11.7601 11.4695 11.7597 11.4697 11.7594C11.4697 11.7592 11.4698 11.759 11.4699 11.7588C11.4698 11.7589 11.4699 11.7587 11.4699 11.7588L12.7861 6.16855L12.7867 6.16624L10.1749 7.32759L10.1735 7.32821C9.98534 7.41109 9.77311 7.42125 9.57786 7.3568C9.38256 7.29235 9.21813 7.15783 9.11625 6.97918L9.11381 6.97493L7.59529 4.23743L6.07438 6.97923Z" fill="white"/>

</svg>
Loading