ali
/
custom_subtabs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Subtabs are in perfect state, with perfect visual, but no sub-subtabs

This commit is contained in:
Awey01 2024-12-03 13:02:34 +00:00
parent 1a0be36b24
commit 4af4298a09
2 changed files with 114 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
custom_subtabs/public/css/custom_subtabs.css
View File

@ -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; /* Без скруглений */
}

130
custom_subtabs/public/js/custom_subtabs.js
View File

@ -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 = $("<ul class='sub-tab-container nav'></ul>");
$(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 = $("<div class='sub-tab-container nav' data-parent-id='" + tabContentId + "'></div>");
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 = $("<ul class='sub-sub-tab-container nav'></ul>");
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);
};