I have seen that when yout type the email in this lx-text-field (http://ui.lumapps.com/directives/text-fields)

        <lx-text-field label="Email" fixed-label="true" type="Email"></lx-text-field>

your email is overlapping the label/placeholder.

Please, turn Dialog into a service and Progress into a directive (a la angular-material). It just makes much more sense this way.

Hi !
I see a lot of questions about new features (pagination, etc) in the issues.

Last week, at the GDG meetup, you mentioned that you might make your roadmap public.
As, like a lot of people, am waiting for certain components (such as expand row when clicking to load content as I saw in the demo the other day ^^), I am wondering if you still plan to make it public?

I would need timepicker directive :-)

At the moment, the CSS file from lumx is 150k large. It's indecent, even though the internet nowadays is pretty fast. The worst is that most of it will never be used.

I think we should have all this defined as placeholders (if it's possible, don't know enough about them) and then have a user custom value of the primary and secondary palette, with the wanted hue. Thus we'll be compliant with the Material Design spec, and still be lightweight.

We'll keep all pallette colors with only one hue defined in addition to all this to keep a large choice of colors if someone need different label color for example. But we need to not have this much classes for all the hue of all the colors in the CSS. It's useless and not material-designy (the user will be able to use more than one primary and one accent color).

I'm not sure if what I'm proposing is the best solution.

Poke @matmkian and @Teeweetep, really important matter.

Is it possible to manage overflow on modal dialog ? I have a huge form into a modal and I can't scroll.
Thx

Is there a provided way to create a tall toolbar (similar to https://www.polymer-project.org/docs/elements/layout-elements.html)? The angular material project seems to provide something like this (https://material.angularjs.org/#/demo/material.components.toolbar) and I was curious if this is on your roadmap.

Maybe worthy of a seperate issue but the toolbar in the polymer docs also shrinks as you scroll down the page.

On the selects directives like here (http://ui.lumapps.com/directives/selects).

• On the first example when I start filtering by writing for example "am" it should be good that when you press the key "Enter/Return" the field fills-up with the first filtered result (in this case [email protected]).
• Also after I choose "[email protected]" by mistake or not. If I open the drop-down again the previous entered text for filtering remains there and there is no "X" for fast clearing the text field. (If your intention is to keep the text when re-opening the select, I would like the "X")

Sorry by my bad english, I hope this helps. Also Good Job.

I thought a pagination component could be very common in the projects, will you consider adding it to lumx in the future?

• Rework all examples by using embeddable Plunkr or another solution. Actually there is code duplication between the app.js and the JS included in the example. Including just a plunkr by it's ID would be much simpler and with a better presentation. It will also force the creation of a standalone Angular App only for the current directive, showing the modularity of LumX.
• Rework all directives & service to include an API & attributes documentation like AngularJS official documentation.
• Add all the icons in documentation.

Hi !
In my application, I usually trigger an action when a field changes.
To do that, is simply use the ng-blur directive.
I used to use an input type="date" until you released your date picker.
the native input date worked well except that it was really ugly.
Unfortunately, I can't reproduce the same behaviour with your date picker.

There are 2 things I can't reproduce :

• open the date picker when it has focus (when pressing tab from the previous field in my form, it should get the focus and open)
• bind an event such as ng-blur when the value is updated without having to watch it.

Do you thinks this could be possible?

How can i bind the lx-file-input change attribute on this line :
https://github.com/lumapps/lumX/blob/master/js/file-input/js/lumx.file_input_directive.js#L36
in order to upload the choosen picture ?

I've tried many stuff but no one is working

<lx-file-input label="Modifier l'image..." change="upload"></lx-file-input>

$scope.upload = function(element) {
        console.log(element);
};

Are the 2 projects compatible to be used in the same application?

Hi.
I'm using lxTabs for adding and remove tab dinamically. But this generate grafical bug.

I have change the $watch on the variable activeTab in the LxTabsController: now i call setLinksColor and setIndicatorPosition into an $timeout(function () {}). This resolve grafical bug on tab selector but don't resolve grafical bug on label input

regards

I'm not seeing anything about supported browsers. Is there any legacy support or is this for evergreen browsers only?

add "required" attribute to lx-text-field directive

When a lx-text-field is valued by angular binding, the text-field--is-active class is missing and the label appears behind the value...

Hi

I've notice that sidebar exist on your http://ui.lumapps.com/ but there in nothing about it in documentation.
Are there any plans to implement it ?

error is invalid provider 'e', which is the name of the provider after uglify munges it.

I need a datepicker with popup option. This is also usefull for mobile first.

I want to validate the a choosen date and give immediate response over the datepicker-Textfield with a red validation message. With your datepicker shown as a "dialog" you cover everything on the screen.
Also opening and closing a datepicker like a dialog is too much distortion for the user IMHO.

is possible to work on compatibility??

One of the interesting feature of the standard tag and ng-options in angular is the ability to choose what in the object will be selected. For example, I have a list of users, I want to display the name in the options but I only want the selected to bing the 'id' so I can fill my object with only the 'id' of the selected user. Is it possible to specify such a thing with lx-select?

Hi,

It would be nice to have a changelog to know what has changed after a new version is released.
v0.2.0 has just been released and I haven't found a better way than going to the commits list to find out what has changed and what is new :/

I did not understand the file upload component works .
I tried to look where he put the file in scope but not found .
You can show a better example ?

I just updated my version of lumX and the select element doesn't seem to work anymore.
I don't have any javascript error.

<lx-select selected="[]" placeholder="Lorem Ipsum" choices="[{id:1, name:'Olivier Leplus'}, {id:2, name:'Toma Cristini'}]" multiple>
<lx-select-selected>
{{ $selected.name }}
</lx-select-selected>

<lx-select-choices>
{{ $choice.name }}
</lx-select-choices>
</lx-select>

This code works but, as soon as I remove the "multiple" attribute of the lx-select, It does not work anymore :/

I use lumX 0.2.23

I've just started to experiment with lumX and really like it. The guidelines that you've been following for development are great.

On the customization page http://ui.lumapps.com/getting-started/customization it says:

"You can override lumX default settings (dist/scss/main/settings/_settings.common.scss) if you want to change sizes, colors, etc."

I don't see that file anywhere in the repository. Should that be updated to (dist/scss/core/settings/_settings.defaults.css)? Or are there other default settings available that I'm not seeing?

I have a few other questions regarding customization that I wanted to get your opinion on.

Do you have any recommendations for theming? Such as setting base primary and secondary colors so that they don't require classes to be added throughout the site/app.

http://www.google.com/design/spec/style/color.html#color-ui-color-application

A specific example:
http://ui.lumapps.com/css/toolbars

1. Is there a class that can be added to change the color of this toolbar? e.g. the equivalent of a btn--red
2. Is there a designed way to set the default primary and secondary colors of elements like in the material design spec?
   Here the title bar is the primary color and the switch is the secondary.
   It would be very nice to be able to set a primary and secondary (or override defaults via theming css files) so that you can easily flip between themes and see it live in your app. If you have a specific way that you would like to see this done I can work on an implementation
   

I very well may be missing something (or many things). Thanks for putting the time into this project!

A nice textarea field could be awesome to 👍

I just tried to add a form in a card but the btn-flat when disabled="disabled" is set looks like the normal disabled button.

Hello,
I want to know if it will be possible to use the ng-blur on lx-text-field ?
Actually, it doesn't work, the lx directive crush the ng-blur previously specified

What is the logic with all of the weird, non-standard class name conventions?

i.e. lots of "--" and lots of "__" embedded in the classnames. This makes the framework look very unwieldy for someone looking to integrate it.

I tried browsing the documentation site on my iPhone 4s (iOS8, both Safari and Chrome). I found that floating items like dropdown, select box, tooltip, floating action button, sidebar etc are not auto-hiding themselves when touching somewhere else on screen.

As it is, the progress component is a "global" page component, specially because the .hide method doesn't take any identifier/container.

In a page where there are multiple operations going on (for instance, when you're uploading multiple files) it is necessary to have more than on independent progress components.

After clicking the 'Floating action button' to trigger an action, it's leaving floating artifacts of the label, noticed this on Chrome on and iPhone 6+ and also on the latest Chrome Canary for OSX. Screen shots attached. 1st one, is before clicked, 2nd one is after clicked "remove song" label still remains.

The Scrollbar example does not work in Firefox (version 34.0)
It works fine in Chrome (version 39.0.2171.95).

Running on Mac OS 10.9.5

When selecting a long file into file inputs, the file name is displayed on two lines.
Is this supposed to be the default behaviour?

It's caused by the stop propagation of the click in the dialog body. It's a good feature to have a click inside a dialog never leaving the dialog, but the dropdown listen to click on $window to know when it must be closed.
First solution that comes in mind: Make a service in which components register with a priority. These service will be the only one listening to click on $window, making the framework lighter on the browser. When the click is detected, it closes the components with the highest priority only. Thus we could remove all stop click propagation.

Hi,

Another one for the one in charge of the select component :)
In text fields, we have a label.
But, for the select, there is not. So, I have to create a label and the field next to it as I used to do with bootstrap. It works well but I was wondering if it would be possible to find a beautiful way to include a label with the select component (maybe a css engineer could find a way ^^)

Windows users might have problems with the pagecode of the terminal to execute the gulp tasks (see #72). We need to update the codepage for the scripts in Windows only. It would be good to check why there is a problem on xterm on Mac OS too.

Hi,

I've tried use the select but don't worked.
I've tried follow the examples and guideline but they don't worked too!

Do you guys know about that?

Hi guys,

When I type some value in textfield, I receive the bellow error:

Follows the code:

Hi again,

Exist some way to use mask in textfield?
I've tried use the ui-utils-mask but don't worked.

Here the output :

bower install lumx --save
bower lumx#*                    cached git://github.com/lumapps/lumX.git#0.1.7
bower lumx#*                  validate 0.1.7 against git://github.com/lumapps/lumX.git#*
bower jquery.transit#feat/stop-transition       not-cached [email protected]:lumapps/jquery.transit.git#feat/stop-transition
bower jquery.transit#feat/stop-transition          resolve [email protected]:lumapps/jquery.transit.git#feat/stop-transition
bower underscore#~1.7.0                             cached git://github.com/jashkenas/underscore.git#1.7.0
bower underscore#~1.7.0                           validate 1.7.0 against git://github.com/jashkenas/underscore.git#~1.7.0
bower velocity#~1.1.0                               cached git://github.com/julianshapiro/velocity.git#1.1.0
bower velocity#~1.1.0                             validate 1.1.0 against git://github.com/julianshapiro/velocity.git#~1.1.0
bower jquery#~2.1.1                                 cached git://github.com/jquery/jquery.git#2.1.1
bower jquery#~2.1.1                               validate 2.1.1 against git://github.com/jquery/jquery.git#~2.1.1
bower angular#~1.3.3                                cached git://github.com/angular/bower-angular.git#1.3.4
bower angular#~1.3.3                              validate 1.3.4 against git://github.com/angular/bower-angular.git#~1.3.3
bower neat#~1.6.0                                   cached git://github.com/thoughtbot/neat.git#1.6.0
bower neat#~1.6.0                                 validate 1.6.0 against git://github.com/thoughtbot/neat.git#~1.6.0
bower angular#>= 1.0.8                              cached git://github.com/angular/bower-angular.git#1.3.4
bower angular#>= 1.0.8                            validate 1.3.4 against git://github.com/angular/bower-angular.git#>= 1.0.8
bower angular#~1.x                                  cached git://github.com/angular/bower-angular.git#1.3.4
bower angular#~1.x                                validate 1.3.4 against git://github.com/angular/bower-angular.git#~1.x
bower angular#>=1 <1.3.0                            cached git://github.com/angular/bower-angular.git#1.2.27
bower angular#>=1 <1.3.0                          validate 1.2.27 against git://github.com/angular/bower-angular.git#>=1 <1.3.0
bower angular#~1.2.16                               cached git://github.com/angular/bower-angular.git#1.2.27
bower angular#~1.2.16                             validate 1.2.27 against git://github.com/angular/bower-angular.git#~1.2.16
bower jquery#>= 1.9.0                               cached git://github.com/jquery/jquery.git#2.1.1
bower jquery#>= 1.9.0                             validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0
bower bourbon#>=3.1                                 cached git://github.com/thoughtbot/bourbon.git#4.0.2
bower bourbon#>=3.1                               validate 4.0.2 against git://github.com/thoughtbot/bourbon.git#>=3.1
bower jquery.transit#feat/stop-transition          ECMDERR Failed to execute "git ls-remote --tags --heads [email protected]:lumapps/jquery.transit.git", exit code of #128

Additional error details:
ssh: connect to host github.com port 22: Connection timed out
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Here are some suggestions to possibly consider:

• Move the logic to compare old !== new values into the controller
• Instead of watching the internal init variable to gather changes for src, width, and height. Why use $timeout() to async call call ctrl.update(element, attrs); which would check for changed values.
• Cache the image loads in an ImageService registry

  AFAIK, the img.onload() will only fire the first time the browser loads the image. So a cache is necessary to cross-reference load success with src url. This way other thumbnails with the same url will not use the onload() callback.

Also I am curious why this approach was not used:

<lx-thumbnail 
     ng-src="{{item.srcURL}}" 
     lx-thumbnail-width="{{item.width}}" 
     lx-thumbnail-height="{{item.height}}" 
  />

lumX v0.2.23 on Chrome macos

LxProgressService.linear.show('#E95F47', '#progress');
LxProgressService.circular.show('#5fa2db', '#fff', '#progress2');

The circular works but for some reason, the linear does not work.

Every component I have checked is sorely lacking in accessibility support. For your framework to be usable, it must support keyboards and assistive technologies such as screen readers. Is this on your roadmap?

First of all, I'd like to say thank you for this project. It is already far better than angular-material (widget set, look out of the box, performance) and hopefully will continue to improve.

I would love to be able to use lumx via npm+browserify, without bower. It's rather unfortunate that there is no consensus on packaging and dependency management for the frontend development. It appears (to my novice eye) that npm+browserify and bower are two top choices at the moment, and it also appears that npm and browserify are both very versatile and ready to evolve to support frontend more while bower is rather naive (nothing wrong with that, it's just that it doesn't do enough).

Initially I started my new project with angular-material and I was able to get all javascript dependencies set up with browserify, having single <script> element in index.html to load browserify-produced bundle.
I found angluIar-material lacking and was very glad to discover lumX. Trying to set it up with browserify I ran into to two problems. One of course is the topic of this issue - lumX doesn't seem to be available as npm module. Another is that even though all lumX's dependencies are available as npm modules, velocity.js ('velocity-animate' in npm registry) is expected to be a jquery plugin (dropdown menu element is looking for .velocity() method) and for some reason velocity doesn't register as jquery plugin when these components are loaded via browserify's require(). It appears that velocity.js itself no longer requires jquery and mere "presence" of jquery doesn't make it register as plugin.

I was able to get lumX (0.2.11) to work by adding all the dependencies as <script> elements, but using <script> and relying on browser globals feels like a step backwards compared to using modules with require().

I have a scrollbar (overflow-y) on an element, when I open a modal, the scrollbar is still here and overlap modal.

Hello,
Compliments for the project thus far. Looks already very good.

I tried to use the date picker. It works fine in Chrome and Safari but on FF when clicking inside the date field it doesn't do anything. Only when clicking on the label 'Pick a date', the date picker pops up.