OCram85/code-server
Archived
1
0
Fork 0
Code Pull Requests 2 Activity

Fix some dialog styling issues

Browse Source 
- 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
4 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ide/src/fill/dialog.scss
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 {

21
packages/ide/src/fill/dialog.ts
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();