apply material design ; make whole dialog draggable

This commit is contained in:
GotPPay
2018-05-23 20:08:52 +02:00
parent 091055eab0
commit aaed238946
5 changed files with 31 additions and 18 deletions

View File

@@ -51,13 +51,17 @@ a {
border-radius: 3px;
padding: 0.5em;
height: 35px;
border-bottom: 1px solid #f6f6f6;
/*border-bottom: 1px solid #f6f6f6;*/
}
.ui-dialog.react-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-dialog.react-draggable .ui-dialog-content {
cursor: move;
}
.ui-dialog .ui-dialog-titlebar .action-items {
float: right;
position: relative;
@@ -66,8 +70,11 @@ a {
.ui-dialog .ui-dialog-titlebar .title {
float: left;
margin-right: .5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 1.3125em;
font-weight: 500;
line-height: 0.2em;
padding : 24px 0px 0px 19px;
}
.icon {
@@ -103,7 +110,12 @@ a {
border: 0 none;
overflow: auto;
position: relative;
padding: 0.5em;
font-size: 1rem;
font-weight: 400;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 1.5em;
color:rgba(0, 0, 0, 0.54);
padding : 24px 24px 24px 24px;
}
.ui-dialog .ui-dialog-buttonpane {
@@ -112,7 +124,7 @@ a {
bottom: 0;
text-align: right;
border-width: 1px 0 0 0;
border-top: 1px solid #f6f6f6;
/*border-top: 1px solid #f6f6f6;*/
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{

View File

@@ -111,7 +111,7 @@ class Dialog extends React.Component {
if (!isMinimized && !isMaximized && isDraggable !== false) {
dialog = (
<Draggable handle=".ui-dialog-titlebar" bounds="body" defaultPosition={{ x, y }}>
<Draggable handle=".ui-dialog" bounds="body" defaultPosition={{ x, y }}>
{dialog}
</Draggable>
);
@@ -153,8 +153,8 @@ Dialog.propTypes = {
};
Dialog.defaultProps = {
height: 300,
width: 500,
height: 200,
width: 600,
modal: false,
closeOnEscape: true,
isDraggable: false,