mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-06-21 01:49:54 +02:00
trying to fix sidebar
This commit is contained in:
Guy Sandler
parent
cbdda56e4b
commit
62b7112954
160
js/content.js
160
js/content.js
@ -1492,7 +1492,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
|
||||
const layoutMode = mode === "course" || mode === "dash" ? mode : getSidebarLayoutMode();
|
||||
const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
|
||||
if (!mainWrapper) return;
|
||||
let courseLinks;
|
||||
let expanded = await getSidebarExpandedState(layoutMode);
|
||||
mainWrapper.style.display = "flex";
|
||||
mainWrapper.style.alignItems = "stretch";
|
||||
@ -1510,10 +1509,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
|
||||
contentMain.style.flex = "1";
|
||||
contentMain.style.minWidth = "0";
|
||||
}
|
||||
courseLinks = getCourseLinks();
|
||||
document.querySelector(".ic-app-nav-toggle-and-crumbs")?.style.setProperty("display", "none");
|
||||
const leftSide = document.getElementById("left-side");
|
||||
if (leftSide) leftSide.style.display = "none";
|
||||
}
|
||||
|
||||
let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
|
||||
@ -1527,40 +1522,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
|
||||
// Populate sidebar from Canvas navigation menu dynamically
|
||||
populateSidebarFromNav(sidebarContent);
|
||||
|
||||
if (layoutMode == "course") {
|
||||
const courseLinksContainer = makeElement("div", sidebarContent, {
|
||||
id: "better-course-links",
|
||||
style: "display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);align-items:stretch;margin:15px 8px 0;padding:12px;border-radius:8px;background:linear-gradient(135deg, rgba(var(--bc-primary-rgb), 0.08) 0%, rgba(var(--bc-primary-rgb), 0.04) 100%);border:1px solid rgba(var(--bc-primary-rgb), 0.15);"
|
||||
});
|
||||
|
||||
if (courseLinks && courseLinks.length > 0) {
|
||||
makeElement("div", courseLinksContainer, {
|
||||
id: "better-course-links-title",
|
||||
textContent: "Course Pages",
|
||||
style: "font-size:11px;color:var(--bctext-0);margin:0;font-weight:600;white-space:nowrap;text-align:center;display:block;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;"
|
||||
})
|
||||
makeElement("div", courseLinksContainer, {
|
||||
style: "height:1px;background:linear-gradient(90deg, transparent, rgba(var(--bctext-0-rgb), 0.2), transparent);margin:2px 0;"
|
||||
})
|
||||
courseLinks.forEach((link) => {
|
||||
createSidebarButton(
|
||||
link.name,
|
||||
domain + link.url,
|
||||
courseLinksContainer,
|
||||
`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M7.05025 1.53553C8.03344 0.552348 9.36692 0 10.7574 0C13.6528 0 16 2.34721 16 5.24264C16 6.63308 15.4477 7.96656 14.4645 8.94975L12.4142 11L11 9.58579L13.0503 7.53553C13.6584 6.92742 14 6.10264 14 5.24264C14 3.45178 12.5482 2 10.7574 2C9.89736 2 9.07258 2.34163 8.46447 2.94975L6.41421 5L5 3.58579L7.05025 1.53553Z" fill="white"></path>
|
||||
<path d="M7.53553 13.0503L9.58579 11L11 12.4142L8.94975 14.4645C7.96656 15.4477 6.63308 16 5.24264 16C2.34721 16 0 13.6528 0 10.7574C0 9.36693 0.552347 8.03344 1.53553 7.05025L3.58579 5L5 6.41421L2.94975 8.46447C2.34163 9.07258 2 9.89736 2 10.7574C2 12.5482 3.45178 14 5.24264 14C6.10264 14 6.92742 13.6584 7.53553 13.0503Z" fill="white"></path>
|
||||
<path d="M5.70711 11.7071L11.7071 5.70711L10.2929 4.29289L4.29289 10.2929L5.70711 11.7071Z" fill="white"></path>
|
||||
</g>
|
||||
</svg>`
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let expander = makeElement("div", sidebarList, {
|
||||
className: "better-sidebar-expander",
|
||||
@ -1612,69 +1573,76 @@ function populateSidebarFromNav(sidebarContent) {
|
||||
};
|
||||
|
||||
const navMenu = document.getElementById("menu");
|
||||
if (!navMenu) return;
|
||||
let hasDashboardButton = false;
|
||||
|
||||
const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
|
||||
menuItems.forEach(item => {
|
||||
const itemId = item.id;
|
||||
if (excludeIds.includes(itemId)) return;
|
||||
if (navMenu) {
|
||||
const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
|
||||
menuItems.forEach(item => {
|
||||
const itemId = item.id;
|
||||
if (excludeIds.includes(itemId)) return;
|
||||
|
||||
const href = item.getAttribute("href");
|
||||
let textEl = item.querySelector(".menu-item__text");
|
||||
let text = textEl?.textContent?.trim();
|
||||
const href = item.getAttribute("href");
|
||||
let textEl = item.querySelector(".menu-item__text");
|
||||
let text = textEl?.textContent?.trim();
|
||||
|
||||
// If text not found, try other sources
|
||||
if (!text) {
|
||||
text = item.getAttribute("aria-label")?.trim() ||
|
||||
item.getAttribute("title")?.trim() ||
|
||||
item.textContent?.trim();
|
||||
}
|
||||
// If text not found, try other sources
|
||||
if (!text) {
|
||||
text = item.getAttribute("aria-label")?.trim() ||
|
||||
item.getAttribute("title")?.trim() ||
|
||||
item.textContent?.trim();
|
||||
}
|
||||
|
||||
if (!text || !href) return;
|
||||
if (!text || !href) return;
|
||||
|
||||
let icon = customIcons[itemId] || "";
|
||||
if (!icon) {
|
||||
const svg = item.querySelector("svg");
|
||||
if (svg) {
|
||||
icon = svg.outerHTML;
|
||||
// Detect and scale down large viewBox SVGs
|
||||
const viewBoxMatch = icon.match(/viewBox="([^"]+)"/);
|
||||
if (viewBoxMatch) {
|
||||
const [, viewBox] = viewBoxMatch;
|
||||
const parts = viewBox.split(/\s+/);
|
||||
const width = parseFloat(parts[2]);
|
||||
const height = parseFloat(parts[3]);
|
||||
// If viewBox is large, add fixed size to scale it down
|
||||
if (width > 32 || height > 32) {
|
||||
// Check if svg already has a style attribute
|
||||
if (icon.includes('style="')) {
|
||||
// Append to existing style
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
|
||||
} else {
|
||||
// Add new style attribute
|
||||
icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"');
|
||||
}
|
||||
} else {
|
||||
// Smaller SVG - just add colors
|
||||
if (icon.includes('style="')) {
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`);
|
||||
} else {
|
||||
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No viewBox - just add colors
|
||||
if (icon.includes('style="')) {
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`);
|
||||
} else {
|
||||
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let icon = customIcons[itemId] || "";
|
||||
if (!icon) {
|
||||
const svg = item.querySelector("svg");
|
||||
if (svg) {
|
||||
icon = svg.outerHTML;
|
||||
// Detect and scale down large viewBox SVGs
|
||||
const viewBoxMatch = icon.match(/viewBox="([^"]+)"/);
|
||||
if (viewBoxMatch) {
|
||||
const [, viewBox] = viewBoxMatch;
|
||||
const parts = viewBox.split(/\s+/);
|
||||
const width = parseFloat(parts[2]);
|
||||
const height = parseFloat(parts[3]);
|
||||
// If viewBox is large, add fixed size to scale it down
|
||||
if (width > 32 || height > 32) {
|
||||
// Check if svg already has a style attribute
|
||||
if (icon.includes('style="')) {
|
||||
// Append to existing style
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
|
||||
} else {
|
||||
// Add new style attribute
|
||||
icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"');
|
||||
}
|
||||
} else {
|
||||
// Smaller SVG - just add colors
|
||||
if (icon.includes('style="')) {
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`);
|
||||
} else {
|
||||
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No viewBox - just add colors
|
||||
if (icon.includes('style="')) {
|
||||
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`);
|
||||
} else {
|
||||
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createSidebarButton(text, href, sidebarContent, icon);
|
||||
});
|
||||
if (itemId === "global_nav_dashboard_link") hasDashboardButton = true;
|
||||
createSidebarButton(text, href, sidebarContent, icon);
|
||||
});
|
||||
}
|
||||
|
||||
if (!hasDashboardButton) {
|
||||
createSidebarButton("Dashboard", `${domain}/`, sidebarContent, customIcons["global_nav_dashboard_link"]);
|
||||
}
|
||||
}
|
||||
function updateSidebar(expanded, sidebarList, expander) {
|
||||
const scale = getSidebarScale();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user