with minimize and restore button in title

with minimize and restore button in title

Author: uplusware

themes/base/dialog.css

@@ -36,6 +36,24 @@
 	padding: 1px;
 	height: 20px;
 }
+.ui-dialog .ui-dialog-titlebar-minimize {
+	position: absolute;
+	right: 2.1em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
+.ui-dialog .ui-dialog-titlebar-restore {
+	position: absolute;
+	right: 3.8em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
 .ui-dialog .ui-dialog-content {
 	position: relative;
 	border: 0;

themes/base/theme.css

@@ -331,6 +331,8 @@ a.ui-button:active,
 .ui-icon-minus { background-position: -48px -128px; }
 .ui-icon-minusthick { background-position: -64px -128px; }
 .ui-icon-close { background-position: -80px -128px; }
+.ui-icon-restore { background-position: -176px -128px; }
+.ui-icon-minimize { background-position: -48px -128px; }
 .ui-icon-closethick { background-position: -96px -128px; }
 .ui-icon-key { background-position: -112px -128px; }
 .ui-icon-lightbulb { background-position: -128px -128px; }

ui/widgets/dialog.js

@@ -55,6 +55,8 @@ $.widget( "ui.dialog", {
 		},
 		closeOnEscape: true,
 		closeText: "Close",
+		minimizeText: "Minimize",
+		restoreText: "Restore",
 		draggable: true,
 		hide: null,
 		height: "auto",
@@ -441,7 +443,51 @@ $.widget( "ui.dialog", {
 				this.close( event );
 			}
 		} );
-
+        
+        this.uiDialogTitlebarMinimize = $( "<button type='button'></button>" )
+            .button( {
+                label: $( "<a>" ).text( this.options.minimizeText ).html(),
+                icon: "ui-icon ui-icon-minimize",
+                showLabel: false
+            } )
+            .appendTo( this.uiDialogTitlebar );
+        this._addClass( this.uiDialogTitlebarMinimize, "ui-dialog-titlebar-minimize" );
+        this._on( this.uiDialogTitlebarMinimize, {
+            click: function( event ) {
+                event.preventDefault();
+                this.options.restoreWidth = this.options.width;
+                this.options.restoreHeight = this.options.height;
+                this.uiDialog.width(300);
+                this.uiDialog.height(this.uiDialogButtonPane.height);
+                this.element.hide();
+                this.uiDialogButtonPane.hide();
+                this.uiDialogTitlebarRestore.button("enable");
+                this.uiDialogTitlebarMinimize.button( "disable" );
+            }
+        } );
+        this.uiDialogTitlebarRestore = $( "<button type='button'></button>" )
+            .button( {
+                label: $( "<a>" ).text( this.options.restoreText ).html(),
+                icon: "ui-icon ui-icon-restore",
+                showLabel: false
+            } )
+            .appendTo( this.uiDialogTitlebar );
+        this._addClass( this.uiDialogTitlebarRestore, "ui-dialog-titlebar-restore" );
+        this._on( this.uiDialogTitlebarRestore, {
+            click: function( event ) {
+                event.preventDefault();
+                if(this.options.restoreWidth != undefined && this.options.restoreWidth != null && this.options.restoreWidth != "")
+                    this.uiDialog.width(this.options.restoreWidth);
+                if(this.options.restoreHeight != undefined && this.options.restoreHeight != null && this.options.restoreHeight != "")
+                    this.uiDialog.height(this.options.restoreHeight);
+                this.element.show();
+                this.uiDialogButtonPane.show();
+                this.uiDialogTitlebarMinimize.button( "enable" );
+                this.uiDialogTitlebarRestore.button( "disable" );
+            }
+        } );
+        this.uiDialogTitlebarRestore.button( "disable" );
+    
 		uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
 		this._addClass( uiDialogTitle, "ui-dialog-title" );
 		this._title( uiDialogTitle );