Skip to content

Adjust line number styles to line up with VSCode #8322

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

Merged
merged 2 commits into from
Oct 31, 2019
Merged

Adjust line number styles to line up with VSCode #8322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d96c8a5
Adjust line number styles to line up with VSCode
DonJayamanne Oct 31, 2019
3e23df0
Address code review comments
DonJayamanne Oct 31, 2019
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
1 change: 1 addition & 0 deletions news/1 Enhancements/8289.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Style adjustments to line numbers (color and width) in the `Native Editor`, to line up with VS Code styles.
Copy link

Choose a reason for hiding this comment

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

line [](start = 79, length = 4)

Didn't @ronglums want lines on by default? Or is that another change?

2 changes: 1 addition & 1 deletion src/datascience-ui/interactive-common/mainStateController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -913,7 +913,7 @@ export class MainStateController implements IMessageHandler {
}

// tslint:disable:no-any
private computeEditorOptions(): monacoEditor.editor.IEditorOptions {
protected computeEditorOptions(): monacoEditor.editor.IEditorOptions {
const intellisenseOptions = getSettings().intellisenseOptions;
const extraSettings = getSettings().extraSettings;
if (intellisenseOptions && extraSettings) {
Expand Down
13 changes: 13 additions & 0 deletions src/datascience-ui/native-editor/nativeEditorStateController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,4 +306,17 @@ export class NativeEditorStateController extends MainStateController {
}
}
}

/**
* Custom editor settings for Native editor.
*
* @protected
* @returns
* @memberof NativeEditorStateController
*/
protected computeEditorOptions() {
const options = super.computeEditorOptions();
options.lineDecorationsWidth = 5;
return options;
}
}
18 changes: 1 addition & 17 deletions src/datascience-ui/react-common/monacoEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,26 +107,10 @@
padding-right: 4px;
}

.monaco-editor .current-line ~ .line-numbers {
color: var(--override-foreground, var(--vscode-editor-foreground)) !important;
}
.monaco-editor .line-numbers {
color: var(--override-foreground, var(--vscode-editor-foreground)) !important;
}
Copy link

Choose a reason for hiding this comment

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

What happens when you pick a weirdo theme? This might be using the base theme to pick the line number colors.

Copy link

Choose a reason for hiding this comment

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

Meaning the colors work fine for the base light and dark, but might not work for say One Plus or some other custom theme.

Copy link
Author

Choose a reason for hiding this comment

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

I have installed and tested against around 20 different themes and it works as expected.
Please could you let me know which one doews'nt work.
RIght now, when I look at the webviews, VS Code is genearting these styles for us. So I don't see the need for us to generate them ourselves (hence the reason to remove them).

Copy link

Choose a reason for hiding this comment

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

No I didn't mean to say it wasn't working for me, just wanted to make sure you double check other themes.

Copy link
Author

Choose a reason for hiding this comment

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

Double and triple checked.


.monaco-editor .margin {
background-color: transparent !important;
}

.monaco-editor .margin-view-overlays-border-on {
margin-right: 1px;
padding-right: 1px;
background-color: transparent !important;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
}

.monaco-editor .parameter-hints-widget > .wrapper {
overflow: hidden;
}
}