Issue #2113911 by LewisNyman, Manuel Garcia, longwave, nod_, Rajendar Reddy, pakmanlh, olemedia, rteijeiro: Modal style update.
Alex Pott
parent
94d95e5b4d
commit
22b7b7e903
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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 @@ class DialogTest extends AjaxTestBase {
|
|||
// 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 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
/**
|
||||
* 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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue