MAGETWO-37594: Implementation and fixes after review

- Added inner scroll support option for dialog slide

Author: Bogdan Plieshka

app/code/Magento/Ui/view/base/web/templates/dialog/dialog-modal.html

@@ -7,8 +7,8 @@
 
 <section
     class="dialog-<%= data.type %> <%= data.dialogClass %>
-    <% if(data.responsive){ %><%= data.responsiveClass %><% } %>
-    <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
+           <% if(data.responsive){ %><%= data.responsiveClass %><% } %>
+           <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
     data-role="dialog"
     data-type="<%= data.type %>">
     <div class="dialog-inner-wrap">

app/code/Magento/Ui/view/base/web/templates/dialog/dialog-slide.html

@@ -21,10 +21,6 @@
                 type="button">
                 <span>$t('Close')</span>
             </button>
-        </header>
-        <div
-            class="dialog-content"
-            data-role="content">
             <div class="page-main-actions">
                 <div class="page-actions">
                     <div class="page-actions-buttons">
@@ -38,6 +34,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </header>
+        <div class="dialog-content" data-role="content"></div>
     </div>
 </section>

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less

@@ -20,7 +20,7 @@
 
 @page-main-actions__background-color: @color-white-fog;
 @page-main-actions__border-color: @color-gray89;
-@page-main-actions__padding-side: @content__indent / 2;
+@page-main-actions__padding: @content__indent / 2;
 
 //
 
@@ -30,7 +30,7 @@
     background: @page-main-actions__background-color;
     border-bottom: 1px solid @page-main-actions__border-color;
     border-top: 1px solid @page-main-actions__border-color;
-    padding: @page-main-actions__padding-side;
+    padding: @page-main-actions__padding;
 }
 
 .page-main-actions {

app/design/adminhtml/Magento/backend/web/css/source/components/_dialogs_extend.less

@@ -74,6 +74,10 @@
             padding-right: @dialog-slide__padding + (@dialog-action-close__font-size - @dialog-action-close__active__font-size) / 2;
         }
     }
+    .page-main-actions {
+        margin-top: @dialog-slide-header__padding-vertical;
+        margin-bottom: @dialog-slide-header__padding-vertical - @page-main-actions__padding;
+    }
 }
 
 .dialog-title {

lib/web/css/source/components/_dialogs.less

@@ -113,6 +113,24 @@
 
 .dialog-slide {
     .abs-dialog-slide();
+    &._inner-scroll {
+        .dialog-inner-wrap {
+            .vendor-prefix-display(flex);
+            .vendor-prefix-flex-direction(column);
+            overflow-y: visible;
+        }
+        .dialog-header,
+        .dialog-footer {
+            .vendor-prefix-flex-grow(0);
+            .vendor-prefix-flex-shrink(0);
+        }
+        .dialog-content {
+            overflow-y: auto;
+        }
+        .dialog-footer {
+            margin-top: auto;
+        }
+    }
     .dialog-header,
     .dialog-content,
     .dialog-footer {
@@ -128,7 +146,7 @@
     .abs-dialog-modal();
     //  If applied, switching outer modal scroll to inner
     &._inner-scroll {
-        overflow-y: inherit;
+        overflow-y: visible;
         .dialog-inner-wrap {
             max-height: 90%;
         }