Skip to content

Commit 0f407cc

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge branch 'master' into dmdimitrov/esf-templates
2 parents d978daa + c3be13b commit 0f407cc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1297
-394
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ All notable changes for each version of this project will be documented in this
1818
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
1919
- **Breaking Change** - The `selectedRows` method is now an `@Input` property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.
2020
- **Breaking Change** - Removed `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective` and `IgxExcelStyleSelectingTemplateDirective` directives for re-templating the Excel style filter menu. Added two new directives for re-templating the column operations and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. Exposed all internal components of the Excel style filter menu in order to be used inside the templates.
21+
- **Breaking Change** - `IgxColumnHiding` and `IgxColumnPinning` components have been deprecated in favor of a component combining the their functionality - `IgxColumnActions` which is used with either of the new `IgxColumnPinning` and `IgxColumnHiding` directives that specify the action to be triggered through the UI.
2122
- `igxGrid`
2223
- Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
2324
- Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default.

‎projects/igniteui-angular/src/lib/core/deprecateDecorators.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
import { isDevMode } from '@angular/core';
22

3+
/**
4+
* @hidden
5+
*/
6+
export function DeprecateClass(message: string) {
7+
let isMessageShown = false;
8+
9+
return function<T extends new(...args: any[]) => {} >(originalClass: T) {
10+
return class extends originalClass {
11+
constructor(...args) {
12+
const target: any = originalClass;
13+
const targetName = typeof target === 'function' ? target.name : target.constructor.name;
14+
isMessageShown = showMessage(`${targetName}: ${message}`, isMessageShown);
15+
16+
super(...args);
17+
}
18+
};
19+
};
20+
}
21+
322
/**
423
* @hidden
524
*/

‎projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ export interface IGridResourceStrings {
9191
igx_grid_advanced_filter_column_placeholder?: string;
9292
igx_grid_advanced_filter_value_placeholder?: string;
9393
igx_grid_pinned_row_indicator?: string;
94+
igx_grid_hiding_check_all_label?: string;
95+
igx_grid_hiding_uncheck_all_label?: string;
96+
igx_grid_pinning_check_all_label?: string;
97+
igx_grid_pinning_uncheck_all_label?: string;
98+
igx_grid_toolbar_actions_filter_prompt?: string;
9499
}
95100

96101
export const GridResourceStringsEN: IGridResourceStrings = {
@@ -185,5 +190,10 @@ export const GridResourceStringsEN: IGridResourceStrings = {
185190
igx_grid_advanced_filter_initial_text: 'Start with creating a group of conditions linked with "And" or "Or"',
186191
igx_grid_advanced_filter_column_placeholder: 'Select column',
187192
igx_grid_advanced_filter_value_placeholder: 'Value',
188-
igx_grid_pinned_row_indicator: 'Pinned'
193+
igx_grid_pinned_row_indicator: 'Pinned',
194+
igx_grid_hiding_check_all_label: 'Hide All',
195+
igx_grid_hiding_uncheck_all_label: 'Show All',
196+
igx_grid_pinning_check_all_label: 'Pin All',
197+
igx_grid_pinning_uncheck_all_label: 'Unpin All',
198+
igx_grid_toolbar_actions_filter_prompt: 'Filter columns list ...'
189199
};

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,8 @@
186186
}
187187
}
188188
} @else {
189-
@error 'Expected color for $background/$foreground but got #{$background}/#{$foreground}';
189+
@warn 'Expected color for $background/$foreground but got #{$background}/#{$foreground}. The contrast color can\'t be calculated automatically.';
190+
@return #fff;
190191
}
191192
}
192193

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
/// @requires {mixin} bem-elem
77
/// @requires {mixin} bem-mod
88
////
9-
@include b(gauge) {
9+
@include b(linear-gauge) {
10+
// Register the component in the component registry
11+
$this: bem--selector-to-string(&);
12+
@include register-component(str-slice($this, 2, -1));
13+
}
14+
15+
@include b(radial-gauge) {
1016
// Register the component in the component registry
1117
$this: bem--selector-to-string(&);
1218
@include register-component(str-slice($this, 2, -1));

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
/// @requires {mixin} bem-elem
77
/// @requires {mixin} bem-mod
88
////
9-
@include b(graph) {
9+
@include b(bullet-graph) {
1010
// Register the component in the component registry
1111
$this: bem--selector-to-string(&);
1212
@include register-component(str-slice($this, 2, -1));

projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-component.scss renamed to projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-component.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
66
/// @requires {mixin} bem-elem
77
/// @requires {mixin} bem-mod
88
////
9-
@include b(igx-column-hiding) {
9+
@include b(igx-column-actions) {
1010
$block: bem--selector-to-string(&);
11-
@include register-component('igx-column-hiding');
11+
@include register-component('igx-column-actions');
1212

13-
@extend %column-hiding-display !optional;
13+
@extend %column-actions-display !optional;
1414

1515
@include e(header) {
16-
@extend %column-hiding-header !optional;
16+
@extend %column-actions-header !optional;
1717
}
1818

1919
@include e(header-title) {
20-
@extend %column-hiding-title !optional;
20+
@extend %column-actions-title !optional;
2121
}
2222

2323
@include e(header-input) {
24-
@extend %column-hiding-input !optional;
24+
@extend %column-actions-input !optional;
2525
}
2626

2727
@include e(columns) {
28-
@extend %column-hiding-columns !optional;
28+
@extend %column-actions-columns !optional;
2929
}
3030

3131
@include e(columns-item) {
32-
@extend %column-hiding-item !optional;
32+
@extend %column-actions-item !optional;
3333
}
3434

3535
@include e(buttons) {
36-
@extend %column-hiding-buttons !optional;
36+
@extend %column-actions-buttons !optional;
3737
}
3838
}

projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss renamed to projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
66
////
77

8-
/// Column Hiding Theme
8+
/// Column actions Theme
99
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
1010
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
1111
/// @param {Color} $title-color [null]- The text color used for the title of the list.
@@ -18,27 +18,27 @@
1818
/// @requires text-contrast
1919
///
2020
/// @example scss Change the title color
21-
/// $column-hiding-theme: igx-column-hiding-theme($title-color: black);
22-
/// // Pass the theme to the igx-column-hiding component mixin
23-
/// @include igx-column-hiding($column-hiding-theme);
21+
/// $column-actions-theme: igx-column-actions-theme($title-color: black);
22+
/// // Pass the theme to the igx-column-actions component mixin
23+
/// @include igx-column-actions($column-actions-theme);
2424
////
25-
@function igx-column-hiding-theme(
25+
@function igx-column-actions-theme(
2626
$palette: $default-palette,
2727
$schema: $light-schema,
2828
2929
$title-color: null,
3030
$background-color: null
3131
) {
32-
$name: 'igx-column-hiding';
33-
$column-hiding-schema: ();
32+
$name: 'igx-column-actions';
33+
$column-actions-schema: ();
3434

3535
@if map-has-key($schema, $name) {
36-
$column-hiding-schema: map-get($schema, $name);
36+
$column-actions-schema: map-get($schema, $name);
3737
} @else {
38-
$column-hiding-schema: $schema;
38+
$column-actions-schema: $schema;
3939
}
4040

41-
$theme: apply-palette($column-hiding-schema, $palette);
41+
$theme: apply-palette($column-actions-schema, $palette);
4242

4343
@if not($title-color) and $background-color {
4444
$title-color: text-contrast($background-color);
@@ -52,14 +52,49 @@
5252
));
5353
}
5454

55+
////
56+
/// @group themes
57+
/// @access public
58+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
59+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
60+
////
61+
62+
/// Column hiding Theme
63+
/// The function is deprecated and will be removed in future versions. Use igx-column-actions-theme instead.
64+
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
65+
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
66+
/// @param {Color} $title-color [null]- The text color used for the title of the list.
67+
/// @param {Color} $background-color [null] - The background color of the panel.
68+
///
69+
/// @requires $default-palette
70+
/// @requires $light-schema
71+
/// @requires apply-palette
72+
/// @requires extend
73+
/// @requires text-contrast
74+
///
75+
/// @example scss Change the title color
76+
/// $column-hiding-theme: igx-column-hiding-theme($title-color: black);
77+
/// // Pass the theme to the igx-column-hiding component mixin
78+
/// @include igx-column-hiding($column-hiding-theme);
79+
////
80+
@function igx-column-hiding-theme(
81+
$palette: $default-palette,
82+
$schema: $light-schema,
83+
84+
$title-color: null,
85+
$background-color: null
86+
) {
87+
@return igx-column-actions-theme($palette, $schema, $title-color, $background-color);
88+
}
89+
5590
/// @param {Map} $theme - The theme used to style the component.
5691
/// @requires {mixin} igx-root-css-vars
5792
/// @requires rem
5893
/// @requires --var
59-
@mixin igx-column-hiding($theme) {
94+
@mixin igx-column-actions($theme) {
6095
@include igx-root-css-vars($theme);
6196

62-
%column-hiding-display {
97+
%column-actions-display {
6398
display: flex;
6499
flex-flow: column nowrap;
65100
background: --var($theme, 'background-color');
@@ -68,47 +103,57 @@
68103
min-width: rem(180px);
69104
}
70105

71-
%column-hiding-title {
106+
%column-actions-title {
72107
color: --var($theme, 'title-color');
73108
margin: 0;
74109
padding: rem(16px) rem(16px) rem(8px);
75110
}
76111

77-
%column-hiding-input {
112+
%column-actions-input {
78113
font-size: rem(16px) !important;
79114
margin: -16px 0 0 !important;
80115
padding: rem(8px) rem(16px);
81116
}
82117

83-
%column-hiding-columns {
118+
%column-actions-columns {
84119
display: flex;
85120
flex-flow: column nowrap;
86121
overflow-y: auto;
87122
}
88123

89-
%column-hiding-item {
124+
%column-actions-item {
90125
padding: rem(16px);
91126
min-height: rem(52px);
92127
}
93128

94-
%column-hiding-buttons {
129+
%column-actions-buttons {
95130
display: flex;
96131
justify-content: flex-end;
97132
padding: rem(8px) rem(16px);
98133
}
99134
}
100135

101-
/// Adds typography styles for the igx-column-hiding component.
136+
/// A wrapper of the igx-column-actions mixin.
137+
/// Provides compatibility for applications styling the deprecated IgxColumnHiding and IgxColumnPinning components.
138+
/// @param {Map} $theme - The theme used to style the component.
139+
/// @requires {mixin} igx-root-css-vars
140+
/// @requires rem
141+
/// @requires --var
142+
@mixin igx-column-hiding($theme) {
143+
@include igx-column-actions($theme);
144+
}
145+
146+
/// Adds typography styles for the igx-column-actions component.
102147
/// Uses the 'subtitle-1'
103148
/// category from the typographic scale.
104149
/// @group typography
105150
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
106151
/// @param {Map} $categories [(title: 'subtitle-1')] - The categories from the typographic scale used for type styles.
107152
/// @requires {mixin} igx-type-style
108-
@mixin igx-column-hiding-typography($type-scale, $categories: (title: 'subtitle-1')) {
153+
@mixin igx-column-actions-typography($type-scale, $categories: (title: 'subtitle-1')) {
109154
$title: map-get($categories, 'title');
110155

111-
%column-hiding-title {
156+
%column-actions-title {
112157
@include igx-type-style($type-scale, $title) {
113158
margin: 0;
114159
}

‎projects/igniteui-angular/src/lib/core/styles/themes/_core.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
@import '../components/carousel/carousel-component';
3434
@import '../components/checkbox/checkbox-component';
3535
@import '../components/chip/chip-component';
36-
@import '../components/column-hiding/column-hiding-component';
36+
@import '../components/column-actions/column-actions-component';
3737
@import '../components/combo/combo-component';
3838
@import '../components/charts/category-chart-component';
3939
@import '../components/charts/data-chart-component';

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
@import '../components/charts/shape-chart-theme';
3131
@import '../components/checkbox/checkbox-theme';
3232
@import '../components/chip/chip-theme';
33-
@import '../components/column-hiding/column-hiding-theme';
33+
@import '../components/column-actions/column-actions-theme';
3434
@import '../components/combo/combo-theme';
3535
@import '../components/date-picker/date-picker-theme';
3636
@import '../components/date-range-picker/date-range-picker-theme';
@@ -298,8 +298,8 @@
298298
));
299299
}
300300

301-
@if not(index($exclude, 'igx-column-hiding')) {
302-
@include igx-column-hiding(igx-column-hiding-theme($palette, $schema));
301+
@if not(index($exclude, 'igx-column-actions')) {
302+
@include igx-column-actions(igx-column-actions-theme($palette, $schema));
303303
}
304304

305305
@if not(index($exclude, 'igx-combo')) {

0 commit comments

Comments
 (0)