ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-10 10:12:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

Wizard message UI improvement (#2971)

Browse Source 
* improve the wizard message experience - WIP

* undo gitignorechanges

* fix expand button issue

* fix the cursor issue

* use flex to control height

* toggle message detail support

* apply style

* new images

* use template string

* address comments
This commit is contained in:
Alan Ren
2018-10-22 23:53:28 -07:00
committed by GitHub
parent 29cc57f52a
commit 82486ee22e
38 changed files with 339 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/sql/base/browser/ui/modal/media/modal.css
View File

@@ -50,6 +50,8 @@
.monaco-shell .modal.flyout-dialog .modal-content {
height: 100%;
font-size: 11px;
display: flex;
flex-direction: column;
}
.modal .modal-title {
@@ -63,13 +65,10 @@
margin-right: 10px;
}
.monaco-shell .modal.flyout-dialog .modal-body {
height: calc(100% - 105px);
}
/* modal body for angular component dialog */
.monaco-shell .modal.flyout-dialog .modal-body,
.monaco-shell .modal.flyout-dialog .angular-modal-body {
height: calc(100% - 90px);
margin-bottom: auto;
height: 100%;
}
/* Style for body and footer in modal dialog. This should be applied to dialog created with angular component. */
@@ -128,13 +127,6 @@
border: 1px solid transparent;
}
.modal.flyout-dialog .dialogErrorMessage {
overflow: hidden;
padding-left: 10px;
overflow-y: auto;
display: flex;
}
.modal .modal-footer {
display: flex;
}
@@ -167,27 +159,122 @@
margin-right: none;
}
.modal.flyout-dialog .icon.error {
float: left;
margin-right: 10px;
width: 20px;
height: 20px;
.modal.flyout-dialog .dialog-message {
padding: 6px 10px 10px 10px;
font-size: 13px;
display: flex;
flex-direction: column;
}
.modal .modal-footer .dialogErrorMessage {
align-items: center;
max-height: 30px;
margin-right: 5px;
.modal.flyout-dialog .dialog-message.error {
background-color:#B62E00 !important;
color:#FFFFFF !important;
}
.modal .dialogErrorMessage .icon {
float: left;
margin-right: 10px;
width: auto;
height: 20px;
.modal.flyout-dialog .dialog-message.warning {
background-color:#F9E385 !important;
color:#4A4A4A !important;
}
.modal .modal-footer .dialogErrorMessage .errorMessage {
max-height: 100%;
.modal.flyout-dialog .dialog-message.info {
background-color:#0078D7 !important;
color:#FFFFFF !important;
}
.modal.flyout-dialog .dialog-message-header {
overflow: hidden;
overflow-y: hidden;
display: flex;
flex-direction: row;
}
.modal.flyout-dialog .dialog-message-body {
margin-left: 26px;
overflow-y: scroll;
overflow-x: hidden;
max-height: 90px;
display: flex;
flex-direction: column;
}
.modal.flyout-dialog .dialog-message-icon {
margin-right: 10px;
margin-top: 5px;
width: 16px;
height: 16px;
min-width: 16px;
}
.modal.flyout-dialog .dialog-message-severity {
margin-right: auto;
line-height: 26px;
}
.modal.flyout-dialog .dialog-message-button {
min-width: 60px;
margin-right: 10px;
}
.modal.flyout-dialog .dialog-message-button > a {
background-position-x: 2px !important;
background-color: inherit !important;
color:inherit !important;
padding-left: 22px !important;
background-size: 16px 16px !important;
text-align: left !important;
}
.modal.flyout-dialog .dialog-message-summary {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal.flyout-dialog .dialog-message-summary.expanded {
white-space: normal;
overflow-x: unset;
}
.modal.flyout-dialog .dialog-message-detail {
margin-top: 5px;
white-space: normal;
-webkit-user-select: text;
font-size: 11px;
}
.close-message-icon {
background: url('close_inverse.svg') center center no-repeat;
}
.dialog-message.warning .close-message-icon {
background: url('close.svg') center center no-repeat;
}
.copy-message-icon {
background: url('copy_inverse.svg') center center no-repeat;
}
.dialog-message.warning .copy-message-icon {
background: url('copy.svg') center center no-repeat;
}
.message-details-icon {
background: url('show_details_inverse.svg') center center no-repeat;
}
.dialog-message.warning .message-details-icon {
background: url('show_details.svg') center center no-repeat;
}
.dialog-message.info .dialog-message-icon {
background: url('info_notification_inverse.svg') center center no-repeat;
}
.dialog-message.warning .dialog-message-icon {
background: url('warning_notification.svg') center center no-repeat;
}
.dialog-message.error .dialog-message-icon {
background: url('error_notification_inverse.svg') center center no-repeat;
}