fixed focus and review notes

positive-js · Apr 17, 2019 · 839f91d · 839f91d
1 parent 608643c
commit 839f91d
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 8 deletions.
diff --git a/src/lib-dev/autocomplete/module.ts b/src/lib-dev/autocomplete/module.ts
@@ -19,7 +19,12 @@ import { map, startWith } from 'rxjs/operators';
     encapsulation: ViewEncapsulation.None
 })
 export class DemoComponent implements OnInit {
-    options = ['One', 'Two', 'Three', 'Four', 'Five', 'Longest text (0123456789 qwertyuiopasdfghjklzxcvbnm)'];
+    options = [
+        'One', 'Two', 'Three', 'Four', 'Five', 'Longest text (0123456789 qwertyuiopasdfghjklzxcvbnm)', 'Волгоград',
+        'Воронеж', 'Ейск', 'Екабпилс', 'Екатеринбург', 'Екатериновка', 'Екатеринославка', 'Екаша', 'Екибастуз',
+        'Екпинди', 'Елань', 'Елец', 'Казань', 'Краснодар', 'Красноярск', 'Москва', 'Нижний Новгород', 'Новосибирск',
+        'Омск', 'Пермь', 'Ростов-на-Дону',  'Самара', 'Санкт-Петербург', 'Уфа', 'Челябинск'
+    ];
 
     filteredOptions: Observable<string[]>;
 

diff --git a/src/lib-dev/tags/template.html b/src/lib-dev/tags/template.html
@@ -1,7 +1,7 @@
 <div class="example-container">
     <br><br><br>
 
-    <h4>Tags list</h4>
+    <h4 class="mc-title">Tags list</h4>
     <mc-form-field class="example-chip-list">
         <mc-tag-list>
             <mc-tag *ngFor="let tag of simpleTags" [value]="tag" (removed)="onRemoveTag(tag)">
@@ -13,7 +13,7 @@ <h4>Tags list</h4>
 
     <br><br><br>
 
-    <h4>Tags with input</h4>
+    <h4 class="mc-title">Tags with input</h4>
     <mc-form-field class="example-chip-list">
         <mc-tag-list #inputTagList>
             <mc-tag *ngFor="let tag of inputTags" [value]="tag" (removed)="inputOnRemoveTag(tag)">
@@ -24,14 +24,13 @@ <h4>Tags with input</h4>
                    #inputTagInput
                    [formControl]="tagCtrl"
                    [mcTagInputFor]="inputTagList"
-                   [mcTagInputSeparatorKeyCodes]="separatorKeysCodes"
                    (mcTagInputTokenEnd)="inputOnCreate($event)">
         </mc-tag-list>
     </mc-form-field>
 
     <br><br><br>
 
-    <h4>Tags with autocomplete</h4>
+    <h4 class="mc-title">Tags with autocomplete</h4>
     <mc-form-field class="example-chip-list">
         <mc-tag-list #autocompleteTagList>
             <mc-tag *ngFor="let tag of autocompleteSelectedTags" [value]="tag" (removed)="autocompleteOnRemove(tag)">
@@ -43,7 +42,6 @@ <h4>Tags with autocomplete</h4>
                    [formControl]="tagCtrl"
                    [mcAutocomplete]="autocomplete"
                    [mcTagInputFor]="autocompleteTagList"
-                   [mcTagInputSeparatorKeyCodes]="separatorKeysCodes"
                    (mcTagInputTokenEnd)="autocompleteOnCreate($event)">
         </mc-tag-list>
         <mc-autocomplete #autocomplete (optionSelected)="autocompleteOnSelect($event)">
@@ -56,7 +54,7 @@ <h4>Tags with autocomplete</h4>
 
     <br><br><br>
 
-    <h4>simple Tags</h4>
+    <h4 class="mc-title">simple Tags</h4>
     <br>
 
     <mc-tag>Normal <i mc-icon="mc-close-S_16"></i></mc-tag>

diff --git a/src/lib/autocomplete/autocomplete-trigger.directive.ts b/src/lib/autocomplete/autocomplete-trigger.directive.ts
@@ -48,7 +48,7 @@ import { McAutocomplete } from './autocomplete.component';
  */
 
 /** The height of each autocomplete option. */
-export const AUTOCOMPLETE_OPTION_HEIGHT = 48;
+export const AUTOCOMPLETE_OPTION_HEIGHT = 32;
 
 /** The total height of the autocomplete panel. */
 export const AUTOCOMPLETE_PANEL_HEIGHT = 256;

diff --git a/src/lib/tags/_tag-theme.scss b/src/lib/tags/_tag-theme.scss
@@ -78,5 +78,9 @@
     .mc-tag_caps {
         @include mc-typography-level-to-styles($config, caption-caps);
     }
+
+    .mc-tag-input {
+        @include mc-typography-level-to-styles($config, body);
+    }
 }
 
diff --git a/src/lib/tags/tag-list.component.ts b/src/lib/tags/tag-list.component.ts
@@ -573,6 +573,8 @@ export class McTagList extends _McTagListMixinBase implements McFormFieldControl
         if (this.lastDestroyedTagIndex != null && this.tags.length) {
             const newTagIndex = Math.min(this.lastDestroyedTagIndex, this.tags.length - 1);
             this.keyManager.setActiveItem(newTagIndex);
+        } else if (this.tags.length === 0) {
+            this.focusInput();
         }
 
         this.lastDestroyedTagIndex = null;

diff --git a/src/lib/tags/tag-list.scss b/src/lib/tags/tag-list.scss
@@ -4,6 +4,8 @@
     display: flex;
     flex-wrap: wrap;
 
+    min-height: 28px;
+
     padding: 2px 6px;
 
     & .mc-tag-input {

diff --git a/src/lib/tags/tag.scss b/src/lib/tags/tag.scss
@@ -82,5 +82,6 @@ $mc-tag-icon-padding: 3px;
     margin-left: 7px;
 
     text-overflow: ellipsis;
+    white-space: nowrap;
     overflow: hidden;
 }