jouni / j-elements Goto Github PK

Great to see a new release! Any chance to see j-avatar-group come back to life? 🙂

Hi @jouni. I researched j-elements and found them quite intriguing.

Was wondering, are you also available for some independent consulting work, or what would be the best way to work with you? We are thinking about building our web app redesign on Vaadin Web Components, but are new to both Web Components and Vaadin, and would perhaps need occasional guiding and insight into what are optimal solutions in specific scenarios.

Your j-elements repository shows you think in interesting experiments, like us, so it feels like there would be good synergy of competence. Looking forward to hearing back, thanks.

Maybe? :)

The j-avatar abbreviation font size adapt to small and large themes, but if you need a larger (or smaller) avatar and set the width/height explicitly, the abbreviation font size does not adapt.

It would be great to have the abbreviation font size to be relative to the component size.

<vaadin-tabs> currently renders top level menu items, but what if sub-menu items are needed, like https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/icons.html

<vaadin-context-menu> is the easily available technological choice, but its UX may be suboptimal. For example, if a mobile user taps a collapsed menu item somewhere at the top, context menu suddenly popping up from the bottom seems weird. See screenshot:

Your thoughts?

Slack thread: https://polymer.slack.com/archives/C04EYH0AD/p1569343016005500?thread_ts=1568378635.002200&cid=C04EYH0AD

jouni:vaadin: 24 hours ago
😅 definitely not supposed to hide itself like that! I’ve only been testing it on my iPhone 😊

leho 22 hours ago
So webkit vs gecko thing huh

leho 22 hours ago
Are you interested in taking a look at the code if I file an issue, or should I just Upwork it

jouni:vaadin: 19 hours ago
I already took a look. The problem is somehow with touch events, that in Firefox an element messes those up, and a touch event listener doesn’t get fired properly. Adding the following in j-app-layout.js fixes it:

jouni:vaadin: 19 hours ago
One addition: there’s still the problem in Firefox that you can’t scroll the menu in the drawer using touch. Didn’t have time to debug that yet.

jouni:vaadin: 19 hours ago
Re: the touch event and : I’m not sure that was actually the right fix. Doesn’t work anymore 😄

Drawer UX: for long menus, it'd probably be useful to have a down-caret overflow indicator there, as well Helps all device categories to say " I'm scrollable"

When setting an empty string as avatar name, an error is thrown:

TypeError: null is not an object (evaluating 'newValue.match(/\b\S/g).join')

I added j-card to my app:

<link rel="import" href="../../bower_components/j-elements/j-card.html">
...
<j-card>hello</j-card>

Then I checked the browser. J-card did not visually add anything. In the console there's an error:

Uncaught TypeError: Vaadin.ThemableMixin is not a function
    at j-card.html:198
    at j-card.html:265

and the row 198 is:

class CardElement extends Vaadin.ThemableMixin(Polymer.Element) {

Change the name attribute in a j-avatar with no-tooltip active, makes the initials disappears and changing it again throws.