ICEfaces
  1. ICEfaces
  2. ICE-9147

ace:dialog - Add capability to add other components to the header section

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: EE-3.2.0.GA
          • Fix Version/s: 4.0.BETA, 4.0
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            All
          • Assignee Priority:
            P2
          • Salesforce Case Reference:
          • Affects:
            Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration

            Description

            Feature Request: Currently the ace:dialog header will only render some text and a close button. This request is to add in the capability to add other components such as another button to this header. This could be done through adding capability for an f:facet to be used, in a similar way to the ice:panelPopup.

              Issue Links

              blocks

              Improvement - An improvement or enhancement to an existing feature or task. ICE-9001 Add 'dragHandle' attribute to ace:confirmationDialog, ace:dialog, ace:list, and ace:tree.

              • Minor - Minor loss of function, or other problem where easy workaround is present.
              • Closed

                Activity

                Ascending order - Click to sort in descending order
                Hide
                Permalink
                Arturo Zambrano added a comment - - edited

                Committed new feature at revision 37307.

                Added new 'handle' attribute to specify which element(s) inside the dialog will be used as the handle(s), instead of the header. It wasn't feasible to add a facet for custom header rendering. We don't render the header ourselves; the jQueryUI widget only takes a header string and a boolean option for the close button in the configuration object, and it adds the necessary nodes to the dialog.

                For this specific customer, the usage could be like this:

                <ace:dialog handle=".myHeader" showHeader="false" styleClass="noPadding"... >
	<div class="myHeader" style="height:50px;cursor:move;">
	<!-- custom header content -->
	</div>
	<!-- dialog body -->
</ace:dialog>

                The following styling rule would be necessary to remove all the paddings inside the dialog:
                .noPadding, .noPadding .ui-dialog-content

                { padding:0; }
                Show
                Arturo Zambrano added a comment - - edited Committed new feature at revision 37307. Added new 'handle' attribute to specify which element(s) inside the dialog will be used as the handle(s), instead of the header. It wasn't feasible to add a facet for custom header rendering. We don't render the header ourselves; the jQueryUI widget only takes a header string and a boolean option for the close button in the configuration object, and it adds the necessary nodes to the dialog. For this specific customer, the usage could be like this: <ace:dialog handle= ".myHeader" showHeader= " false " styleClass= "noPadding" ... > <div class= "myHeader" style= "height:50px;cursor:move;" > <!-- custom header content --> </div> <!-- dialog body --> </ace:dialog> The following styling rule would be necessary to remove all the paddings inside the dialog: .noPadding, .noPadding .ui-dialog-content { padding:0; }
                Hide
                Permalink
                Arturo Zambrano added a comment -

                As per Mark's input, the approach to solve this issue was changed from adding a 'handle' attribute to supporting a 'header' facet. This change was committed at revision 37335.

                This is a new example of how the feature is issued. You can disregard the example in the previous comment.

                <ace:dialog draggable="true" width="400">
   <f:facet name="header">
		<h:outputText value="Custom Header" />
   </f:facet>
   ...
</ace:dialog>

                The same class name 'ui-dialog-titlebar' will be used for the custom header, so it will show the 'move' cursor.

                Show
                Arturo Zambrano added a comment - As per Mark's input, the approach to solve this issue was changed from adding a 'handle' attribute to supporting a 'header' facet. This change was committed at revision 37335. This is a new example of how the feature is issued. You can disregard the example in the previous comment. <ace:dialog draggable= " true " width= "400" > <f:facet name= "header" > <h:outputText value= "Custom Header" /> </f:facet> ... </ace:dialog> The same class name 'ui-dialog-titlebar' will be used for the custom header, so it will show the 'move' cursor.

                  People

                  • Assignee:
                    Arturo Zambrano
                    Reporter:
                    Arran Mccullough
                  • Votes:
                    1 Vote for this issue
                    Watchers:
                    3 Start watching this issue

                    Dates

                    • Created:
                      Updated:
                      Resolved: