Commit 22b7b7e9 authored by alexpott's avatar alexpott

Issue #2113911 by LewisNyman, Manuel Garcia, longwave, nod_, Rajendar Reddy,...

Issue #2113911 by LewisNyman, Manuel Garcia, longwave, nod_, Rajendar Reddy, pakmanlh, olemedia, rteijeiro: Modal style update.
parent 94d95e5b
...@@ -111,8 +111,9 @@ drupal.debounce: ...@@ -111,8 +111,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: {}
misc/dialog/dialog.jquery-ui.js: {}
css: css:
theme: theme:
misc/dialog.theme.css: {} misc/dialog.theme.css: {}
...@@ -127,7 +128,7 @@ drupal.dialog: ...@@ -127,7 +128,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.
...@@ -1201,7 +1201,7 @@ ...@@ -1201,7 +1201,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')) {
...@@ -1229,7 +1229,7 @@ ...@@ -1229,7 +1229,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 () {};
/** /**
...@@ -1241,7 +1241,7 @@ ...@@ -1241,7 +1241,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')) {
...@@ -1266,12 +1266,12 @@ ...@@ -1266,12 +1266,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.
...@@ -1286,7 +1286,7 @@ ...@@ -1286,7 +1286,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')) {
...@@ -1355,14 +1355,13 @@ ...@@ -1355,14 +1355,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 () {
......
...@@ -325,7 +325,7 @@ ...@@ -325,7 +325,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);
...@@ -359,7 +359,8 @@ ...@@ -359,7 +359,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'),
......
...@@ -145,7 +145,7 @@ public function testDialog() { ...@@ -145,7 +145,7 @@ public function testDialog() {
// Check that CSS and JavaScript are "added" to the page dynamically. // Check that CSS and JavaScript are "added" to the page dynamically.
$this->assertTrue(in_array('jquery.ui.dialog.css', array_keys($ajax_result[0]['settings']['ajaxPageState']['css'])), 'jQuery UI dialog CSS added to the page.'); $this->assertTrue(in_array('jquery.ui.dialog.css', array_keys($ajax_result[0]['settings']['ajaxPageState']['css'])), 'jQuery UI dialog CSS added to the page.');
$this->assertTrue(in_array('core/assets/vendor/jquery.ui/ui/jquery.ui.dialog.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'jQuery UI dialog JS added to the page.'); $this->assertTrue(in_array('core/assets/vendor/jquery.ui/ui/jquery.ui.dialog.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'jQuery UI dialog JS added to the page.');
$this->assertTrue(in_array('core/misc/dialog.ajax.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'Drupal dialog JS added to the page.'); $this->assertTrue(in_array('core/misc/dialog/dialog.ajax.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'Drupal dialog JS added to the page.');
// Check that the response matches the expected value. // Check that the response matches the expected value.
$this->assertEqual($modal_expected_response, $ajax_result[3], 'POST request modal dialog JSON response matches.'); $this->assertEqual($modal_expected_response, $ajax_result[3], 'POST request modal dialog JSON response matches.');
......
...@@ -846,7 +846,7 @@ td.group-title { ...@@ -846,7 +846,7 @@ td.group-title {
} }
.views-ui-dialog .views-add-form-selected.container-inline { .views-ui-dialog .views-add-form-selected.container-inline {
padding-top: 0; padding: 0;
} }
.views-ui-dialog .views-add-form-selected.container-inline > div { .views-ui-dialog .views-add-form-selected.container-inline > div {
......
/**
* Presentational styles for Drupal dialogs.
*/
.ui-dialog {
background: transparent;
border: 0;
position: absolute;
z-index: 1260;
overflow: visible;
padding: 0;
}
.ui-dialog .ui-dialog-titlebar {
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;
position: absolute;
}
.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;
overflow: auto;
padding: 1em;
}
.views-ui-dialog .ui-widget-content.ui-dialog-content {
padding: 0;
}
.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;
}
.ui-dialog .ui-dialog-content {
position: static;
}
/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions {
padding: 0;
margin: 0;
}
.ui-dialog .ajax-progress-throbber {
/* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
left: 49%;
position: fixed;
top: 48.5%;
z-index: 1000;
background-color: #232323;
background-image: url("../../../misc/loading-small.gif");
background-position: center center;
background-repeat: no-repeat;
border-radius: 7px;
height: 24px;
opacity: 0.9;
padding: 4px;
width: 24px;
}
.ui-dialog .ajax-progress-throbber .throbber,
.ui-dialog .ajax-progress-throbber .message {
display: none;
}
...@@ -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;
} }
/** /**
......
...@@ -15,6 +15,9 @@ stylesheets: ...@@ -15,6 +15,9 @@ stylesheets:
stylesheets-override: stylesheets-override:
- vertical-tabs.css - vertical-tabs.css
- jquery.ui.theme.css - jquery.ui.theme.css
- css/dialog.theme.css
stylesheets-remove:
- jquery.ui.dialog.css
quickedit_stylesheets: quickedit_stylesheets:
- quickedit.css - quickedit.css
regions: regions:
......
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