style: expand settings panel to 1180px via CSS and layoutEffect, fit 880px calendar with zero scrollbar
This commit is contained in:
parent
4c32c0504a
commit
dc73f2bbf5
4 changed files with 94 additions and 49 deletions
|
|
@ -72,16 +72,20 @@ function HeatmapInnerView() {
|
|||
const [hoveredDay, setHoveredDay] = (0, import_react.useState)(null);
|
||||
const [hoveredBar, setHoveredBar] = (0, import_react.useState)(null);
|
||||
const [tooltipPos, setTooltipPos] = (0, import_react.useState)(null);
|
||||
const rootRef = (0, import_react.useRef)(null);
|
||||
(0, import_react.useEffect)(() => {
|
||||
if (typeof document === "undefined") return;
|
||||
const panel = document.querySelector('[class*="_panel"]');
|
||||
const findPanel = () => {
|
||||
return rootRef.current?.closest('[class*="_panel"]') || document.querySelector(".VOzbGW_panel") || document.querySelector('[class*="_panel"]');
|
||||
};
|
||||
const panel = findPanel();
|
||||
if (panel) {
|
||||
const prevWidth = panel.style.width;
|
||||
const prevMaxWidth = panel.style.maxWidth;
|
||||
const prevTransition = panel.style.transition;
|
||||
panel.style.transition = "width 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s ease";
|
||||
panel.style.width = "min(1080px, calc(100vw - 32px))";
|
||||
panel.style.maxWidth = "calc(100vw - 32px)";
|
||||
panel.style.setProperty("width", "min(1180px, calc(100vw - 32px))", "important");
|
||||
panel.style.setProperty("max-width", "calc(100vw - 32px)", "important");
|
||||
return () => {
|
||||
panel.style.width = prevWidth;
|
||||
panel.style.maxWidth = prevMaxWidth;
|
||||
|
|
@ -294,6 +298,7 @@ function HeatmapInnerView() {
|
|||
"div",
|
||||
{
|
||||
"data-dsh-heatmap": "true",
|
||||
ref: rootRef,
|
||||
style: {
|
||||
boxSizing: "border-box",
|
||||
width: "100%",
|
||||
|
|
@ -447,10 +452,10 @@ function HeatmapInnerView() {
|
|||
calendarGrid && /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 770 120",
|
||||
viewBox: "0 0 880 136",
|
||||
style: {
|
||||
width: "100%",
|
||||
maxWidth: "770px",
|
||||
maxWidth: "880px",
|
||||
height: "auto",
|
||||
display: "block",
|
||||
overflow: "visible"
|
||||
|
|
@ -460,35 +465,35 @@ function HeatmapInnerView() {
|
|||
"text",
|
||||
{
|
||||
key: i,
|
||||
x: 28 + m.col * 13.8,
|
||||
y: 10,
|
||||
fontSize: 10,
|
||||
x: 32 + m.col * 15.6,
|
||||
y: 11,
|
||||
fontSize: 11,
|
||||
fill: "var(--dsw-alias-label-tertiary, #888888)",
|
||||
fontFamily: "inherit"
|
||||
},
|
||||
m.label
|
||||
)),
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 39, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Mon"),
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 67, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Wed"),
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 95, fontSize: 9, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Fri"),
|
||||
calendarGrid.map((week, colIdx) => /* @__PURE__ */ import_react.default.createElement("g", { key: colIdx, transform: `translate(${28 + colIdx * 13.8}, 18)` }, week.map((day, rowIdx) => {
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 45, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Mon"),
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 76, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Wed"),
|
||||
/* @__PURE__ */ import_react.default.createElement("text", { x: 2, y: 107, fontSize: 10, fill: "var(--dsw-alias-label-tertiary, #888888)", fontFamily: "inherit" }, "Fri"),
|
||||
calendarGrid.map((week, colIdx) => /* @__PURE__ */ import_react.default.createElement("g", { key: colIdx, transform: `translate(${32 + colIdx * 15.6}, 18)` }, week.map((day, rowIdx) => {
|
||||
if (!day) return null;
|
||||
const lvl = day.stats.level || 0;
|
||||
const bg = DEEPSEEK_LEVELS[lvl];
|
||||
const isSelected = selectedDate === day.date;
|
||||
const isHovered = hoveredDay?.date === day.date;
|
||||
const strokeColor = isSelected ? "#ffffff" : isHovered ? "#5686fe" : lvl === 0 ? "rgba(255, 255, 255, 0.06)" : "transparent";
|
||||
const strokeWidth = isSelected ? 1.6 : isHovered ? 1.3 : 1;
|
||||
const strokeWidth = isSelected ? 1.8 : isHovered ? 1.4 : 1;
|
||||
return /* @__PURE__ */ import_react.default.createElement(
|
||||
"rect",
|
||||
{
|
||||
key: rowIdx,
|
||||
x: 0,
|
||||
y: rowIdx * 14,
|
||||
width: 11,
|
||||
height: 11,
|
||||
rx: 2,
|
||||
ry: 2,
|
||||
y: rowIdx * 15.6,
|
||||
width: 12,
|
||||
height: 12,
|
||||
rx: 2.5,
|
||||
ry: 2.5,
|
||||
fill: bg,
|
||||
stroke: strokeColor,
|
||||
strokeWidth,
|
||||
|
|
@ -517,7 +522,7 @@ function HeatmapInnerView() {
|
|||
{
|
||||
style: {
|
||||
width: "100%",
|
||||
maxWidth: "770px",
|
||||
maxWidth: "880px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
|
|
@ -532,9 +537,9 @@ function HeatmapInnerView() {
|
|||
{
|
||||
key: i,
|
||||
style: {
|
||||
width: 11,
|
||||
height: 11,
|
||||
borderRadius: 2,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 2.5,
|
||||
backgroundColor: c,
|
||||
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.06)" : "none",
|
||||
filter: i === 4 ? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))" : "none"
|
||||
|
|
@ -1145,6 +1150,20 @@ function apply(ctx) {
|
|||
}, []);
|
||||
return /* @__PURE__ */ import_react3.default.createElement(HeatmapModal, { open: isOpen, onClose: () => setIsOpen(false) });
|
||||
};
|
||||
if (!document.getElementById("dsh-token-heatmap-panel-resize")) {
|
||||
const resizeStyle = document.createElement("style");
|
||||
resizeStyle.id = "dsh-token-heatmap-panel-resize";
|
||||
resizeStyle.textContent = `
|
||||
/* Dynamically widen DSH Settings panel when Token Heatmap is active */
|
||||
.VOzbGW_panel:has([data-dsh-heatmap]),
|
||||
[class*="_panel"]:has([data-dsh-heatmap]) {
|
||||
width: min(1180px, calc(100vw - 32px)) !important;
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s ease !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(resizeStyle);
|
||||
}
|
||||
const modalContainer = document.createElement("div");
|
||||
modalContainer.id = "dsh-token-heatmap-modal-root";
|
||||
document.body.appendChild(modalContainer);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -116,19 +116,28 @@ function HeatmapInnerView() {
|
|||
turns: number;
|
||||
} | null>(null);
|
||||
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null);
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-resize the settings dialog panel smoothly on mount so it comfortably fits the content
|
||||
// Dynamically enlarge the DSH Settings dialog panel so the calendar fits perfectly without a scrollbar
|
||||
useEffect(() => {
|
||||
if (typeof document === "undefined") return;
|
||||
const panel = document.querySelector('[class*="_panel"]') as HTMLElement | null;
|
||||
const findPanel = () => {
|
||||
return (
|
||||
rootRef.current?.closest('[class*="_panel"]') ||
|
||||
document.querySelector('.VOzbGW_panel') ||
|
||||
document.querySelector('[class*="_panel"]')
|
||||
) as HTMLElement | null;
|
||||
};
|
||||
|
||||
const panel = findPanel();
|
||||
if (panel) {
|
||||
const prevWidth = panel.style.width;
|
||||
const prevMaxWidth = panel.style.maxWidth;
|
||||
const prevTransition = panel.style.transition;
|
||||
|
||||
panel.style.transition = "width 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s ease";
|
||||
panel.style.width = "min(1080px, calc(100vw - 32px))";
|
||||
panel.style.maxWidth = "calc(100vw - 32px)";
|
||||
panel.style.setProperty("width", "min(1180px, calc(100vw - 32px))", "important");
|
||||
panel.style.setProperty("max-width", "calc(100vw - 32px)", "important");
|
||||
|
||||
return () => {
|
||||
panel.style.width = prevWidth;
|
||||
|
|
@ -405,6 +414,7 @@ function HeatmapInnerView() {
|
|||
return (
|
||||
<div
|
||||
data-dsh-heatmap="true"
|
||||
ref={rootRef}
|
||||
style={{
|
||||
boxSizing: "border-box",
|
||||
width: "100%",
|
||||
|
|
@ -570,14 +580,14 @@ function HeatmapInnerView() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Clean, centered SVG Calendar Grid (Fits panel smoothly) */}
|
||||
{/* Clean, centered SVG Calendar Grid (Fits 1180px panel with zero scrollbars) */}
|
||||
{calendarGrid && (
|
||||
<div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||
<svg
|
||||
viewBox="0 0 770 120"
|
||||
viewBox="0 0 880 136"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "770px",
|
||||
maxWidth: "880px",
|
||||
height: "auto",
|
||||
display: "block",
|
||||
overflow: "visible",
|
||||
|
|
@ -587,9 +597,9 @@ function HeatmapInnerView() {
|
|||
{monthHeaders.map((m, i) => (
|
||||
<text
|
||||
key={i}
|
||||
x={28 + m.col * 13.8}
|
||||
y={10}
|
||||
fontSize={10}
|
||||
x={32 + m.col * 15.6}
|
||||
y={11}
|
||||
fontSize={11}
|
||||
fill="var(--dsw-alias-label-tertiary, #888888)"
|
||||
fontFamily="inherit"
|
||||
>
|
||||
|
|
@ -598,19 +608,19 @@ function HeatmapInnerView() {
|
|||
))}
|
||||
|
||||
{/* Day of week labels */}
|
||||
<text x={2} y={39} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
<text x={2} y={45} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
Mon
|
||||
</text>
|
||||
<text x={2} y={67} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
<text x={2} y={76} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
Wed
|
||||
</text>
|
||||
<text x={2} y={95} fontSize={9} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
<text x={2} y={107} fontSize={10} fill="var(--dsw-alias-label-tertiary, #888888)" fontFamily="inherit">
|
||||
Fri
|
||||
</text>
|
||||
|
||||
{/* Day Tiles: centered and proportioned */}
|
||||
{/* Day Tiles: comfortable 12px with 15.6px step */}
|
||||
{calendarGrid.map((week, colIdx) => (
|
||||
<g key={colIdx} transform={`translate(${28 + colIdx * 13.8}, 18)`}>
|
||||
<g key={colIdx} transform={`translate(${32 + colIdx * 15.6}, 18)`}>
|
||||
{week.map((day, rowIdx) => {
|
||||
if (!day) return null;
|
||||
|
||||
|
|
@ -628,17 +638,17 @@ function HeatmapInnerView() {
|
|||
? "rgba(255, 255, 255, 0.06)"
|
||||
: "transparent";
|
||||
|
||||
const strokeWidth = isSelected ? 1.6 : isHovered ? 1.3 : 1;
|
||||
const strokeWidth = isSelected ? 1.8 : isHovered ? 1.4 : 1;
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={rowIdx}
|
||||
x={0}
|
||||
y={rowIdx * 14}
|
||||
width={11}
|
||||
height={11}
|
||||
rx={2}
|
||||
ry={2}
|
||||
y={rowIdx * 15.6}
|
||||
width={12}
|
||||
height={12}
|
||||
rx={2.5}
|
||||
ry={2.5}
|
||||
fill={bg}
|
||||
stroke={strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
|
|
@ -676,7 +686,7 @@ function HeatmapInnerView() {
|
|||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "770px",
|
||||
maxWidth: "880px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
|
|
@ -695,9 +705,9 @@ function HeatmapInnerView() {
|
|||
<div
|
||||
key={i}
|
||||
style={{
|
||||
width: 11,
|
||||
height: 11,
|
||||
borderRadius: 2,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 2.5,
|
||||
backgroundColor: c,
|
||||
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.06)" : "none",
|
||||
filter: i === 4 ? "drop-shadow(0 0 3px rgba(79, 133, 255, 0.5))" : "none",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,22 @@ export function apply(ctx: any) {
|
|||
|
||||
// 2. Global Modal Host & In-Session Token Meter Integration
|
||||
if (typeof document !== "undefined") {
|
||||
// Inject dynamic resizing stylesheet for settings dialog
|
||||
if (!document.getElementById("dsh-token-heatmap-panel-resize")) {
|
||||
const resizeStyle = document.createElement("style");
|
||||
resizeStyle.id = "dsh-token-heatmap-panel-resize";
|
||||
resizeStyle.textContent = `
|
||||
/* Dynamically widen DSH Settings panel when Token Heatmap is active */
|
||||
.VOzbGW_panel:has([data-dsh-heatmap]),
|
||||
[class*="_panel"]:has([data-dsh-heatmap]) {
|
||||
width: min(1180px, calc(100vw - 32px)) !important;
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s ease !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(resizeStyle);
|
||||
}
|
||||
|
||||
const modalContainer = document.createElement("div");
|
||||
modalContainer.id = "dsh-token-heatmap-modal-root";
|
||||
document.body.appendChild(modalContainer);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue