Merge pull request #6170 from Semantic-Org/centered-modal

Centered modal

RELEASE-NOTES.md

@@ -2,7 +2,12 @@
 
 ### Version 2.3.0 - Feb 19, 2018
 
+**Major Enhancements**
+- **Modal** - Modal has been rewritten to use `flexbox`. No need to call `refresh()` to recalculate vertical centering.
+- **Modal** - Modals now have a setting `centered` which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position.
+
 **Enhancements**
+- **Dimmer** - Dimmers now have centered content with a single wrapping `content` element.
 - **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
 - **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/)
 

src/definitions/modules/dimmer.js

@@ -238,6 +238,7 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
+                  displayType : 'flex',
                   animation   : settings.transition + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -282,6 +283,7 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
+                  displayType : 'flex',
                   animation   : settings.transition + ' out',
                   queue       : false,
                   duration    : module.get.duration(),

src/definitions/modules/dimmer.less

@@ -36,6 +36,7 @@
 
   text-align: @textAlign;
   vertical-align: @verticalAlign;
+  padding: @padding;
 
   background-color: @backgroundColor;
   opacity: @hiddenOpacity;
@@ -45,6 +46,10 @@
   animation-duration: @duration;
   transition: @transition;
 
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
   user-select: none;
   will-change: opacity;
   z-index: @zIndex;
@@ -52,14 +57,7 @@
 
 /* Dimmer Content */
 .ui.dimmer > .content {
-  width: 100%;
-  height: 100%;
-  display: @contentDisplay;
   user-select: text;
-}
-.ui.dimmer > .content > * {
-  display: @contentChildDisplay;
-  vertical-align: @verticalAlign;
   color: @textColor;
 }
 
@@ -90,27 +88,42 @@
             States
 *******************************/
 
+/* Animating */
 .animating.dimmable:not(body),
 .dimmed.dimmable:not(body) {
   overflow: @overflow;
 }
 
+/* Animating / Active / Visible */
 .dimmed.dimmable > .ui.animating.dimmer,
 .dimmed.dimmable > .ui.visible.dimmer,
 .ui.active.dimmer {
-  display: block;
+  display: flex;
   opacity: @visibleOpacity;
 }
 
+/* Disabled */
 .ui.disabled.dimmer {
   width: 0 !important;
   height: 0 !important;
 }
 
+
 /*******************************
            Variations
 *******************************/
 
+/*--------------
+    Alignment
+---------------*/
+
+.ui[class*="top aligned"].dimmer {
+  justify-content: flex-start;
+}
+.ui[class*="bottom aligned"].dimmer {
+  justify-content: flex-end;
+}
+
 /*--------------
       Page
 ---------------*/

src/definitions/modules/modal.js

@@ -108,6 +108,10 @@ $.fn.modal = function(parameters) {
             var
               defaultSettings = {
                 debug      : settings.debug,
+                variation  : settings.centered
+                  ? ''
+                  : 'top aligned'
+                ,
                 dimmerName : 'modals'
               },
               dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -165,7 +169,6 @@ $.fn.modal = function(parameters) {
           module.cacheSizes();
           module.set.screenHeight();
           module.set.type();
-          module.set.position();
         },
 
         refreshModals: function() {
@@ -320,7 +323,6 @@ $.fn.modal = function(parameters) {
 
             module.showDimmer();
             module.cacheSizes();
-            module.set.position();
             module.set.screenHeight();
             module.set.type();
             module.set.clickaway();
@@ -629,6 +631,10 @@ $.fn.modal = function(parameters) {
                 dimmerName : 'modals',
                 variation  : false,
                 closable   : 'auto',
+                variation  : settings.centered
+                  ? ''
+                  : 'top aligned'
+                ,
                 duration   : {
                   show     : settings.duration,
                   hide     : settings.duration
@@ -684,25 +690,6 @@ $.fn.modal = function(parameters) {
               module.set.scrolling();
             }
           },
-          position: function() {
-            module.verbose('Centering modal on page', module.cache);
-            if(module.can.fit()) {
-              $module
-                .css({
-                  top: '',
-                  marginTop: module.cache.topOffset
-                })
-              ;
-            }
-            else {
-              $module
-                .css({
-                  marginTop : '',
-                  top       : $document.scrollTop()
-                })
-              ;
-            }
-          },
           undetached: function() {
             $dimmable.addClass(className.undetached);
           }
@@ -911,6 +898,8 @@ $.fn.modal.settings = {
   inverted       : false,
   blurring       : false,
 
+  centered       : true,
+
   dimmerSettings : {
     closable : false,
     useCSS   : true

src/definitions/modules/modal.less

@@ -24,11 +24,7 @@
 
 .ui.modal {
   display: none;
-  position: fixed;
   z-index: @zIndex;
-
-  top: 50%;
-  left: 50%;
   text-align: left;
 
   background: @background;
@@ -337,14 +333,26 @@
            Variations
 *******************************/
 
+/*--------------
+   Top Aligned
+---------------*/
+
+/* Top Aligned Modal */
+.modals.dimmer[class*="top aligned"] .modal {
+  margin: @topAlignedMargin auto;
+}
+
 /*--------------
     Scrolling
 ---------------*/
 
-/* A modal that cannot fit on the page */
+/* Scrolling Dimmer */
 .scrolling.dimmable.dimmed {
   overflow: hidden;
 }
+.scrolling.dimmable > .dimmer {
+  justify-content: flex-start;
+}
 .scrolling.dimmable.dimmed > .dimmer {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -353,13 +361,10 @@
   position: fixed;
 }
 .modals.dimmer .ui.scrolling.modal {
-  position: relative !important;
-  left: auto !important;
-  top: auto !important;
   margin: @scrollingMargin auto !important;
 }
 
-/* undetached scrolling */
+/* Undetached Scrolling */
 .scrolling.undetached.dimmable.dimmed {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -373,26 +378,12 @@
   margin-top: @scrollingMargin !important;
 }
 
-/* Coupling with Sidebar */
-.undetached.dimmable.dimmed > .pusher {
-  z-index: auto;
-}
-
-@media only screen and (max-width : @largestTabletScreen) {
-  .modals.dimmer .ui.scrolling.modal {
-    margin-top: @mobileScrollingMargin !important;
-    margin-bottom: @mobileScrollingMargin !important;
-  }
-}
-
 /* Scrolling Content */
-
 .ui.modal .scrolling.content {
   max-height: @scrollingContentMaxHeight;
   overflow: auto;
 }
 
-
 /*--------------
    Full Screen
 ---------------*/

src/themes/default/modules/dimmer.variables

@@ -8,6 +8,7 @@
 @backgroundColor: rgba(0, 0, 0 , 0.85);
 @lineHeight: 1;
 @perspective: 2000px;
+@padding: 1em;
 
 @duration: 0.5s;
 @transition:
@@ -29,10 +30,6 @@
 /* Hidden (Default) */
 @hiddenOpacity: 0;
 
-/* Content */
-@contentDisplay: table;
-@contentChildDisplay: table-cell;
-
 /* Visible */
 @visibleOpacity: 1;
 
@@ -58,4 +55,4 @@
 @simpleStartBackgroundColor: rgba(0, 0, 0, 0);
 @simpleEndBackgroundColor: @backgroundColor;
 @simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
-@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;
+@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;

src/themes/default/modules/modal.variables

@@ -84,14 +84,14 @@
 @largeMonitorWidth: 900px;
 @widescreenMonitorWidth: 950px;
 
-@mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
-@tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
-@computerMargin: 0em 0em 0em -(@computerWidth / 2);
-@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
-@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
+@mobileMargin: 0em 0em 0em 0em;
+@tabletMargin: 0em 0em 0em 0em;
+@computerMargin: 0em 0em 0em 0em;
+@largeMonitorMargin: 0em 0em 0em 0em;
+@widescreenMonitorMargin: 0em 0em 0em 0em;
 
 @fullScreenWidth: 95%;
-@fullScreenOffset: (100% - @fullScreenWidth) / 2;
+@fullScreenOffset: 0em;
 @fullScreenMargin: 1em auto;
 
 /* Coupling */
@@ -117,9 +117,13 @@
 @basicInvertedModalColor: @textColor;
 @basicInvertedModalHeaderColor: @darkTextColor;
 
+/* Top Aligned */
+@topAlignedMargin: 5vh;
+@mobileTopAlignedMargin: 1rem;
+
 /* Scrolling Margin */
-@scrollingMargin: 3.5rem;
-@mobileScrollingMargin: 1rem;
+@scrollingMargin: @topAlignedMargin;
+@mobileScrollingMargin: @mobileTopAlignedMargin;
 
 /* Scrolling Content */
 @scrollingContentMaxHeight: calc(80vh - 10em);
@@ -142,11 +146,11 @@
 @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
 @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
 
-@miniMobileMargin: 0em 0em 0em -(@miniMobileWidth / 2);
-@miniTabletMargin: 0em 0em 0em -(@miniTabletWidth / 2);
-@miniComputerMargin: 0em 0em 0em -(@miniComputerWidth / 2);
-@miniLargeMonitorMargin: 0em 0em 0em -(@miniLargeMonitorWidth / 2);
-@miniWidescreenMonitorMargin: 0em 0em 0em -(@miniWidescreenMonitorWidth / 2);
+@miniMobileMargin: 0em 0em 0em 0em;
+@miniTabletMargin: 0em 0em 0em 0em;
+@miniComputerMargin: 0em 0em 0em 0em;
+@miniLargeMonitorMargin: 0em 0em 0em 0em;
+@miniWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @tinyHeaderSize: 1.3em;
 @tinyMobileWidth: @mobileWidth;
@@ -155,11 +159,11 @@
 @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
 @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
 
-@tinyMobileMargin: 0em 0em 0em -(@tinyMobileWidth / 2);
-@tinyTabletMargin: 0em 0em 0em -(@tinyTabletWidth / 2);
-@tinyComputerMargin: 0em 0em 0em -(@tinyComputerWidth / 2);
-@tinyLargeMonitorMargin: 0em 0em 0em -(@tinyLargeMonitorWidth / 2);
-@tinyWidescreenMonitorMargin: 0em 0em 0em -(@tinyWidescreenMonitorWidth / 2);
+@tinyMobileMargin: 0em 0em 0em 0em;
+@tinyTabletMargin: 0em 0em 0em 0em;
+@tinyComputerMargin: 0em 0em 0em 0em;
+@tinyLargeMonitorMargin: 0em 0em 0em 0em;
+@tinyWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @smallHeaderSize: 1.3em;
 @smallMobileWidth: @mobileWidth;
@@ -168,11 +172,11 @@
 @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
 @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
 
-@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
-@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
-@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
-@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
-@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
+@smallMobileMargin: 0em 0em 0em 0em;
+@smallTabletMargin: 0em 0em 0em 0em;
+@smallComputerMargin: 0em 0em 0em 0em;
+@smallLargeMonitorMargin: 0em 0em 0em 0em;
+@smallWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @largeHeaderSize: 1.6em;
 @largeMobileWidth: @mobileWidth;
@@ -181,8 +185,8 @@
 @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
 @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
 
-@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
-@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
-@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
-@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
-@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);
+@largeMobileMargin: 0em 0em 0em 0em;
+@largeTabletMargin: 0em 0em 0em 0em;
+@largeComputerMargin: 0em 0em 0em 0em;
+@largeLargeMonitorMargin: 0em 0em 0em 0em;
+@largeWidescreenMonitorMargin: 0em 0em 0em 0em;