From fd02c2a65d1cbac0a0f8b0bc2b172cdf994249f4 Mon Sep 17 00:00:00 2001 From: Tony Date: Fri, 7 Jun 2024 14:29:00 +0800 Subject: [PATCH] Fix inline diff icon hard to click --- .../linesDecorations/linesDecorations.css | 8 +++++++- .../linesDecorations/linesDecorations.ts | 10 ++-------- src/vs/editor/contrib/folding/browser/folding.css | 1 + src/vs/editor/contrib/folding/browser/folding.ts | 10 +--------- .../contrib/scm/browser/dirtydiffDecorator.ts | 15 +++------------ .../scm/browser/media/dirtydiffDecorator.css | 2 +- 6 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css index 452d83eeb8b7a..20c8a2ceed071 100644 --- a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css +++ b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css @@ -14,5 +14,11 @@ */ .monaco-editor .margin-view-overlays .cldr { position: absolute; + width: 100%; height: 100%; -} \ No newline at end of file +} + +.monaco-editor .margin-view-overlays .line-decor-container { + position: absolute; + height: 100%; +} diff --git a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts index 9bbfeffae5764..f5250d75d125c 100644 --- a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts +++ b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts @@ -95,7 +95,6 @@ export class LinesDecorationsOverlay extends DedupOverlay { const left = this._decorationsLeft.toString(); const width = this._decorationsWidth.toString(); - const common = '" style="left:' + left + 'px;width:' + width + 'px;">'; const output: string[] = []; for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) { @@ -103,14 +102,9 @@ export class LinesDecorationsOverlay extends DedupOverlay { const decorations = toRender[lineIndex].getDecorations(); let lineOutput = ''; for (const decoration of decorations) { - let addition = '
`; } - output[lineIndex] = lineOutput; + output[lineIndex] = `
${lineOutput}
`; } this._renderResult = output; diff --git a/src/vs/editor/contrib/folding/browser/folding.css b/src/vs/editor/contrib/folding/browser/folding.css index f973d5f7a30dd..3e0277121e492 100644 --- a/src/vs/editor/contrib/folding/browser/folding.css +++ b/src/vs/editor/contrib/folding/browser/folding.css @@ -14,6 +14,7 @@ justify-content: center; font-size: 140%; margin-left: 2px; + z-index: 1; } .monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed, diff --git a/src/vs/editor/contrib/folding/browser/folding.ts b/src/vs/editor/contrib/folding/browser/folding.ts index 25988ac737061..7c0ab401b1071 100644 --- a/src/vs/editor/contrib/folding/browser/folding.ts +++ b/src/vs/editor/contrib/folding/browser/folding.ts @@ -406,17 +406,9 @@ export class FoldingController extends Disposable implements IEditorContribution let iconClicked = false; switch (e.target.type) { case MouseTargetType.GUTTER_LINE_DECORATIONS: { - const data = e.target.detail; - const offsetLeftInGutter = e.target.element!.offsetLeft; - const gutterOffsetX = data.offsetX - offsetLeftInGutter; - - // const gutterOffsetX = data.offsetX - data.glyphMarginWidth - data.lineNumbersWidth - data.glyphMarginLeft; - - // TODO@joao TODO@alex TODO@martin this is such that we don't collide with dirty diff - if (gutterOffsetX < 4) { // the whitespace between the border and the real folding icon border is 4px + if (e.target.element?.classList?.contains?.('dirty-diff-glyph')) { return; } - iconClicked = true; break; } diff --git a/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts b/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts index 7537f80f534cd..fa7c01c6cef0d 100644 --- a/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts +++ b/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts @@ -750,13 +750,13 @@ export class DirtyDiffController extends Disposable implements DirtyDiffContribu cursor: pointer; } - .monaco-editor .margin-view-overlays .dirty-diff-glyph:hover::before { + .monaco-editor .margin-view-overlays .line-decor-container:hover .dirty-diff-glyph::before { height: 100%; width: 6px; left: -6px; } - .monaco-editor .margin-view-overlays .dirty-diff-deleted:hover::after { + .monaco-editor .margin-view-overlays .line-decor-container:hover .dirty-diff-deleted::after { bottom: 0; border-top-width: 0; border-bottom-width: 0; @@ -913,16 +913,7 @@ export class DirtyDiffController extends Disposable implements DirtyDiffContribu if (!e.target.element) { return; } - if (e.target.element.className.indexOf('dirty-diff-glyph') < 0) { - return; - } - - const data = e.target.detail; - const offsetLeftInGutter = e.target.element.offsetLeft; - const gutterOffsetX = data.offsetX - offsetLeftInGutter; - - // TODO@joao TODO@alex TODO@martin this is such that we don't collide with folding - if (gutterOffsetX < -3 || gutterOffsetX > 3) { // dirty diff decoration on hover is 6px wide + if (!e.target.element.classList.contains('dirty-diff-glyph')) { return; } diff --git a/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css b/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css index 5a9e4a2536e6f..4e99de0ecadcf 100644 --- a/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css +++ b/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css @@ -5,7 +5,6 @@ .monaco-editor .dirty-diff-glyph { margin-left: 5px; - z-index: 5; } .monaco-editor .dirty-diff-glyph:before { @@ -14,6 +13,7 @@ height: 100%; width: 0; left: -2px; + z-index: 5; } .monaco-workbench:not(.reduce-motion) .monaco-editor .dirty-diff-glyph:before {