feat(dark-theme): select + tag + option (#74)

* feat(dark-theme): select + tag + option (#167067) * feat(dark-theme): DropDown (#167236) * feat(dark-theme): List (#167246) * feat(dark-theme): Tree (#167248) * fixed FormControl * deleted TC for checking dropdown role * must not touch when dropdown is open * fixed after review * fixed matcher in multiselect
positive-js · Nov 30, 2018 · 0232021 · 0232021
1 parent b4b3c22
commit 0232021
Show file tree

Hide file tree

Showing 40 changed files with 378 additions and 296 deletions.
diff --git a/src/lib-dev/dropdown/styles.scss b/src/lib-dev/dropdown/styles.scss
@@ -1,3 +1,4 @@
 @import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
 
-@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';
diff --git a/src/lib-dev/list/module.ts b/src/lib-dev/list/module.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -9,7 +9,8 @@ import { McListModule, McListSelectionChange } from '@ptsecurity/mosaic/list';
 @Component({
     selector: 'app',
     template: require('./template.html'),
-    styleUrls: ['./styles.scss']
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class DemoComponent {
     typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

diff --git a/src/lib-dev/list/styles.scss b/src/lib-dev/list/styles.scss
@@ -1 +1,2 @@
-@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';
diff --git a/src/lib-dev/select/module.ts b/src/lib-dev/select/module.ts
@@ -1,8 +1,12 @@
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McInputModule } from '@ptsecurity/mosaic/input';
 
 import { McSelectModule, McSelectChange } from '@ptsecurity/mosaic/select';
 
@@ -14,8 +18,13 @@ import { McSelectModule, McSelectChange } from '@ptsecurity/mosaic/select';
     encapsulation: ViewEncapsulation.None
 })
 export class DemoComponent {
+    singleSelected = 'Normal';
     multipleSelected = ['Normal', 'Hovered', 'Selected', 'Selected1'];
 
+    singleSelectFormControl = new FormControl('', Validators.required);
+
+    multiSelectSelectFormControl = new FormControl([], Validators.pattern(/^w/));
+
     onSelectionChange($event: McSelectChange) {
         console.log(`onSelectionChange: ${$event.value}`);
     }
@@ -30,7 +39,13 @@ export class DemoComponent {
         BrowserAnimationsModule,
         BrowserModule,
         FormsModule,
-        McSelectModule
+        McSelectModule,
+
+        McButtonModule,
+        McInputModule,
+        McFormFieldModule,
+        McIconModule,
+        ReactiveFormsModule
     ],
     bootstrap: [
         DemoComponent

diff --git a/src/lib-dev/select/styles.scss b/src/lib-dev/select/styles.scss
@@ -1,6 +1,7 @@
 @import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
 
-@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';
 
 
 .dev-container {

diff --git a/src/lib-dev/select/template.html b/src/lib-dev/select/template.html
@@ -1,8 +1,35 @@
 <br><br><br><br><br><br><br>
-<div>{{ selected }}</div>
+<div style="height: 20px">{{ selected }}</div>
+
+<!--<div class="dev-container">-->
+    <!--<mc-form-field>-->
+        <!--<input mcInput [(ngModel)]="value" placeholder="Placeholder">-->
+
+        <!--<i mcSuffix mc-icon="mc-calendar_16" color="second"></i>-->
+    <!--</mc-form-field>-->
+
+    <!--<br><br>-->
+
+    <!--<mc-form-field>-->
+        <!--<input mcInput [(ngModel)]="value" placeholder="Placeholder" required>-->
+
+        <!--<i mcSuffix mc-icon="mc-calendar_16" color="second"></i>-->
+    <!--</mc-form-field>-->
+
+    <!--<br><br>-->
+
+    <!--<mc-form-field>-->
+        <!--<input mcInput [(ngModel)]="value" placeholder="Placeholder" [disabled]="true">-->
+
+        <!--<i mcSuffix mc-icon="mc-calendar_16" color="second"></i>-->
+    <!--</mc-form-field>-->
+<!--</div>-->
+
+<br>
+
 <div class="dev-container">
     <mc-form-field>
-        <mc-select [(value)]="selected">
+        <mc-select [(value)]="singleSelected">
             <mc-option value="Disabled" disabled>Disabled</mc-option>
             <mc-option value="Normal">Normal</mc-option>
             <mc-option value="Hovered">Hovered</mc-option>
@@ -20,16 +47,30 @@
             <mc-option value="Selected10">Selected10</mc-option>
         </mc-select>
     </mc-form-field>
-    <!--<br>-->
-    <!--<div>multipleSelected: {{ multipleSelected }}</div>-->
+
+    <br><br>
+
+    <mc-form-field>
+        <mc-select [formControl]="singleSelectFormControl">
+            <mc-option value="Normal">Normal</mc-option>
+        </mc-select>
+    </mc-form-field>
+
+    <br><br>
+
+    <mc-form-field>
+        <mc-select [(value)]="singleSelected" [disabled]="true">
+            <mc-option value="Normal">Normal</mc-option>
+        </mc-select>
+    </mc-form-field>
 </div>
 
 <br>
 
-<div>{{ multipleSelected }}</div>
+<div style="height: 20px">{{ multipleSelected }}</div>
 <div class="dev-container">
     <mc-form-field>
-        <mc-select multiple #select="mcSelect" [(value)]="multipleSelected">
+        <mc-select multiple [(value)]="multipleSelected">
             <!--<mc-select-trigger>ololo <span>{{ select.triggerValue }}</span></mc-select-trigger>-->
             <mc-option value="Disabled" disabled>Disabled</mc-option>
             <mc-option value="Normal">Normal</mc-option>
@@ -50,6 +91,26 @@
             <mc-option value="Selected10">Selected10</mc-option>
         </mc-select>
     </mc-form-field>
-    <!--<br>-->
-    <!--<div>multipleSelected: {{ multipleSelected }}</div>-->
+
+    <br><br>
+
+    <mc-form-field>
+        <mc-select multiple [formControl]="multiSelectSelectFormControl">
+            <mc-option value="Normal">Normal</mc-option>
+            <mc-option value="Hovered">Hovered</mc-option>
+            <mc-option value="Selected">Selected</mc-option>
+            <mc-option value="Selected1">Selected1</mc-option>
+        </mc-select>
+    </mc-form-field>
+
+    <br><br>
+
+    <mc-form-field>
+        <mc-select multiple [(value)]="multipleSelected" [disabled]="true">
+            <mc-option value="Normal">Normal</mc-option>
+            <mc-option value="Hovered">Hovered</mc-option>
+            <mc-option value="Selected">Selected</mc-option>
+            <mc-option value="Selected1">Selected1</mc-option>
+        </mc-select>
+    </mc-form-field>
 </div>
diff --git a/src/lib-dev/tag/styles.scss b/src/lib-dev/tag/styles.scss
@@ -1,6 +1,7 @@
 @import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
 
-@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';
 
 
 .mc-tag {

diff --git a/src/lib-dev/tag/template.html b/src/lib-dev/tag/template.html
@@ -3,21 +3,21 @@
 <mc-tag>Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag disabled>Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="primary">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" disabled>Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="primary" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="error">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" disabled>Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="error" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 
 
@@ -27,21 +27,21 @@
 <mc-tag class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-hovered mc-tag_mono">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-focused mc-tag_mono">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag disabled class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="primary" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" disabled class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="primary" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="error" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" disabled class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="error" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 
 
@@ -51,18 +51,18 @@
 <mc-tag class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag disabled class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="primary" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="primary" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" disabled class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="primary" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
 
 <br><br><br>
 
 <mc-tag color="error" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
 <mc-tag color="error" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" disabled class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+<mc-tag color="error" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
diff --git a/src/lib-dev/tree/styles.scss b/src/lib-dev/tree/styles.scss
@@ -1,3 +1,4 @@
-@import '../../lib/core/theming/prebuilt/default-theme';
-
 @import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+//@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/theming/prebuilt/dark-theme';
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
@@ -61,7 +61,7 @@
 
             .mc-checkbox-checkmark,
             .mc-checkbox-mixedmark {
-                color: mc-color($second, 200);
+                color: map-get($foreground, disabled-text);
             }
         }
     }

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -31,6 +31,34 @@ $mc-checkbox-mark-stroke-size: 2 / 15 * $mc-checkbox-size !default;
 .mc-checkbox {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
+
+    &.mc-checked {
+        .mc-checkbox-checkmark {
+            display: block;
+        }
+
+        .mc-checkbox-mixedmark {
+            display: none;
+        }
+    }
+
+    &.mc-indeterminate {
+        .mc-checkbox-checkmark {
+            display: none;
+        }
+
+        .mc-checkbox-mixedmark {
+            display: block;
+        }
+    }
+
+    &.mc-disabled {
+        cursor: default;
+
+        .mc-checkbox-frame {
+            box-shadow: none;
+        }
+    }
 }
 
 .mc-checkbox-layout {
@@ -110,31 +138,3 @@ $mc-checkbox-mark-stroke-size: 2 / 15 * $mc-checkbox-size !default;
         }
     }
 }
-
-.mc-checked {
-    .mc-checkbox-checkmark {
-        display: block;
-    }
-
-    .mc-checkbox-mixedmark {
-        display: none;
-    }
-}
-
-.mc-indeterminate {
-    .mc-checkbox-checkmark {
-        display: none;
-    }
-
-    .mc-checkbox-mixedmark {
-        display: block;
-    }
-}
-
-.mc-disabled {
-    cursor: default;
-
-    .mc-checkbox-frame {
-        box-shadow: none;
-    }
-}
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
@@ -19,7 +19,6 @@
 @mixin mc-core-theme($theme) {
     @include mc-pseudo-checkbox-theme($theme);
 
-
     .mc-app-background {
         $background: map-get($theme, background);
         $foreground: map-get($theme, foreground);

diff --git a/src/lib/core/common-behaviors/error-state.ts b/src/lib/core/common-behaviors/error-state.ts
@@ -32,8 +32,7 @@ export interface HasErrorState {
  * Mixin to augment a directive with updateErrorState method.
  * For component with `errorState` and need to update `errorState`.
  */
-export function mixinErrorState<T extends Constructor<HasErrorState>>(base: T)
-    : CanUpdateErrorStateCtor & T {
+export function mixinErrorState<T extends Constructor<HasErrorState>>(base: T): CanUpdateErrorStateCtor & T {
     return class extends base {
         /** Whether the component is in an error state. */
         errorState: boolean = false;