Fix dialogs UI scalability (#1311)

* make dialogs scroll when scaling up the UI

* add unit of measure to settings step input

* wrap settings dialog items when scaling up the UI

* fix dialogs width when scaling up the UI

* rework board config UI to make it scale up better

* refactor ide updater dialog: move buttons outside the dialog content

* refactor ide updater dialog: clean-up code and rename events

* fix board config dialog title case and and remove double ellipsis
This commit is contained in:
Alberto Iannaccone
2022-08-18 16:42:16 +02:00
committed by GitHub
parent 79ea0fa9a6
commit de32bddc20
20 changed files with 378 additions and 301 deletions

View File

@@ -1,4 +1,4 @@
.ide-updater-dialog {
#ide-updater-dialog-container > .dialogBlock {
width: 546px;
}
@@ -10,6 +10,10 @@
display: flex;
}
.ide-updater-dialog--downloading {
flex: 1;
}
.ide-updater-dialog--logo-container {
margin-right: 28px;
}
@@ -23,37 +27,49 @@
.dialogContent.ide-updater-dialog
.ide-updater-dialog--content
.ide-updater-dialog--new-version-text.dialogSection {
display: flex;
flex: 1;
flex-direction: column;
margin-top: 0;
min-width: 0;
}
.ide-updater-dialog .changelog-container {
.ide-updater-dialog .changelog {
color: var(--theia-editor-foreground);
background-color: var(--theia-editor-background);
border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px;
font-size: 12px;
height: 180px;
overflow: auto;
padding: 0 12px;
cursor: text;
}
.ide-updater-dialog .changelog-container a {
.dialogContent.ide-updater-dialog
.ide-updater-dialog--content
.ide-updater-dialog--new-version-text
.dialogRow.changelog-container {
align-items: flex-start;
border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px;
overflow: auto;
max-height: 180px;
}
.ide-updater-dialog .changelog a {
color: var(--theia-textLink-foreground);
}
.ide-updater-dialog .changelog-container a:hover {
.ide-updater-dialog .changelog a:hover {
text-decoration: underline;
cursor: pointer;
}
.ide-updater-dialog .changelog-container code {
.ide-updater-dialog .changelog code {
background: var(--theia-textBlockQuote-background);
border-radius: 2px;
padding: 0 2px;
}
.ide-updater-dialog .changelog-container a code {
.ide-updater-dialog .changelog a code {
color: var(--theia-textLink-foreground);
}
@@ -77,3 +93,14 @@
.ide-updater-dialog .buttons-container .push {
margin-right: auto;
}
.ide-updater-dialog--content {
max-height: 100%;
overflow: hidden;
display: flex;
}
#ide-updater-dialog-container .skip-version-button {
margin-left: 79px;
margin-right: auto;
}