Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update dialog close button to use new "icon-only button" conventions.

  • Loading branch information...
commit 4c714fafd628ff5dd2aab7b9dbc23e2c862e9801 1 parent c289b1c
@savetheclocktower savetheclocktower authored
Showing with 51 additions and 17 deletions.
  1. +45 −11 src/ui/controls/dialog.js
  2. +6 −6 themes/default/ui.dialog.css
View
56 src/ui/controls/dialog.js
@@ -30,9 +30,30 @@
* * `buttons` (`Array` | `Boolean`): A set of `Object`s that describe the
* buttons that should appear at the bottom of the dialog. Set to `false`
* to omit buttons.
+ *
+ * <h4>Events</h4>
+ *
+ * All events have a `dialog` property (e.g., `event.memo.dialog`) that
+ * holds the relevant instance of `S2.UI.Dialog`. Some events have further
+ * properties, as explained below.
+ *
+ * * `ui:dialog:before:open`: Fired when the dialog is told to open,
+ * but before it is displayed on screen. **Cancelable**. If cancelled,
+ * will suppress the display of the dialog.
+ * * `ui:dialog:after:open`: Fired just after the dialog is displayed on
+ * screen. Cannot be cancelled.
+ * * `ui:dialog:before:close`: Fired when the dialog is told to close
+ * (whether successfully or unsuccessfully), but before it has been
+ * hidden. **Cancelable**. If cancelled, will suppress the hiding of the
+ * dialog.
+ * * `ui:dialog:after:close`: Fired just after the dialog disappears from
+ * the screen. Cannot be cancelled. The `success` property is a boolean
+ * that tells whether the dialog was closed in success. The `form`
+ * property (present if the dialog's content contained a `FORM` element)
+ * holds an `Object` serialization of the form's content.
*
**/
- UI.Dialog = Class.create(UI.Base, {
+ UI.Dialog = Class.create(UI.Base, UI.Mixin.Element, {
NAME: "S2.UI.Dialog",
/**
@@ -43,8 +64,8 @@
* the dialog. Otherwise, an element will be created to serve as the
* container.
*
- * Note that the dialog is not displayed on screen when it is created.
- * You must explicitly call [[S2.UI.Dialog#open]] first.
+ * Note that **the dialog is not displayed on screen when it is
+ * created**. You must explicitly call [[S2.UI.Dialog#open]] first.
**/
initialize: function(element, options) {
if (!Object.isElement(element)) {
@@ -94,7 +115,10 @@
this.closeButton = new Element('a', { 'href': '#' });
UI.addClassNames(this.closeButton, 'ui-dialog-titlebar-close ' +
'ui-corner-all');
- new UI.Button(this.closeButton);
+ new UI.Button(this.closeButton, {
+ text: false,
+ icons: { primary: 'ui-icon-closethick' }
+ });
this.closeButton.observe('mousedown', Event.stop);
this.closeButton.observe('click', function(event) {
event.stop();
@@ -104,10 +128,10 @@
this.titleBar.insert(this.closeButton);
// SPAN for close button.
- this.closeText = new Element('span');
- UI.addClassNames(this.closeText, 'ui-icon ui-icon-closethick');
-
- this.closeButton.insert(this.closeText);
+ // this.closeText = new Element('span');
+ // UI.addClassNames(this.closeText, 'ui-icon ui-icon-closethick');
+ //
+ // this.closeButton.insert(this.closeText);
// Text for title bar.
this.titleText = new Element('span', { 'class': 'ui-dialog-title' });
@@ -222,16 +246,26 @@
this.focusables = UI.findFocusables(this.element);
+ var forms = this.content.select('form');
+ if (this.content.match('form')) {
+ forms.push(this.content);
+ }
+
// Disable form submission.
if (!opt.submitForms) {
- var forms = this.content.select('form');
forms.invoke('observe', 'submit', Event.stop);
}
// Figure out what to focus first, excluding the close button.
var f = this.focusables.without(this.closeButton);
var focus = opt.focus, foundFocusable = false;
- if (focus === 'first') {
+ if (focus === 'auto' && forms.length > 0) {
+ // 'auto' means we focus the first form element (if there is a form).
+ // Otherwise we let it fall through the conditional and focus either
+ // the primary button _or_ the first focusable element in the dialog.
+ Form.focusFirstElement(forms.first());
+ foundFocusable = true;
+ } else if (focus === 'first') {
// Focus the first element.
f.first().focus();
foundFocusable = true;
@@ -291,7 +325,7 @@
// If the content area had a form, we'll get the values in object form and
// add them to the custom event metadata.
- var form = this.content.down('form');
+ var form = this.content.match('form') ? this.content : this.content.down('form');
if (form) {
Object.extend(memo, { form: form.serialize({ hash: true }) });
}
View
12 themes/default/ui.dialog.css
@@ -1,13 +1,13 @@
/* Dialog
----------------------------------*/
-.ui-dialog { position: relative; padding: .2em; width: 300px; }
-.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
-.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
+.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
-.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
-.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
-.ui-draggable .ui-dialog-titlebar { cursor: move; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
Please sign in to comment.
Something went wrong with that request. Please try again.