diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index d2c35b99e8f16be5a7addd85582f190f7eca1896..6549f9949a1f8001b2ec537eadfb8be480880332 100644
--- a/core/core.libraries.yml
+++ b/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
diff --git a/core/misc/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
similarity index 100%
rename from core/misc/dialog.ajax.js
rename to core/misc/dialog/dialog.ajax.js
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed3fbc20f4089785e53ba55c6d594ab9c9073676
--- /dev/null
+++ b/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);
diff --git a/core/misc/dialog.js b/core/misc/dialog/dialog.js
similarity index 89%
rename from core/misc/dialog.js
rename to core/misc/dialog/dialog.js
index 789c37e0a83e85f5f2936e7357d9df3954207385..bc2c7c7e2efd32a809876aad8e8203f14b1e7bd0 100644
--- a/core/misc/dialog.js
+++ b/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;
diff --git a/core/misc/dialog.position.js b/core/misc/dialog/dialog.position.js
similarity index 100%
rename from core/misc/dialog.position.js
rename to core/misc/dialog/dialog.position.js
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index f5163b8c2c42a71a656aa4a2509e8fc394d2353b..5d5bfbb774d7b1a9d68a331c865951bec85b049e 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/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 () {
diff --git a/core/modules/edit/js/util.js b/core/modules/edit/js/util.js
index 6883d7ee9c14993ae2cb3211197a136626f1ed30..913504ba30ca980c64c582d20706c711a1925f8a 100644
--- a/core/modules/edit/js/util.js
+++ b/core/modules/edit/js/util.js
@@ -50,7 +50,8 @@
text: Drupal.t('OK'),
click: function () {
networkErrorModal.close();
- }
+ },
+ primary: true
}
],
create: function () {
diff --git a/core/modules/edit/js/views/AppView.js b/core/modules/edit/js/views/AppView.js
index 73ab7f8e9edc81325fa36b7d5ae462271fe9a013..4c11c66900672747c1ee3f2190c4f69220a2d729 100644
--- a/core/modules/edit/js/views/AppView.js
+++ b/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'),
diff --git a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
index 94df7412881ce21c4a95557ab737ea7e7b762bc2..ca97d338d982eb79ea5363c8b8de914f2027f547 100644
--- a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
+++ b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
@@ -283,6 +283,7 @@ public function testRebuildThemeData() {
'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']);
diff --git a/core/misc/dialog.theme.css b/core/themes/seven/dialog.theme.css
similarity index 55%
rename from core/misc/dialog.theme.css
rename to core/themes/seven/dialog.theme.css
index 581c03bf17ac19efe9a95503909323e65f96808d..291d0c61d4c3f55d99acfc558df860d350bcf6d1 100644
--- a/core/misc/dialog.theme.css
+++ b/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;
diff --git a/core/themes/seven/jquery.ui.theme.css b/core/themes/seven/jquery.ui.theme.css
index 0ff15421f567c132da423fdf7cf181bd5b733dd6..559f8a82e1cd5ba9827a57177a50e5ba0edbcd7e 100644
--- a/core/themes/seven/jquery.ui.theme.css
+++ b/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;
}
/**
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 582b498d1905a19105d631c517b00313af3431bf..0c81dbbc372c13c471d3e4d6d57e20e89c442793 100644
--- a/core/themes/seven/seven.info.yml
+++ b/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