From b322ded2421d8c9b3b821fb0c02e902ff93e8071 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 13 Jan 2020 16:03:50 +0200 Subject: [PATCH 1/2] feat(time-picker): add disabled styles for values --- .../time-picker/_time-picker-component.scss | 7 ++++++- .../time-picker/_time-picker-theme.scss | 18 ++++++++++++++++++ .../themes/schemas/light/_time-picker.scss | 11 +++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss index 207d663261c..947ffa373a9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss @@ -29,7 +29,7 @@ @extend %time-picker__item !optional; } - @include e(item, $mod: selected) { + @include e(item, $m: selected) { @extend %time-picker__item--selected !optional; } @@ -37,6 +37,10 @@ @extend %time-picker__item--active !optional; } + @include e(item, $m: disabled) { + @extend %time-picker__item--disabled !optional; + } + // HOUR @include e(hourList) { @extend %time-picker__hourList !optional; @@ -77,3 +81,4 @@ } } } + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 5b9b4d57380..044ac4ba072 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -16,6 +16,8 @@ /// @param {Color} $hover-text-color [null] - The hover text color of a open time picker. /// @param {Color} $selected-text-color [null] - The text color of a selected item in time picker. /// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker. +/// @param {Color} $disabled-text-color [null] - The text color for disabled values. +/// @param {Color} $disabled-item-background [null] - The background color for disabled values . /// @param {Color} $header-background [null] - The header background color of a time picker. /// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker. /// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker. @@ -52,6 +54,8 @@ $hover-text-color: null, $selected-text-color: null, $active-item-background: null, + $disabled-text-color: null, + $disabled-item-background: null, $header-background: null, $header-hour-text-color: null, $header-time-period-color: null, @@ -102,6 +106,12 @@ } } + @if not($disabled-text-color) and $disabled-item-background { + @if type-of($disabled-item-background) == 'color' { + $disabled-text-color: rgba(text-contrast($disabled-item-background), .6); + } + } + @if not($modal-shadow) { $elevation: map-get($time-picker-schema, 'modal-elevation'); $modal-shadow: igx-elevation($elevations, $elevation); @@ -119,6 +129,8 @@ hover-text-color: $hover-text-color, selected-text-color: $selected-text-color, active-item-background: $active-item-background, + disabled-text-color: $disabled-text-color, + disabled-item-background: $disabled-item-background, header-background: $header-background, header-hour-text-color: $header-hour-text-color, header-time-period-color: $header-time-period-color, @@ -263,6 +275,11 @@ background: --var($theme, 'active-item-background'); } + %time-picker__item--disabled { + color: --var($theme, 'disabled-text-color'); + background: --var($theme, 'disabled-item-background'); + } + %time-picker__header { background: --var($theme, 'header-background'); padding: rem(24px) rem(16px); @@ -334,3 +351,4 @@ } } } + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss index 5d56d28956b..aa4c6c69a09 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss @@ -14,6 +14,8 @@ /// @prop {Map} hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a open time picker. /// @prop {Map} selected-text-color [igx-color: ('secondary', 500)] - The text color of a selected item in time picker. /// @prop {Map} active-item-background [igx-color: ('grays', 100)] - The background color for current item in focused column inside the time picker. +/// @prop {Map} disabled-text-color [igx-color: ('grays', 500), hexrgba: (), rgba: .6] - The text color for disabled values. +/// @prop {Map} disabled-item-background [igx-color: ('grays', 100)] - The background color for disabled values . /// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color of a time picker. /// @prop {Map} header-hour-text-color [igx-contrast-color: ('secondary', 500)] - The header hour text color of a time picker. /// @prop {Map} header-time-period-color [igx-contrast-color: ('secondary', 500), rgba: .8] - The header AM/PM text color of a time picker. @@ -47,6 +49,14 @@ $_light-time-picker: extend( igx-color: ('grays', 100) ), + disabled-text-color: ( + igx-color: ('grays', 500), + hexrgba: (), + rgba: .5 + ), + + disabled-item-background: transparent, + header-background: ( igx-color: ('secondary', 500) ), @@ -74,3 +84,4 @@ $_light-time-picker: extend( /// @requires $_light-time-picker /// @requires $_fluent-shape-time-picker $_fluent-time-picker: extend($_light-time-picker, $_fluent-shape-time-picker); + From 76f92a363f8190b15e5744f72c0fa4407deae22b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 17 Jan 2020 10:47:43 +0200 Subject: [PATCH 2/2] refactor(time-picker): set pointer events to none for disabled items --- .../core/styles/components/time-picker/_time-picker-theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss index 044ac4ba072..415500730f2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss @@ -278,6 +278,7 @@ %time-picker__item--disabled { color: --var($theme, 'disabled-text-color'); background: --var($theme, 'disabled-item-background'); + pointer-events: none; } %time-picker__header {