ICEfaces
  1. ICEfaces
  2. ICE-5991

Add sub-items arrow icon for horizontal top-level menus

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0-Beta1
    • Fix Version/s: 2.0-Beta2, 2.0.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      icefaces2 compat menuBar

      Description

      With icefaces2 compat ice:menuBar, all of the non-top-level menu items, which have child menu items, use a right arrow icon to indicate they have children. As well, for vertical menu bars, the top-level menu items, which have child menu items, also use the right arrow icon to indicate they have children. This new feature will be to make it so that with horizontal menus, the top-level menu items, which have child menu items, may use a down arrow icon to indicate they have children. A top goal will be for the old behaviour to happen by default.

        Issue Links

          Activity

          Hide
          Mark Collette added a comment -

          The new case will output markup to show the topsubmenu.gif image, by default in the xp theme. This image will be a 0x0 pixel image, showing nothing. If an application wishes to show a different image, say, one that has a down arrow, they may include their own topsubmenu.gif image in their own theme, and use the menuBar imageDir property to reference those images. This favours the theme providing this functionality, over individual menuBar components.

          Show
          Mark Collette added a comment - The new case will output markup to show the topsubmenu.gif image, by default in the xp theme. This image will be a 0x0 pixel image, showing nothing. If an application wishes to show a different image, say, one that has a down arrow, they may include their own topsubmenu.gif image in their own theme, and use the menuBar imageDir property to reference those images. This favours the theme providing this functionality, over individual menuBar components.
          Hide
          Mark Collette added a comment -

          The default is to not display the down arrow. Applications will have to provide their own, if they want one. The simplest way to accomplish this is to rotate submenu.gif from the xp theme, and save it as topsubmenu.gif. If doing so, the current implementation is not automatically lining up the text so that it won't overlap with the down arrow icon. So, if you're using one, some additional styling will be necessary.

          First off, as an aside, if you wish any menu item, no matter the scenario or mode, to not show a text label, then set its value=" " instead of just leaving it an empty string or null.

          But, if the label is a an actual real string, then:

          • Put the topsubmenu.gif file in your css images directory, and find how many pixels wide it is.
          • Create a style class in your css file, using a padding-right value that's the width of the image plus 3. It would looks like this:
            .topItem span { padding-right: 18px; }
          • Add a styleClass to each top level menu item, that will have the down arrow image, where the menu item value property has text. For the example above, tthat would look like this:
            <ice:menuBar
            imageDir="/path-to-my-css-images/"
            <ice:menuItem
            value="Click on my children"
            styleClass="top"
            onclick="return false;">
          • So, the formula is, given a styleClass of "X", make an entry in your css file with ".XItem span", with a padding-right value that's larger than the topsubmenu.gif width - probably add 3 to it.
          Show
          Mark Collette added a comment - The default is to not display the down arrow. Applications will have to provide their own, if they want one. The simplest way to accomplish this is to rotate submenu.gif from the xp theme, and save it as topsubmenu.gif. If doing so, the current implementation is not automatically lining up the text so that it won't overlap with the down arrow icon. So, if you're using one, some additional styling will be necessary. First off, as an aside, if you wish any menu item, no matter the scenario or mode, to not show a text label, then set its value=" " instead of just leaving it an empty string or null. But, if the label is a an actual real string, then: Put the topsubmenu.gif file in your css images directory, and find how many pixels wide it is. Create a style class in your css file, using a padding-right value that's the width of the image plus 3. It would looks like this: .topItem span { padding-right: 18px; } Add a styleClass to each top level menu item, that will have the down arrow image, where the menu item value property has text. For the example above, tthat would look like this: <ice:menuBar imageDir="/path-to-my-css-images/" <ice:menuItem value="Click on my children" styleClass="top" onclick="return false;"> So, the formula is, given a styleClass of "X", make an entry in your css file with ".XItem span", with a padding-right value that's larger than the topsubmenu.gif width - probably add 3 to it.
          Hide
          Mark Collette added a comment -

          Committed renderer changes and new images. Added topsubmenu_arrow.gif in xp for people to use if they want.

          Subversion 22166

          Show
          Mark Collette added a comment - Committed renderer changes and new images. Added topsubmenu_arrow.gif in xp for people to use if they want. Subversion 22166
          Hide
          Mark Collette added a comment -

          Modified the way that the ice:menuItem component is rendered, along with the rime theme, so that the top level submenu indicator will not cause problems for a horizontal menu. The changes affected the rendering of horizontal and vertical menus, both at the top level and sub-levels. Changes were developed with Firefox 3.6.8 and IE 6, and afterwards tested with Chrome 5, Safari 4, Opera 9, IE 7, IE 8.

          It should no longer be necessary to do the padding-right styling, as described two comments before.

          In IE 6, 7 (but not 8) there is still the issue of the popping-up sub-menus not showing in the correct place. But with this bug fixed, it should be possible for progress in that area to proceed.

          Subversion 22233
          (I inadvertently committed this in subversion with a reference to ICE-5992 instead of the the correct jira, this one)

          Show
          Mark Collette added a comment - Modified the way that the ice:menuItem component is rendered, along with the rime theme, so that the top level submenu indicator will not cause problems for a horizontal menu. The changes affected the rendering of horizontal and vertical menus, both at the top level and sub-levels. Changes were developed with Firefox 3.6.8 and IE 6, and afterwards tested with Chrome 5, Safari 4, Opera 9, IE 7, IE 8. It should no longer be necessary to do the padding-right styling, as described two comments before. In IE 6, 7 (but not 8) there is still the issue of the popping-up sub-menus not showing in the correct place. But with this bug fixed, it should be possible for progress in that area to proceed. Subversion 22233 (I inadvertently committed this in subversion with a reference to ICE-5992 instead of the the correct jira, this one)

            People

            • Assignee:
              Mark Collette
              Reporter:
              Mark Collette
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: