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

@@ -3,8 +3,8 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { localize } from 'vs/nls';
import { Action } from 'vs/base/common/actions';
import { INotebookEditor, INotebookService } from 'sql/workbench/services/notebook/browser/notebookService';
import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
import { IRange } from 'vs/editor/common/core/range';
@@ -13,7 +13,7 @@ import { TextModel } from 'vs/editor/common/model/textModel';
import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
import { QueryTextEditor } from 'sql/workbench/browser/modelComponents/queryTextEditor';
import { Selection } from 'vs/editor/common/core/selection';
import { ToggleableAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
// Action to decorate markdown
@@ -390,3 +390,40 @@ export enum MarkdownLineType {
EVERY_LINE,
WRAPPED_ABOVE_AND_BELOW
}
export class TogglePreviewAction extends ToggleableAction {
private static readonly previewShowLabel = localize('previewShowLabel', "Show Preview");
private static readonly previewHideLabel = localize('previewHideLabel', "Hide Preview");
private static readonly baseClass = 'codicon';
private static readonly previewShowCssClass = 'split-toggle-on';
private static readonly previewHideCssClass = 'split-toggle-off';
private static readonly maskedIconClass = 'masked-icon';
constructor(
id: string, toggleTooltip: boolean, showPreview: boolean
) {
super(id, {
baseClass: TogglePreviewAction.baseClass,
toggleOffLabel: TogglePreviewAction.previewShowLabel,
toggleOffClass: TogglePreviewAction.previewShowCssClass,
toggleOnLabel: TogglePreviewAction.previewHideLabel,
toggleOnClass: TogglePreviewAction.previewHideCssClass,
maskedIconClass: TogglePreviewAction.maskedIconClass,
shouldToggleTooltip: toggleTooltip,
isOn: showPreview
});
}
public get previewMode(): boolean {
return this.state.isOn;
}
public set previewMode(value: boolean) {
this.toggle(value);
}
public async run(context: any): Promise<boolean> {
this.previewMode = !this.previewMode;
context.cellModel.showPreview = this.previewMode;
return true;
}
}