fix: make dokan add vendor UI consistent to WordPress UI (#696)

* fix: make dokan add vendor UI consistent to WordPress UI * fix: add backward compatibility css file * fix: $ is not a function error in the datepicker component * fix: use set_current_screen() in dokan setup wizard
getdokan · Nov 18, 2019 · 27cdd12 · 27cdd12
1 parent 9e8a04f
commit 27cdd12
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/assets/css/wp-version-before-5-3.css b/assets/css/wp-version-before-5-3.css
@@ -0,0 +1,10 @@
+/**
+ * Dokan backend vendor listing page
+ */
+.dokan-vendor-edit .tab-contents .content-body .dokan-form-input {
+    padding: 12px;
+}
+
+.search-box #post-search-input {
+    padding: 15px 18px;
+}
diff --git a/includes/admin/setup-wizard.php b/includes/admin/setup-wizard.php
@@ -158,6 +158,7 @@ public function get_next_step_link() {
      * Setup Wizard Header.
      */
     public function setup_wizard_header() {
+        set_current_screen();
         ?>
         <!DOCTYPE html>
         <html <?php language_attributes(); ?>>

diff --git a/includes/class-assets.php b/includes/class-assets.php
@@ -27,6 +27,7 @@ function __construct() {
      */
     public function enqueue_admin_scripts( $hook ) {
         global $post;
+        global $wp_version;
 
         // load vue app inside the parent menu only
         if ( 'toplevel_page_dokan' == $hook ) {
@@ -98,6 +99,10 @@ public function enqueue_admin_scripts( $hook ) {
 
             // fire the admin app
             wp_enqueue_script( 'dokan-vue-admin' );
+
+            if ( version_compare( $wp_version, '5.3', '<' ) ) {
+                wp_enqueue_style( 'dokan-wp-version-before-5-3' );
+            }
         }
 
         if ( 'dokan_page_dokan-modules' === $hook ) {
@@ -261,6 +266,10 @@ public function get_styles() {
                 'src'     => DOKAN_PLUGIN_ASSEST . '/css/vue-frontend.css',
                 'version' => filemtime( DOKAN_DIR . '/assets/css/vue-frontend.css' ),
             ),
+            'dokan-wp-version-before-5-3' => array(
+                'src'     => DOKAN_PLUGIN_ASSEST . '/css/wp-version-before-5-3.css',
+                'version' => filemtime( DOKAN_DIR . '/assets/css/wp-version-before-5-3.css' ),
+            ),
         );
 
         return $styles;

diff --git a/src/admin/components/Datepicker.vue b/src/admin/components/Datepicker.vue
@@ -38,13 +38,13 @@
         mounted() {
             const vm = this;
 
-            $(vm.$el).datepicker({
+            jQuery(vm.$el).datepicker({
                 dateFormat:  vm.format,
                 changeMonth: vm.changeMonthYear,
                 changeYear:  vm.changeMonthYear,
 
                 beforeShow() {
-                    $(this).datepicker('widget').addClass('dokan-datepicker');
+                    jQuery(this).datepicker('widget').addClass('dokan-datepicker');
                 },
 
                 onSelect(date) {

diff --git a/src/admin/components/Search.vue b/src/admin/components/Search.vue
@@ -41,10 +41,4 @@ export default {
         }
     }
 };
-</script>
-
-<style scoped>
-.search-box #post-search-input {
-    padding: 15px 18px;
-}
-</style>
+</script>
diff --git a/src/admin/pages/AddVendor.vue b/src/admin/pages/AddVendor.vue
@@ -28,7 +28,7 @@
             </div>
 
             <div slot="footer">
-                <button class="dokan-btn" @click="createVendor">{{ 'VendorPaymentFields' === currentTab ? __( 'Create Vendor', 'dokan-lite' ) : this.nextBtn }}</button>
+                <button class="button button-primary button-hero" @click="createVendor">{{ 'VendorPaymentFields' === currentTab ? __( 'Create Vendor', 'dokan-lite' ) : this.nextBtn }}</button>
             </div>
         </modal>
     </div>
@@ -485,7 +485,7 @@ export default {
 
             .dokan-form-input {
                 width: 100%; /* Full width */
-                padding: 12px; /* Some padding */
+                padding: 7px 12px; /* Some padding */
                 border: 1px solid #ccc; /* Gray border */
                 border-radius: 4px; /* Rounded borders */
                 box-sizing: border-box; /* Make sure that padding and width stays in place */
@@ -546,7 +546,7 @@ export default {
                         }
 
                         button {
-                            background: #1A9ED4;
+                            background: #007cba;
                             color: white;
                             padding: 10px 15px;
                             border-radius: 3px;