From 4af4298a09ac30d70ffe03c8b635b0f373d35d09 Mon Sep 17 00:00:00 2001 From: Awey01 <010109ali@gmail.com> Date: Tue, 3 Dec 2024 13:02:34 +0000 Subject: [PATCH] Subtabs are in perfect state, with perfect visual, but no sub-subtabs --- custom_subtabs/public/css/custom_subtabs.css | 50 ++++--- custom_subtabs/public/js/custom_subtabs.js | 130 ++++++++++++------- 2 files changed, 114 insertions(+), 66 deletions(-) diff --git a/custom_subtabs/public/css/custom_subtabs.css b/custom_subtabs/public/css/custom_subtabs.css index a1444e3..d55088f 100644 --- a/custom_subtabs/public/css/custom_subtabs.css +++ b/custom_subtabs/public/css/custom_subtabs.css @@ -1,25 +1,39 @@ -/* Main tab styling */ -.nav-item.active { - border-bottom: 2px solid #171717 !important; - font-weight: bold !important; - color: #171717 !important; +.sub-tab-container { + margin: 0 !important; + padding: 0 !important; + display: flex !important; + justify-content: flex-start !important; + border-bottom: 1px solid #ddd !important; } -/* Subtab styling */ -.sub-tab.active { - border-bottom: 2px solid #171717 !important; - font-weight: bold !important; - color: #171717 !important; +.sub-tab-container .sub-tab { + margin: 0 !important; + background: none !important; + border: none !important; + padding: 0 !important; } -/* Sub-subtab styling */ -.sub-sub-tab.active { - border-bottom: 2px solid #171717 !important; - font-weight: bold !important; - color: #171717 !important; +.sub-tab-container .sub-tab a { + text-decoration: none !important; + display: block !important; + padding: 10px 15px !important; + color: #555 !important; + border: none !important; + font-size: 14px !important; + font-weight: normal !important; + margin: 0 !important; + background: transparent !important; + box-shadow: none !important; } -/* Remove double line */ -.nav-item, .sub-tab, .sub-sub-tab { - border-bottom: none !important; +.sub-tab-container .sub-tab a:hover { + color: #000 !important; /* Цвет текста при наведении */ +} + +.sub-tab-container .sub-tab.active a { + color: #000 !important; /* Черный текст для активного таба */ + font-weight: 600 !important; /* Жирный шрифт */ + border-bottom: 1px solid #000 !important; /* Черная активная полоска снизу */ + background-color: transparent !important; /* Без фона */ + border-radius: 0 !important; /* Без скруглений */ } diff --git a/custom_subtabs/public/js/custom_subtabs.js b/custom_subtabs/public/js/custom_subtabs.js index 87c8f88..887674f 100644 --- a/custom_subtabs/public/js/custom_subtabs.js +++ b/custom_subtabs/public/js/custom_subtabs.js @@ -20,55 +20,55 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () { tabs.each((index, tab) => { const tabLabel = $(tab).text().trim(); console.log(`Processing subtabs for main tab: '${tabLabel}'`); + if (subtabs[tabLabel]) { - let subtabContainer = $(tab).find(".sub-tab-container"); - if (!subtabContainer.length) { - subtabContainer = $(""); - $(tab).append(subtabContainer); + const tabContentId = $(tab).find("a").attr("aria-controls"); + const tabContent = $(`#${tabContentId}`); + + if (!tabContent.length) { + console.warn(`Content container not found for main tab: '${tabLabel}'`); + return; } + const sectionContainer = tabContent.find(".row.form-section.card-section.visible-section"); + + if (!sectionContainer.length) { + console.warn(`Section container not found for main tab: '${tabLabel}'`); + return; + } + + sectionContainer.find('.section-body').remove(); // Удаление лишнего + let subtabContainer = sectionContainer.find('.sub-tab-container'); + if (!subtabContainer.length) { + subtabContainer = $("
"); + sectionContainer.append(subtabContainer); + } + subtabs[tabLabel].forEach((subtab) => { const subtabElement = tabs.filter((_, el) => $(el).text().trim() === subtab); - + if (subtabElement.length) { const subtabClone = subtabElement.clone(); - subtabClone.addClass("sub-tab").find("a").removeAttr("href"); - subtabContainer.append(subtabClone); - subtabElement.remove(); - + + // Убедимся, что мы добавляем только нужные классы + subtabClone.addClass("sub-tab"); // Добавляем только класс sub-tab + // Удаляем только атрибут href, если он мешает работе + subtabClone.find("a").removeAttr("href"); + + subtabClone.attr("data-parent-id", tabContentId); // Присваиваем parent-id + + subtabContainer.append(subtabClone); // Добавляем к контейнеру + subtabElement.remove(); // Удаляем оригинал + console.log(`Processed subtab: '${subtab}' under main tab '${tabLabel}'`); - - // Process sub-subtabs - if (subtabs[subtab]) { - let subsubtabContainer = subtabClone.find(".sub-sub-tab-container"); - if (!subsubtabContainer.length) { - subsubtabContainer = $(""); - subtabClone.append(subsubtabContainer); - } - - subtabs[subtab].forEach((subsubtab) => { - const subsubtabElement = tabs.filter((_, el) => $(el).text().trim() === subsubtab); - - if (subsubtabElement.length) { - const subsubtabClone = subsubtabElement.clone(); - subsubtabClone.addClass("sub-sub-tab").find("a").removeAttr("href"); - subsubtabContainer.append(subsubtabClone); - subsubtabElement.remove(); - - console.log(`Processed sub-subtab: '${subsubtab}' under subtab '${subtab}'`); - } else { - console.warn(`Sub-subtab element not found for '${subsubtab}'`); - } - }); - } } else { console.warn(`Subtab element not found for '${subtab}'`); } - }); + }); } }); - // Handle tab activation + // Handle main tab activation $(".nav-item").on("click", function () { const clickedTab = $(this); const tabId = clickedTab.find("a").attr("aria-controls"); @@ -79,35 +79,67 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () { const tabContent = document.querySelector(`#${tabId}`); if (tabContent) { $(tabContent).addClass("active show").css("display", "block"); + console.log(`Main tab content displayed:`, tabContent.outerHTML); } else { console.warn(`Tab content not found for ID: ${tabId}`); } $(".nav-item").removeClass("active"); clickedTab.addClass("active"); + + // Show related subtabs without hiding any subtabs + $(".sub-tab-container").each(function () { + const containerParentId = $(this).attr("data-parent-id"); + if (containerParentId === tabId) { + console.log(`Displaying subtabs for parent tab: '${tabId}'`); + $(this).find(".sub-tab").css("display", "block"); + } + }); }); // Handle subtab activation $(".sub-tab").on("click", function (event) { event.stopPropagation(); - + const clickedSubtab = $(this); const subtabId = clickedSubtab.find("a").attr("aria-controls"); - - console.log(`Activating subtab: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`); - - $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none"); + const parentTabId = clickedSubtab.attr("data-parent-id"); + + console.log(`Subtab clicked: '${clickedSubtab.text().trim()}' (ID: ${subtabId})`); + + // Убедиться, что родительский таб остается активным + const parentTabContent = document.querySelector(`#${parentTabId}`); + if (parentTabContent) { + $(parentTabContent) + .addClass("active show") + .css("display", "block") + .attr("style", ""); // Сброс style + console.log(`Ensured parent tab content stays active for: '${parentTabId}', HTML:`, parentTabContent.outerHTML); + } else { + console.warn(`Parent tab content not found for ID: ${parentTabId}`); + } + + // Активировать субтаб + $(".sub-tab").removeClass("active"); // Убираем активные классы с других субтабов + clickedSubtab.addClass("active"); + console.log(`Activated subtab: '${clickedSubtab.text().trim()}'`); + + // Отобразить контент субтаба const subtabContent = document.querySelector(`#${subtabId}`); if (subtabContent) { - $(subtabContent).addClass("active show").css("display", "block"); + $(subtabContent) + .addClass("active show") + .css("display", "block"); + console.log(`Displaying content for subtab: '${subtabId}', HTML:`, subtabContent.outerHTML); } else { console.warn(`Subtab content not found for ID: ${subtabId}`); } - - $(".sub-tab").removeClass("active"); - clickedSubtab.addClass("active"); + + // Убедиться, что все субтабы остаются видимыми + $(`.sub-tab-container[data-parent-id="${parentTabId}"] .sub-tab`).css("display", "block"); + console.log(`Ensured all subtabs for parent tab '${parentTabId}' are visible.`); }); - + // Handle sub-subtab activation $(".sub-sub-tab").on("click", function (event) { event.stopPropagation(); @@ -117,16 +149,18 @@ frappe.ui.form.Layout.prototype.setup_tab_events = function () { console.log(`Activating sub-subtab: '${clickedSubsubtab.text().trim()}' (ID: ${subsubtabId})`); + $(".sub-sub-tab").removeClass("active"); + clickedSubsubtab.addClass("active"); + console.log(`Activated sub-subtab: '${clickedSubsubtab.text().trim()}'`); + $(".form-tab-content > .tab-pane").removeClass("active show").css("display", "none"); const subsubtabContent = document.querySelector(`#${subsubtabId}`); if (subsubtabContent) { $(subsubtabContent).addClass("active show").css("display", "block"); + console.log(`Displaying content for sub-subtab: '${subsubtabId}', HTML:`, subsubtabContent.outerHTML); } else { console.warn(`Sub-subtab content not found for ID: ${subsubtabId}`); } - - $(".sub-sub-tab").removeClass("active"); - clickedSubsubtab.addClass("active"); }); }, 500); };