From 35a425de3b09469dd53a708ccb0756652d51e8fa Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 25 Feb 2020 15:52:54 +0200 Subject: [PATCH 1/8] feat(scrollbar): add scrollbar theme --- .../scrollbar/scrollbar-component.scss | 15 ++++ .../components/scrollbar/scrollbar-theme.scss | 75 +++++++++++++++++++ .../src/lib/core/styles/themes/_core.scss | 1 + .../src/lib/core/styles/themes/_index.scss | 5 ++ .../src/lib/core/styles/themes/_palettes.scss | 60 ++++++++------- .../styles/themes/schemas/dark/_index.scss | 7 ++ .../themes/schemas/dark/_scrollbar.scss | 52 +++++++++++++ .../styles/themes/schemas/light/_index.scss | 5 ++ .../themes/schemas/light/_scrollbar.scss | 51 +++++++++++++ src/index.html | 2 +- src/styles/_mixins.scss | 20 ----- src/styles/igniteui-theme.scss | 9 +-- 12 files changed, 249 insertions(+), 53 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss new file mode 100644 index 00000000000..55d602eab78 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss @@ -0,0 +1,15 @@ +//// +/// @group components +/// @author Simeon Simeonoff +/// @requires {mixin} bem-block +/// @requires {mixin} bem-elem +/// @requires {mixin} bem-mod +//// +@include b(igx-scrollbar) { + // Register the component in the component registry + $this: bem--selector-to-string(&); + @include register-component(str-slice($this, 2, -1)); + + @extend %scrollbar-display !optional; +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss new file mode 100644 index 00000000000..57129476ad7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss @@ -0,0 +1,75 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color. +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {Color} $thumb-background [null] - The background color used for the thumb. +/// @param {Color} $track-background [null] - The background color used for the track. +/// @param {Number | String} $size [null] - The size of the track. +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires text-contrast +/// @requires extend +/// +/// @example scss Change the background and track colors +/// $my-scrollbar-theme: igx-scrollbar-theme($thumb-background: black, $track-background: gray); +/// // Pass the theme to the igx-scrollbar component mixin +/// @include igx-scrollbar($my-avatar-theme); +@function igx-scrollbar-theme( + $palette: $default-palette, + $schema: $light-schema, + $size: null, + $thumb-background: null, + $track-background: null, +) { + $name: 'igx-scrollbar'; + $scrollbar-schema: (); + + @if map-has-key($schema, $name) { + $scrollbar-schema: map-get($schema, $name); + } @else { + $scrollbar-schema: $schema; + } + + $theme: apply-palette($scrollbar-schema, $palette); + + @return extend($theme, ( + name: $name, + palette: $palette, + thumb-background: $thumb-background, + track-background: $track-background, + size: $size + )); +} + +/// @param {Map} $theme - The theme used to style the component. +/// @requires {mixin} igx-root-css-vars +/// @requires rem +/// @requires --var +@mixin igx-scrollbar($theme) { + @include igx-root-css-vars($theme); + + %scrollbar-display { + @if type-of(map-get($theme, 'size') == 'string') { + scrollbar-width: --var($theme, 'size'); + } + + scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background'); + + ::-webkit-scrollbar { + width: --var($theme, 'size'); + height: --var($theme, 'size'); + background: --var($theme, 'track-background'); + } + + ::-webkit-scrollbar-thumb { + background: --var($theme, 'thumb-background'); + } + } +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 63cd132a243..8fc3548ad05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -51,6 +51,7 @@ @import '../components/overlay/overlay-component'; @import '../components/progress/progress-component'; @import '../components/radio/radio-component'; +@import '../components/scrollbar/scrollbar-component'; @import '../components/slider/slider-component'; @import '../components/snackbar/snackbar-component'; @import '../components/switch/switch-component'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index 51d1988a9f5..238513445cc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -34,6 +34,7 @@ @import '../components/toast/toast-theme'; @import '../components/tooltip/tooltip-theme'; @import '../components/tabs/tabs-theme'; +@import '../components/scrollbar/scrollbar-theme'; @import '../components/switch/switch-theme'; @import '../components/snackbar/snackbar-theme'; @import '../components/slider/slider-theme'; @@ -347,6 +348,10 @@ @include igx-radio(igx-radio-theme($palette, $schema)); } + @if not(index($exclude, 'igx-scrollbar')) { + @include igx-scrollbar(igx-scrollbar-theme($palette, $schema)); + } + @if not(index($exclude, 'igx-slider')) { @include igx-slider(igx-slider-theme($palette, $schema)); } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss index 83764a96f08..e462433f0ac 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss @@ -91,11 +91,11 @@ $green-palette: igx-palette( /// Dark green palette, /// @type {Map} /// @group palettes -$green-dark-palette: extend( - $green-palette, - ( - surface: (500: #222) - ) +$green-dark-palette: igx-palette( + $primary: igx-color($green-palette, 'primary'), + $secondary: igx-color($green-palette, 'secondary'), + $surface: #222, + $grays: #fff ) !default; /// Purple palette @@ -109,11 +109,11 @@ $purple-palette: igx-palette( /// Dark purple palette /// @type {Map} /// @group palettes -$purple-dark-palette: extend( - $purple-palette, - ( - surface: (500: #333) - ) +$purple-dark-palette: igx-palette( + $primary: igx-color($purple-palette, 'primary'), + $secondary: igx-color($purple-palette, 'secondary'), + $surface: #333, + $grays: #fff ) !default; /// Fluent Excel palette @@ -130,11 +130,14 @@ $fluent-excel-palette: igx-palette( /// Fluent Excel dark palette /// @type {Map} /// @group palettes -$fluent-excel-dark-palette: extend( - $fluent-excel-palette, - ( - surface: (500: #222) - ) +$fluent-excel-dark-palette: igx-palette( + $primary: igx-color($fluent-excel-palette, 'primary'), + $secondary: igx-color($fluent-excel-palette, 'secondary'), + $success: igx-color($fluent-excel-palette, 'success'), + $warn: igx-color($fluent-excel-palette, 'warn'), + $error: igx-color($fluent-excel-palette, 'error'), + $surface: #222, + $grays: #fff ) !default; /// Fluent Word palette @@ -151,11 +154,14 @@ $fluent-word-palette: igx-palette( /// Fluent Word dark palette /// @type {Map} /// @group palettes -$fluent-word-dark-palette: extend( - $fluent-word-palette, - ( - surface: (500: #222) - ) +$fluent-word-dark-palette: igx-palette( + $primary: igx-color($fluent-word-palette, 'primary'), + $secondary: igx-color($fluent-word-palette, 'secondary'), + $success: igx-color($fluent-word-palette, 'success'), + $warn: igx-color($fluent-word-palette, 'warn'), + $error: igx-color($fluent-word-palette, 'error'), + $surface: #222, + $grays: #fff ) !default; /// Bootstrap palette @@ -174,10 +180,14 @@ $bootstrap-palette: igx-palette( /// Bootstrap dark palette /// @type {Map} /// @group palettes -$bootstrap-dark-palette: extend( - $bootstrap-palette, - ( - surface: (500: #333) - ) +$bootstrap-dark-palette: igx-palette( + $primary: igx-color($bootstrap-palette, 'primary'), + $secondary: igx-color($bootstrap-palette, 'secondary'), + $info: igx-color($bootstrap-palette, 'info'), + $success: igx-color($bootstrap-palette, 'success'), + $warn: igx-color($bootstrap-palette, 'warn'), + $error: igx-color($bootstrap-palette, 'error'), + $surface: #333, + $grays: #fff ) !default; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index 5669fec3338..c7cdbec9843 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -35,6 +35,7 @@ @import './progress'; @import './radio'; @import './ripple'; +@import './scrollbar'; @import './slider'; @import './snackbar'; @import './switch'; @@ -78,6 +79,7 @@ /// @property {Map} igx-progress-circular [$_dark-progress-circular] /// @property {Map} igx-radio [$_dark-radio] /// @property {Map} igx-ripple [$_dark-ripple] +/// @property {Map} igx-scrollbar [$_dark-scrollbar] /// @property {Map} igx-slider [$_dark-slider] /// @property {Map} igx-snackbar [$_dark-snackbar] /// @property {Map} igx-switch [$_dark-switch] @@ -119,6 +121,7 @@ $dark-schema: ( igx-circular-bar: $_dark-progress-circular, igx-radio: $_dark-radio, igx-ripple: $_dark-ripple, + igx-scrollbar: $_dark-scrollbar, igx-slider: $_dark-slider, igx-snackbar: $_dark-snackbar, igx-switch: $_dark-switch, @@ -163,6 +166,7 @@ $dark-schema: ( /// @property {map} igx-circular-bar [$_dark-fluent-progress-circular], /// @property {map} igx-radio [$_dark-fluent-radio], /// @property {map} igx-ripple [$_dark-fluent-ripple], +/// @property {map} igx-scrollbar [$_dark-fluent-scrollbar], /// @property {map} igx-slider [$_dark-fluent-slider], /// @property {map} igx-snackbar [$_dark-fluent-snackbar], /// @property {map} igx-switch [$_dark-fluent-switch], @@ -204,6 +208,7 @@ $dark-fluent-schema: ( igx-circular-bar: $_dark-fluent-progress-circular, igx-radio: $_dark-fluent-radio, igx-ripple: $_dark-fluent-ripple, + igx-scrollbar: $_dark-fluent-scrollbar, igx-slider: $_dark-fluent-slider, igx-snackbar: $_dark-fluent-snackbar, igx-switch: $_dark-fluent-switch, @@ -248,6 +253,7 @@ $dark-fluent-schema: ( /// @property {map} igx-circular-bar [$_dark-bootstrap-progress-circular], /// @property {map} igx-radio [$_dark-bootstrap-radio], /// @property {map} igx-ripple [$_dark-bootstrap-ripple], +/// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar], /// @property {map} igx-slider [$_dark-bootstrap-slider], /// @property {map} igx-snackbar [$_dark-bootstrap-snackbar], /// @property {map} igx-switch [$_dark-bootstrap-switch], @@ -289,6 +295,7 @@ $dark-bootstrap-schema: ( igx-circular-bar: $_dark-bootstrap-progress-circular, igx-radio: $_dark-bootstrap-radio, igx-ripple: $_dark-bootstrap-ripple, + igx-scrollbar: $_dark-bootstrap-scrollbar, igx-slider: $_dark-bootstrap-slider, igx-snackbar: $_dark-bootstrap-snackbar, igx-switch: $_dark-bootstrap-switch, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss new file mode 100644 index 00000000000..1ae63442f09 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss @@ -0,0 +1,52 @@ +@import '../light/scrollbar'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark scrollbar schema. +/// @type {Map} +/// @property {Color} thumb-background [igx-color: surface, lighten: 20%] - The background color used for the thumb. +/// @property {Color} track-background [igx-color: 'surface', lighten: 5%] - The background color used for the track. +/// @property {String | Number} size [16px] - The size of the track. +/// @requires $_light-scrollbar +/// @see $default-palette +$_dark-scrollbar: extend( + $_light-scrollbar, + ( + thumb-background: ( + igx-color: 'surface', + lighten: 20% + ), + + track-background: ( + igx-color: 'surface', + lighten: 5% + ), + ) +); + +/// Generates a fluent scrollbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_dark-scrollbar +$_dark-fluent-scrollbar: extend( + $_dark-scrollbar, + ( + variant: 'fluent', + ) +); + +/// Generates a bootstrap scrollbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_dark-scrollbar +$_dark-bootstrap-scrollbar: extend( + $_light-scrollbar, + ( + variant: 'bootstrap', + ) +); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index c1fdab6263b..c91b32b9d8a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -36,6 +36,7 @@ @import './progress'; @import './radio'; @import './ripple'; +@import './scrollbar'; @import './slider'; @import './snackbar'; @import './switch'; @@ -79,6 +80,7 @@ /// @property {Map} igx-progress-circular [$_light-progress-circular] /// @property {Map} igx-radio [$_light-radio] /// @property {Map} igx-ripple [$_light-ripple] +/// @property {Map} igx-scrollbar [$_light-scrollbar] /// @property {Map} igx-slider [$_light-slider] /// @property {Map} igx-snackbar [$_light-snackbar] /// @property {Map} igx-switch [$_light-switch] @@ -120,6 +122,7 @@ $light-schema: ( igx-circular-bar: $_light-progress-circular, igx-radio: $_light-radio, igx-ripple: $_light-ripple, + igx-scrollbar: $_light-scrollbar, igx-slider: $_light-slider, igx-snackbar: $_light-snackbar, igx-switch: $_light-switch, @@ -163,6 +166,7 @@ $light-fluent-schema: ( igx-circular-bar: $_fluent-progress-circular, igx-radio: $_fluent-radio, igx-ripple: $_fluent-ripple, + igx-scrollbar: $_fluent-scrollbar, igx-slider: $_fluent-slider, igx-snackbar: $_fluent-snackbar, igx-switch: $_fluent-switch, @@ -206,6 +210,7 @@ $light-bootstrap-schema: ( igx-circular-bar: $_bootstrap-progress-circular, igx-radio: $_bootstrap-radio, igx-ripple: $_bootstrap-ripple, + igx-scrollbar: $_bootstrap-scrollbar, igx-slider: $_bootstrap-slider, igx-snackbar: $_bootstrap-snackbar, igx-switch: $_bootstrap-switch, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss new file mode 100644 index 00000000000..a664f8a09dc --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_scrollbar.scss @@ -0,0 +1,51 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light scrollbar schema. +/// @type {Map} +/// @property {Color} thumb-background [igx-color: surface, darken: 20%] - The background color used for the thumb. +/// @property {Color} track-background [igx-color: 'surface', darken: 5%] - The background color used for the track. +/// @property {String | Number} size [16px] - The size of the track. +/// @see $default-palette +$_light-scrollbar: extend( + ( + size: 16px, + + thumb-background: ( + igx-color: 'surface', + darken: 20% + ), + + track-background: ( + igx-color: 'surface', + darken: 5% + ), + ) +); + +/// Generates a fluent scrollbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-scrollbar +$_fluent-scrollbar: extend( + $_light-scrollbar, + ( + variant: 'fluent', + ) +); + +/// Generates a bootstrap scrollbar schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-avatar +/// @requires $_bootstrap-shape-avatar +$_bootstrap-scrollbar: extend( + $_light-scrollbar, + ( + variant: 'bootstrap', + ) +); + diff --git a/src/index.html b/src/index.html index b62752b3f8a..1e73e9d6466 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 0337475d9b1..097cf993907 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -5,26 +5,6 @@ background-position: 16px center; } -@mixin scrollbar-love($scrollbar-color: null) { - $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200)); - $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400)); - - @if $scrollbar-color and luminance($scrollbar-color) < .5 { - $scrollbar-track: darken($scrollbar-color, 8%); - $scrollbar-thumb: lighten($scrollbar-color, 20%); - } - - ::-webkit-scrollbar { - width: 16px; - height: 16px; - background-color: $scrollbar-track; - } - - ::-webkit-scrollbar-thumb { - background-color: $scrollbar-thumb; - } -} - /// Creates a global theme that can be used with light backgrounds. /// @param {Map} $palette - An igx-palette to be used by the global theme. /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles. diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index db76be70afc..63eaa4ba3d6 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -5,6 +5,7 @@ @import 'app-palettes'; @import 'app-layout'; +/* autoprefixer grid: on */ $igx-background-color: igx-color($default-palette, 'surface'); $igx-foreground-color: text-contrast($igx-background-color); @@ -14,13 +15,7 @@ body { } @include igx-core($direction: ltr); - -/* autoprefixer grid: on */ - - - -@include scrollbar-love(); -@include igx-theme($default-palette); +@include igx-theme($default-palette, $schema: $light-schema); .nav-header { @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color); From 421f6001bd731143fa0c17a307a1106775935841 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 13 Mar 2020 10:55:58 +0200 Subject: [PATCH 2/8] refactor(grid): remove hard-coded vhelper width and height --- .../core/styles/components/_common/_igx-display-container.scss | 2 +- .../src/lib/core/styles/components/_common/_igx-vhelper.scss | 1 - .../igniteui-angular/src/lib/grids/grid/grid.component.html | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss index e7006ba2a7d..9d3557ac303 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss @@ -1,4 +1,4 @@ -%display-container { +%display-container { display: inherit; position: relative; width: 100%; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss index 7e52940e742..c7e5ace7166 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss @@ -12,7 +12,6 @@ %vhelper--vertical { position: absolute; - width: 18px; top: 0; #{$right}: 0; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 0fed3d47788..b7740853e59 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -187,7 +187,7 @@ [style.width.px]="scrollWidth"> -
+
From 01b7c619a81fe890dd9a06f20949ad6e9c19870c Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 15:27:56 +0200 Subject: [PATCH 3/8] chore(*): Fix issue with FireFox not displaying vertial scrollbar. Remove hardcoded scrollbar heigth in hierarchical/tree grid. --- .../lib/directives/for-of/for_of.directive.ts | 4 +++ .../for-of/virtual.helper.component.ts | 27 +++++++++++++++++-- .../src/lib/grids/grid-base.directive.ts | 19 +------------ .../hierarchical-grid.component.html | 2 +- .../grids/tree-grid/tree-grid.component.html | 2 +- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index e19a7c0caa8..d01bb6f11c9 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -710,6 +710,10 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr return this.sizesCache[index + 1] - this.sizesCache[index]; } + public getScrollbarWidth() { + return this.scrollComponent ? (this.scrollComponent as VirtualHelperComponent).scrollWidth : 0; + } + /** * Returns the scroll offset of the element at the specified index. * ```typescript diff --git a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts index 50e7309fd1c..acd09b1e2d2 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts @@ -1,14 +1,18 @@ -import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, OnDestroy } from '@angular/core'; +import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, + ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core'; import { VirtualHelperBaseDirective } from './base.helper.component'; @Component({ selector: 'igx-virtual-helper', template: '
' }) -export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnDestroy { +export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnInit, OnDestroy { @HostBinding('scrollTop') public scrollTop; + @HostBinding('style.width.px') + public scrollWidth; + @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr; @Input() public itemsLength: number; @@ -20,4 +24,23 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement super(elementRef, cdr); } + ngOnInit() { + this.scrollWidth = this.getScrollWidth(); + } + + private getScrollWidth() { + const div = document.createElement('div'); + const style = div.style; + style.width = '100px'; + style.height = '100px'; + style.position = 'absolute'; + style.top = '-10000px'; + style.top = '-10000px'; + style.overflow = 'scroll'; + document.body.appendChild(div); + const scrollWidth = div.offsetWidth - div.clientWidth; + document.body.removeChild(div); + return scrollWidth; + } + } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 09ad845012e..f97ba05a34a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -161,14 +161,13 @@ export const IgxGridTransaction = new InjectionToken('IgxGridTransaction }) export class IgxGridBaseDirective extends DisplayDensityBase implements OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { - private _scrollWidth: number; private _customDragIndicatorIconTemplate: TemplateRef; protected _init = true; private _cdrRequests = false; protected _cdrRequestRepaint = false; public get scrollWidth() { - return this._scrollWidth; + return this.verticalScrollContainer.getScrollbarWidth(); } private _resourceStrings = CurrentResourceStrings.GridResStrings; @@ -2756,7 +2755,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements this.columnListDiffer = this.differs.find([]).create(null); this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0; this.shouldGenerate = this.autoGenerate; - this._scrollWidth = this.getScrollWidth(); } protected setupColumns() { @@ -4755,21 +4753,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements return DataType.String; } - private getScrollWidth() { - const div = document.createElement('div'); - const style = div.style; - style.width = '100px'; - style.height = '100px'; - style.position = 'absolute'; - style.top = '-10000px'; - style.top = '-10000px'; - style.overflow = 'scroll'; - document.body.appendChild(div); - const scrollWidth = div.offsetWidth - div.clientWidth; - document.body.removeChild(div); - return scrollWidth; - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index ffdc0e3b7fc..b703acbf4f4 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -147,7 +147,7 @@ [style.width.px]="scrollWidth">
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 60515593e4a..81acc6c6c8e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -126,7 +126,7 @@ [style.width.px]="scrollWidth">
-
+
From da493f1eb23692ba892ebc48efc249d95be00be5 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 17:36:25 +0200 Subject: [PATCH 4/8] chore(*): Attempt to fix tests. --- .../lib/directives/for-of/for_of.directive.ts | 2 ++ .../lib/grids/grid/column-resizing.spec.ts | 12 +++++++---- .../src/lib/grids/grid/grid.component.spec.ts | 20 +++++++++++++++---- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index d01bb6f11c9..9b4cdd22294 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -1195,6 +1195,8 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr } } if (this.igxForScrollOrientation === 'vertical') { + // reset width to force reflow. + this.scrollComponent.nativeElement.style.width = ''; this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px'; this.scrollComponent.size = this._calcHeight(); if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 7ce783afbc6..e94b49d9152 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -549,9 +549,10 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { const grid = fixture.componentInstance.grid; const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); - const expectedHeight = fixture.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - + let expectedHeight = fixture.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - - grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height; + grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; expect(grid.calcHeight).toEqual(expectedHeight); expect(grid.columns[0].width).toEqual('100px'); @@ -574,8 +575,11 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { const hScroll = fixture.componentInstance.grid.headerContainer.getScroll(); const hScrollVisible = hScroll.offsetWidth < hScroll.children[0].offsetWidth; - // Should 243 - 18, because the horizontal scrollbar has 18px height - expect(grid.calcHeight).toEqual(expectedHeight - 18); + expectedHeight = fixture.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; + expect(grid.calcHeight).toEqual(expectedHeight); expect(hScrollVisible).toBe(true); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index e2f417606f0..f39014e60f0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1625,8 +1625,12 @@ describe('IgxGrid Component Tests #grid', () => { const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); expect(headers.length).toBe(4); const gridBody = fix.debugElement.query(By.css(TBODY_CLASS)); + const expectedHeight = fix.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10) + grid.scrollWidth).toBe(500); - expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(230); + expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight); }); it('IgxTabs: should initialize a grid with correct height when paging and summaries are enabled', async () => { @@ -1644,7 +1648,11 @@ describe('IgxGrid Component Tests #grid', () => { const summaries = fix.debugElement.queryAll(By.css('igx-grid-summary-cell')); expect(headers.length).toBe(4); expect(summaries.length).toBe(4); - expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(139); + const expectedHeight = fix.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; + expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight); expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36); }); @@ -1677,8 +1685,12 @@ describe('IgxGrid Component Tests #grid', () => { await wait(100); grid.cdr.detectChanges(); const gridBody = fix.debugElement.query(By.css(TBODY_CLASS)); - expect(grid.calcHeight).toBe(230); - expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(230); + const expectedHeight = fix.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; + expect(grid.calcHeight).toBe(expectedHeight); + expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight); expect(parseInt(window.getComputedStyle(grid.nativeElement).height, 10)).toBe(300); }); }); From 17422883532264db0028624b29fa77d773eff744 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 18:20:04 +0200 Subject: [PATCH 5/8] chore(*): Fix last test. --- .../igniteui-angular/src/lib/grids/grid/grid.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index f39014e60f0..32266e3ab0c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1651,6 +1651,7 @@ describe('IgxGrid Component Tests #grid', () => { const expectedHeight = fix.debugElement.query(By.css('igx-grid')).nativeElement.getBoundingClientRect().height - grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height - grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height - + grid.nativeElement.querySelector('.igx-grid__footer').getBoundingClientRect().height - grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height; expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight); expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36); From b0bd814977f24c9921615bb31bd8f311bb0cff2f Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 18:41:03 +0200 Subject: [PATCH 6/8] chore(*): Fix reflow issue in Chrome another way so it does not break Firefox. --- .../src/lib/directives/for-of/for_of.directive.ts | 2 -- .../src/lib/directives/for-of/virtual.helper.component.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index 9b4cdd22294..d01bb6f11c9 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -1195,8 +1195,6 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr } } if (this.igxForScrollOrientation === 'vertical') { - // reset width to force reflow. - this.scrollComponent.nativeElement.style.width = ''; this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px'; this.scrollComponent.size = this._calcHeight(); if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) { diff --git a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts index acd09b1e2d2..93ef4af0e2c 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts @@ -40,7 +40,7 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement document.body.appendChild(div); const scrollWidth = div.offsetWidth - div.clientWidth; document.body.removeChild(div); - return scrollWidth; + return scrollWidth ? scrollWidth + 1 : 0; } } From 67a123acdc3acec52a8c5ba2ef723b0ca583bb49 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 19:13:43 +0200 Subject: [PATCH 7/8] chore(*): Attempt to fix mch tests. --- .../src/lib/grids/grid/column-group.spec.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 0ea9ca0c79e..465082631e8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -303,7 +303,8 @@ describe('IgxGrid - multi-column headers #grid', () => { grid.ngAfterViewInit(); - const availableWidth = (parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollWidth).toString(); + const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width; + const availableWidth = (parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh).toString(); const locationColGroup = getColGroup(grid, 'Location'); const colWidth = Math.round(parseInt(availableWidth, 10) / 3); const colWidthPx = colWidth + 'px'; @@ -326,7 +327,8 @@ describe('IgxGrid - multi-column headers #grid', () => { grid.width = gridWidth; tick(); fixture.detectChanges(); - const gridWidthInPx = parseInt(gridWidth, 10) - grid.scrollWidth; + const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width; + const gridWidthInPx = parseInt(gridWidth, 10) - scrWitdh; const colWidth = Math.round(gridWidthInPx / 3); const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); @@ -350,8 +352,10 @@ describe('IgxGrid - multi-column headers #grid', () => { tick(); fixture.detectChanges(); + const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width; + const gridWidthInPx = (parseInt(gridWidth, 10) / 100) * - parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollWidth; + parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh; const colWidth = Math.round(gridWidthInPx / 3); const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); From 8fc80e3576270bb1ab5fa3d4221fd2a999a219f5 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 13 Mar 2020 19:56:23 +0200 Subject: [PATCH 8/8] chore(*): Attempt to fix issue with expected value rounding. --- .../src/lib/grids/grid/column-group.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 465082631e8..7d163e2083f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -306,7 +306,7 @@ describe('IgxGrid - multi-column headers #grid', () => { const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width; const availableWidth = (parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh).toString(); const locationColGroup = getColGroup(grid, 'Location'); - const colWidth = Math.round(parseInt(availableWidth, 10) / 3); + const colWidth = Math.floor(parseInt(availableWidth, 10) / 3); const colWidthPx = colWidth + 'px'; expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px'); const countryColumn = grid.getColumnByName('Country'); @@ -329,7 +329,7 @@ describe('IgxGrid - multi-column headers #grid', () => { fixture.detectChanges(); const scrWitdh = grid.nativeElement.querySelector('.igx-grid__tbody-scrollbar').getBoundingClientRect().width; const gridWidthInPx = parseInt(gridWidth, 10) - scrWitdh; - const colWidth = Math.round(gridWidthInPx / 3); + const colWidth = Math.floor(gridWidthInPx / 3); const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px'); @@ -356,7 +356,7 @@ describe('IgxGrid - multi-column headers #grid', () => { const gridWidthInPx = (parseInt(gridWidth, 10) / 100) * parseInt(componentInstance.gridWrapperWidthPx, 10) - scrWitdh; - const colWidth = Math.round(gridWidthInPx / 3); + const colWidth = Math.floor(gridWidthInPx / 3); const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); expect(locationColGroup.width).toBe((Math.round(colWidth) * 3) + 'px');