ICEfaces
  1. ICEfaces
  2. ICE-9993

"Maximize/Restore" button for ace:dialog header

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 4.0.BETA
    • Fix Version/s: 4.2.BETA, 4.2
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      All

      Description

      Because of the prevalence of applications that are built around multiple popups (sometimes layered) in lieu of browser windows, it would be nice if the ace:dialog provided a few more quality of life features.

      The biggest example of this would be a "maximize" button in the header, toggleable via an attribute (such as maximizable="true"). When clicked the button would expand the popup (preferably client side only) to fill the screen, either 100% or close to it (since seeing a bit of the content underneath might be nice, such as centered at 95% size).
      Then the button would change to a "restore" button, that puts the popup back to it's previous size when clicked.
      1. 1.png
        16 kB
      2. 2.png
        31 kB

        Activity

        Hide
        Arran Mccullough added a comment -

        Another request from a customer is to implement a Minimize button as well. This essentially will have the dialog use two states for its size. Clicking the maximized button will have it display full screen, clicking the maximized will have it display in its original size/state.

        Show
        Arran Mccullough added a comment - Another request from a customer is to implement a Minimize button as well. This essentially will have the dialog use two states for its size. Clicking the maximized button will have it display full screen, clicking the maximized will have it display in its original size/state.
        Hide
        Arturo Zambrano added a comment -

        r49616: added maximize and restore buttons to ace:dialog

        From reading the description and the comment above, it wasn't very clear to me how these buttons should behave. So, I went ahead with what I felt made the most sense, and things work in the following way.

        There's a new boolean attribute 'maximizableRestorable' that when is set to true will add the maximize and restore buttons to the dialog. The default value is false.

        The maximize button will expand the dialog to take 95% of the viewport and will center the dialog on the viewport as well. The CSS position will be changed to fixed, so the dialog stays in place if the window is scrolled. This button will always be visible, even when being already maximized for the cases when the dialog needs to be expanded again if it was resized or dragged while expanded or if the window was resized so that the dialog can take 95% of the new viewport dimensions again.

        The restore button will revert to the original position and dimensions of the dialog when it was shown. This of course will work to go back to the initial state from the maximized state. This button will always be visible as well. Even if the dialog it's not maximized, it can be resized or dragged, so pressing this button will revert to the initial position and dimensions of the dialog. This works on a "per-showing" basis; this means that if the dialog is resized and/or dragged and then closed, the next time it's shown again, those dimensions and position will become the new values for the restored state. Of course, if it's restored before closing, the original restored state values will remain the same the next time the dialog is shown again.

        As for the maximized state, it is only a transient state. This means that if the dialog it's closed while it's expanded. The next time is shown it will have the original restored state dimensions and position, not the maximized state dimensions and position.

        Testing Notes: please test these buttons in combination with all other attributes, paying special attention to the show/hide effects.

        Show
        Arturo Zambrano added a comment - r49616: added maximize and restore buttons to ace:dialog From reading the description and the comment above, it wasn't very clear to me how these buttons should behave. So, I went ahead with what I felt made the most sense, and things work in the following way. There's a new boolean attribute 'maximizableRestorable' that when is set to true will add the maximize and restore buttons to the dialog. The default value is false. The maximize button will expand the dialog to take 95% of the viewport and will center the dialog on the viewport as well. The CSS position will be changed to fixed, so the dialog stays in place if the window is scrolled. This button will always be visible, even when being already maximized for the cases when the dialog needs to be expanded again if it was resized or dragged while expanded or if the window was resized so that the dialog can take 95% of the new viewport dimensions again. The restore button will revert to the original position and dimensions of the dialog when it was shown. This of course will work to go back to the initial state from the maximized state. This button will always be visible as well. Even if the dialog it's not maximized, it can be resized or dragged, so pressing this button will revert to the initial position and dimensions of the dialog. This works on a "per-showing" basis; this means that if the dialog is resized and/or dragged and then closed, the next time it's shown again, those dimensions and position will become the new values for the restored state. Of course, if it's restored before closing, the original restored state values will remain the same the next time the dialog is shown again. As for the maximized state, it is only a transient state. This means that if the dialog it's closed while it's expanded. The next time is shown it will have the original restored state dimensions and position, not the maximized state dimensions and position. Testing Notes: please test these buttons in combination with all other attributes, paying special attention to the show/hide effects.
        Hide
        Ken Fyten added a comment -

        Upon further review I think that we should simplify the way this feature works. It's a bit confusing having both buttons available all the time. I think we should simplify it such that:

        • When the dialog first appears (not maximized), it only displays the maximize button.
        • When the dialog is maximized, the button changes to a restore button, and the dialog is no longer moveable or resizable.
        • When the maximized dialog is restored, the button changes back to a maximize button, and the dialog regains resize and move capabilities if it is supposed to have them. Note that the restore button will position and size the dialog to the same location and dimensions that it had when it was maximized, not to it's original/initial rendering location and size.
        Show
        Ken Fyten added a comment - Upon further review I think that we should simplify the way this feature works. It's a bit confusing having both buttons available all the time. I think we should simplify it such that: When the dialog first appears (not maximized), it only displays the maximize button. When the dialog is maximized, the button changes to a restore button, and the dialog is no longer moveable or resizable. When the maximized dialog is restored, the button changes back to a maximize button, and the dialog regains resize and move capabilities if it is supposed to have them. Note that the restore button will position and size the dialog to the same location and dimensions that it had when it was maximized, not to it's original/initial rendering location and size.
        Hide
        Arturo Zambrano added a comment -

        r49685: committed changes described above

        Show
        Arturo Zambrano added a comment - r49685: committed changes described above
        Hide
        Carmen Cristurean added a comment -

        r49687 testing on IE11/IE8, MsEdge38, Chrome55, FF49, above changes are verified.
        One possible styling issue to be mentioned, if resizing the dialog by reducing its sizes, the text can overlap the buttons in the header; when the dialog is maximized, the content of the dialog may not render, or it may render scrollbars, depending on the size of the resized dialog before it was maximized; see screen shots attached.

        Show
        Carmen Cristurean added a comment - r49687 testing on IE11/IE8, MsEdge38, Chrome55, FF49, above changes are verified. One possible styling issue to be mentioned, if resizing the dialog by reducing its sizes, the text can overlap the buttons in the header; when the dialog is maximized, the content of the dialog may not render, or it may render scrollbars, depending on the size of the resized dialog before it was maximized; see screen shots attached.
        Hide
        Arturo Zambrano added a comment -

        r49698: applied the width and the height in the dialog widget so that the contents of the dialog also expand when maximized

        This fixes addresses the second issue above. As for the first issue, that's just the way things are. The buttons are absolutely positioned, so they will overlap if the the user resizes the dialog very narrowly. However, the buttons are on top of the text and will be clearly visible when hovering over them. There's also some default right margin in the component's CSS to always add enough space for the buttons when showing the dialog, regardless of the length of the text.

        Show
        Arturo Zambrano added a comment - r49698: applied the width and the height in the dialog widget so that the contents of the dialog also expand when maximized This fixes addresses the second issue above. As for the first issue, that's just the way things are. The buttons are absolutely positioned, so they will overlap if the the user resizes the dialog very narrowly. However, the buttons are on top of the text and will be clearly visible when hovering over them. There's also some default right margin in the component's CSS to always add enough space for the buttons when showing the dialog, regardless of the length of the text.
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r49698, Tomcat 8, Chrome 53, FF 47, MS edge, IE 11, 10, 9, 8.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r49698, Tomcat 8, Chrome 53, FF 47, MS edge, IE 11, 10, 9, 8.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Carlo Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: