Skip to content

Commit

Permalink
Enhance/plugin header section redesign (getdokan#2461)
Browse files Browse the repository at this point in the history 
* [initialization]

* [design] upgrade

* [centralized] pro-award svg icon

* [refactor] [sanitize] code

* isset args in award icon

* [refactor] award icon

* [update] zoom icon color in VendorCapabilities.vue

* fix dokan_pro() check

* removed  dokan_pro() check

* [responsive] header section

* [hide] pro button when active not has license

* [Skip] payment in Setup wizard
  • Loading branch information
@osmansufy
osmansufy authored Dec 10, 2024
1 parent 3af31a0 commit 31194fa
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 30 deletions.
129 changes: 104 additions & 25 deletions assets/src/less/admin.less
View file
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
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
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"/>
</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() ) {
$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
<?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
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;


?>
<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>

0 comments on commit 31194fa

Please sign in to comment.