[file-dialog] fix scaling issue for the file and save dialogs

[vince-fugnitto]

Fixes #1935

• added the theia-ResponsiveFileDialog class so extenders can easily use the class to get the default styling of the file-dialog and its responsive media query.

Our file-dialog and save-dialog have scaling issues when the screen's viewport is limited. Since our dialogs are not implemented using React (which would handle scaling much easier), the problem was addressed using css media queries. This means that when the view becomes limited at 700px, the size of the file-tree is reduced allowing the entire dialog to more easily visible and the
actions buttons still accessible.

Before, the buttons were not visible which meant the useability
of the dialog was reduced.

height > 700px	height < 700px

Signed-off-by: Vincent Fugnitto [email protected]

[kittaakos]

Ohh, finally <3

[kittaakos]

It works like a charm. Very nice! 👍

Would it be possible to generalize the following classes:

.dialogContent .theia-FileDialog,
.dialogContent .theia-SaveFileDialog {
    width: 500px;
}

.dialogContent .theia-FileDialog {
    height: 500px;
    background-color: var(--theia-layout-color0);
}

.dialogContent .theia-SaveFileDialog {
    height: 450px;
}

And have the same height and background-color for both the open file and save file dialogs. Generalize your changes a bit too. So when we add a third dialog later, we do not have to apply

@media only screen and (max-height: 700px) {
    .dialogContent .theia-MyThirdDialog {
        height: 300px;
     }
}

If it is not possible, or does not worth the effort, let's merge your changes as is. It is already a great improvement.

[vince-fugnitto]

If it is not possible, or does not worth the effort, let's merge your changes as is. It is already a great improvement.

Sure, I can make the updates and improvements you suggested, glad you think its an improvement already :)

[vince-fugnitto]

@kittaakos I added a new class extenders can use theia-ResponsiveFileDialog which will give them access to the default styling of our file and save dialogs along with the responsiveness of the media query. Please let me know if it's what you had in mind :)

[kittaakos]

It works nicely. 👍