Vertical spacing: change scrolling behavior in subapps (MGNLUI-4944)

[MGNLUI-5046] Vertical spacing: change scrolling behavior in browser subapp with table Created: 26/Feb/19  Updated: 10/Mar/21  Resolved: 10/Mar/21

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Sub-task Priority: Neutral
Reporter: Sang Ngo Huu Assignee: Sang Ngo Huu
Resolution: Won't Do Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 3d 3h
Original Estimate: Not Specified

Attachments: File FE-solution-720.mov    
Template:
Date of First Response:

 Description   

Specific to browser view:

  • make title space incl. toolbar (view options, filter button) & filter box (e.g. definitions, resources, jcr) scrollable
  • make toolbar sticky below tab sheet so it doesn’t hide
    • if toolbar is sticky and user activates filters, scroll back to the top so filters are visible
    • if the user deactivates the filter, do not scroll, but deactivate all filters completely
    • if the user reactivates the filter, do not scroll, but reactivate all previous filters
  • make title row of grid & tree table sticky below toolbar so it doesn't hide
  • toolbar is now smaller and compact, minor re-styling needed
    • remove line separators btw icons (filter, views) in toolbar
    • add new style for select field, height 23px, font-size 12px (e.g. in jcr app)


 Comments   
Comment by Sang Ngo Huu [ 21/Mar/19 ]

It is really hard to implement "sticky header" in browser subapp, I tried few solutions but It still does not work.

First, using sticky add-ons or sticky.js (jquery) but the problems:

  1. Scrolling on layout conflicts with scrolling on {table}

    {tree}

    {grid}

    , I cannot force sth like enable scrolling on layout first then enable scrolling on table.

  2. Other think is disable scroller on table grid tree, means that set full height for them and user can scroll on layout, but table grid tree supports lazyloading, So we don't know how height it is.
  3. So I decide that only use scroller on table grid tree. There are a solutions:
  • Add small piece of code to {VMagnoliaTable}

    , then add css class and style for the header.

    @Override
        public void onScroll(ScrollEvent event) {
            super.onScroll(event);
    
            if (event.getRelativeElement().getScrollTop() > 4) {
                getParent().addStyleName("table-scrolled");
                getParent().getParent().addStyleName("table-scrolled");
                getParent().getParent().getParent().addStyleName("table-scrolled");
            } else {
                getParent().removeStyleName("table-scrolled");
                getParent().getParent().removeStyleName("table-scrolled");
                getParent().getParent().getParent().removeStyleName("table-scrolled");
            }
        }
    

But I have other problem that when the height of header is pull up, height of table grid tree still does not change (Vaadin only update view when have request to server) (tried with css but cannot fix)

  • Still keep going with above solution, but try to call request to server. But seem the it conflicts with lazyloading.
  • "new" grid is more complex than table

Please see the FE-solution-720.mov and code branch for more detail.

Comment by Roman Kovařík [ 10/Mar/21 ]

Closing this in favour of focus to the new framework.

Generated at Mon Feb 12 09:22:40 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.