MAGETWO-37594: Implementation and fixes after review

- Added match design styles to modals and slide dialogs
- Separated dilog template to modal and slide
- CR changes

Author: Bogdan Plieshka

app/code/Magento/Ui/view/base/web/js/dialog/dialog.js

@@ -6,7 +6,7 @@ define([
     "jquery",
     "underscore",
     "mage/template",
-    "text!ui/template/dialog/dialog.html",
+    "text!ui/template/dialog/dialog-modal.html",
     "jquery/ui",
     "mage/translate"
 ], function($, _,template, dialogTemplate){

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

@@ -17,7 +17,7 @@
                 data-action="close-mypopup"
                 data-role="closeBtn"
                 type="button">
-                <span>Close</span>
+                <span>$t('Close')</span>
             </button>
         </header>
         <div

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

@@ -0,0 +1,41 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<section
+    class="dialog-<%= data.type %> <% if(data.responsive){ %><%= data.responsiveClass %><% } %> <%= data.dialogClass %>"
+    data-role="dialog">
+    <div class="dialog-inner-wrap">
+        <header class="dialog-header">
+            <h1 class="dialog-title"
+                data-role="title"><%= data.title %></h1>
+            <button
+                class="action-close"
+                data-action="close-mypopup"
+                data-role="closeBtn"
+                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">
+                        <% _.each(data.buttons, function(button) { %>
+                        <button
+                            class="<%= button.class %>"
+                            type="button"
+                            data-role="action"><%= button.text %>
+                        </button>
+                        <% }); %>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

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

@@ -12,10 +12,14 @@
 //  ---------------------------------------------
 
 @dialog-title__color: @text__color;
-@dialog-title__font-size: 2.1rem;
+
+@dialog-modal-title__font-size: 2.4rem;
+
+@dialog-slide-title__font-size: 2.1rem;
 
 @dialog-action-close__color: @color-brownie-vanilla;
 @dialog-action-close__font-size: 2rem;
+@dialog-action-close__hover__color: darken(@color-brownie-vanilla, 10%);
 
 //
 
@@ -24,15 +28,40 @@
     .action-close {
         color: @dialog-action-close__color;
         position: absolute;
-        right: 3rem;
-        top: 3rem;
+        right: 0;
+        top: 0;
+        &:hover {
+            &:before {
+                color: @dialog-action-close__hover__color;
+            }
+        }
         &:before {
             font-size: @dialog-action-close__font-size;
         }
     }
 }
 
+.dialog-modal {
+    .dialog-title {
+        font-size: @dialog-modal-title__font-size;
+        margin-right: @dialog-modal-title__font-size + @dialog-modal__padding + 1rem;
+    }
+    .action-close {
+        padding: @dialog-modal__padding;
+    }
+}
+
+.dialog-slide {
+    .dialog-title {
+        font-size: @dialog-slide-title__font-size;
+        margin-bottom: 0;
+        margin-right: @dialog-slide-title__font-size + @dialog-slide__padding + 1rem;
+    }
+    .action-close {
+        padding: @dialog-slide-header__padding-vertical @dialog-slide__padding;
+    }
+}
+
 .dialog-title {
-    font-size: @dialog-title__font-size;
     font-weight: @font-weight__regular;
 }

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

@@ -14,15 +14,19 @@
 @import '../../source/_variables.less';
 
 @dialog__background-color: @color-white;
-@dialog__box-shadow: @component__box-shadow__base;
+@dialog__box-shadow: 0 0 12px 2px rgba(0, 0, 0, .35);
 
+@dialog-modal__indent-vertical: 5rem;
+@dialog-modal__padding: 3rem;
+@dialog-modal__width: 75%;
 @dialog-modal__z-index: @dialog__z-index;
 
 @dialog-slide__first__indent-left: 14.8rem;
 @dialog-slide__indent-left: 4.5rem;
+@dialog-slide__padding: 2.6rem;
 @dialog-slide__z-index: @dialog__z-index - 1;
 
-@dialog-header__padding-top: 2.6rem;
+@dialog-slide-header__padding-vertical: 2.1rem;
 
 //
 //  Utilities
@@ -38,28 +42,22 @@
     visibility: hidden;
     &._show {
         visibility: visible;
+        .dialog-inner-wrap {
+            transform: translate(0, 0);
+        }
     }
     .dialog-inner-wrap {
-        display: flex;
         background-color: @dialog__background-color;
-        flex-direction: column;
+        box-shadow: @dialog__box-shadow;
         opacity: 1;
-
-        max-height: initial;
-        max-width: initial;
+        overflow-y: auto;
     }
 }
 
 .abs-dialog-slide() {
     left: @dialog-slide__first__indent-left;
     z-index: @dialog-slide__z-index;
-    &._show {
-        .dialog-inner-wrap {
-            transform: translate(0, 0);
-        }
-    }
     .dialog-inner-wrap {
-        box-shadow: -1px 0 @component__shadow-size__base rgba(0, 0, 0, .5);
         height: 100%;
         position: static;
         transform: translate(100%, 0);
@@ -70,20 +68,14 @@
 
 .abs-dialog-modal() {
     left: 0;
-    overflow: auto;
     z-index: @dialog-modal__z-index;
-    &._show {
-        .dialog-inner-wrap {
-            transform: translate(50%, 10%);
-        }
-    }
     .dialog-inner-wrap {
-        box-shadow: @component__box-shadow__base;
         height: auto;
+        margin: @dialog-modal__indent-vertical (100% - @dialog-modal__width) / 2;
         position: absolute;
-        transform: translate(50%, -150%);
+        transform: translate(0, -150%);
         transition: transform .3s linear, visibility 1s linear;
-        width: 50%;
+        width: @dialog-modal__width;
     }
 }
 
@@ -102,6 +94,15 @@
 
 .dialog-slide {
     .abs-dialog-slide();
+    .dialog-header,
+    .dialog-content,
+    .dialog-footer {
+        padding: 0 @dialog-slide__padding @dialog-slide__padding;
+    }
+    .dialog-header {
+        padding-top: @dialog-slide-header__padding-vertical;
+        padding-bottom: @dialog-slide-header__padding-vertical;
+    }
     + .dialog-slide {
         margin-left: @dialog-slide__indent-left;
         + .dialog-slide {
@@ -115,42 +116,21 @@
 
 .dialog-modal {
     .abs-dialog-modal();
-}
-
-.dialog-header,
-.dialog-content,
-.dialog-footer {
-    padding: 2rem 3rem;
-}
-
-.dialog-header,
-.dialog-footer {
-    &:extend(.abs-clearfix all);
-    flex-grow: 0;
-    flex-shrink: 0;
-}
-
-.dialog-header {
-    padding-top: @dialog-header__padding-top;
-    padding-bottom: 3rem; // ToDo UI: Change to structure variables
-}
-
-.dialog-footer {
-    margin-bottom: 0;
-    margin-top: auto;
-}
-
-.dialog-content {
-    overflow: auto;
-    margin-bottom: 3rem;
+    .dialog-header,
+    .dialog-content,
+    .dialog-footer {
+        padding: 0 @dialog-modal__padding @dialog-modal__padding;
+    }
+    .dialog-header {
+        padding-top: @dialog-modal__padding;
+    }
 }
 
 //
 //  Mobile
 //  ---------------------------------------------
 
 //  Mobile transform to dialog-slide
-
 @media (max-width: @screen__m) {
     .dialog-modal {
         &.dialog-slide {

lib/web/css/source/lib/variables/_components.less

@@ -7,7 +7,7 @@
 //  Lib -> Components -> Variables
 //  _____________________________________________
 
-@component__shadow-size__base: 5px;
 @component__box-shadow__base: 1px 1px @component__shadow-size__base rgba(0, 0, 0, .5);
+@component__shadow-size__base: 5px;
 
-@component-modal__opacity: .98;
+@component-modal__opacity: .98;

lib/web/css/source/lib/variables/_structure.less

@@ -22,8 +22,8 @@
 @z-index-9: 900;
 @z-index-10: 1000;
 
-// z-index 8
+//  z-index 8
 @overlay__z-index: @z-index-8;
 
-// z-index 8
+//  z-index 9
 @dialog__z-index: @z-index-9;