Markdown toolbar > Preview toggle feature (#10963)

* Added toggle preview button to Markdown toolbar. Revised components, theme and styles to present the preview as a second column beside the markdown.

* Added showPreview to model and began working on togglePreview.

* Uncommented use of cellModel.showPreview

* add cell model event for onPreviewChange

* Renamed my showPreview boolean to prevent confusion with local boolean used in toogglePreview.

* Added CSS class when preview is enabled. Adjusted styles accordingly.

* Swapped icon show/hide references for correct sequence. Modified updatePreview to include state of doShowPreview.

* Added check for isEditMode so we can run togglePreview and show it once editor closes.

* Added listener to code.component that triggers layoutEmitter on changes to peview.

* Renamed local boolean doShowPreview. Removed unneeded code. Fixed ambiguity in my use of booleans, adding a getter and setter to textCell.

* Cleaned up implementation of new get/set for toggling preview.

Co-authored-by: chlafreniere <hichise@gmail.com>
This commit is contained in:
Hale Rankin
2020-06-26 13:47:17 -07:00
committed by GitHub
parent 00fe535add
commit 7ef8acf04e
11 changed files with 130 additions and 35 deletions

View File

@@ -8,7 +8,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/
import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground } from 'vs/platform/theme/common/colorRegistry';
import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, splitBorder, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground } from 'sql/platform/theme/common/colorRegistry';
import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder } from 'sql/platform/theme/common/colorRegistry';
import { IDisposable } from 'vs/base/common/lifecycle';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor';
@@ -201,7 +201,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
}
const splitBorderColor = theme.getColor(splitBorder);
if (splitBorderColor) {
collector.addRule(`.notebookEditor .notebook-cell.active text-cell-component code-component { border-bottom-color: ${splitBorderColor}; }`);
collector.addRule(`.notebookEditor .notebook-cell.active text-cell-component .notebook-preview { border-left-color: ${splitBorderColor}; }`);
}
// Code editor colors