ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-30 17:23:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix markdown cell toolbar focus not being visible (#11386)

Browse Source 
* Markdown Toolbar focus fix

* Fixed sizing issues of icons

* Fixed spacing
This commit is contained in:
Vasu Bhog
2020-07-17 11:04:17 -05:00
committed by GitHub
parent da4f9152a3
commit 71fbe2ed53
4 changed files with 61 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
View File

@@ -51,16 +51,16 @@ export class MarkdownToolbarComponent {
}
private initActionBar() {
let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
let underlineButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.underlineText', '', 'underline', this.buttonUnderline, this.cellModel, MarkdownButtonType.UNDERLINE);
let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
let listButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.listText', '', 'list', this.buttonList, this.cellModel, MarkdownButtonType.UNORDERED_LIST);
let orderedListButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.orderedText', '', 'ordered-list', this.buttonOrderedList, this.cellModel, MarkdownButtonType.ORDERED_LIST);
let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
let togglePreviewAction = this._instantiationService.createInstance(TogglePreviewAction, 'notebook.togglePreview', true, this.cellModel.showPreview);
let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold masked-icon', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic masked-icon', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
let underlineButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.underlineText', '', 'underline masked-icon', this.buttonUnderline, this.cellModel, MarkdownButtonType.UNDERLINE);
let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight masked-icon', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code masked-icon', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link masked-icon', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
let listButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.listText', '', 'list masked-icon', this.buttonList, this.cellModel, MarkdownButtonType.UNORDERED_LIST);
let orderedListButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.orderedText', '', 'ordered-list masked-icon', this.buttonOrderedList, this.cellModel, MarkdownButtonType.ORDERED_LIST);
let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image masked-icon', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
let togglePreviewAction = this._instantiationService.createInstance(TogglePreviewAction, 'notebook.togglePreview masked-icon', true, this.cellModel.showPreview);
let headingDropdown = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading', '', 'heading', this.dropdownHeading, this.cellModel, null);
let heading1 = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading1', this.optionHeading1, 'heading 1', this.optionHeading1, this.cellModel, MarkdownButtonType.HEADING1);

44
src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
View File

@@ -52,56 +52,32 @@
position: absolute;
right: 0;
}
.markdown-toolbar .carbon-taskbar li a {
display: flex;
height: 20px;
width: 20px;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-repeat: no-repeat;
}
.markdown-toolbar li a.codicon.bold {
-webkit-mask-size: 50% 100%;
mask-size: 50% 100%;
.markdown-toolbar li a.codicon.masked-icon::before {
-webkit-mask-size: auto;
mask-size: auto;
}
.markdown-toolbar li a.codicon.italic {
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
}
.markdown-toolbar li a.codicon.highlight {
-webkit-mask-size: 65% 100%;
mask-size: 65% 100%;
}
.markdown-toolbar li a.codicon.code {
.markdown-toolbar li a.codicon.code::before {
-webkit-mask-size: 88% 100%;
mask-size: 88% 100%;
}
.markdown-toolbar li a.codicon.insert-link {
.markdown-toolbar li a.codicon.insert-link::before {
-webkit-mask-size: 80% 100%;
mask-size: 80% 100%;
}
.markdown-toolbar li a.codicon.list {
-webkit-mask-size: 80% 100%;
mask-size: 80% 100%;
}
.markdown-toolbar li a.codicon.ordered-list {
.markdown-toolbar li a.codicon.ordered-list::before {
-webkit-mask-size: 86% 100%;
mask-size: 86% 100%;
}
.markdown-toolbar li a.codicon.insertimage {
-webkit-mask-size: 86% 100%;
mask-size: 86% 100%;
}
.markdown-toolbar li a.codicon.split-toggle-on {
-webkit-mask-size: 75% 100%;
mask-size: 75% 100%;
}
.markdown-toolbar li a.codicon.split-toggle-off {
-webkit-mask-size: 75% 100%;
mask-size: 75% 100%;
}
text-cell-component .offscreen {
height: 1px;

2
src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
View File

@@ -187,7 +187,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
}
const toolbarIconColor = theme.getColor(toolbarIcon);
if (toolbarIconColor) {
collector.addRule(`.markdown-toolbar li a { background-color: ${toolbarIconColor};}`);
collector.addRule(`.markdown-toolbar li a:before { background-color: ${toolbarIconColor};}`);
}
const toolbarBottomBorderColor = theme.getColor(toolbarBottomBorder);
if (toolbarBottomBorderColor) {