adjust css to pin toolbar (#11894)

This commit is contained in:
Laura Jiang
2020-08-20 17:11:53 -07:00
committed by GitHub
parent b2a1738836
commit 84d21b1e76
4 changed files with 9 additions and 2 deletions

View File

@@ -4,6 +4,7 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
cell-toolbar-component { cell-toolbar-component {
z-index: 2;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
position: absolute; position: absolute;

View File

@@ -4,7 +4,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
--> -->
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false"> <div style="width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false">
<markdown-toolbar-component #markdownToolbar *ngIf="previewFeaturesEnabled === true && isEditMode" [cellModel]="cellModel"></markdown-toolbar-component> <markdown-toolbar-component #markdownToolbar *ngIf="previewFeaturesEnabled === true && isEditMode" [cellModel]="cellModel"></markdown-toolbar-component>
<div class="notebook-text" [class.edit-mode]="isEditMode" [class.show-preview]="showPreview"> <div class="notebook-text" [class.edit-mode]="isEditMode" [class.show-preview]="showPreview">
<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId"> <code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId">

View File

@@ -19,6 +19,7 @@ text-cell-component .notebook-preview {
user-select: none; user-select: none;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
overflow: hidden;
} }
text-cell-component .edit-mode code-component { text-cell-component .edit-mode code-component {
display: block; display: block;

View File

@@ -183,7 +183,12 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
// Markdown editor toolbar // Markdown editor toolbar
const toolbarBackgroundColor = theme.getColor(toolbarBackground); const toolbarBackgroundColor = theme.getColor(toolbarBackground);
if (toolbarBackgroundColor) { if (toolbarBackgroundColor) {
collector.addRule(`markdown-toolbar-component { background: ${toolbarBackgroundColor};}`); collector.addRule(`markdown-toolbar-component {
background: ${toolbarBackgroundColor};
position: sticky;
top: -16px;
z-index: 1;
}`);
} }
const toolbarIconColor = theme.getColor(toolbarIcon); const toolbarIconColor = theme.getColor(toolbarIcon);
if (toolbarIconColor) { if (toolbarIconColor) {