Skip to content
This repository
Browse code

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

  • Loading branch information...
commit 4c714fafd628ff5dd2aab7b9dbc23e2c862e9801 1 parent c289b1c
Andrew Dupont savetheclocktower authored

Showing 2 changed files with 51 additions and 17 deletions. Show diff stats Hide diff stats

  1. +45 11 src/ui/controls/dialog.js
  2. +6 6 themes/default/ui.dialog.css
56 src/ui/controls/dialog.js
@@ -30,9 +30,30 @@
30 30 * * `buttons` (`Array` | `Boolean`): A set of `Object`s that describe the
31 31 * buttons that should appear at the bottom of the dialog. Set to `false`
32 32 * to omit buttons.
  33 + *
  34 + * <h4>Events</h4>
  35 + *
  36 + * All events have a `dialog` property (e.g., `event.memo.dialog`) that
  37 + * holds the relevant instance of `S2.UI.Dialog`. Some events have further
  38 + * properties, as explained below.
  39 + *
  40 + * * `ui:dialog:before:open`: Fired when the dialog is told to open,
  41 + * but before it is displayed on screen. **Cancelable**. If cancelled,
  42 + * will suppress the display of the dialog.
  43 + * * `ui:dialog:after:open`: Fired just after the dialog is displayed on
  44 + * screen. Cannot be cancelled.
  45 + * * `ui:dialog:before:close`: Fired when the dialog is told to close
  46 + * (whether successfully or unsuccessfully), but before it has been
  47 + * hidden. **Cancelable**. If cancelled, will suppress the hiding of the
  48 + * dialog.
  49 + * * `ui:dialog:after:close`: Fired just after the dialog disappears from
  50 + * the screen. Cannot be cancelled. The `success` property is a boolean
  51 + * that tells whether the dialog was closed in success. The `form`
  52 + * property (present if the dialog's content contained a `FORM` element)
  53 + * holds an `Object` serialization of the form's content.
33 54 *
34 55 **/
35   - UI.Dialog = Class.create(UI.Base, {
  56 + UI.Dialog = Class.create(UI.Base, UI.Mixin.Element, {
36 57 NAME: "S2.UI.Dialog",
37 58
38 59 /**
@@ -43,8 +64,8 @@
43 64 * the dialog. Otherwise, an element will be created to serve as the
44 65 * container.
45 66 *
46   - * Note that the dialog is not displayed on screen when it is created.
47   - * You must explicitly call [[S2.UI.Dialog#open]] first.
  67 + * Note that **the dialog is not displayed on screen when it is
  68 + * created**. You must explicitly call [[S2.UI.Dialog#open]] first.
48 69 **/
49 70 initialize: function(element, options) {
50 71 if (!Object.isElement(element)) {
@@ -94,7 +115,10 @@
94 115 this.closeButton = new Element('a', { 'href': '#' });
95 116 UI.addClassNames(this.closeButton, 'ui-dialog-titlebar-close ' +
96 117 'ui-corner-all');
97   - new UI.Button(this.closeButton);
  118 + new UI.Button(this.closeButton, {
  119 + text: false,
  120 + icons: { primary: 'ui-icon-closethick' }
  121 + });
98 122 this.closeButton.observe('mousedown', Event.stop);
99 123 this.closeButton.observe('click', function(event) {
100 124 event.stop();
@@ -104,10 +128,10 @@
104 128 this.titleBar.insert(this.closeButton);
105 129
106 130 // SPAN for close button.
107   - this.closeText = new Element('span');
108   - UI.addClassNames(this.closeText, 'ui-icon ui-icon-closethick');
109   -
110   - this.closeButton.insert(this.closeText);
  131 + // this.closeText = new Element('span');
  132 + // UI.addClassNames(this.closeText, 'ui-icon ui-icon-closethick');
  133 + //
  134 + // this.closeButton.insert(this.closeText);
111 135
112 136 // Text for title bar.
113 137 this.titleText = new Element('span', { 'class': 'ui-dialog-title' });
@@ -222,16 +246,26 @@
222 246
223 247 this.focusables = UI.findFocusables(this.element);
224 248
  249 + var forms = this.content.select('form');
  250 + if (this.content.match('form')) {
  251 + forms.push(this.content);
  252 + }
  253 +
225 254 // Disable form submission.
226 255 if (!opt.submitForms) {
227   - var forms = this.content.select('form');
228 256 forms.invoke('observe', 'submit', Event.stop);
229 257 }
230 258
231 259 // Figure out what to focus first, excluding the close button.
232 260 var f = this.focusables.without(this.closeButton);
233 261 var focus = opt.focus, foundFocusable = false;
234   - if (focus === 'first') {
  262 + if (focus === 'auto' && forms.length > 0) {
  263 + // 'auto' means we focus the first form element (if there is a form).
  264 + // Otherwise we let it fall through the conditional and focus either
  265 + // the primary button _or_ the first focusable element in the dialog.
  266 + Form.focusFirstElement(forms.first());
  267 + foundFocusable = true;
  268 + } else if (focus === 'first') {
235 269 // Focus the first element.
236 270 f.first().focus();
237 271 foundFocusable = true;
@@ -291,7 +325,7 @@
291 325
292 326 // If the content area had a form, we'll get the values in object form and
293 327 // add them to the custom event metadata.
294   - var form = this.content.down('form');
  328 + var form = this.content.match('form') ? this.content : this.content.down('form');
295 329 if (form) {
296 330 Object.extend(memo, { form: form.serialize({ hash: true }) });
297 331 }
12 themes/default/ui.dialog.css
... ... @@ -1,13 +1,13 @@
1 1 /* Dialog
2 2 ----------------------------------*/
3   -.ui-dialog { position: relative; padding: .2em; width: 300px; }
4   -.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
5   -.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
  3 +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
  4 +.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; }
  5 +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
6 6 .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
7   -.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
8   -.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
  7 +.ui-dialog .ui-dialog-titlebar-close span { display: block; }
  8 +.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { }
9 9 .ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
10 10 .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; }
11 11 .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; }
12 12 .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
13   -.ui-draggable .ui-dialog-titlebar { cursor: move; }
  13 +.ui-draggable .ui-dialog-titlebar { cursor: move; }

0 comments on commit 4c714fa

Please sign in to comment.
Something went wrong with that request. Please try again.