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).
This commit is contained in:
Asher 2019-03-11 11:29:24 -05:00
parent 03c0bde3a9
commit 8aff206538
No known key found for this signature in database
GPG Key ID: 7BB4BA9C783D2BBC
4 changed files with 18 additions and 20 deletions

View File

@ -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 {

View File

@ -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<IDialogAction>();
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();

View File

@ -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;

View File

@ -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 => {