nav css

weDevsOfficial · Nov 8, 2024 · fe34c3b · fe34c3b
1 parent 7293f64
commit fe34c3b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 67 deletions.
diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js
@@ -413,6 +413,7 @@
             isDirty: false,
             enableMultistep: false,
             shortcodeCopied: false,
+            active_tab: 'form-editor',
         },
 
         computed: {
@@ -473,18 +474,6 @@
         },
 
         mounted: function () {
-            // primary nav tabs and their contents
-            this.bind_tab_on_click($('#wpuf-form-builder > fieldset > .nav-tab-wrapper > a'), '#wpuf-form-builder');
-
-            // secondary settings tabs and their contents
-            var settings_tabs = $('#wpuf-form-builder-settings .nav-tab'),
-                settings_tab_contents = $('#wpuf-form-builder-settings .tab-contents .group');
-
-            settings_tabs.first().addClass('nav-tab-active');
-            settings_tab_contents.first().addClass('active');
-
-            this.bind_tab_on_click(settings_tabs, '#wpuf-form-builder-settings');
-
             var clipboard = new window.Clipboard('.form-id');
             $(".form-id").tooltip();
 
@@ -516,22 +505,6 @@
         },
 
         methods: {
-            // tabs and their contents
-            bind_tab_on_click: function (tabs, scope) {
-                tabs.on('click', function (e) {
-                    e.preventDefault();
-
-                    var button = $(this),
-                        tab_contents = $(scope + ' > fieldset > .tab-contents'),
-                        group_id = button.attr('href');
-
-                    button.addClass('nav-tab-active').siblings('.nav-tab-active').removeClass('nav-tab-active');
-
-                    tab_contents.children().removeClass('active');
-                    $(group_id).addClass('active');
-                });
-            },
-
             // switch form
             switch_form: function () {
                 this.is_form_switcher = (this.is_form_switcher) ? false : true;

diff --git a/admin/form-builder/views/form-builder.php b/admin/form-builder/views/form-builder.php
@@ -105,16 +105,25 @@ class="wpuf-btn-primary"><?php esc_html_e( 'Save Form', 'wp-user-frontend' ); ?>
         </div>
 
         <div class="wpuf-flex wpuf-items-center wpuf-mt-8">
-            <div class="wpuf-flex wpuf-bg-gray-100 wpuf-w-max wpuf-rounded-lg wpuf-p-2">
-
-                <a href="#wpuf-form-builder-container" class="wpuf-text-gray-800 hover:wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-rounded-md focus:wpuf-shadow-none">
-                    <?php esc_html_e( 'Form Editor', 'wp-user-frontend' ); ?>
-                </a>
-                <a href="#wpuf-form-builder-settings" class="wpuf-text-gray-800 hover:wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-rounded-md focus:wpuf-shadow-none">
-                    <?php esc_html_e( 'Settings', 'wp-user-frontend' ); ?>
-                </a>
+            <div class="wpuf-flex wpuf-bg-gray-100 wpuf-w-max wpuf-rounded-lg wpuf-p-4">
+                <div class="wpuf-tab-contents">
+                    <a
+                        href="#wpuf-form-builder-container"
+                        @click="active_tab = 'form-editor'"
+                        :class="active_tab === 'form-editor' ? 'wpuf-bg-white wpuf-text-gray-800 wpuf-rounded-md wpuf-drop-shadow-sm' : ''"
+                        class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none">
+                        <?php esc_html_e( 'Form Editor', 'wp-user-frontend' ); ?>
+                    </a>
+                    <a
+                        href="#wpuf-form-builder-settings"
+                        @click="active_tab = 'form-settings'"
+                        :class="active_tab === 'form-settings' ? 'wpuf-bg-white wpuf-text-gray-800 wpuf-rounded-md wpuf-drop-shadow-sm' : ''"
+                        class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none">
+                        <?php esc_html_e( 'Settings', 'wp-user-frontend' ); ?>
+                    </a>
 
-                <?php do_action( "wpuf-form-builder-tabs-{$form_type}" ); ?>
+                    <?php do_action( "wpuf-form-builder-tabs-{$form_type}" ); ?>
+                </div>
             </div>
             <button
                 @click="enableMultistep = !enableMultistep"

diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css
@@ -3177,6 +3177,11 @@ html {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.wpuf-drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .wpuf-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -3471,6 +3476,11 @@ html {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:wpuf-drop-shadow-sm:hover {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .focus\:wpuf-z-20:focus {
   z-index: 20;
 }

diff --git a/assets/js/wpuf-form-builder.js b/assets/js/wpuf-form-builder.js
@@ -413,6 +413,7 @@
             isDirty: false,
             enableMultistep: false,
             shortcodeCopied: false,
+            active_tab: 'form-editor',
         },
 
         computed: {
@@ -473,18 +474,6 @@
         },
 
         mounted: function () {
-            // primary nav tabs and their contents
-            this.bind_tab_on_click($('#wpuf-form-builder > fieldset > .nav-tab-wrapper > a'), '#wpuf-form-builder');
-
-            // secondary settings tabs and their contents
-            var settings_tabs = $('#wpuf-form-builder-settings .nav-tab'),
-                settings_tab_contents = $('#wpuf-form-builder-settings .tab-contents .group');
-
-            settings_tabs.first().addClass('nav-tab-active');
-            settings_tab_contents.first().addClass('active');
-
-            this.bind_tab_on_click(settings_tabs, '#wpuf-form-builder-settings');
-
             var clipboard = new window.Clipboard('.form-id');
             $(".form-id").tooltip();
 
@@ -516,22 +505,6 @@
         },
 
         methods: {
-            // tabs and their contents
-            bind_tab_on_click: function (tabs, scope) {
-                tabs.on('click', function (e) {
-                    e.preventDefault();
-
-                    var button = $(this),
-                        tab_contents = $(scope + ' > fieldset > .tab-contents'),
-                        group_id = button.attr('href');
-
-                    button.addClass('nav-tab-active').siblings('.nav-tab-active').removeClass('nav-tab-active');
-
-                    tab_contents.children().removeClass('active');
-                    $(group_id).addClass('active');
-                });
-            },
-
             // switch form
             switch_form: function () {
                 this.is_form_switcher = (this.is_form_switcher) ? false : true;

diff --git a/includes/Admin/Forms/Admin_Form.php b/includes/Admin/Forms/Admin_Form.php
@@ -261,7 +261,11 @@ public function add_settings_tabs() {
      */
     public function add_primary_tabs() {
         ?>
-        <a href="#wpuf-form-builder-notification" class="wpuf-text-gray-800 hover:wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-rounded-md focus:wpuf-shadow-none">
+        <a
+            href="#wpuf-form-builder-notification"
+            @click="active_tab = 'notification'"
+            :class="active_tab === 'notification' ? 'wpuf-bg-white wpuf-text-gray-800 wpuf-rounded-md wpuf-drop-shadow-sm' : ''"
+            class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none">
             <?php esc_html_e( 'Notification', 'wp-user-frontend' ); ?>
         </a>
         <?php
@@ -277,7 +281,7 @@ public function add_primary_tabs() {
     public function add_primary_tab_contents() {
         ?>
 
-        <div id="wpuf-form-builder-notification" class="group">
+        <div id="wpuf-form-builder-notification" class="group wpuf-nav-tab">
             <?php do_action( 'wpuf_form_settings_post_notification' ); ?>
         </div><!-- #wpuf-form-builder-notification -->