Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-29 11:46:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix vertical scrolling (fixes #18858)

Browse Source
This commit is contained in:
Christof Marti
2017-01-26 12:16:39 -08:00
parent 365869ce49
commit e6a82d5ffb
3 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/parts/walkThrough/electron-browser/walkThroughPart.ts
+15 -7
View File
@@ -64,6 +64,7 @@ export class WalkThroughPart extends BaseEditor {
private content: HTMLDivElement;
private scrollbar: DomScrollableElement;
private editorFocus: IContextKey<boolean>;
private size: Dimension;
constructor(
@ITelemetryService telemetryService: ITelemetryService,
@@ -170,13 +171,10 @@ export class WalkThroughPart extends BaseEditor {
return uri.with({ query: JSON.stringify(query) });
}
layout({ width, height }: Dimension): void {
$(this.content).style({ height: `${height}px`, width: `${width}px` });
const innerContent = this.content.firstElementChild;
if (innerContent) {
const classList = innerContent.classList;
classList[height <= 690 ? 'add' : 'remove']('max-height-690px');
}
layout(size: Dimension): void {
this.size = size;
$(this.content).style({ height: `${size.height}px`, width: `${size.width}px` });
this.updateSizeClasses();
this.contentDisposables.forEach(disposable => {
if (disposable instanceof CodeEditor) {
disposable.layout();
@@ -185,6 +183,14 @@ export class WalkThroughPart extends BaseEditor {
this.scrollbar.scanDomNode();
}
private updateSizeClasses() {
const innerContent = this.content.firstElementChild;
if (this.size && innerContent) {
const classList = innerContent.classList;
classList[this.size.height <= 690 ? 'add' : 'remove']('max-height-690px');
}
}
focus(): void {
let active = document.activeElement;
while (active && active !== this.content) {
@@ -240,6 +246,7 @@ export class WalkThroughPart extends BaseEditor {
const content = model.main.textEditorModel.getLinesContent().join('\n');
if (strings.endsWith(input.getResource().path, '.html')) {
this.content.innerHTML = content;
this.updateSizeClasses();
this.decorateContent();
if (input.onReady) {
input.onReady(this.content.firstElementChild as HTMLElement);
@@ -316,6 +323,7 @@ export class WalkThroughPart extends BaseEditor {
});
}));
});
this.updateSizeClasses();
if (input.onReady) {
input.onReady(innerContent);
}
src/vs/workbench/parts/welcomePage/electron-browser/welcomePage.css
+9 -5
View File
@@ -3,11 +3,15 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench > .part.editor > .content .welcomePageContainer {
align-items: center;
display: flex;
justify-content: center;
min-width: 100%;
min-height: 100%;
}
.monaco-workbench > .part.editor > .content .welcomePage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1200px;
font-size: 10px;
@@ -241,7 +245,7 @@
outline-offset: -5px;
}
.monaco-workbench > .part.editor > .content .welcomePage.max-height-690px .title {
.monaco-workbench > .part.editor > .content .welcomePageContainer.max-height-690px .title {
display: none;
}
src/vs/workbench/parts/welcomePage/electron-browser/welcomePage.html
+45 -43
View File
@@ -1,47 +1,49 @@
<div class="welcomePage">
<div class="title">
<h1>Visual Studio Code</h1>
<p class="subtitle">Editing evolved</p>
</div>
<div class="row">
<div class="splash">
<div class="section start">
<h2>Start</h2>
<ul>
<li class="mac-only"><a href="command:workbench.action.files.openFileFolder">Open folder...</a></li>
<li class="windows-only linux-only"><a href="command:workbench.action.files.openFolder">Open folder...</a></li>
<li><a href="command:workbench.action.git.clone">Clone Git repository...</a></li>
</ul>
</div>
<div class="section recent">
<h2>Recent</h2>
<ul>
<!-- Filled programmatically -->
</ul>
</div>
<div class="section help">
<h2>Help</h2>
<ul>
<li><a href="command:workbench.action.openDocumentationUrl">Product documentation</a></li>
<li><a href="command:workbench.action.openIntroductoryVideosUrl">Introductory videos</a></li>
<li><a href="https://github.com/Microsoft/vscode">GitHub repository</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/vscode?sort=votes?pageSize=50">Stack Overflow</a></li>
<!-- TODO: Use commands -->
</ul>
</div>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">Show welcome page on startup</label></p>
<div class="welcomePageContainer">
<div class="welcomePage">
<div class="title">
<h1>Visual Studio Code</h1>
<p class="subtitle">Editing evolved</p>
</div>
<div class="commands">
<h2>Quick links</h2>
<ul>
<li><button data-href="command:workbench.action.showInterfaceOverview"><h3>Interface overview</h3> <span>Get a visual overlay highlighting the major components of the UI</span></button></li>
<li><button data-href="command:workbench.action.selectTheme"><h3>Color theme</h3> <span>Make the editor and your code look the way you love</span></button></li>
<li><button data-href="command:workbench.action.keybindingsReference"><h3>Keyboard shortcuts</h3> <span>A printable PDF with the most common keyboard shortcuts</span></button></li>
<li><button data-href="command:workbench.action.showCommands"><h3>Show all commands</h3> <span>Rapidly access and search commands from the control panel (<span class="shortcut" data-command="workbench.action.showCommands"></span>)</span></button></li>
<li><button data-href="command:workbench.action.openGlobalSettings"><h3>Configure settings</h3> <span>Unlock the full power of VS Code by tweaking the settings</span></button></li>
<li><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>Change Default Keyboard Shortcuts</h3> <span>Install an extension to adopt the keyboard shortcuts from another tool</span></button></li>
<li><button data-href="command:workbench.action.showInteractivePlayground"><h3>Interactive playground</h3> <span>Try essential editor features out in a short walkthrough</span></button></li>
</ul>
<div class="row">
<div class="splash">
<div class="section start">
<h2>Start</h2>
<ul>
<li class="mac-only"><a href="command:workbench.action.files.openFileFolder">Open folder...</a></li>
<li class="windows-only linux-only"><a href="command:workbench.action.files.openFolder">Open folder...</a></li>
<li><a href="command:workbench.action.git.clone">Clone Git repository...</a></li>
</ul>
</div>
<div class="section recent">
<h2>Recent</h2>
<ul>
<!-- Filled programmatically -->
</ul>
</div>
<div class="section help">
<h2>Help</h2>
<ul>
<li><a href="command:workbench.action.openDocumentationUrl">Product documentation</a></li>
<li><a href="command:workbench.action.openIntroductoryVideosUrl">Introductory videos</a></li>
<li><a href="https://github.com/Microsoft/vscode">GitHub repository</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/vscode?sort=votes?pageSize=50">Stack Overflow</a></li>
<!-- TODO: Use commands -->
</ul>
</div>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">Show welcome page on startup</label></p>
</div>
<div class="commands">
<h2>Quick links</h2>
<ul>
<li><button data-href="command:workbench.action.showInterfaceOverview"><h3>Interface overview</h3> <span>Get a visual overlay highlighting the major components of the UI</span></button></li>
<li><button data-href="command:workbench.action.selectTheme"><h3>Color theme</h3> <span>Make the editor and your code look the way you love</span></button></li>
<li><button data-href="command:workbench.action.keybindingsReference"><h3>Keyboard shortcuts</h3> <span>A printable PDF with the most common keyboard shortcuts</span></button></li>
<li><button data-href="command:workbench.action.showCommands"><h3>Show all commands</h3> <span>Rapidly access and search commands from the control panel (<span class="shortcut" data-command="workbench.action.showCommands"></span>)</span></button></li>
<li><button data-href="command:workbench.action.openGlobalSettings"><h3>Configure settings</h3> <span>Unlock the full power of VS Code by tweaking the settings</span></button></li>
<li><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>Change Default Keyboard Shortcuts</h3> <span>Install an extension to adopt the keyboard shortcuts from another tool</span></button></li>
<li><button data-href="command:workbench.action.showInteractivePlayground"><h3>Interactive playground</h3> <span>Try essential editor features out in a short walkthrough</span></button></li>
</ul>
</div>
</div>
</div>
</div>