Fixed #1202 - Add FocusTrap support to Dialog

primefaces · Feb 25, 2020 · 9e97e65 · 9e97e65
1 parent eae1266
commit 9e97e65
Show file tree

Hide file tree

Showing 2 changed files with 218 additions and 114 deletions.
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
@@ -1,4 +1,4 @@
-.p-dialog-wrapper {
+.p-dialog-mask {
     position: fixed;
     top: 0;
     left: 0;
@@ -7,27 +7,29 @@
     display: none;
     pointer-events: none;
 }
-.p-dialog-wrapper-visible {
+
+.p-dialog-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-dialog-mask.p-dialog-visible {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.p-dialog-wrapper.p-dialog-mask {
-    pointer-events: auto;
-}
 .p-dialog {
     display: flex;
     flex-direction: column;
     padding: 0;
     pointer-events: auto;
     max-height: 90%;
-    margin: 5% auto;
 }
 .p-dialog .p-dialog-titlebar {
-	padding: .5em .75em;
+    padding: .5em .75em;
     position: relative;
     border: 0;
+    flex-shrink: 0;
 }
 .p-dialog .p-dialog-content {
     position: relative;
@@ -69,22 +71,19 @@
     vertical-align: middle;
     border: 1px solid transparent;
 }
-
 .p-dialog .p-dialog-titlebar-icon span {
     display: block;
     margin: 0;
 }
 .p-dialog-footer {
     padding: 1em;
-    border-width: 1px 0 0 0;
     text-align: right;
+    flex-shrink: 0;
 }
-
 /* ConfirmDialog */
 .p-confirmdialog {
     width: 30em;
 }
-
 .p-confirmdialog.p-dialog .p-dialog-content {
     padding: 1em 2em;
 }
@@ -96,28 +95,24 @@
 .p-confirmdialog .p-dialog-content .p-confirmdialog-message {
     vertical-align: middle;
 }
-
 /* Fluid */
 .p-fluid .p-dialog-footer .p-button {
     width: auto;
 }
-
 /* RTL */
 .p-rtl .p-dialog .p-dialog-titlebar-close  {
     float: left;
 }
-
 .p-rtl .p-dialog .p-dialog-footer {
     text-align: left;
 }
-
 @media screen and (max-width: 40em) {
     .p-confirmdialog {
         width: 90%;
     }
 }
-
 /* Animation */
+/* Center */
 .p-dialog-enter {
     opacity: 0;
     transform: scale(0.7);
@@ -135,24 +130,108 @@
 
 .p-dialog-exit {
     opacity: 1;
+    transform: scale(1);
 }
 
 .p-dialog-exit-active {
     opacity: 0;
-    transition: all 75ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    transform: scale(0.7);
+    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: .75em;
+    transform: translate3d(0px, 0px, 0px);
+}
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    transition: all .3s ease-out;
+}
+.p-dialog-top .p-dialog-enter,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+.p-dialog-bottom .p-dialog-enter,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+.p-dialog-left .p-dialog-enter,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+.p-dialog-right .p-dialog-enter,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
 /* Maximize */
 .p-dialog-maximized {
     -webkit-transition: none;
     transition: none;
     transform: none;
     width: 100vw !important;
     max-height: 100%;
-    margin: auto;
+    height: 100%;
 }
-
 .p-dialog-maximized .p-dialog-content {
-    -webkit-transition: height .3s;
-    transition: height .3s;
+    flex-grow: 1;
+}
+
+/* Position */
+.p-dialog-left {
+    justify-content: flex-start;
+}
+.p-dialog-right {
+    justify-content: flex-end;
+}
+.p-dialog-top {
+    align-items: flex-start;
+}
+.p-dialog-topleft {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.p-dialog-topright {
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+.p-dialog-bottom {
+    align-items: flex-end;
+}
+.p-dialog-bottomleft {
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+.p-dialog-bottomright {
+    justify-content: flex-end;
+    align-items: flex-end;
 }