ICEfaces
  1. ICEfaces
  2. ICE-11363

ace:tabset - Add new 'scrollableTabs' attribute for scrolling tabs support

          Details

          • Type: New Feature New Feature
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: EE-4.2.0.GA, EE-3.3.0.GA_P05
          • Fix Version/s: 4.3, EE-3.3.0.GA_P06
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            ace

            Description

            Either create a new component ace:scrollableTabset or enhance the existing ace:tabSet component to implement scrollable Tabs/tabpanes similar to this behavior:-
            http://joshreed.github.io/jQuery-ScrollTabs/

              Activity

              Ascending order - Click to sort in descending order
              Judy Guglielmin created issue -
              Judy Guglielmin made changes -
              Field Original Value New Value
              Assignee Ken Fyten [ ken.fyten ]
              Judy Guglielmin made changes -
              Fix Version/s 4.3 [ 13096 ]
              Judy Guglielmin made changes -
              Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
              Judy Guglielmin made changes -
              Summary scrollabel tabset component scrollable tabset component
              Hide
              Permalink
              Ken Fyten added a comment -

              Assigned to Art for analysis. We may want to implement for 4.3, depending on scope, etc.

              Show
              Ken Fyten added a comment - Assigned to Art for analysis. We may want to implement for 4.3, depending on scope, etc.
              Ken Fyten made changes -
              Assignee Ken Fyten [ ken.fyten ] Arturo Zambrano [ artzambrano ]
              Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
              Assignee Priority P2 [ 10011 ]
              Hide
              Permalink
              Arturo Zambrano added a comment - - edited

              Since we have been talking about creating a simpler tabset component. It would be a good opportunity to create it and include this scrollable feature. After some analysis of the html and javascript involved, it's clear that it would be feasible to code this component from scratch, without having to use a 3rd party widget.

              After analysing the existing ace:tabSet code, it seems to be feasible as well to implement this feature in our existing ace:tabSet component. This would entail modifying some of the YUI code to rewire some selectors and DOM listeners, but there don't seem to be any big challenges to this.

              In either case, a preliminary estimate would be one week of work to complete.

              Show
              Arturo Zambrano added a comment - - edited Since we have been talking about creating a simpler tabset component. It would be a good opportunity to create it and include this scrollable feature. After some analysis of the html and javascript involved, it's clear that it would be feasible to code this component from scratch, without having to use a 3rd party widget. After analysing the existing ace:tabSet code, it seems to be feasible as well to implement this feature in our existing ace:tabSet component. This would entail modifying some of the YUI code to rewire some selectors and DOM listeners, but there don't seem to be any big challenges to this. In either case, a preliminary estimate would be one week of work to complete.
              Ken Fyten made changes -
              Assignee Priority P2 [ 10011 ] P3 [ 10012 ]
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r52015: added basic scrollable tabs functionality to ace:tabSet

              We're following the approach of adding this functionality to our existing ace:tabSet component, instead of creating a new component, by using the new boolean 'scrollableTabs' attribute. It was possible to add this functionality without any visible issues at the moment (pending regression tests). This functionality still needs some more polish in terms of styling, behaviour and special cases.

              Show
              Arturo Zambrano added a comment - r52015: added basic scrollable tabs functionality to ace:tabSet We're following the approach of adding this functionality to our existing ace:tabSet component, instead of creating a new component, by using the new boolean 'scrollableTabs' attribute. It was possible to add this functionality without any visible issues at the moment (pending regression tests). This functionality still needs some more polish in terms of styling, behaviour and special cases.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #52015 Tue Oct 17 15:47:53 MDT 2017 art.zambrano ICE-11363 added basic scrollable tabs functionality to ace:tabSet
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetMeta.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.css
              Ken Fyten made changes -
              Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
              Ken Fyten made changes -
              Summary scrollable tabset component ace:tabset - Add new 'scrollTabs' attribute for scrolling tabs support
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r52024: added logic to disable/enable scroll buttons only when applicable; refactored initial code; corrected alignments; added animation when scrolling

              Show
              Arturo Zambrano added a comment - r52024: added logic to disable/enable scroll buttons only when applicable; refactored initial code; corrected alignments; added animation when scrolling
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r52025: added scrollable tabs demo to showcase

              Show
              Arturo Zambrano added a comment - r52025: added scrollable tabs demo to showcase
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #52024 Thu Oct 19 15:53:46 MDT 2017 art.zambrano ICE-11363 added logic to disable/enable scroll buttons only when applicable; refactored initial code; corrected alignments; added animation when scrolling
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.css
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #52025 Thu Oct 19 15:54:40 MDT 2017 art.zambrano ICE-11363 added scrollable tabs demo to showcase
              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/tab/tabset-scrollable.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/tab/TabScrollableBean.java
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r52028: modified behaviour to hide scroll buttons when the tabs fit in the available width; added code to reevaluate whether the scroll buttons are needed or not when dynamically adding/removing tabs; added scrollable tabs functionality to bottom orientation mode; modified yui code to avoid moving the <ul> element when in bottom orientation mode so that the scrollable tabs can display and work correctly; refactored code to apply this functionality by calling a separate function

              Show
              Arturo Zambrano added a comment - r52028: modified behaviour to hide scroll buttons when the tabs fit in the available width; added code to reevaluate whether the scroll buttons are needed or not when dynamically adding/removing tabs; added scrollable tabs functionality to bottom orientation mode; modified yui code to avoid moving the <ul> element when in bottom orientation mode so that the scrollable tabs can display and work correctly; refactored code to apply this functionality by calling a separate function
              Arturo Zambrano made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #52028 Tue Oct 24 11:39:56 MDT 2017 art.zambrano ICE-11363 modified behaviour to hide scroll buttons when the tabs fit in the available width; added code to reevaluate whether the scroll buttons are needed or not when dynamically adding/removing tabs; added scrollable tabs functionality to bottom orientation mode; modified yui code to avoid moving the <ul> element when in bottom orientation mode so that the scrollable tabs can display and work correctly; refactored code to apply this functionality by calling a separate function
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetMeta.java
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/yui/2_8_2/tabview/tabview.js
              Ken Fyten made changes -
              Fix Version/s EE-3.3.0.GA_P07 [ 13118 ]
              Fix Version/s 4.3 [ 13096 ]
              Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
              Arturo Zambrano made changes -
              Summary ace:tabset - Add new 'scrollTabs' attribute for scrolling tabs support ace:tabset - Add new 'scrollableTabs' attribute for scrolling tabs support
              Hide
              Permalink
              Ken Fyten added a comment -

              Re-opened.

              Would it be feasible to make it so if a tab that is partially obscured (off the screen) is selected, it would scroll to be fully visible on the screen?

              Show
              Ken Fyten added a comment - Re-opened. Would it be feasible to make it so if a tab that is partially obscured (off the screen) is selected, it would scroll to be fully visible on the screen?
              Ken Fyten made changes -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Ken Fyten made changes -
              Fix Version/s 4.3 [ 13096 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #52435 Tue May 08 09:47:43 MDT 2018 art.zambrano ICE-11363 added improvement to do some automatic scrolling on the tabs when selecting a tab that is not fully visible
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r52435: added improvement to do some automatic scrolling on the tabs when selecting a tab that is not fully visible

              Show
              Arturo Zambrano added a comment - r52435: added improvement to do some automatic scrolling on the tabs when selecting a tab that is not fully visible
              Arturo Zambrano made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Ken Fyten made changes -
              Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
              Fix Version/s EE-3.3.0.GA_P07 [ 13118 ]
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: