Issue #2113911 by LewisNyman, longwave, nod_, rteijeiro: Modal style update.

core/core.libraries.yml

@@ -113,11 +113,9 @@ drupal.debounce:
 drupal.dialog:
   version: VERSION
   js:
-    misc/dialog.js: {}
-    misc/dialog.position.js: {}
-  css:
-    theme:
-      misc/dialog.theme.css: {}
+    misc/dialog/dialog.js: {}
+    misc/dialog/dialog.position.js: {}
+    misc/dialog/dialog.jquery-ui.js: {}
   dependencies:
     - core/jquery
     - core/drupal
@@ -129,7 +127,7 @@ drupal.dialog:
 drupal.dialog.ajax:
   version: VERSION
   js:
-    misc/dialog.ajax.js: {}
+    misc/dialog/dialog.ajax.js: {}
   dependencies:
     - core/jquery
     - core/drupal

core/misc/dialog/dialog.jquery-ui.js

@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Adds default classes to buttons for styling purposes.
+ */
+(function ($) {
+
+  "use strict";
+
+  $.widget('ui.dialog', $.ui.dialog, {
+    options: {
+      buttonClass: 'button',
+      buttonPrimaryClass: 'button--primary'
+    },
+    _createButtons: function () {
+      var opts = this.options;
+      var primaryIndex;
+      var $buttons;
+      for (var index = 0, il = opts.buttons.length; index < il; index += 1) {
+        if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
+          primaryIndex = index;
+          delete opts.buttons[index].primary;
+          break;
+        }
+      }
+      this._super();
+      $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
+      if (typeof primaryIndex !== 'undefined') {
+        $buttons.eq(index).addClass(opts.buttonPrimaryClass);
+      }
+    }
+  });
+
+})(jQuery);

core/misc/dialog/dialog.js

@@ -11,6 +11,9 @@
   drupalSettings.dialog = {
     autoOpen: true,
     dialogClass: '',
+    // Drupal-specific extensions: see dialog.jquery-ui.js.
+    buttonClass: 'button',
+    buttonPrimaryClass: 'button--primary',
     // When using this API directly (when generating dialogs on the client side),
     // you may want to override this method and do
     // @code
@@ -24,7 +27,7 @@
 
   Drupal.dialog = function (element, options) {
 
-    function openDialog(settings) {
+    function openDialog (settings) {
       settings = $.extend({}, drupalSettings.dialog, options, settings);
       // Trigger a global event to allow scripts to bind events to the dialog.
       $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
@@ -33,7 +36,7 @@
       $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
     }
 
-    function closeDialog(value) {
+    function closeDialog (value) {
       $(window).trigger('dialog:beforeclose', [dialog, $element]);
       $element.dialog('close');
       dialog.returnValue = value;

core/modules/ckeditor/js/ckeditor.admin.js

@@ -532,7 +532,7 @@
          *   A jQuery DOM fragment that represents the new button group. It has
          *   not been added to the DOM yet.
          */
-        function insertNewGroup(success, $group) {
+        function insertNewGroup (success, $group) {
           if (success) {
             $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
             // Focus on the new group.
@@ -1171,7 +1171,7 @@
    *   A callback to invoke after the button group naming modal dialog has been
    *   closed.
    */
-  function registerButtonMove(view, $button, callback) {
+  function registerButtonMove (view, $button, callback) {
     var $group = $button.closest('.ckeditor-toolbar-group');
 
     // If dropped in a placeholder button group, the user must name it.
@@ -1202,7 +1202,7 @@
    * @param jQuery $group
    *   A jQuery set that contains an li element that wraps a group of buttons.
    */
-  function registerGroupMove(view, $group) {
+  function registerGroupMove (view, $group) {
     // Remove placeholder classes if necessary.
     var $row = $group.closest('.ckeditor-row');
     if ($row.hasClass('placeholder')) {
@@ -1230,7 +1230,7 @@
    *   A callback to invoke after the button group naming modal dialog has been
    *   closed.
    */
-  function openGroupNameDialog(view, $group, callback) {
+  function openGroupNameDialog (view, $group, callback) {
     callback = callback || function () {};
 
     /**
@@ -1242,7 +1242,7 @@
      * @return Boolean
      *   Returns true when an error exists, otherwise returns false.
      */
-    function validateForm(form) {
+    function validateForm (form) {
       if (form.elements[0].value.length === 0) {
         var $form = $(form);
         if (!$form.hasClass('errors')) {
@@ -1267,12 +1267,12 @@
      *   The form DOM element that contains the input with the new button group
      *   title string.
      */
-    function closeDialog(action, form) {
+    function closeDialog (action, form) {
 
       /**
        * Closes the dialog when the user cancels or supplies valid data.
        */
-      function shutdown() {
+      function shutdown () {
         dialog.close(action);
 
         // The processing marker can be deleted since the dialog has been closed.
@@ -1287,7 +1287,7 @@
        * @param String name
        *   The new name of the CKEditor button group.
        */
-      function namePlaceholderGroup($group, name) {
+      function namePlaceholderGroup ($group, name) {
         // If it's currently still a placeholder, then that means we're creating
         // a new group, and we must do some extra work.
         if ($group.hasClass('placeholder')) {
@@ -1356,14 +1356,13 @@
           click: function () {
             closeDialog('apply', this);
           },
-          'class': 'button-primary button'
+          primary: true
         },
         {
           text: Drupal.t('Cancel'),
           click: function () {
             closeDialog('cancel');
           },
-          'class': 'button'
         }
       ],
       open: function () {

core/modules/edit/js/util.js

@@ -50,7 +50,8 @@
           text: Drupal.t('OK'),
           click: function () {
             networkErrorModal.close();
-          }
+          },
+          primary: true
         }
       ],
       create: function () {

core/modules/edit/js/views/AppView.js

@@ -326,7 +326,7 @@
       var that = this;
       var discardDialog;
 
-      function closeDiscardDialog(action) {
+      function closeDiscardDialog (action) {
         discardDialog.close(action);
         // The active modal has been removed.
         that.model.set('activeModal', null);
@@ -360,7 +360,8 @@
               text: Drupal.t('Save'),
               click: function () {
                 closeDiscardDialog('save');
-              }
+              },
+              primary: true
             },
             {
               text: Drupal.t('Discard changes'),

core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php

@@ -283,6 +283,7 @@ class ThemeHandlerTest extends UnitTestCase {
         'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css',
         'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
         'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
+        'dialog.theme.css' => DRUPAL_ROOT . '/core/themes/seven/dialog.theme.css',
       ),
     ), $info->info['stylesheets']);
     $this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']);

core/themes/seven/dialog.theme.css

@@ -3,36 +3,54 @@
  */
 
 .ui-dialog {
+  background: transparent;
+  border: 0;
   position: absolute;
   z-index: 1260;
   overflow: visible;
-  color: #000;
-  background: #fff;
-  border: solid 1px #ccc;
   padding: 0;
 }
 .ui-dialog .ui-dialog-titlebar {
-  font-weight: bold;
-  background: #f3f4ee;
-  border-style: solid;
-  border-radius: 0;
-  border-width: 0 0 1px 0;
-  border-color: #ccc;
+  background: rgba(107,107,107,0.65);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  padding: 15px;
+}
+.ui-dialog .ui-dialog-title {
+  font-size: 1.231em;
+  font-weight: 600;
+  margin: 0;
+  color: #ffffff;
+  -webkit-font-smoothing: antialiased;
 }
 .ui-dialog .ui-dialog-titlebar-close {
   border: 0;
   background: none;
+  right: 20px;
+  top: 20px;
+  margin: 0;
+  height: 16px;
+  width: 16px;
 }
-.ui-dialog .ui-dialog-buttonpane {
-  margin-top: 0;
-  background: #f3f4ee;
-  padding: .3em 1em;
-  border-width: 1px 0 0 0;
-  border-color: #ccc;
+.ui-dialog .ui-icon.ui-icon-closethick {
+  background: url('../../misc/icons/ffffff/ex.svg') 0 0 no-repeat;
+  margin-top: -12px;
+}
+.ui-dialog .ui-widget-content.ui-dialog-content {
+  background: #ffffff;
+}
+.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
+  background: #f5f5f2;
+  border-top: 1px solid #bfbfbf;
+  margin: 0;
+  padding: 15px 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   margin: 0;
   padding: 0;
+  float: none;
 }
 .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
   padding: 0;
@@ -50,7 +68,7 @@
   top: 48.5%;
   z-index: 1000;
   background-color: #232323;
-  background-image: url("loading-small.gif");
+  background-image: url("../loading-small.gif");
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 7px;

core/themes/seven/jquery.ui.theme.css

@@ -8,10 +8,10 @@
  * Component containers
  */
 .ui-widget {
-  background: #fff;
+  background: none;
 }
 .ui-widget-content {
-  border: solid 1px #ccc;
+  border: none;
 }
 
 /**

core/themes/seven/seven.info.yml

@@ -10,6 +10,7 @@ stylesheets:
     - style.css
     - css/components/buttons.css
     - css/components/buttons.theme.css
+    - dialog.theme.css
 stylesheets-override:
   - vertical-tabs.css
   - jquery.ui.theme.css