Repository: slint-ui/slint

Issue #1107: ScrollView scrolling doesn't always cause "mouse leave" events on child items
Created: 2022-03-26T13:39:12Z
I've created a menubar that is largely based on the iot demo and I added it to a ScrollView. I noticed that when scrolling the view, the child items will get confused about their mouseover state. It looks like it's only the "mouse leave" event that is missing, because items that are scrolled under the mouse will be updated to appear "active".

  
    
    

    slint_scrollview.mp4
    
  

  

  


The code I used is largely copied from iot example, with slight modifications only:
export MenuItem := Rectangle {
  property <image> icon <=> i.source;
  property <string> name <=> t.text;
  property <bool> active;
  property <bool> is-sub;
  property <int> index;
  callback clicked <=> ma.clicked;

  background: active ? rgba(100%, 100%, 100%, 14%) : ma.has-hover ? rgba(100%, 100%, 100%, 9%) : transparent;
  ma := TouchArea {}
  HorizontalLayout {
    alignment: start;
    spacing: 6px;
    padding: 8px;
    padding-left: is-sub ? 30px : 10px;
    padding-right: 30px;
    i := Image {
      width: 14px;
      height: source.height * 1px;
    }
    t := Text {
      color: white;
      font-size: Skin.MediumFont;
    }
  }
}

export MenuBar := Rectangle {
  callback logout_clicked <=> logout.clicked;
  callback item_clicked(int);
  property <int> active: 0;
  property <length> viewport-height;
  property <[MenuItemData]> menu-items;

  background: Skin.menuBar;
  width: 200px;

  ScrollView {
    VerticalLayout {
      padding-left: 0px;
      padding-top: 35px;
      padding-right: 0px;
      padding-bottom: 12px;
      spacing: 8px;
      VerticalLayout {
        padding-left: 50px;
        padding-top: 0px;
        padding-right: 50px;
        padding-bottom: 54px;

        Image {
          source: @image-url("images/main-icon.png");
          height: source.height * 1px;
        }
      }

      for entry[idx] in root.menu-items : MenuItem {
        name: entry.title;
        index: idx;
        //icon: entry.icon;
        active: root.active == idx;
        is-sub: entry.is-sub;
        clicked => { root.item-clicked(self.index) }
      }

      Rectangle {}

      logout := MenuItem {
        name: "Logout";
        icon: @image-url("images/logout.png");
      }
    }
  }
}

Duplicate issue #264: TouchArea: `pressed` and `has_hover` issue in a Flickable
Created: 2021-06-17T07:41:09Z
The pressed and has_hover properties are not kept to true when the Flickable is being interacted with (even if the mouse is still "holding" one of the elements)
That's because when the Flickable is operated on, it grabs the mouse completely and the inner child don't get the mouse.
While it might make sense for pressed, it should probably not be the case for has_hover
In addition has_hover is kept to true if the viewport moves while it had the mouse before (eg, using the wheel)
(this can also be seen in the slide puzzle demo)
Testcase:  https://sixtyfps.io/editor/?snippet=%0Aexport+Demo+%3A%3D+Window+%7B%0A++width%3A+300px%3B+height%3A+300px%3B%0A++Flickable+%7B+%0A++++VerticalLayout+%7B%0A++++++for+c+in+%5B%23ff0%2C+%23f0f%2C+%2300f%2C+%230ff%2C+%238f0%2C+%23f80%2C+%23f8f%2C+%23f88%2C+%23080%2C+%23800%2C+%23880%2C+%23008%2C+%2308f%5D+%3A+Rectangle+%7B%0A+++++++++background%3A+ta.pressed+%3F+black+%3A+ta.has_hover%3F+white+%3A+c%3B%0A+++++++++height%3A+50px%3B%0A+++++++++ta+%3A%3D+TouchArea+%7B%7D%0A++++++%7D%0A++++%7D%0A++%7D%0A%7D%0A

Closing comment (2022-05-19T11:02:52Z): This is similar to #1107