" ).dialog( { dialogClass: "foo" } );
- widget = element.dialog( "widget" );
- assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" );
- element.dialog( "option", "dialogClass", "foobar" );
- assert.lacksClasses( widget, "foo", "dialogClass changed, previous one was removed" );
- assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" );
- element.remove();
-
- element = $( "
" ).dialog( { dialogClass: "foo bar" } );
- widget = element.dialog( "widget" );
- assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." );
- element.remove();
-} );
-
-QUnit.test( "buttons - deprecated options", function( assert ) {
- assert.expect( 7 );
-
- var buttons,
- element = $( "
" ).dialog( {
- buttons: [
- {
- html: "a button",
- "class": "additional-class",
- id: "my-button-id",
- click: function() {
- assert.equal( this, element[ 0 ], "correct context" );
- },
- icons: { primary: "ui-icon-cancel" },
- text: false
- }
- ]
- } );
-
- buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
- assert.equal( buttons.length, 1, "correct number of buttons" );
- assert.equal( buttons.attr( "id" ), "my-button-id", "correct id" );
- assert.equal( $.trim( buttons.text() ), "a button", "correct label" );
- assert.hasClasses( buttons, "additional-class" );
- assert.deepEqual( buttons.button( "option", "icon" ), "ui-icon-cancel" );
- assert.equal( buttons.button( "option", "showLabel" ), false );
- buttons.trigger( "click" );
-
- element.remove();
-} );
-} );
diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
index c8829331f2a..15ffb8780ea 100644
--- a/ui/widgets/dialog.js
+++ b/ui/widgets/dialog.js
@@ -43,7 +43,7 @@
}
}( function( $ ) {
-$.widget( "ui.dialog", {
+return $.widget( "ui.dialog", {
version: "@VERSION",
options: {
appendTo: "body",
@@ -911,30 +911,4 @@ $.widget( "ui.dialog", {
}
} );
-// DEPRECATED
-// TODO: switch return back to widget declaration at top of file when this is removed
-if ( $.uiBackCompat !== false ) {
-
- // Backcompat for dialogClass option
- $.widget( "ui.dialog", $.ui.dialog, {
- options: {
- dialogClass: ""
- },
- _createWrapper: function() {
- this._super();
- this.uiDialog.addClass( this.options.dialogClass );
- },
- _setOption: function( key, value ) {
- if ( key === "dialogClass" ) {
- this.uiDialog
- .removeClass( this.options.dialogClass )
- .addClass( value );
- }
- this._superApply( arguments );
- }
- } );
-}
-
-return $.ui.dialog;
-
} ) );
From d64a6264f3d15c5487c5c1806e26ab7fc0153476 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?=
Date: Wed, 25 Jan 2017 15:18:39 -0500
Subject: [PATCH 2/3] Dialog: Adjust styling for confining the title
---
themes/base/dialog.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/themes/base/dialog.css b/themes/base/dialog.css
index 7146fe95364..e0971e5df5a 100644
--- a/themes/base/dialog.css
+++ b/themes/base/dialog.css
@@ -16,14 +16,14 @@
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
- padding: .4em 1em;
+ padding: .4em 2em .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
- width: 90%;
+ width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
From 43b1d7c95e1999321df57cdc258375ecb8beb3ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?=
Date: Wed, 25 Jan 2017 15:36:08 -0500
Subject: [PATCH 3/3] Dialog: Add `icons` option to support titlebar icons
Fixes #15121
---
tests/unit/dialog/common.js | 3 +++
tests/unit/dialog/options.js | 24 ++++++++++++++++++++++++
themes/base/dialog.css | 9 +++++++++
ui/widgets/dialog.js | 23 +++++++++++++++++++++++
4 files changed, 59 insertions(+)
diff --git a/tests/unit/dialog/common.js b/tests/unit/dialog/common.js
index c8d885ad03f..b8a06b1c841 100644
--- a/tests/unit/dialog/common.js
+++ b/tests/unit/dialog/common.js
@@ -18,6 +18,9 @@ common.testWidget( "dialog", {
draggable: true,
height: "auto",
hide: null,
+ icons: {
+ title: null
+ },
maxHeight: null,
maxWidth: null,
minHeight: 150,
diff --git a/tests/unit/dialog/options.js b/tests/unit/dialog/options.js
index 1be2888e340..2928ab9e4a4 100644
--- a/tests/unit/dialog/options.js
+++ b/tests/unit/dialog/options.js
@@ -269,6 +269,30 @@ QUnit.test( "height", function( assert ) {
element.remove();
} );
+QUnit.test( "icons", function( assert ) {
+ assert.expect( 5 );
+
+ var element = $( "" ).dialog( {
+ icons: {
+ title: "ui-icon-disk"
+ }
+ } );
+ var titleBar = element.dialog( "widget" ).find( ".ui-dialog-titlebar" );
+
+ var icon = titleBar.find( ".ui-dialog-title-icon" );
+ assert.equal( 1, icon.length, "title icon exists after init" );
+ assert.hasClasses( icon, "ui-icon-disk", "correct icon after init" );
+
+ element.dialog( "option", "icons.title", null );
+ icon = titleBar.find( ".ui-dialog-title-icon" );
+ assert.equal( 0, icon.length, "title icon removed when null" );
+
+ element.dialog( "option", "icons.title", "ui-icon-gear" );
+ icon = titleBar.find( ".ui-dialog-title-icon" );
+ assert.equal( 1, icon.length, "title icon exists after update" );
+ assert.hasClasses( icon, "ui-icon-gear", "correct icon after update" );
+} );
+
QUnit.test( "maxHeight", function( assert ) {
assert.expect( 3 );
diff --git a/themes/base/dialog.css b/themes/base/dialog.css
index e0971e5df5a..48edac9548c 100644
--- a/themes/base/dialog.css
+++ b/themes/base/dialog.css
@@ -27,6 +27,15 @@
overflow: hidden;
text-overflow: ellipsis;
}
+.ui-dialog .ui-dialog-title-icon {
+ position: absolute;
+ left: 0.3em;
+ top: 50%;
+ margin-top: -10px;
+}
+.ui-dialog-title-icon + .ui-dialog-title {
+ padding-left: 10px;
+}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
diff --git a/ui/widgets/dialog.js b/ui/widgets/dialog.js
index 15ffb8780ea..b1bbd7d2def 100644
--- a/ui/widgets/dialog.js
+++ b/ui/widgets/dialog.js
@@ -58,6 +58,9 @@ return $.widget( "ui.dialog", {
draggable: true,
hide: null,
height: "auto",
+ icons: {
+ title: null
+ },
maxHeight: null,
maxWidth: null,
minHeight: 150,
@@ -446,6 +449,8 @@ return $.widget( "ui.dialog", {
this._addClass( uiDialogTitle, "ui-dialog-title" );
this._title( uiDialogTitle );
+ this._titleIcon( this.options.icons.title );
+
this.uiDialogTitlebar.prependTo( this.uiDialog );
this.uiDialog.attr( {
@@ -461,6 +466,20 @@ return $.widget( "ui.dialog", {
}
},
+ _titleIcon: function( icon ) {
+ if ( this.uiDialogTitleIcon ) {
+ this.uiDialogTitleIcon.remove();
+ delete this.uiDialogTitleIcon;
+ }
+
+ if ( icon ) {
+ this.uiDialogTitleIcon = $( "" );
+ this._addClass( this.uiDialogTitleIcon, "ui-dialog-title-icon",
+ "ui-icon " + this.options.icons.title );
+ this.uiDialogTitleIcon.prependTo( this.uiDialogTitlebar );
+ }
+ },
+
_createButtonPane: function() {
this.uiDialogButtonPane = $( "" );
this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane",
@@ -742,6 +761,10 @@ return $.widget( "ui.dialog", {
}
}
+ if ( key === "icons" ) {
+ this._titleIcon( value.title );
+ }
+
if ( key === "position" ) {
this._position();
}