Commit 5a8a34e8 authored by webchick's avatar webchick

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

parent fd4e2207
...@@ -113,11 +113,9 @@ drupal.debounce: ...@@ -113,11 +113,9 @@ drupal.debounce:
drupal.dialog: drupal.dialog:
version: VERSION version: VERSION
js: js:
misc/dialog.js: {} misc/dialog/dialog.js: {}
misc/dialog.position.js: {} misc/dialog/dialog.position.js: {}
css: misc/dialog/dialog.jquery-ui.js: {}
theme:
misc/dialog.theme.css: {}
dependencies: dependencies:
- core/jquery - core/jquery
- core/drupal - core/drupal
...@@ -129,7 +127,7 @@ drupal.dialog: ...@@ -129,7 +127,7 @@ drupal.dialog:
drupal.dialog.ajax: drupal.dialog.ajax:
version: VERSION version: VERSION
js: js:
misc/dialog.ajax.js: {} misc/dialog/dialog.ajax.js: {}
dependencies: dependencies:
- core/jquery - core/jquery
- core/drupal - core/drupal
......
/**
* @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);
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
drupalSettings.dialog = { drupalSettings.dialog = {
autoOpen: true, autoOpen: true,
dialogClass: '', 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), // When using this API directly (when generating dialogs on the client side),
// you may want to override this method and do // you may want to override this method and do
// @code // @code
...@@ -24,7 +27,7 @@ ...@@ -24,7 +27,7 @@
Drupal.dialog = function (element, options) { Drupal.dialog = function (element, options) {
function openDialog(settings) { function openDialog (settings) {
settings = $.extend({}, drupalSettings.dialog, options, settings); settings = $.extend({}, drupalSettings.dialog, options, settings);
// Trigger a global event to allow scripts to bind events to the dialog. // Trigger a global event to allow scripts to bind events to the dialog.
$(window).trigger('dialog:beforecreate', [dialog, $element, settings]); $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
...@@ -33,7 +36,7 @@ ...@@ -33,7 +36,7 @@
$(window).trigger('dialog:aftercreate', [dialog, $element, settings]); $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
} }
function closeDialog(value) { function closeDialog (value) {
$(window).trigger('dialog:beforeclose', [dialog, $element]); $(window).trigger('dialog:beforeclose', [dialog, $element]);
$element.dialog('close'); $element.dialog('close');
dialog.returnValue = value; dialog.returnValue = value;
......
...@@ -532,7 +532,7 @@ ...@@ -532,7 +532,7 @@
* A jQuery DOM fragment that represents the new button group. It has * A jQuery DOM fragment that represents the new button group. It has
* not been added to the DOM yet. * not been added to the DOM yet.
*/ */
function insertNewGroup(success, $group) { function insertNewGroup (success, $group) {
if (success) { if (success) {
$group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups')); $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
// Focus on the new group. // Focus on the new group.
...@@ -1171,7 +1171,7 @@ ...@@ -1171,7 +1171,7 @@
* A callback to invoke after the button group naming modal dialog has been * A callback to invoke after the button group naming modal dialog has been
* closed. * closed.
*/ */
function registerButtonMove(view, $button, callback) { function registerButtonMove (view, $button, callback) {
var $group = $button.closest('.ckeditor-toolbar-group'); var $group = $button.closest('.ckeditor-toolbar-group');
// If dropped in a placeholder button group, the user must name it. // If dropped in a placeholder button group, the user must name it.
...@@ -1202,7 +1202,7 @@ ...@@ -1202,7 +1202,7 @@
* @param jQuery $group * @param jQuery $group
* A jQuery set that contains an li element that wraps a group of buttons. * 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. // Remove placeholder classes if necessary.
var $row = $group.closest('.ckeditor-row'); var $row = $group.closest('.ckeditor-row');
if ($row.hasClass('placeholder')) { if ($row.hasClass('placeholder')) {
...@@ -1230,7 +1230,7 @@ ...@@ -1230,7 +1230,7 @@
* A callback to invoke after the button group naming modal dialog has been * A callback to invoke after the button group naming modal dialog has been
* closed. * closed.
*/ */
function openGroupNameDialog(view, $group, callback) { function openGroupNameDialog (view, $group, callback) {
callback = callback || function () {}; callback = callback || function () {};
/** /**
...@@ -1242,7 +1242,7 @@ ...@@ -1242,7 +1242,7 @@
* @return Boolean * @return Boolean
* Returns true when an error exists, otherwise returns false. * Returns true when an error exists, otherwise returns false.
*/ */
function validateForm(form) { function validateForm (form) {
if (form.elements[0].value.length === 0) { if (form.elements[0].value.length === 0) {
var $form = $(form); var $form = $(form);
if (!$form.hasClass('errors')) { if (!$form.hasClass('errors')) {
...@@ -1267,12 +1267,12 @@ ...@@ -1267,12 +1267,12 @@
* The form DOM element that contains the input with the new button group * The form DOM element that contains the input with the new button group
* title string. * title string.
*/ */
function closeDialog(action, form) { function closeDialog (action, form) {
/** /**
* Closes the dialog when the user cancels or supplies valid data. * Closes the dialog when the user cancels or supplies valid data.
*/ */
function shutdown() { function shutdown () {
dialog.close(action); dialog.close(action);
// The processing marker can be deleted since the dialog has been closed. // The processing marker can be deleted since the dialog has been closed.
...@@ -1287,7 +1287,7 @@ ...@@ -1287,7 +1287,7 @@
* @param String name * @param String name
* The new name of the CKEditor button group. * 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 // If it's currently still a placeholder, then that means we're creating
// a new group, and we must do some extra work. // a new group, and we must do some extra work.
if ($group.hasClass('placeholder')) { if ($group.hasClass('placeholder')) {
...@@ -1356,14 +1356,13 @@ ...@@ -1356,14 +1356,13 @@
click: function () { click: function () {
closeDialog('apply', this); closeDialog('apply', this);
}, },
'class': 'button-primary button' primary: true
}, },
{ {
text: Drupal.t('Cancel'), text: Drupal.t('Cancel'),
click: function () { click: function () {
closeDialog('cancel'); closeDialog('cancel');
}, },
'class': 'button'
} }
], ],
open: function () { open: function () {
......
...@@ -50,7 +50,8 @@ ...@@ -50,7 +50,8 @@
text: Drupal.t('OK'), text: Drupal.t('OK'),
click: function () { click: function () {
networkErrorModal.close(); networkErrorModal.close();
} },
primary: true
} }
], ],
create: function () { create: function () {
......
...@@ -326,7 +326,7 @@ ...@@ -326,7 +326,7 @@
var that = this; var that = this;
var discardDialog; var discardDialog;
function closeDiscardDialog(action) { function closeDiscardDialog (action) {
discardDialog.close(action); discardDialog.close(action);
// The active modal has been removed. // The active modal has been removed.
that.model.set('activeModal', null); that.model.set('activeModal', null);
...@@ -360,7 +360,8 @@ ...@@ -360,7 +360,8 @@
text: Drupal.t('Save'), text: Drupal.t('Save'),
click: function () { click: function () {
closeDiscardDialog('save'); closeDiscardDialog('save');
} },
primary: true
}, },
{ {
text: Drupal.t('Discard changes'), text: Drupal.t('Discard changes'),
......
...@@ -283,6 +283,7 @@ public function testRebuildThemeData() { ...@@ -283,6 +283,7 @@ public function testRebuildThemeData() {
'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css', '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.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', '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']); ), $info->info['stylesheets']);
$this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']); $this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']);
......
...@@ -3,36 +3,54 @@ ...@@ -3,36 +3,54 @@
*/ */
.ui-dialog { .ui-dialog {
background: transparent;
border: 0;
position: absolute; position: absolute;
z-index: 1260; z-index: 1260;
overflow: visible; overflow: visible;
color: #000;
background: #fff;
border: solid 1px #ccc;
padding: 0; padding: 0;
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
font-weight: bold; background: rgba(107,107,107,0.65);
background: #f3f4ee; border-top-left-radius: 5px;
border-style: solid; border-top-right-radius: 5px;
border-radius: 0; padding: 15px;
border-width: 0 0 1px 0; }
border-color: #ccc; .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 { .ui-dialog .ui-dialog-titlebar-close {
border: 0; border: 0;
background: none; background: none;
right: 20px;
top: 20px;
margin: 0;
height: 16px;
width: 16px;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-icon.ui-icon-closethick {
margin-top: 0; background: url('../../misc/icons/ffffff/ex.svg') 0 0 no-repeat;
background: #f3f4ee; margin-top: -12px;
padding: .3em 1em; }
border-width: 1px 0 0 0; .ui-dialog .ui-widget-content.ui-dialog-content {
border-color: #ccc; 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 { .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
margin: 0; margin: 0;
padding: 0; padding: 0;
float: none;
} }
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0; padding: 0;
...@@ -50,7 +68,7 @@ ...@@ -50,7 +68,7 @@
top: 48.5%; top: 48.5%;
z-index: 1000; z-index: 1000;
background-color: #232323; background-color: #232323;
background-image: url("loading-small.gif"); background-image: url("../loading-small.gif");
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 7px; border-radius: 7px;
......
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
* Component containers * Component containers
*/ */
.ui-widget { .ui-widget {
background: #fff; background: none;
} }
.ui-widget-content { .ui-widget-content {
border: solid 1px #ccc; border: none;
} }
/** /**
......
...@@ -10,6 +10,7 @@ stylesheets: ...@@ -10,6 +10,7 @@ stylesheets:
- style.css - style.css
- css/components/buttons.css - css/components/buttons.css
- css/components/buttons.theme.css - css/components/buttons.theme.css
- dialog.theme.css
stylesheets-override: stylesheets-override:
- vertical-tabs.css - vertical-tabs.css
- jquery.ui.theme.css - jquery.ui.theme.css
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment