From 8aff206538199b328c242f914f2938d9d6bcf712 Mon Sep 17 00:00:00 2001 From: Asher Date: Mon, 11 Mar 2019 11:29:24 -0500 Subject: [PATCH] Fix some dialog styling issues - Fix black text caused by 1.32.0 upgrade. - Fix various alignment and padding issues (a few elements with more space below than above). --- packages/ide/src/fill/dialog.scss | 6 +++--- packages/ide/src/fill/dialog.ts | 21 +++++++++++---------- packages/vscode/src/dialog.scss | 9 +++------ packages/vscode/src/dialog.ts | 2 +- 4 files changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss index 7f54c583a..ca5dc53b5 100644 --- a/packages/ide/src/fill/dialog.scss +++ b/packages/ide/src/fill/dialog.scss @@ -19,7 +19,6 @@ background: #141414; border: none; box-sizing: border-box; - margin-bottom: 25px; padding: 10px; width: 100%; } @@ -31,11 +30,11 @@ .msgbox > .detail { font-size: 14px; - margin-top: 5px; + margin: 5px 0; } .msgbox > .errors { - margin-bottom: 25px; + margin-top: 20px; } .msgbox > .errors { @@ -46,6 +45,7 @@ display: flex; flex-direction: row; justify-content: space-between; + margin-top: 20px; } .msgbox > .button-wrapper > button { diff --git a/packages/ide/src/fill/dialog.ts b/packages/ide/src/fill/dialog.ts index 1f6dd7e7b..afec23665 100644 --- a/packages/ide/src/fill/dialog.ts +++ b/packages/ide/src/fill/dialog.ts @@ -31,30 +31,31 @@ export class Dialog { private input: HTMLInputElement | undefined; private errors: HTMLElement; private buttons: HTMLElement[] | undefined; + private readonly msgBox: HTMLElement; private actionEmitter = new Emitter(); public onAction = this.actionEmitter.event; public constructor(private readonly options: IDialogOptions) { - const msgBox = document.createElement("div"); - msgBox.classList.add("msgbox"); + this.msgBox = document.createElement("div"); + this.msgBox.classList.add("msgbox"); if (this.options.message) { const messageDiv = document.createElement("div"); messageDiv.classList.add("msg"); messageDiv.innerText = this.options.message; - msgBox.appendChild(messageDiv); + this.msgBox.appendChild(messageDiv); } if (this.options.detail) { const detailDiv = document.createElement("div"); detailDiv.classList.add("detail"); detailDiv.innerText = this.options.detail; - msgBox.appendChild(detailDiv); + this.msgBox.appendChild(detailDiv); } if (this.options.input) { - msgBox.classList.add("input"); + this.msgBox.classList.add("input"); this.input = document.createElement("input"); this.input.classList.add("input"); this.input.value = this.options.input.value; @@ -67,12 +68,11 @@ export class Dialog { }); } }); - msgBox.appendChild(this.input); + this.msgBox.appendChild(this.input); } this.errors = document.createElement("div"); this.errors.classList.add("errors"); - msgBox.appendChild(this.errors); if (this.options.buttons && this.options.buttons.length > 0) { this.buttons = this.options.buttons.map((buttonText, buttonIndex) => { @@ -92,12 +92,12 @@ export class Dialog { const buttonWrapper = document.createElement("div"); buttonWrapper.classList.add("button-wrapper"); this.buttons.forEach((b) => buttonWrapper.appendChild(b)); - msgBox.appendChild(buttonWrapper); + this.msgBox.appendChild(buttonWrapper); } this.overlay = document.createElement("div"); this.overlay.className = "msgbox-overlay"; - this.overlay.appendChild(msgBox); + this.overlay.appendChild(this.msgBox); setTimeout(() => { this.overlay.style.opacity = "1"; @@ -122,6 +122,7 @@ export class Dialog { const errorDiv = document.createElement("error"); errorDiv.innerText = error; this.errors.appendChild(errorDiv); + this.msgBox.appendChild(this.errors); } } @@ -131,7 +132,7 @@ export class Dialog { public show(): void { if (!this.cachedActiveElement) { this.cachedActiveElement = document.activeElement as HTMLElement; - document.body.appendChild(this.overlay); + (document.getElementById("workbench.main.container") || document.body).appendChild(this.overlay); document.addEventListener("keydown", this.onKeydown); if (this.input) { this.input.focus(); diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss index 46238d9b1..356270128 100644 --- a/packages/vscode/src/dialog.scss +++ b/packages/vscode/src/dialog.scss @@ -28,17 +28,14 @@ font-weight: normal; text-transform: uppercase; white-space: nowrap; - padding-left: 10px; + padding: 5px 10px; } .nav { display: flex; flex-direction: row; padding: 4px; - padding-top: 8px; - padding-bottom: 8px; border-bottom: 1px solid var(--border); - min-height: 32px; } .path { @@ -48,7 +45,7 @@ .path-part { padding: 5px; border-radius: 3px; - font-size: 1.2em; + font-size: 1.02em; cursor: pointer; &:not(:first-child) { @@ -80,7 +77,7 @@ .dialog-entry { cursor: pointer; - font-size: 1.2em; + font-size: 1.02em; padding: 0px; padding-left: 8px; padding-right: 8px; diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts index 1f7f51643..e7788e122 100644 --- a/packages/vscode/src/dialog.ts +++ b/packages/vscode/src/dialog.ts @@ -110,7 +110,7 @@ class Dialog { this.root.style.width = "850px"; this.root.style.height = "600px"; this.background.appendChild(this.root); - document.body.appendChild(this.background); + (document.getElementById("workbench.main.container") || document.body).appendChild(this.background); this.root.classList.add("dialog"); const setProperty = (vari: string, id: string): void => {