Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Autocomplete #132

Closed
wants to merge 41 commits into from

Conversation

peec
Copy link
Contributor

@peec peec commented Jul 14, 2015

Adds Autocomplete feature to ember-paper as of:

This is a rewrite of the angular autocomplete but with heavy usage of ember principles, which means cleaner code and a lot nicer code base ( i think ).

Current task list:

  • Implement Progress Linear Component in separate pull request
  • Basic Usage [ 100% done ]
  • Custom Template [ 100% done ]
  • Floating Label [ 100% done ]
  • Feature: (ajax) Implement possibility to use a DS.store.filter for ajax requests ( currently only supports Ember.Array() statically array of data. ).
  • Documentation
  • Highlight support ( ref. md-highlight ).
  • Refactoring / Bug fixing
    • Wait for progress-linear to be merged in ( Separate pull request ). When done, uncommet the progress component inside paper-autocomplete.hbs and update this PR. Progress bar will then show for promise sources that takes time to load from the autocomplete.
    • More documentation on the available options for the paper-autocomplete component.
    • Bug: clear button (X) does not align because paper-button has some class attributes that should not be set when using the autocomplete. The class that should not be there is "md-button". Might need to extend from paper-button component and remove the specific classes or make md-button configurable by a flag (?). Edit: fixed with flag in paper-button.
    • Sometimes clicking away from autocomplete does not close the suggestion pane. Figure out why.

@miguelcobain
Copy link
Collaborator

@peec Thanks for the initiative!

Looks like we have a dependency on the progress-linear component, right?

Suggestion:

  • add it to your task list
  • implement progress linear/circular first, in a separate PR/branch? ember-material-design has them here.

@mike1234 and I talked a bit, and we both agreed in merging both projects. So this means good news!

@peec
Copy link
Contributor Author

peec commented Jul 15, 2015

Looks like we have a dependency on the progress-linear component, right?

Yep, you are correct, the autocomplete component uses progress linear for e.g. ajax requests in autocomplete to show loading of items

Suggestion:

add it to your task list
implement progress linear/circular first, in a separate PR/branch? ember-material-design has them here.

I will submit a separate branch based on ember-material-design's progress component

@mike1234 and I talked a bit, and we both agreed in merging both projects. So this means good news!

This is very good news! Glad you figured this one out! +1

@peec
Copy link
Contributor Author

peec commented Jul 18, 2015

@miguelcobain Autocomplete is now done in terms of functionality based on angular's. I dumped a demo on http://jensb.home.pkj.no/paper-autocomplete/index.html#/autocomplete . The "Promise of data (Ember data)" section loading doesn't work because the component is commented until #134 is merged

@peec peec changed the title Feature/autocomplete Feature: Autocomplete Jul 19, 2015
@peec
Copy link
Contributor Author

peec commented Jul 21, 2015

@miguelcobain I think I am quite happy with the autocomplete feature as it stands right now. You may take a look at this PR when you have time. The components have tests, and are all decoupled as much as possible which makes it really flexible for further enhancements or features if we wish so.

New components

The PR consist of these new compoenets:

  • paper-autocomplete ( The main component )
  • paper-autocomplete-list ( Logic for the list menu that appears if a user types something, also resposible to make the list responsive and stay in the correct position ).
  • paper-autocomplete-item ( Logic for a single item in the list )
  • paper-autocomplete-highlight ( Highlight component that can highlight the search text given per item, just like angular material has it.)

Dependencies

Furthermore, the paper-autocomplete component also take use of these components behind the scenes:

  • Embers "input" component
  • paper-input (floating input)
  • paper-button: to clear selection of the input
  • paper-icon ( inside paper-button ).
  • paper-progress-linear

New service: util

There is also a new service (util) that is directly converted from angular material. We use two methods in the util service: disableScrollAround and enableScrolling. These prevents the user to mistakenly scroll when the user has suggestions opened. This is very nice for e.g. touch screens where the user can not mistakenly scroll away from the suggestion list.

Documentation

I wrote the documentation on the components page, there are plenty of examples and a table explaining all the possible attributes.

@peec
Copy link
Contributor Author

peec commented Aug 3, 2015

@miguelcobain How is it going on the merge ?

@miguelcobain
Copy link
Collaborator

@peec Not really sure why github didn't close this. Your commits are there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants