mirror of https://git.tuxpa.in/a/code-server.git
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:
parent
03c0bde3a9
commit
8aff206538
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in New Issue