enactjs/Lobby

Eric Blade

@ericblade

well, the only thing that changed source wise, was i made a couple of files use ?? and ?. to test them .. it worked locally

dockerfile
````FROM node:latest
EXPOSE 3030
RUN npm install -g @enact/cli

WORKDIR /usr/src/pos
COPY package*.json ./
RUN npm install --production
COPY . .
WORKDIR /usr/src/pos/public

RUN npm install --production

RUN npm install
RUN npm run pack-p
WORKDIR /usr/src/pos
CMD [ "npm", "run", "start" ]
````

Roy Sutton

@webOS101

Hrm. That should be OK.

Eric Blade

@ericblade

yeah.. that was working.. until i changed some files after updating my enact locally

Roy Sutton

@webOS101

Can try backing out the nullish coallescing and see if that’s it… But, we’ll see if Jason has anything interesting to say.

Eric Blade

@ericblade

it's working on my local install so i feel like i may be missing a module in my dependencies or something

Roy Sutton

@webOS101

Could be… It’s such an unhelpful error, though.

Jason Robitaille

@JayCanuck

I'm as clueless as you Roy. Optional chaining and nullish coalescing operator should supported in 3.x. If you are able to provide a base-case I may be able to help debug deeper.

Eric Blade

@ericblade

and ofc docker isn't working on my laptop, so i'm having to go through some hoops here

Eric Blade

@ericblade

shrug, i removed the new commits from the server, and it rebuilt the docker just fine. i'll figure that out tomorrow or something

Roy Sutton

@webOS101

Bummer.

Eric Blade

@ericblade

hmm. got my local Docker up and running with it -- it builds ok with the changed code, although it does complain for every file about the missing typescript module.

Eric Blade

@ericblade

aha! needed to prune out the old caches, so it would install a correct version of enact, otherwise it was using the previous docker image intermediate step cache

Roy Sutton

@webOS101

@ericblade Glad you figured it out!

Eric Blade

@ericblade

prob worth mentioning at startup there's a warning that it's being used with an untested version of typescript, but otherwise it seems to work well. i haven't tested to see if any typescript 4.0 features work in it, i have no need for anything i see in 4.0

ljpeixoto

@ljpeixoto

Hi all. I dont know if this is the best place for newbie questions - if it is not, please direct me to the appropriate place. Anyway, I am trying to follow the enact tutorial, and the instructions to add CSS aren´t working (https://enactjs.com/docs/tutorials/tutorial-hello-enact/adding-css/), when I name the file App.less and import from it, but it works when I use the App.module.less file and change the import to this file.... not really a major problem, but it´s annoying not to understand why one file works and the other not...

Why enact treats those 2 files differently ?

Roy Sutton

@webOS101

@ljpeixoto There was a change in the way the the Enact CLI treats CSS modules. We have updated the docs but the new version is not available on the web site yet.

Now, CSS (and LESS) files without .module are treated as non-modular files, so they don't import the class names.

This is also how other tools (such as create-react-app) treat those files.

ljpeixoto

@ljpeixoto

Thanks, @webOS101 . It´s much better to do stuff knowing why this and that works and why it doesn't . I´ll finish this tutorial, and revisit it when the new is published.

ljpeixoto

@ljpeixoto

Ok. I´ve followed the tutorial until 'Repeaters and Lists' with no problem - everything worked fine. But I implemented the alterations sugested by the "Organizing your apps with Panels" section, and despite no visual errors or console errors, the final result doesn´t seem right - I can´t see any part of the Detail view...just the list of images and image titles, much like before, but with a giant header "Dogs !!!" and a big "X" on this header (yes, I´m not a cat person - I am doing a Dog browser :-) )....

Already inspected my modifications 2 times and they seem correct, but I may be overseeing some important detail... any ideas of what went wrong ?

Blake Stephens

@Djspaceg

That, to me, sounds like a flex box problem, when a variable size is set but the container also has a variable size; the box will just collapse. What happens if you inspect the page, find the box that has 0 height/width and set it to some fixed value?

ljpeixoto

@ljpeixoto

@Djspaceg - thank you for the tip, but the problem seems to be missing elements - I should find somewhere in the page the string "detail", shoudln´t I ? But I can´t.... I can see a div with id panel_2_header, a span with the "role" list and the list of dogs as container, but I can´t find the correponding header and panel of the Detail panel.... can´t find the strings detail or gender anywhere in the page...

Besides, to be honest I am really awfull at css... don´t really know what should I look for to find a box with 0 height/width... I looked for it kind of "visually", but didn´t find, but as I said, I am not very good at css....

ljpeixoto

@ljpeixoto

Is there a github repo with a reference version of the code the tutorial should produce ? If it had separate branchs for each lesson, woujld be even better... then I could compare my code with the official one to see why my isn´t working...

Blake Stephens

@Djspaceg

That's a really good suggestion, @ljpeixoto. I think we may have one. @sugardave may know.

Roy Sutton

@webOS101

@ljpeixoto double check the latest tutorial here: https://github.com/enactjs/docs/tree/master/src/pages/docs/tutorials

Or, rather, this one, but should be the same: https://github.com/enactjs/docs/tree/develop/src/pages/docs/tutorials

ljpeixoto

@ljpeixoto

@webOS101 , thanks, but I checked the code against both and found no differences, aside the kitten/dog names... I´ll try to procede on the tutorial, but if you wanna see the current code it´s on github, on the following commit: ljpeixoto/dogBrowser@d617cb8

ljpeixoto

@ljpeixoto

I´ve completed the tutorial with the state management step, and now it works... I am starting to believe that the detail panel really shouldn´t be visible in the previous step, there was nothing wrong with my implementation.... I think my expectation is that was wrong - I was expecting to see something of the detail panel before implementing the events, that were implemented in the last step...

Now starts the real work... I intend to change it into a Movies browser :-) so I can comfortably see my local movies collection on big screen :-)

Eric Blade

@ericblade

hey all quick question, i'm wanting to include a manifest.json with my dist dir, is there some way to do that?

Eric Blade

@ericblade

i threw it in resources and then tried to import it into a file so the packer would hopefully know about it and preserve it, but that didn't seem to do anything

sugardave

@sugardave

oops, haven't been on Gitter for a little while. Hi @ljpeixoto the complete Kitten Browser tutorial source is in the samples repo: https://github.com/enactjs/samples/tree/4aa446c1559e45d69705fd61faf1f12a16620187/tutorial-kitten-browser

But, I haven't verified it against the tutorial in a long time. I might have it on the LG laptop and I will look tonight because it is destined to be picked up by the e-waste people tomorrow

I don't think it is branched per lesson, though, since it is one of many samples in that repo

@ericblade I don't know that one off the top of my head, but maybe there is an option to pass to enact pack to make it include "extra" files?

Jason Robitaille

@JayCanuck

@ericblade you can throw any static assets into a ./public directory. Contents in their get copied into ./dist

Abdessattar Sassi

@abdes

I have a Panel in which I have a login form, and when submitted, I show a Spinned with container scrim.

   <Panel css={{ scrim: css.scrim }}>
      <Layout style={{ height: '100%', width: '100%' }}>
        <Column style={{ height: '100%', width: '100%' }} align="center">
          <Cell></Cell>
          <Cell size="100%" shrink>
            <LoginForm handleSubmit={handleSubmit} />
          </Cell>
          <Cell></Cell>
        </Column>
      </Layout>
      {loginState === 'authenticating' && (
        <Spinner
          scrim
          centered
          blockClickOn="container"
          css={{ scrim: css.scrim}}
        >
          Authenticating user...
        </Spinner>
      )}
    </Panel>

I want to change the background-color opacity of the scrim, and the doc says that the scrim class can be themed. I tried to add the css class to the containing Panel and to the Spinner, but none of them works.

.scrim {
  background-color: rgba(161, 54, 54, 0.9);
}

Could anyone points me to the right direction how to change the background of the scrim?

nogewis teo

@nogewis_gitlab

good night i'm starting now with enact i would like to know how can i integrate with webOS

sugardave

@sugardave

@abdes I think you can just give className={css.scrim} to the <Spinner> or maybe just pass the whole css object to the Panel like so:

<Panel css={css}>
    ...
      {loginState === 'authenticating' && (
        <Spinner
          scrim
          centered
          blockClickOn="container"
        >
          Authenticating user...
        </Spinner>
      )}
</Panel>

@nogewis_gitlab have you read through the documentation at https://enactjs.com/docs/developer-guide/webos/ ?

nogewis teo

@nogewis_gitlab

Good morning sorry for the doubt I am new in this matter, the communication with the webOS api I understood so I am not able to generate the ipk using enact, example when I do this with "ares-package" for "ares-generate - t basic" works perfectly, how do i integrate enact with webOS to generate ipk?

nogewis teo

@nogewis_gitlab

I managed to solve by copying the files from the dist of the enact to the project generated in webOS so that I could generate the ipk.

Roy Sutton

@webOS101

You should be able to just package the dist directory directly. You may want to add the meta files from the tv app template. See above for similar question

adline-st

@adline-st

Hi, I am new to enact.
Can anyone help me to use enact routable in an app without moonstone

YunBum SUNG

@ybsung

Hello @adline-st

Hello @adline-st
Here is the sample using 'moonstone/Panels .Routable'.
https://github.com/enactjs/samples/blob/master/pattern-routable-> panels/src/App/App.js#L13
But the 'moonstone/Panels.Routable' is exactly same with 'ui/Routable'. > The 'moonstone/Panels' exports the 'ui/Routable' as 'Routable'.
https://github.com/enactjs/moonstone/blob/develop/Panels/index.js

As I mentioned, you could start to use enact routable without moonstone by using https://github.com/enactjs/samples repository pattern-routable-> panels sample.

Here is my branch that I worked for you.
Repo: https://github.com/enactjs/samples
Branch: pattern-routable-without-moonstone (https://github.com/enactjs/samples/tree/pattern-routable-without-moonstone)
Sample: pattern-routable-> panels sample
Steps to launch:
1) clone https://github.com/enactjs/samples
2) switch branch to pattern-routable-without-moonstone
3) cd pattern-routable-> panels sample
4) npm i and npm run serve

Ooops..
Typo: not pattern-routable-> panels but pattern-routable-panels

ascendsauce

@ascendsauce

Hello all, I have a question about Spotlight.focus() and Spotlight.setActiveContainer(). My main goal is I want to set an onSpotlightUp={} on a Spottable component to focus a specific Spotlight Container (which I use the SpotlightContainerDecorator). I am passing a spotlightId to the container and then passing that same id to either the setActiveContainer() or focus() functions and neither are entered to. Meaning none of the spottable items inside the container get focused as one would expect. How would I proceed to do what I intend to do, or is this something that the components are incapable of?

2 replies

Where communities thrive

People

Repo info

Activity

RUN npm install --production