feat(chips): Make chips edittable on demand. #7210

mertdeg2 · 2016-02-19T00:49:46Z

Description: closes #2320

devversion · 2016-02-19T07:56:41Z

src/components/chips/js/chipController.js

+    this.enableChipEdit = $scope.$parent && $scope.$parent.enableChipEdit == 'true';
+
+    if(this.enableChipEdit) {
+        this.$element.on('keydown', this.chipKeyDown.bind(this));


You should indent your code with two spaces to be aligned with the other components.

Good catch. I have replaces four spaces into two

mertdeg2 · 2016-02-19T18:25:37Z

Looking for UX design input. You can find a quick demo below:

devversion · 2016-02-20T10:32:23Z

src/components/chips/js/chipController.js

+  this.$element.addClass('md-chip-editing');
+  var currentText = this.getContentElement().text();
+  this.getContentElement().addClass('ng-hide');
+  this.getChipContent().append('<input type="text" value="'+currentText+'" />');


Just thought a bit about the input. It's just an idea, can we not use a contend editable div? This will work really good and doesn't need all the text measures. Then we just need to watch for the content editable blur and update the actual chip model.

I like this idea. I have used this approach in the next iteration.

devversion · 2016-02-22T20:00:57Z

@mertdeg2 Just run it myself, works perfect 👍

About the editing style, I'm not sure, do you think this is the right way?
Also I think, you should check for an empty text, because it's not good if the chip still persists, when the text is empty.

mertdeg2 · 2016-02-22T20:59:57Z

Thanks Paul! Good catch, I have fixed the second issue. We had a discussion
about your first point.

It seemed reasonable to follow gmail's chips implementation like below.
Having said that, I am open to suggestions about this.

On Mon, Feb 22, 2016 at 12:01 PM, Paul Gschwendtner <
notifications@github.com> wrote:

@mertdeg2 https://github.com/mertdeg2 Just run it myself, works perfect [image:
👍]

About the editing style, I'm not sure, do you think this is the right
way?

https://camo.githubusercontent.com/659635109dc8e53cd3566e1d23c8fcf334518604/68747470733a2f2f692e6779617a6f2e636f6d2f32366633303436383438356536336635616539623165636535326137633264362e706e67

Also I think, you should check for an empty text, because it's not
good if the chip still persists, when the text is empty.

https://camo.githubusercontent.com/703fe89a5026b99934f4b8f03cf51e709bbe9c55/68747470733a2f2f692e6779617a6f2e636f6d2f30366361346434656664373836653261623065386339666166323934303131652e706e67

—
Reply to this email directly or view it on GitHub
#7210 (comment).

Currently never apply a scope to the cloned element, which will cause problems with directives, which have bindings in their template. Also added the documentation for a common use-case Closes #4979. Closes #7151.

* use of 'sudo' has negative perf impacts with Travis containers * should use SauceLabs to test with Chrome and other browsers.

Fixes #7247.

@topherfangio

As discussed with @topherfangio, we should not take advantage of the `scope()` method, because these will be only available in Angular's debug mode. So we both agreed, with removing that and just compiling the cloned element from service into the given scope. Closes #7252

Media query with \0 causing parsing issues with node-sass and LESS. * Move all IE fixes to raw CSS. Append to generated CSS during builds. Fixes #6304

Fixes #7269 Fixes #7216 Closes #7270

At the moment we are fixing the height, this will caught issues with the select because it provides the content and a margin of `20px 0 26px`, plus the message which will be shown when the user selects one option. That mean's that won't fit in, and the clickable area will be shrinked. Fixes #6943 Closes #6955

If there is currently a `md-button` anchor, we should remove the margin to order the items as the other items. Fixes #5608 Fixes #6317 Closes #6496

The current description for the autocomplete attribute was really confusing, and the user was wondering why the autocomplete wasn't retrieving focus automatically. But they didn't know about the other behaviour of the actual `md-autofocus` directive. The autocomplete attribute "wrap" is just a little addition which focus the related input instead of the element. Fixes #7283 Closes #7290

* added test Fixes #7049 Fixes #7128 Closes #7291

Closes #7293

This reverts commit a7056cc. # Conflicts: # src/core/services/layout/layout.attributes.scss # src/core/services/layout/layout.scss # Conflicts: # src/core/services/layout/layout.scss

When searching for contacts a promise can be returned that contains the matching entries. * Appended a demonstration of this to the existing contact chips demo. * Improve attribute descriptions Fixes #4661. Closes #7234.

Closes #7284

Inherit is not the proper value, 0 should be used instead Closes #6472

Closes #7278

fixes #5842 Closes #7057

- throwing more informative error about missing row height attribute fixes #6870 Closes #7348

Description: closes #2320

Description: Previously I was relying on keydown event to adjust the input width. But that causes some visual disturbances during typing. Now I am relying on input event.

Description: Addressing DevVersion's code review feedback

googlebot · 2016-03-01T01:49:04Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
If you signed the CLA as a corporation, please let us know the company's name.

googlebot · 2016-03-01T01:49:05Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
If you signed the CLA as a corporation, please let us know the company's name.

mertdeg2 · 2016-03-01T01:51:47Z

I signed it!

ThomasBurleson · 2016-03-02T20:56:00Z

@char0n - why are you commenting on a branch change that has nothing to do with master or the weekly patch releases (like 1.0.6) ? If you have discovered an new issue, please create one here: New Issue

ThomasBurleson · 2016-03-02T21:01:42Z

@char0n - it was reverted because Chrome fixed in it v48. Are you saying this is STILL an issue with Firefox? If so, then our apologies, we will restore the fix.

please make a new issue!

char0n · 2016-03-02T21:06:53Z

@ThomasBurleson, sorry I don't know the exact process, I found the commit that caused the issue and commented. Yes I confirm that Chrome v48 fixes the issue, but the issue is still present in FireFox 44.0.2

devversion · 2016-03-02T21:12:54Z

@char0n @ThomasBurleson GitHub automatically shows comments from commits which are attached to the PR (See for example: JonFerrera#1 - referenced by 179dc19)

char0n · 2016-03-02T21:20:51Z

@ThomasBurleson Issue created: #7382

@devversion thanks for info.

mertdeg2 assigned conniew Feb 19, 2016

devversion reviewed Feb 19, 2016
View reviewed changes

devversion reviewed Feb 20, 2016
View reviewed changes

devversion and others added 8 commits February 23, 2016 10:52

fix(sticky): compile cloned element in the same scope

76d89c7

Currently never apply a scope to the cloned element, which will cause problems with directives, which have bindings in their template. Also added the documentation for a common use-case Closes #4979. Closes #7151.

update(ci): remove CI testing with Chrome

879081f

* use of 'sudo' has negative perf impacts with Travis containers * should use SauceLabs to test with Chrome and other browsers.

update(tests): improve Travis CI configuration

f493eb0

fix(travis): removed allow_failures

0b5fa37

fix(travis): download PhantomJS2 from bitBucket

5539916

fix(travis): update use of 'secure' token for git pushes

3badcc0

Fixes #7247.

fix(travis): update secure access token for Github pushes

30b370d

ThomasBurleson unassigned conniew Feb 24, 2016

ThomasBurleson and others added 12 commits February 24, 2016 14:45

fix(build): partition IE-only CSS fixes during build

eaf0fe5

Media query with \0 causing parsing issues with node-sass and LESS. * Move all IE fixes to raw CSS. Append to generated CSS during builds. Fixes #6304

fix(docs): docs stylesheet should not prevent scrolling in code pens

ced1e83

Fixes #7269 Fixes #7216 Closes #7270

update(guides): update PR contribution section

71e6bff

fix(list): fix list margin if anchor is present.

528a439

If there is currently a `md-button` anchor, we should remove the margin to order the items as the other items. Fixes #5608 Fixes #6317 Closes #6496

fix(autocomplete): clean up md-scroll-mask element on destroy

042086f

* added test Fixes #7049 Fixes #7128 Closes #7291

Add style and scss fields to package.json

0b12f2f

Closes #7293

update(travis): rebuild node-sass on Travis

f348e3e

Revert "fix(layout): Chrome 48 bug with flexbox"

99c9b60

This reverts commit a7056cc. # Conflicts: # src/core/services/layout/layout.attributes.scss # src/core/services/layout/layout.scss # Conflicts: # src/core/services/layout/layout.scss

fix(select) trim option text value like a vanilla html select element.

48968d0

Closes #7284

EladBezalel and others added 19 commits February 29, 2016 19:23

fix(checkbox): replaced inherit margin values with 0

eb33c37

Inherit is not the proper value, 0 should be used instead Closes #6472

fix(datepicker): Set vertical align on datepicker tables

abde470

Closes #7278

fix(list): removed keypress event listener from first child on destroy

b2afa36

fixes #5842 Closes #7057

fix(grid-list): validate that row height is defined

f171fd2

- throwing more informative error about missing row height attribute fixes #6870 Closes #7348

feat(chips): Make chips edittable on demand.

ea15952

Description: closes #2320

feat(chips): Make chips editable on demand

a945350

Description: Previously I was relying on keydown event to adjust the input width. But that causes some visual disturbances during typing. Now I am relying on input event.

feat(chips): Make chips editable on demand.

1b84d58

Description: Addressing DevVersion's code review feedback

feat(chips): Arrows don't work while chip edited.

e654286

feat(chips): Use contenteditable for editing chips

8789e1a

feat(chips): Addressing DevVersion's feedback

3613d8b

feat(chips): Make demo page use separate model

cf3ef0d

feat(chips): Remove chip if content is empty text

1df0fef

feat(chips): Get chip in edit mode on second click

07f44d5

feat(chips): Set bgColor transparent while editing

6fa8e0a

feat(chips): Correct md-chip-content reference.

91cc46f

feat(chips): Make chips editable on demand.

4ef99ff

Description: Addressing DevVersion's code review feedback

feat(chips): Use contenteditable for editing chips

8d5660e

feat(chips): Make chips editable on demand.

ef1a081

Description: Addressing DevVersion's code review feedback

feat(chips): Use contenteditable for editing chips

e52679e

mertdeg2 merged commit e52679e into angular:feat/editable_chips Mar 1, 2016

mertdeg2 deleted the feat/editable_chips branch March 1, 2016 23:49

PDavid mentioned this pull request Feb 16, 2018

Chips: editing existing chip angular/components#9979

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chips): Make chips edittable on demand. #7210

feat(chips): Make chips edittable on demand. #7210

mertdeg2 commented Feb 19, 2016

devversion Feb 19, 2016

mertdeg2 Feb 19, 2016

mertdeg2 commented Feb 19, 2016

devversion Feb 20, 2016

mertdeg2 Feb 22, 2016

devversion commented Feb 22, 2016

mertdeg2 commented Feb 22, 2016

googlebot commented Mar 1, 2016

googlebot commented Mar 1, 2016

mertdeg2 commented Mar 1, 2016

ThomasBurleson commented Mar 2, 2016

ThomasBurleson commented Mar 2, 2016

char0n commented Mar 2, 2016

devversion commented Mar 2, 2016

char0n commented Mar 2, 2016

feat(chips): Make chips edittable on demand. #7210

feat(chips): Make chips edittable on demand. #7210

Conversation

mertdeg2 commented Feb 19, 2016

devversion Feb 19, 2016

Choose a reason for hiding this comment

mertdeg2 Feb 19, 2016

Choose a reason for hiding this comment

mertdeg2 commented Feb 19, 2016

devversion Feb 20, 2016

Choose a reason for hiding this comment

mertdeg2 Feb 22, 2016

Choose a reason for hiding this comment

devversion commented Feb 22, 2016

mertdeg2 commented Feb 22, 2016

googlebot commented Mar 1, 2016

googlebot commented Mar 1, 2016

mertdeg2 commented Mar 1, 2016

ThomasBurleson commented Mar 2, 2016

ThomasBurleson commented Mar 2, 2016

char0n commented Mar 2, 2016

devversion commented Mar 2, 2016

char0n commented Mar 2, 2016