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:
drupal.dialog:
version: VERSION
js:
misc/dialog.js: {}
misc/dialog.position.js: {}
misc/dialog/dialog.js: {}
misc/dialog/dialog.position.js: {}
misc/dialog/dialog.jquery-ui.js: {}
css:
theme:
misc/dialog.theme.css: {}
......@@ -127,7 +128,7 @@ drupal.dialog:
drupal.dialog.ajax:
version: VERSION
js:
misc/dialog.ajax.js: {}
misc/dialog/dialog.ajax.js: {}
dependencies:
- core/jquery
- 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 @@
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;
......
......@@ -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.
......@@ -1201,7 +1201,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')) {
......@@ -1229,7 +1229,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 () {};
/**
......@@ -1241,7 +1241,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')) {
......@@ -1266,12 +1266,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.
......@@ -1286,7 +1286,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')) {
......@@ -1355,14 +1355,13 @@
click: function () {
closeDialog('apply', this);
},
'class': 'button-primary button'
primary: true
},
{
text: Drupal.t('Cancel'),
click: function () {
closeDialog('cancel');
},
'class': 'button'
}
}
],
open: function () {
......
......@@ -50,7 +50,8 @@
text: Drupal.t('OK'),
click: function () {
networkErrorModal.close();
}
},
primary: true
}
],
create: function () {
......
......@@ -325,7 +325,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);
......@@ -359,7 +359,8 @@
text: Drupal.t('Save'),
click: function () {
closeDiscardDialog('save');
}
},
primary: true
},
{
text: Drupal.t('Discard changes'),
......
......@@ -145,7 +145,7 @@ public function testDialog() {
// 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('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.
$this->assertEqual($modal_expected_response, $ajax_result[3], 'POST request modal dialog JSON response matches.');
......
......@@ -846,7 +846,7 @@ td.group-title {
}
.views-ui-dialog .views-add-form-selected.container-inline {
padding-top: 0;
padding: 0;
}
.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 @@
* Component containers
*/
.ui-widget {
background: #fff;
background: none;
}
.ui-widget-content {
border: solid 1px #ccc;
border: none;
}
/**
......
......@@ -15,6 +15,9 @@ stylesheets:
stylesheets-override:
- vertical-tabs.css
- jquery.ui.theme.css
- css/dialog.theme.css
stylesheets-remove:
- jquery.ui.dialog.css
quickedit_stylesheets:
- quickedit.css
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