fuse-open / fuselibs

Fuselibs is the Uno-libraries that provide the UI framework used in Fuse apps
https://npmjs.com/package/@fuse-open/fuselibs
MIT License
176 stars 72 forks source link

New RowLayout with ScrollViewPager support #1410

Closed jveres closed 3 years ago

jveres commented 3 years ago

This is a new row based layout similar to the existing ColumnLayout. I wanted to have infinite scrolling capabilities therefore I extended Layout and ScrollViewPager with more universal offset handling. Nevertheless I'm new to Uno and not even sure if this is the best way of implementing it so that should be reviewed as well.

Known bugs:

This PR contains:

jveres commented 3 years ago
<App Background="#000">
  <JavaScript>
    var Observable = require('FuseJS/Observable');
    exports.items = Observable();

    var MN = 200, MX = 400;

    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function panel(i) {
      var w = getRandomIntInclusive(MN, MX), h = getRandomIntInclusive(MN, MX);
      return {
        title: "Panel " + i,
        width: w,
        height: h,
        aspect: w/h
      };
    }

    for (var i=0; i < 1000; i++) {
      exports.items.add(panel(i));
    }
  </JavaScript>
  <ClientPanel>
    <ScrollView LayoutMode="PreserveVisual">
      <Panel>
        <RowLayout ux:Name="layout" RowSize="150" Sizing="Fill" RowSpacing="5" ItemSpacing="5" />
        <Each ux:Name="each" Items="{items}" Limit="40" Reuse="Frame">
          <StackPanel Aspect="{aspect}" BoxSizing="FillAspect" Background="#394455">
            <Text Color="#fff" FontSize="14" Value="{title}" />
            <Text Color="#eee" FontSize="12" Value="{width}x{height}" />
          </StackPanel>
        </Each>
      </Panel>
      <ScrollViewPager Retain="3" Each="each" Layout="layout" />
    </ScrollView>
  </ClientPanel>
</App>
ichan-mb commented 3 years ago

Thank you for submitting PR @jveres. It's preferable if this PR split into 2 PRs. One is for the new introduction of a new layout (RowLayout) and the second one is for the enhancement of ScrollViewPager. So we can test individually

jveres commented 3 years ago

Thank you for submitting PR @jveres. It's preferable if this PR split into 2 PRs. One is for the new introduction of a new layout (RowLayout) and the second one is for the enhancement of ScrollViewPager. So we can test individually

Sure @ichan-mb I can divide this PR into two parts, extracting RowLayout into a separate PR makes sense. However testing ScrollViewPager additions alone cannot be done I’m afraid.

jveres commented 3 years ago

Almost done but have no more time to work on this.