Skip to content

Fix inline diff icon hard to click #214554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix inline diff icon hard to click #214554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd02c2a
Fix inline diff icon hard to click
Legend-Master Jun 7, 2024
2fca808
Merge branch 'main' into gutter-line-decor-order
Legend-Master Jun 17, 2024
2eb5c0b
Merge branch 'main' into gutter-line-decor-order
Legend-Master Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,11 @@
*/
.monaco-editor .margin-view-overlays .cldr {
position: absolute;
width: 100%;
height: 100%;
}
}

.monaco-editor .margin-view-overlays .line-decor-container {
position: absolute;
height: 100%;
}
10 changes: 2 additions & 8 deletions src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,22 +95,16 @@ export class LinesDecorationsOverlay extends DedupOverlay {

const left = this._decorationsLeft.toString();
const width = this._decorationsWidth.toString();
const common = '" style="left:' + left + 'px;width:' + width + 'px;"></div>';

const output: string[] = [];
for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
const lineIndex = lineNumber - visibleStartLineNumber;
const decorations = toRender[lineIndex].getDecorations();
let lineOutput = '';
for (const decoration of decorations) {
let addition = '<div class="cldr ' + decoration.className;
if (decoration.tooltip !== null) {
addition += '" title="' + decoration.tooltip; // The tooltip is already escaped.
}
addition += common;
lineOutput += addition;
lineOutput += `<div class="cldr ${decoration.className}"${decoration.tooltip !== null ? ` title="${decoration.tooltip}"` : ''}></div>`;
}
output[lineIndex] = lineOutput;
output[lineIndex] = `<div class="line-decor-container" style="left:${left}px;width:${width}px;">${lineOutput}</div>`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexdima I'm a little concerned about this as it adds another layer of div in the line decorations. It looks fine though.

}

this._renderResult = output;
Expand Down
1 change: 1 addition & 0 deletions src/vs/editor/contrib/folding/browser/folding.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 1 addition & 9 deletions src/vs/editor/contrib/folding/browser/folding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

.monaco-editor .dirty-diff-glyph {
margin-left: 5px;
z-index: 5;
}

.monaco-editor .dirty-diff-glyph:before {
Expand All @@ -14,6 +13,7 @@
height: 100%;
width: 0;
left: -2px;
z-index: 5;
}

.monaco-workbench:not(.reduce-motion) .monaco-editor .dirty-diff-glyph:before {
Expand Down
15 changes: 3 additions & 12 deletions src/vs/workbench/contrib/scm/browser/quickDiffWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,13 +493,13 @@ export class QuickDiffEditorController extends Disposable implements IEditorCont
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;
Expand Down Expand Up @@ -654,16 +654,7 @@ export class QuickDiffEditorController extends Disposable implements IEditorCont
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;
}

Expand Down