Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • 01:07

    enyo-jenkins on release-2.6.0-test-20190824010735

    (compare)

  • 00:58
    webOS101 opened #118
  • 00:58

    webOS101 on seo

    Add some SEO Enact-DCO-1.0-Sig… (compare)

  • Aug 23 09:48
    codecov[bot] commented #2484
  • Aug 23 09:47
    codecov[bot] commented #2484
  • Aug 23 09:47
    codecov[bot] commented #2484
  • Aug 23 09:45
    codecov[bot] commented #2484
  • Aug 23 09:37
    codecov[bot] commented #2484
  • Aug 23 09:37
    0x64 synchronize #2484
  • Aug 23 09:37

    0x64 on PLAT-83146-scbaek

    Forward keydown events to apps … (compare)

  • Aug 23 08:59
    codecov[bot] commented #2484
  • Aug 23 08:58
    codecov[bot] commented #2484
  • Aug 23 08:58
    codecov[bot] commented #2484
  • Aug 23 08:56
    codecov[bot] commented #2484
  • Aug 23 08:48
    codecov[bot] commented #2484
  • Aug 23 08:48
    0x64 synchronize #2484
  • Aug 23 08:48

    0x64 on PLAT-83146-scbaek

    Prevent bubbling for page up/do… (compare)

  • Aug 23 08:18
    codecov[bot] commented #2484
  • Aug 23 08:17
    codecov[bot] commented #2484
  • Aug 23 08:17
    codecov[bot] commented #2484
snehababy95
@snehababy95
Ah alright!! @Djspaceg I just changed the UI of the controls i.e. changed the position of the player controls and the focus color on the controls. Also is there anyway in which I can enable continuous navigation in spotlight containers?
Blake Stephens
@Djspaceg
@snehababy95 Could you clarify what you mean by "continuous navigation"?
snehababy95
@snehababy95
continuous navigation is when i keep pressing the the down key the scrolling should happen including the focus on the items without lift g the key....its like prolong navigation.....
Blake Stephens
@Djspaceg
Ah! Our terminology for this is "hold pulse". It's enabled by default, but you can customize the delay between the pulses, just like setting the key-repeat-rate on a computer.
Roy Sutton
@webOS101
@snehababy95 Perhaps you're looking for the continue5WayHold setting for containers. By default, repeat navigation stops at boundaries to prevent leaving things unintentionally.
Roy Sutton
@webOS101

[3.0.0-beta.1] - 2019-07-15

Note: Enact CLI 2.4.1 or greater is required

Removed

  • core/kind config property contextTypes
  • i18n/ilib embedded copy of iLib in favour of the NPM package ilib
  • small prop in moonstone/Input, moonstone/ToggleButton, moonstone/Button, moonstone/Icon, moonstone/IconButton, and moonstone/LabeledIcon, replaced by size prop, which accepts "small" or "large"
  • moonstone/Divider, replaced by moonstone/Heading

Added

  • ilib@^14.2.0 package as a peer dependency for @enact/i18n and @enact/moonstone, which apps will need to include
  • moonstone/Dropdown widths tiny, and huge
  • ui/VirtualList.VirtualGridList and ui/VirtualList.VirtualList support for resizing a window

Fixed

  • Moonstone Fonts to use the updated names of global fonts available in the system
  • core/platform logic for webOS detection
  • moonstone/Popup to properly handle closing in mid-transition
  • moonstone/Scroller to properly move focus out of the container
  • moonstone/VirtualList to allow keydown events to bubble up when not handled by the component
  • moonstone/IncrementSlider to support aria-label when disabled
  • moonstone/LabeledItem to not clip the bottom of descender glyphs in large text mode
  • moonstone/VirtualList.VirtualGridList and moonstone/VirtualList.VirtualList to focus an item properly after an update
  • moonstone/Scroller, moonstone/VirtualList.VirtualGridList, and moonstone/VirtualList.VirtualList not to scroll too far by page up/down keys
  • spotlight/SpotlightContainerDecorator to correctly forward onFocusCapture and onBlurCapture events
  • ui/Icon to support arbitrary icon name strings, like in material icons
Ryan Duffy
@ryanjduffy

In the process of releasing beta.2 this morning, we inadvertently updated the master branch on GitHub to point to the beta.2 tag. In order to keep master in sync with the latest production release of Enact on npm (2.5.3), I chose to force push to GitHub to reset the history back to 2.5.3. If you are using npm to get our libraries, this will not affect you. If you have pulled down the source from GitHub, it's possible your local copy may be out of sync. I apologize for the mistake and hope it hasn't caused any issues for anyone.

If you have any questions or problems, please let us know and we'll help sort it out.

Roy Sutton
@webOS101
And, for those of you wondering what was in the latest release:

[3.0.0-beta.2] - 2019-07-23

Added

  • moonstone/Panels.Header prop hideLine to hide the bottom separator line
  • moonstone/Panels.Header type "dense" for "AlwaysViewing" Panels types

Fixed

  • moonstone/Dropdown button to not animate
  • moonstone/FormCheckboxItem so it doesn't change size between normal and large text mode
  • moonstone/Heading to have a bit more space between the text and the line, when the line is present
  • moonstone/LabeledItem to pass marqueeOn prop to its contents
  • moonstone/Panels.Header to use the latest designs with better spacing between the titles below
  • moonstone/Picker accessibility read out when a button becomes disabled
  • moonstone/ProgressBar, moonstone/Slider, and moonstone/IncrementSlider to use the latest set of design colors
  • moonstone/RadioItem to have a much prettier dot in dark and light skins
  • moonstone/Spinner to use the latest designs
  • moonstone/Tooltip layer order so it doesn't interfere with other positioned elements, like ContextualPopup
  • moonstone/VirtualList.VirtualGridList and moonstone/VirtualList.VirtualList to properly respond to 5way directional key presses
  • ui/ProgressBar public class name bar to support customizing the background of the bar
  • webos/LS2Request to return an error for a null response from a service
(do please see Ryan's comment above the release notes)
snehababy95
@snehababy95
Hello! How can we decrease the app loading time in webosTV? The launcher screen is shown for approx 6 seconds. Any idea on how we can reduce the time there?
Seungho Park
@seunghoh
Hi, have you ever built with isomorphic option? You can refer http://enactjs.com/docs/developer-tools/cli/isomorphic-support/
snehababy95
@snehababy95
Tried it, but still the app is taking time! @seunghoh
Jason Robitaille
@JayCanuck
Depending on how the app is being used, it might be useful to lazy-load components using import() syntax (not ideal for v8 snapshot though) https://webpack.js.org/guides/code-splitting/#dynamic-imports
Roy Sutton
@webOS101

[3.0.0-rc.1] - 2019-07-31

Added

  • moonstone/LabeledIconButton prop flip to flip the icon horizontally, vertically, or both
  • moonstone/Popup public class names body and closeContainer
  • ui/Icon, ui/IconButton, and ui/LabeledIcon prop flip to flip the icon horizontally, vertically, or both

Changed

  • moonstone/Dialog appearance to match the latest designs
  • moonstone/Scroller and other scrolling components to scroll via remote page up/down buttons when the scrollbar is hidden
  • spotlight containers to include nodes identified on the aria-owns attribute of the container node as candidates within that container

Fixed

  • moonstone fonts be consolidated under "Moonstone" font-family to properly display all localized fonts when representing glyphs from any locale
  • moonstone/Input text color when focused and disabled
  • moonstone/Panels to allow 5-way navigation to components within controls when used with a Header with headerInput
  • moonstone/Panels to treat all components within controls as part of the active panel for the purposes of accessibility
  • moonstone/Scroller to not jump to the top when right key is pressed in the right most item of a vertical scroller
  • moonstone/Scroller to not scroll horizontally via 5-way down in horizontal scroller
  • moonstone/Tooltip arrow gap
  • moonstone/VideoPlayer feedback tooltip to overlap in non-latin locale
  • moonstone/VideoPlayer more button tooltip to not clip or reverse text in RTL locales
  • moonstone/VirtualList.VirtualGridList and moonstone/VirtualList.VirtualList to navigate items properly in RTL languages
  • moonstone/VirtualList.VirtualGridList and moonstone/VirtualList.VirtualList to properly navigate from paging controls to controls out of the list
  • spotlight to attempt to restore focus through ancestor containers when the pointer hides
  • ui/Scroller, ui/VirtualList.VirtualGridList, and ui/VirtualList.VirtualList to handle mouse down events on scrollbars
skipness
@skipness
Hi guys, I have question with I18nDecorator again. Let's say if I need translation in component A, I will wrap component A's parent with the decorator, it is working. But if I move the decorator to upper level, translation lost. So what is the correct way to wrap the component which need translation with the decorator?
Roy Sutton
@webOS101
Hi @skipness ! The I18nDecorator is (usually) applied to the root element. You might take a look at our forthcoming Theme template to see how it's used there: https://github.com/enactjs/templates/blob/feature/theme-template/packages/theme/template/ThemeDecorator/ThemeDecorator.js
Roy Sutton
@webOS101
How are you performing the translation? Once the decorator is applied, you usually do not need to do anything special in the component except to either import $L or one of the iLib methods.
Roy Sutton
@webOS101

[3.0.0-rc.2] - 2019-08-08

Added

  • moonstone/Icon.icons entries for new icons

Fixed

  • moonstone to support custom font for simplified Chinese
  • moonstone disabled focus appearance to match the latest designs
  • moonstone/DatePicker, moonstone/DayPicker, moonstone/ExpandableList, and moonstone/TimePicker disabled opacity in high contrast mode
  • moonstone/Picker to avoid overlapping items on render
  • moonstone/Scroller and other scrolling components to properly scroll via remote page up/down buttons when nested within another scrolling component
  • moonstone/Scroller, moonstone/VirtualList.VirtualGridList, and moonstone/VirtualList.VirtualList to scroll via a page up or down key when focus is on any vertical paging control while in pointer mode
  • moonstone/Scroller, moonstone/VirtualList.VirtualGridList, and moonstone/VirtualList.VirtualList to correctly set focus after scrolling by page up/down keys
  • moonstone/Scroller, moonstone/VirtualList.VirtualGridList, and moonstone/VirtualList.VirtualList not to scroll via a page up or down key when focus is on any horizontal paging control
skipness
@skipness

@webOS101 Sorry for late response.
Let me show you how I use the I18nDecorator

// App.tsx

interface AppProps {
  id: string;
}

class App extends React.Component<AppProps> {
  render() {
    return (
      <div className='app'>
        <Member id={this.props.id} />
      </div>
    );
  }
}

const mapStateToProps = (rootState: RootState) => {
  const state = rootState.app;
  return {
    id: state.id,
  };
};

export default connect(mapStateToProps)(I18nDecorator(App));
// Member.tsx

interface MemberProps {
  initial: () => void;
}

class Member extends React.Component<MemberProps> {
componentDidMount() {
    const { initial } = this.props;
    initial();
  }

  render() {
    return (
      <div className='member-container'>
        <Logo />
        <Container1 height='430px'>
          <Step step='1' />
          <div>
            <Step1Content />
          </div>
        </Container1>
        <Container2 height='267px'>
          <Step step='2' />
          <div>
            <Step2Content />
          </div>
        </Container2>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  initial: () => dispatch(initial()),
});

export default connect(
  null,
  mapDispatchToProps
)(Member);
//Container1.tsx

interface Container1Props {
  height: string;
  children: React.ReactNode;
}

const Container1 = (props: Container1Props) => (
  <div className="container-1" style={{ height: props.height }}>
    {props.children}
  </div>
);

export default Container1;
// Step1Content.tsx

const Step1Content = (props: any) => {
  return (
    <div className='step-1-content-container'>
      <div>{$L('member.someText')}</div>
      <div style={{ fontSize: '36px', fontWeight: 'bold' }}>
        {$L('member.someText2')}
      </div>
      <div>{$L('member.someText3')}</div>
      <div>{$L('member.someText4')}</div>
    </div>
  );
};

export default Step1Content;

Step2Content is just like Step1Content

image.png
skipness
@skipness
And I got this result
Roy Sutton
@webOS101
@skipness Sorry! missed your response. I'll look at it this morning.
Roy Sutton
@webOS101
@skipness For one thing, you should be accepting the incoming props (Which includes a className) and applying it in App. But, I don't believe that should prevent $L() from working.
Roy Sutton
@webOS101

If you change this line:

export default connect(mapStateToProps)(I18nDecorator(App));

to:

export default connect(mapStateToProps)(I18nDecorator({sync: true}, App));

it will likely work. $L() does not account for async operation of ilib.

I can share a sample app with you in a bit if you're interested.
I'll also try to make some additions to the ilib docs to spell out some things a bit more clearly.
Roy Sutton
@webOS101
Alternately, you should be able to use the Text component.
Though you will probably have to wait for rc.4 as I discovered a couple issues today.
skipness
@skipness
@webOS101 By adding { sync: true } the translation works now
So the only difference between Text and $L() is that Text is async and $L() is sync?
skipness
@skipness
Screenshot 2019-08-19 at 4.52.39 PM.png
One more thing, I cannot run the enact-all-samples
Roy Sutton
@webOS101
@skipness It's likely you need to pull the develop branch of samples if you're using Enact 3.0 pre-release. Divider was replaced by Heading in Enact 3.
The master branch should still be requiring Enact 2.x, I'll check out what happened.
It looks like enact-all-samples incorrectly uses next instead of ^2.0.0 for the version, which is why it's pulling the 3.x pre-releases.
I'll see if we can push a hotfix for that.
Roy Sutton
@webOS101
We should be releasing 3.0.0 soon, so it might be moot.
Roy Sutton
@webOS101
Regarding $L() vs. Text... Text is a more React-y way to work with translations and has some more features for dealing with async. It should also work just fine with sync.
skipness
@skipness
I will switch to Text from now
thx
skipness
@skipness
image.png
Something wrong with the Text typescript definition?
Roy Sutton
@webOS101
Yes, it seems so. I have a branch I'm working on that addresses some Text issues. I'll check out the TS definitions while working on it.
Roy Sutton
@webOS101
@skipness I fixed the TS definition. Thanks for the report! :+1: Should be fixed in 3.0.0-rc.4
Roy Sutton
@webOS101

[3.0.0-rc.4] - 2019-08-22

Fixed

  • i18n/Text to generate a proper TypeScript definition and to properly detect if translations were available when async
  • moonstone/ContextualPopupDecorator arrow rendering issue in Chromium
  • moonstone/EditableIntegerPicker to properly rerender when the edited value is invalid
  • moonstone/FormCheckboxItem to marquee its contents
  • moonstone/VideoPlayer to have correct jump forward/backward icon
  • ui/styles/mixins.less mixins: .buildLocaleFont, .buildLocaleFonts, .buildFontFace to properly support font-weight ranges, font-weight default values, and font-stretch values
  • Language-specific fonts so they always use the correct typeface for their locale
@skipness That version includes the fix for Text as well as some fixes to HoC typings.
If you find other TS issues, please let me know (you can also create issues for those).
skipness
@skipness
@webOS101 thanks👍🏻