diff --git a/package.json b/package.json index 1e5d3a4..ebdaf3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "git4school", - "version": "1.5.2", + "version": "2.0.3", "scripts": { "ng": "ng", "start": "ng serve --hmr", diff --git a/src/app/components/graphs/overview/chart.scss b/src/app/components/graphs/overview/chart.scss index dc90cf8..41f2265 100644 --- a/src/app/components/graphs/overview/chart.scss +++ b/src/app/components/graphs/overview/chart.scss @@ -190,4 +190,29 @@ body.dark-theme .commit { filter: var(--badge-drag-shadow-ready); } } +} + +.drag-time-indicator { + pointer-events: none; + + .indicator-pointer { + fill: var(--color-surface); + stroke: var(--color-border); + stroke-width: 1px; + } + + .pill-bg { + fill: var(--color-surface); + stroke: var(--color-border); + stroke-width: 1px; + filter: var(--badge-drag-shadow); + } + + text { + fill: var(--color-text-primary); + font-family: var(--font-family-sans); + font-size: 11px; + font-weight: 600; + user-select: none; + } } \ No newline at end of file diff --git a/src/app/components/graphs/overview/overview.component.html b/src/app/components/graphs/overview/overview.component.html index 65cd629..46cbe71 100644 --- a/src/app/components/graphs/overview/overview.component.html +++ b/src/app/components/graphs/overview/overview.component.html @@ -236,7 +236,7 @@
{{ 'OVERVIEW-GRAPH.NO-COMMITS-TIT
-
+
diff --git a/src/app/components/graphs/overview/overview.component.scss b/src/app/components/graphs/overview/overview.component.scss index a45f804..6cdbcc0 100644 --- a/src/app/components/graphs/overview/overview.component.scss +++ b/src/app/components/graphs/overview/overview.component.scss @@ -8,7 +8,7 @@ #chart { --top-inner: 28px; - --bottom-inner: 20px; + --bottom-inner: 38px; &.no-milestones { --top-inner: 0px; diff --git a/src/app/components/graphs/overview/overview.component.ts b/src/app/components/graphs/overview/overview.component.ts index 5b35d7b..a4f950e 100644 --- a/src/app/components/graphs/overview/overview.component.ts +++ b/src/app/components/graphs/overview/overview.component.ts @@ -1401,7 +1401,7 @@ export class OverviewComponent document.body.style.cursor = "grabbing"; const currentMilestoneX = overview.xScaledTimeZoned(m.date); - overview.onMilestoneDragStart(currentMilestoneX, g); + overview.onMilestoneDragStart(currentMilestoneX, g, m); }, overview.MILESTONE_HOLD_DURATION); const onWindowMouseMove = (moveEvent: MouseEvent) => { @@ -1489,7 +1489,8 @@ export class OverviewComponent private onMilestoneDragStart( startX: number, - element: d3.Selection + element: d3.Selection, + m?: Milestone ) { this.isDraggingMilestone = true; this.hasMovedDuringDrag = false; @@ -1501,6 +1502,9 @@ export class OverviewComponent element.raise(); element.select(".hitbox").attr("style", "cursor: grabbing; pointer-events: all;"); this.createDragTimeIndicator(startX); + if (m) { + this.updateDragTimeIndicator(startX, m.date); + } } private onMilestoneDragCustom( @@ -1551,6 +1555,7 @@ export class OverviewComponent // Triangle pointer this.dragTimeIndicator.append("path") + .attr("class", "indicator-pointer") .attr("d", "M -6 5 L 6 5 L 0 -1 Z") .attr("fill", "var(--color-surface)") .attr("stroke", "var(--color-border)") @@ -1567,12 +1572,14 @@ export class OverviewComponent .style("fill", "var(--color-surface)") .style("stroke", "var(--color-border)") .style("stroke-width", "1px") - .style("filter", "drop-shadow(0px 2px 4px rgba(0,0,0,0.15))"); + .style("filter", "var(--badge-drag-shadow)"); this.dragTimeIndicator.append("text") - .attr("y", 20) + .attr("x", 0) + .attr("y", 16) + .attr("dominant-baseline", "central") .attr("text-anchor", "middle") - .style("fill", "var(--color-on-surface)") + .style("fill", "var(--color-text-primary)") .style("font-size", "11px") .style("font-weight", "600") .style("pointer-events", "none"); @@ -1587,15 +1594,28 @@ export class OverviewComponent const textEl = this.dragTimeIndicator.select("text"); textEl.text(timeString); - // Dynamically adjust the pill width + // Dynamically adjust the pill width and clamp position to prevent clipping const textNode = textEl.node() as SVGTextElement; if (textNode) { const bbox = textNode.getBBox(); const padding = 20; // 10px padding on each side const width = Math.max(80, bbox.width + padding); // minimum width + + let pillX = -width / 2; + const leftMargin = this.width - this.chart_width; + + if (x + pillX + width > this.inner_width) { + pillX = this.inner_width - x - width; + } + if (x + pillX < -leftMargin) { + pillX = -leftMargin - x; + } + this.dragTimeIndicator.select(".pill-bg") .attr("width", width) - .attr("x", -width / 2); + .attr("x", pillX); + + textEl.attr("x", pillX + width / 2); } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 1224683..642267d 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -16,6 +16,7 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; + --color-on-surface: var(--color-text-primary); // Cognitive Palette (Flat) --color-primary: #2563eb; // Blue: Calm, focus, primary actions @@ -82,6 +83,7 @@ body.dark-theme { --color-text-primary: #f8fafc; --color-text-secondary: #cbd5e1; --color-text-muted: #64748b; + --color-on-surface: var(--color-text-primary); // Cognitive Palette adapted for Dark Mode --color-primary: #3b82f6; // Brighter blue for contrast @@ -140,6 +142,7 @@ $color-border: var(--color-border); $color-text-primary: var(--color-text-primary); $color-text-secondary: var(--color-text-secondary); $color-text-muted: var(--color-text-muted); +$color-on-surface: var(--color-on-surface); $color-primary: var(--color-primary); $color-primary-hover: var(--color-primary-hover);