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

        Carlo Guglielmin created issue -
        Carlo Guglielmin made changes -
        Field Original Value New Value
        Priority Major [ 3 ] Minor [ 4 ]
        Ken Fyten made changes -
        Fix Version/s 4.1 [ 11375 ]
        Arran Mccullough made changes -
        Support Case References Support Case #12790 - https://icesoft.my.salesforce.com/5007000000c0y8f
        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.
        Arran Mccullough made changes -
        Summary "Maximize" button for ace:dialog header "Maximize/Minimize" button for ace:dialog header
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Assignee Priority P2 [ 10011 ]
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Assignee Priority P2 [ 10011 ]
        Fix Version/s 4.2 [ 12870 ]
        Fix Version/s 4.1 [ 11375 ]
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Assignee Priority P2 [ 10011 ]
        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.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #49616 Thu Dec 01 11:13:31 MST 2016 art.zambrano ICE-9993 added maximize and restore buttons to ace:dialog
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.css
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/dialog/DialogRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/dialog/DialogMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.js
        Ken Fyten made changes -
        Summary "Maximize/Minimize" button for ace:dialog header "Maximize/Restore" button for ace:dialog header
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Assignee Arturo Zambrano [ artzambrano ] Carmen Cristurean [ ccristurean ]
        Assignee Priority P2 [ 10011 ] P1 [ 10010 ]
        Ken Fyten made changes -
        Comment [ A comment with security level 'icesoft-internal-developers' was removed. ]
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #49671 Mon Dec 12 14:33:44 MST 2016 carmen.cristurean ICE-9993 - add ace:dialog "Maximize/Restore" Showcase demo (initial version).
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/view/menu/data/CentralDataList.java
        Commit graph ADD /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/dialog/dialogMaxRestore.xhtml
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Commit graph ADD /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/dialog/DialogMaxRestoreBean.java
        Ken Fyten made changes -
        Fix Version/s 4.2.BETA [ 13091 ]
        Ken Fyten made changes -
        Assignee Carmen Cristurean [ ccristurean ] Arturo Zambrano [ artzambrano ]
        Hide
        Arturo Zambrano added a comment -

        r49685: committed changes described above

        Show
        Arturo Zambrano added a comment - r49685: committed changes described above
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #49685 Wed Dec 14 13:19:37 MST 2016 art.zambrano ICE-9993 added maximize and restore buttons to ace:dialog
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.css
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.js
        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.
        Carmen Cristurean made changes -
        Attachment 1.png [ 22400 ]
        Attachment 2.png [ 22401 ]
        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.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #49698 Thu Dec 15 10:23:22 MST 2016 art.zambrano ICE-9993 applied the width and the height in the dialog widget so that the contents of the dialog also expand when maximized
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/dialog/dialog.js
        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.
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: