Ticket #6830 (closed feature: fixed)

Opened 3 years ago

Last modified 17 months ago

Allow Icons to be specified for Dialog buttons

Reported by: mjpowersjr Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.7
Keywords: Cc:
Blocking: Blocked by:

Description

When defining buttons for a new Dialog widget, you can easily add buttons to the dialog, by adding something like this:

  ...
  buttons {
    Cancel : function() {...},
    DoSomething: function() {...},
  }

It would be really handy if you could specify icons to be used with the buttons. I'm not sure what the best way to do this would be, but maybe you could pass in an array of button objects ?

Or maybe somethings like this:

  buttons {
    Cancel : { icon: 'ui-primary-trash', callback: someCallback }
  }

I'm not really sure what the best implementation would be, but it would be a nice feature to have. It seems like it should be pretty straightforward, as the Dialog widget makes use of the Button widget.

Change History

comment:1 Changed 3 years ago by mjpowersjr

Just a quick update, you can achieve this without modifications to jQuery, but it does require some work:

  var dialog = $(...).dialog(...);
  dialog.parent().find('button:contains("Cancel")')
    .addClass('ui-button-text-icon-primary')
    .removeClass('ui-button-text-only')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-close"></span>");

It seems that at least a few other people have wanted the same feature:  http://stackoverflow.com/questions/2525524/jquery-ui-dialog-button-icons  http://forum.jquery.com/topic/making-it-easier-to-customize-style-of-buttons-in-jquery-ui-dialog-boxes

comment:2 Changed 3 years ago by scott.gonzalez

Wow, you should definitely not do that. If you're going to manually change the state of a button, use button's public API, don't manually modify it's state.

comment:3 Changed 3 years ago by scott.gonzalez

  • Status changed from new to open

If you want this level of control, you should definitely be using the array format for buttons, not the simplified hash format. I could see whitelisting the icons property to be passed along to the button widget. If we're going to proxy the icons, we should really proxy every button option though. This is tricky because the text property and button's text option have completely different meanings.

comment:4 Changed 3 years ago by scott.gonzalez

Maybe we can proxy icons and update button to treat an empty label the same as text: false. That would expose the majority of the button API without explicitly exposing the button API. The only thing missing would be the ability to specify text but have it hidden.

comment:5 follow-up: ↓ 11 Changed 3 years ago by brian123zx

Hi, I'm new to the jQuery UI development side of things. I'd like to work on this ticket. I read the  bugfixing guide but don't see how to assign this ticket to my name. I'd go with what was said previously about proxying the icons property, but I'd say add another property for controlling the display of the text, possibly called showText:true|false. That would allow the buttons to maintain accessibility and allow for most control.

$( ".selector" ).dialog({ buttons: [
    {
        text: "Ok",
        click: function() { $(this).dialog("close"); },
        icons:{
            primary:'ui-icon-locked'
        },
        showText:false
    }
] });

How do I go about assigning this ticket to myself? I've already forked the project in github and familiarized myself with that.

comment:6 Changed 3 years ago by scott.gonzalez

Brian, I think your proposal makes sense. Can you please post your proposed API on  the Developing jQuery UI forum for feedback?

As for assigning the ticket to yourself, that's not something that you can do. The bug fixing guide needs to be updated to remove the section about ticket assignments as that was written a long time ago when the guide was only meant for team members.

comment:7 Changed 3 years ago by feugy

Hi.

I fixed this on my own jQuery-ui dialog (v1.8.11), simply by replacing a line in the _createButtons() method: dialog.js, line 385

    button.button();

by:

    button.button({icons:props.icons});

if icons are specified in the way brian123zx explained, they will be displayed. If no icons are specified, or if the "simple" way to specify buttons is used, no icons are displayed.

Enjoy !

Damien.

comment:8 follow-up: ↓ 9 Changed 3 years ago by dracos

For those wanting to implement feugy's change directly in jquery-ui.min.js (1.8.11), it goes at line 343, about character 191, within this statement:

j.button()

Which becomes

j.button({icons:n.icons})

comment:9 in reply to: ↑ 8 Changed 3 years ago by marcelklomp

Replying to dracos: And if you want to implement feugy's change in jquery-ui.min.js (1.8.13), it goes at line 386, character 297:

i.button()

Which becomes

i.button({icons:h.icons})

comment:10 Changed 3 years ago by scott.gonzalez

#7598 is a duplicate of this ticket.

comment:11 in reply to: ↑ 5 ; follow-up: ↓ 12 Changed 3 years ago by David.Sullivan

I went ahead and submitted a pull request of this.  https://github.com/jquery/jquery-ui/pull/423 Demo:  http://jsbin.com/ebowan/12/edit

Think it covers all the bases.

$(document).ready(function() {
    $('#myDialog').dialog({
        buttons: [
          {
            text: 'Icon Only',
            showText: false,
            icons: {
                    primary: 'ui-icon-disk'
                }
            },
           {text: 'Primary',
            icons: {
                    primary: 'ui-icon-trash'
                }
            },
            {text: '2ndary',
            icons: {
                    secondary: 'ui-icon-plus'
                }
            },
            {text: 'Both',
            icons: {
                   primary: 'ui-icon-trash', secondary: 'ui-icon-plus'
                }
            }
                 ]
    });

});

comment:12 in reply to: ↑ 11 Changed 2 years ago by David.Sullivan

I put together a demo of this functionality here.  http://davidjquery.com/jquery-ui-1/demos/dialog/buttons.html

comment:13 Changed 22 months ago by scott.gonzalez

  • Type changed from enhancement to feature

comment:14 Changed 19 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:15 Changed 17 months ago by Jörn Zaefferer

  • Status changed from open to closed
  • Resolution set to fixed

Dialog: Pass through icons and showText (as 'text') options to button. Fixes #6830 - Allow Icons to be specified for Dialog buttons.

Changeset: 999617343f7b813dc1c8d9c9048489e4d99d0470

Note: See TracTickets for help on using tickets.