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

Implement Material for Multiselect - Kendo UI #45

Closed
mvgmvg opened this issue Feb 28, 2018 · 6 comments

Comments

Projects
None yet
2 participants
@mvgmvg
Copy link
Contributor

commented Feb 28, 2018

@Dimitar-Goshev

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2018

  • Hovered token does not change its background - expected (editing token functionality is not added for this moment) - @mvgmvg This does not seem to be related to editing... In other SASS themes as well as LESS themes hovered token becomes darker, while in Material there is no background change.
  • Margins around token Close button are incorrect. By design they are left 6px and right 4px, but it is implemented as left 7px and right 6px. Thus there is too much space to the right between the button and the right side of the token, compared to above and below the button: differences between design and the implementation comes from empty spaces around text and icon what is additional in the design.
    image
  • Bottom border width should become 2px on hover - part of Ripple, to be implemented with Ripple
  • Bottom border of disabled MultiSelect is not dotted
  • k-state-invalid does not change the border color
  • No focus indicator for focused dropdown item
  • Not centered icon inside circle in Single Tag mode:
    image
  • Tokens should be closer to bottom border in RTL:
    image
  • Grouping - missing design - logged for implementation

mvgmvg added a commit that referenced this issue Mar 15, 2018

@mvgmvg

This comment has been minimized.

Copy link
Contributor Author

commented Mar 15, 2018

Waiting for design for grouping implementation to finish the issue.

mvgmvg added a commit that referenced this issue Mar 21, 2018

mvgmvg added a commit that referenced this issue Apr 4, 2018

gyoshev added a commit that referenced this issue Apr 5, 2018

chore(dropdowns): add styles for grouping headers (#109)
* chore(dropdowns): add styles for grouping headers

#40 #43 #44 #45

* chore(dropdowns): improve grouping variables

#109
@Dimitar-Goshev

This comment has been minimized.

Copy link
Contributor

commented Apr 10, 2018

  • Grouping header is not all caps and it should be higher than other items - design:
    image
  • LTR - Loading icon does not cover the clear icon completely. It is possible to click the clear icon. (Use Server filtering demo -> stop internet in Chrome -> type a in input:
    image
  • RTL - Wrong horizontal margins between tokens, wrong vertical margins (RTL and LTR), displaced delete circle:
    image
  • LTR and RTL - Wrong bottom margin, if there is only token on a new row:
    image
  • All SASS - Loading icon is centered vertically in MultiSelect, while clear icon is always against the first row. According to me and @lkarakoleva , the loading icon should appear on top of the clear icon
    image
  • Delete token icon is randomly displaced: browser limitation because of decimal pixels value
    image
  • Token text is not vertically centered in IE. It is a little upwards, compared to other browsers: browser issue caused by rendering the font with the set small font-size
    image

mvgmvg added a commit that referenced this issue Apr 11, 2018

gyoshev added a commit that referenced this issue Apr 11, 2018

chore(dropdowns): add styles for grouping headers (#109)
* chore(dropdowns): add styles for grouping headers

#40 #43 #44 #45

* chore(dropdowns): improve grouping variables

#109

gyoshev added a commit that referenced this issue Apr 11, 2018

mvgmvg added a commit that referenced this issue Apr 11, 2018

mvgmvg added a commit that referenced this issue Apr 11, 2018

mvgmvg added a commit that referenced this issue Apr 11, 2018

mvgmvg added a commit that referenced this issue Apr 16, 2018

@Dimitar-Goshev

This comment has been minimized.

Copy link
Contributor

commented Apr 16, 2018

  • REGRESSION (All SASS Themes) - Displaced placeholder in RTL:
    image
  • Vertically not centered loading icon:
    image
  • Group tags are not swapped in RTL (All SASS themes):
    image
  • RTL - Loading icon does not cover the clear icon (x):
    image

mvgmvg added a commit that referenced this issue Apr 18, 2018

chore(dropdowns): improve dropdowns appearance
- position correctly multiselect placeholder
- center loading icon vertically
- fix wrong groups tags position in RTL
- place loading icon for inputs (mult-row multiselect) on the bottom line
#40 #43 #44 #45

mvgmvg added a commit that referenced this issue Apr 19, 2018

mvgmvg added a commit that referenced this issue Apr 23, 2018

chore(dropdowns): improve dropdowns appearance
- position correctly multiselect placeholder
- center loading icon vertically
- fix wrong groups tags position in RTL
- place loading icon for inputs (mult-row multiselect) on the bottom line
#40 #43 #44 #45

mvgmvg added a commit that referenced this issue Apr 23, 2018

chore(dropdowns): improve dropdowns appearance
- position correctly multiselect placeholder
- center loading icon vertically
- fix wrong groups tags position in RTL
- place loading icon for inputs (mult-row multiselect) on the bottom line
#40 #43 #44 #45
@Dimitar-Goshev

This comment has been minimized.

Copy link
Contributor

commented Apr 23, 2018

  • Wrong padding of Group header in RTL (Bootstrap 4 as well):
    image

NOTE: Not reproducible in all cases, e.g. on the demo it is reproducible, if you type a, but not reproducible, if you type z.

@mvgmvg

This comment has been minimized.

Copy link
Contributor Author

commented Apr 23, 2018

This is JavaScript issue not related to implementing the Material theme. I have logged the issue here telerik/kendo#8415

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.