Feat/custom icon components #489

RedTn · 2017-10-09T22:44:36Z

This a a PR for an issue I submitted for customizable sort components: #478

alexander-alvarez · 2017-10-16T13:15:31Z

@RedTn sorry for the delay in communication. I had a weird week with holidays, vacation, and other stuff...
Will try to get to it early this week, but on first glance looks good.

RedTn · 2017-10-16T16:23:58Z

Feel free to let me know if anything needs to be changed/updated

…418)

RedTn · 2017-10-23T17:17:17Z

@alexander-alvarez Checking up on this PR, thanks alexander!

alexander-alvarez

A testing request and a comment on the docs. Otherwise looks great.
Sorry for the delay.

alexander-alvarez · 2017-10-23T18:00:26Z

addon/templates/components/columns/base.hbs

@@ -2,7 +2,9 @@
  {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
 {{else}}
  {{label}}
-  {{#if sortIconProperty}}
+  {{#if (and sortIcons.iconComponent sortIconProperty)}}
+    {{component sortIcons.iconComponent sortIcons=sortIcons sortIconProperty=sortIconProperty}}


would you mind adding a test to verify the arguments (sortIcons=sortIcons sortIconProperty=sortIconProperty) get passed to the component declared by iconComponent when we render a table like you do in the demo app:

+ {{t.head + onColumnClick=(action 'onColumnClick') + iconSortable='unfold_more' + iconAscending='keyboard_arrow_up' + iconDescending='keyboard_arrow_down' + iconComponent='materialize-icon' + fixed=true + }}

You can steal some ideas from
https://github.com/cibernox/ember-power-select/blob/master/tests/integration/components/power-select/customization-with-components-test.js#L257..L281

alexander-alvarez · 2017-10-23T18:03:58Z

addon/mixins/table-header.js

@@ -107,6 +107,17 @@ export default Mixin.create({
  iconDescending: '',

  /**
+   * See `iconSortable, iconAsending, or iconDescending.  Custom sorting component


I would change the order

Custom sorting component name to use instead of the default `` template. See `iconSortable`, `iconAsending`, or `iconDescending` for more info.

Uses the same properties.

It's unclear what you mean by this sure what you mean by this

…n/ember-light-table into feat/custom-icon-components Merge with latest

alexander-alvarez · 2017-10-24T13:27:54Z

tests/integration/components/lt-head-test.js

@@ -92,6 +94,34 @@ test('render sort icons', function(assert) {
  assert.notOk(hasClass(sortIcon, 'fa-sort-asc'));
 });

+test('custom iconComponent has arguments', function(assert) {
+  const iconSortable = 'unfold_more';


assert.expect(6)
otherwise the test will pass if the component doesn't get rendered

@alexander-alvarez Will add this soon, thanks alexander I'm learning quite a bit from this PR

buschtoens · 2017-10-24T16:36:16Z

addon/mixins/table-header.js

@@ -107,6 +107,15 @@ export default Mixin.create({
  iconDescending: '',

  /**
+   * Custom sorting component name to use instead of the default `<i class="lt-sort-icon"></i>` template.
+   * See `iconSortable, iconAsending, or iconDescending.


Minor formatting error with the backticks here.

See `iconSortable`, `iconAsending`, or `iconDescending`.

buschtoens · 2017-10-24T16:45:14Z

addon/templates/components/columns/base.hbs

@@ -2,7 +2,9 @@
  {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
 {{else}}
  {{label}}
-  {{#if sortIconProperty}}
+  {{#if (and sortIcons.iconComponent sortIconProperty)}}


Can't remember, if we talked about that. but this way the iconComponent would only get rendered when there is a sortIconProperty, i.e. when either of sortable or sorted is true.

I don't have strong feelings either way, since I can't come up with a scenario where you would want to render an iconComponent when you don't have any icons to display. Just wanted to have mentioned it. 😄

I remember I ran into this issue in the demo where the avatar column was displaying the sort component when sortable: 'false'.
Because the iconComponent is being specified in the hbs file on the table, all the columns will utilize the iconComponent, so we need a check if the user doesn't want a column to be sortable.

Yup, but some users might argue that they'd want their iconComponent to display a "not sortable" icon and that it's up to the user to handle the "not sortable" state instead of ELT doing that for the user.

For instance:

{{#if sortIconProperty}} {{get sortIcons sortIconProperty}} {{else}} not_sortable {{/if}}

Understood, I see the use case now. Because you have no strong feelings I guess I'll leave the base.hbs as is for now but feel free to let me know otherwise.

buschtoens · 2017-10-26T06:45:06Z

Thanks so much @RedTn ❤️

RedTn and others added 5 commits October 8, 2017 18:36

feat(custom-icons): base files

35536ea

fix(column-base): sort icon displayed with sortable:false

2f4f1ea

feat(dummy): cookbook for custom-sort-icon

105c33f

loosen ember-one-way-controls version requirement

0a8ef44

yarn.lock updates

494f4d0

alexander-alvarez requested a review from buschtoens October 10, 2017 19:08

akshay-kr and others added 3 commits October 18, 2017 10:35

[BUGFIX release]: Added check for target column is droppable (#496)

daa657e

[chore]: Update ember-truth-helpers to latest version. (#497)

a8e93a1

[BUGFIX release]: Ensure the drop target remains properly identified (#…

2e2faf9

…418)

alexander-alvarez reviewed Oct 23, 2017

View reviewed changes

Redmond Tran and others added 2 commits October 23, 2017 14:53

Merge branch 'feat/custom-icon-components' of https://github.com/RedT…

a149f96

…n/ember-light-table into feat/custom-icon-components Merge with latest

fix(feedback): iconComponent comments, iconComponent test

7975553

alexander-alvarez reviewed Oct 24, 2017

View reviewed changes

buschtoens requested changes Oct 24, 2017

View reviewed changes

fix(feedback-v2): iconComponent comments, iconComponent test

d89ae12

buschtoens approved these changes Oct 25, 2017

View reviewed changes

alexander-alvarez approved these changes Oct 25, 2017

View reviewed changes

buschtoens merged commit e16af17 into adopted-ember-addons:master Oct 26, 2017

RedTn mentioned this pull request Oct 26, 2017

Customizable sort icon component #478

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/custom icon components #489

Feat/custom icon components #489

RedTn commented Oct 9, 2017

alexander-alvarez commented Oct 16, 2017

RedTn commented Oct 16, 2017

RedTn commented Oct 23, 2017

alexander-alvarez left a comment

alexander-alvarez Oct 23, 2017

alexander-alvarez Oct 23, 2017

alexander-alvarez Oct 24, 2017

RedTn Oct 24, 2017

buschtoens Oct 24, 2017

buschtoens Oct 24, 2017 •

edited

Loading

RedTn Oct 24, 2017

buschtoens Oct 24, 2017 •

edited

Loading

RedTn Oct 24, 2017 •

edited

Loading

buschtoens commented Oct 26, 2017

Feat/custom icon components #489

Feat/custom icon components #489

Conversation

RedTn commented Oct 9, 2017

alexander-alvarez commented Oct 16, 2017

RedTn commented Oct 16, 2017

RedTn commented Oct 23, 2017

alexander-alvarez left a comment

Choose a reason for hiding this comment

alexander-alvarez Oct 23, 2017

Choose a reason for hiding this comment

alexander-alvarez Oct 23, 2017

Choose a reason for hiding this comment

alexander-alvarez Oct 24, 2017

Choose a reason for hiding this comment

RedTn Oct 24, 2017

Choose a reason for hiding this comment

buschtoens Oct 24, 2017

Choose a reason for hiding this comment

buschtoens Oct 24, 2017 • edited Loading

Choose a reason for hiding this comment

RedTn Oct 24, 2017

Choose a reason for hiding this comment

buschtoens Oct 24, 2017 • edited Loading

Choose a reason for hiding this comment

RedTn Oct 24, 2017 • edited Loading

Choose a reason for hiding this comment

buschtoens commented Oct 26, 2017

buschtoens Oct 24, 2017 •

edited

Loading

buschtoens Oct 24, 2017 •

edited

Loading

RedTn Oct 24, 2017 •

edited

Loading