Splitter base

CHANGELOG.md

@@ -13,6 +13,21 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `igxSplitter` component added.
+    - Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
+        Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the `type` input.
+
+     ```html
+   <igx-splitter [type]="type">
+        <igx-splitter-pane>
+			...
+        </igx-splitter-pane>
+        <igx-splitter-pane>
+			...
+        </igx-splitter-pane>
+    </igx-splitter>
+    ```
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added ability to pin rows to top or bottom depending on the new `pinning` input.
     And new API methods `pinRow` and `unpinRow`.

projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss

@@ -0,0 +1,52 @@
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Maya Kirova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+
+@include b(igx-splitter) {
+    // Register the component in the component registry
+    $this: str-slice(bem--selector-to-string(&), 2, -1);
+    @include register-component($this);
+
+    @include b(#{$this}-bar) {
+        @extend %igx-splitter-bar !optional;
+
+        @include e(handle) {
+            @extend %igx-splitter-handle !optional;
+            @extend %igx-splitter-handle--horizontal !optional;
+        }
+
+        @include e(expander, 'start') {
+            @extend %igx-splitter-expander !optional;
+            @extend %igx-splitter-expander--start !optional;
+        }
+
+        @include e(expander, 'end') {
+            @extend %igx-splitter-expander !optional;
+            @extend %igx-splitter-expander--end !optional;
+        }
+
+        @include m('vertical') {
+            @extend %igx-splitter-bar--vertical !optional;
+
+            @include e(handle) {
+                @extend %igx-splitter-handle !optional;
+                @extend %igx-splitter-handle--vertical !optional;
+            }
+
+            @include e(expander, 'start') {
+                @extend %igx-splitter-expander !optional;
+                @extend %igx-splitter-expander--start-vertical !optional;
+            }
+
+            @include e(expander, 'end') {
+                @extend %igx-splitter-expander !optional;
+                @extend %igx-splitter-expander--end-vertical !optional;
+            }
+        }
+    }
+}
+

projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -0,0 +1,206 @@
+////
+/// @group themes
+@function igx-splitter-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+    $elevations: $elevations,
+
+    $bar-color: null,
+    $handle-color: null,
+    $expander-color: null,
+    $border-radius: null,
+    $size: null
+) {
+    $name: 'igx-splitter';
+    $splitter-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $splitter-schema: map-get($schema, $name);
+    } @else {
+        $splitter-schema: $schema;
+    }
+
+    $border-radius-handle: round-borders(
+        if($border-radius, $border-radius, map-get($splitter-schema, 'border-radius')), 0, 2px
+    );
+
+    $theme: apply-palette($splitter-schema, $palette);
+
+    @if not($handle-color) and $bar-color {
+        $handle-color: text-contrast($bar-color);
+    }
+
+    @if not($expander-color) and $bar-color {
+        $expander-color: text-contrast($bar-color);
+    }
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+        bar-color: $bar-color,
+        handle-color: $handle-color,
+        expander-color: $expander-color,
+        border-radius: $border-radius-handle,
+        size: $size
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires rem
+/// @requires --var
+@mixin igx-splitter($theme) {
+    @include igx-root-css-vars($theme);
+    $splitter-color: --var($theme, 'bar-color');
+    $hitbox-size: 4px;
+    $debug-hitbox: false;
+    $hitbox-debug-color: rgba(coral, .24);
+
+    %handle-area {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: $hitbox-size;
+        background: if($debug-hitbox, $hitbox-debug-color, transparent);
+    }
+
+    %handle-area--vertical {
+        width: $hitbox-size;
+        height: 100%;
+    }
+
+    %igx-splitter-bar {
+        position: relative;
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+        background: $splitter-color;
+        border: 1px solid $splitter-color;
+        cursor: row-resize;
+        z-index: 99;
+        opacity: .68;
+        transition: opacity .15s $ease-out-quad !important;
+
+        &::before {
+            @extend %handle-area;
+            top: 100%;
+        }
+
+        &::after {
+            @extend %handle-area;
+            bottom: 100%;
+        }
+
+        &:hover {
+            transition: all .25s ease-out;
+            opacity: 1;
+        }
+    }
+
+    %igx-splitter-bar--vertical {
+        flex-direction: column;
+        height: 100%;
+        cursor: col-resize;
+
+        &::before {
+            @extend %handle-area--vertical;
+            top: 0;
+            right: 100%;
+        }
+
+        &::after {
+            @extend %handle-area--vertical;
+            top: 0;
+            left: 100%;
+        }
+    }
+
+    %igx-splitter-handle {
+        background: --var($theme, 'handle-color');
+        border-radius: --var($theme, 'border-radius');
+    }
+
+    %igx-splitter-handle--horizontal {
+        width: 25%;
+        height: --var($theme, 'size');
+        margin: 0 rem(48px);
+    }
+
+    %igx-splitter-handle--vertical {
+        width: --var($theme, 'size');
+        height: 25%;
+        margin: rem(48px) 0;
+    }
+
+    %igx-splitter-hitbox {
+        position: absolute;
+        content: '';
+        background: if($debug-hitbox, $hitbox-debug-color, transparent);
+    }
+
+    %igx-splitter-expander {
+        position: relative;
+        width: 0;
+        height: 0;
+        border-right: --var($theme, 'size') solid transparent;
+        border-left: --var($theme, 'size') solid transparent;
+        cursor: pointer;
+        z-index: 1;
+    }
+
+    %igx-splitter-expander--start {
+        border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size')});
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            width: #{map-get($theme, 'size') * 4};
+            height: #{map-get($theme, 'size') * 3};
+        }
+    }
+
+    %igx-splitter-expander--end {
+        border-bottom: unset;
+        border-top: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            width: #{map-get($theme, 'size') * 4};
+            height: #{map-get($theme, 'size') * 3};
+        }
+    }
+
+    %igx-splitter-expander--start-vertical {
+        border-top: --var($theme, 'size') solid transparent;
+        border-right: --var($theme, 'size') solid --var($theme, 'expander-color');
+        border-bottom: --var($theme, 'size') solid transparent;
+        border-left: unset;
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            left: calc(100% - #{map-get($theme, 'size')});
+            width: #{map-get($theme, 'size') * 3};
+            height: #{map-get($theme, 'size') * 4};
+        }
+    }
+
+    %igx-splitter-expander--end-vertical {
+        border-top: --var($theme, 'size') solid transparent;
+        border-right: unset;
+        border-bottom: --var($theme, 'size') solid transparent;
+        border-left: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            height: #{map-get($theme, 'size') * 4};
+            width: #{map-get($theme, 'size') * 3};
+        }
+    }
+}

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

@@ -53,6 +53,7 @@
 @import '../components/radio/radio-component';
 @import '../components/scrollbar/scrollbar-component';
 @import '../components/slider/slider-component';
+@import '../components/splitter/splitter-component';
 @import '../components/snackbar/snackbar-component';
 @import '../components/switch/switch-component';
 @import '../components/tabs/tabs-component';

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

@@ -38,6 +38,7 @@
 @import '../components/switch/switch-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/slider/slider-theme';
+@import '../components/splitter/splitter-theme';
 @import '../components/ripple/ripple-theme';
 @import '../components/radio/radio-theme';
 @import '../components/progress/progress-theme';
@@ -198,6 +199,14 @@
         ));
     }
 
+    @if not(index($exclude, 'igx-splitter')) {
+        @include igx-splitter(igx-splitter-theme(
+            $palette,
+            $schema,
+            $border-radius: $roundness,
+        ));
+    }
+
     @if not(index($exclude, 'igx-checkbox')) {
         @include igx-checkbox(igx-checkbox-theme(
             $palette,

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

@@ -38,6 +38,7 @@
 @import './scrollbar';
 @import './slider';
 @import './snackbar';
+@import './splitter';
 @import './switch';
 @import './tabs';
 @import './time-picker';
@@ -82,6 +83,7 @@
 /// @property {Map} igx-scrollbar [$_dark-scrollbar]
 /// @property {Map} igx-slider [$_dark-slider]
 /// @property {Map} igx-snackbar [$_dark-snackbar]
+/// @property {Map} igx-splitter [$_dark-splitter]
 /// @property {Map} igx-switch [$_dark-switch]
 /// @property {Map} igx-tabs [$_dark-tabs]
 /// @property {Map} igx-time-picker [$_dark-time-picker]
@@ -124,6 +126,7 @@ $dark-schema: (
     igx-scrollbar: $_dark-scrollbar,
     igx-slider: $_dark-slider,
     igx-snackbar: $_dark-snackbar,
+    igx-splitter: $_dark-splitter,
     igx-switch: $_dark-switch,
     igx-tabs: $_dark-tabs,
     igx-time-picker: $_dark-time-picker,
@@ -169,6 +172,7 @@ $dark-schema: (
 /// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
 /// @property {map} igx-slider [$_dark-fluent-slider],
 /// @property {map} igx-snackbar [$_dark-fluent-snackbar],
+/// @property {map} igx-splitter [$_dark-fluent-splitter],
 /// @property {map} igx-switch [$_dark-fluent-switch],
 /// @property {map} igx-tabs [$_dark-fluent-tabs],
 /// @property {map} igx-time-picker [$_dark-fluent-time-picker],
@@ -211,6 +215,7 @@ $dark-fluent-schema: (
     igx-scrollbar: $_dark-fluent-scrollbar,
     igx-slider: $_dark-fluent-slider,
     igx-snackbar: $_dark-fluent-snackbar,
+    igx-splitter: $_dark-fluent-splitter,
     igx-switch: $_dark-fluent-switch,
     igx-tabs: $_dark-fluent-tabs,
     igx-time-picker: $_dark-fluent-time-picker,
@@ -256,6 +261,7 @@ $dark-fluent-schema: (
 /// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
 /// @property {map} igx-slider [$_dark-bootstrap-slider],
 /// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
+/// @property {map} igx-splitter [$_dark-bootstrap-splitter],
 /// @property {map} igx-switch [$_dark-bootstrap-switch],
 /// @property {map} igx-tabs [$_dark-bootstrap-tabs],
 /// @property {map} igx-time-picker [$_dark-bootstrap-time-picker],
@@ -298,6 +304,7 @@ $dark-bootstrap-schema: (
     igx-scrollbar: $_dark-bootstrap-scrollbar,
     igx-slider: $_dark-bootstrap-slider,
     igx-snackbar: $_dark-bootstrap-snackbar,
+    igx-splitter: $_dark-bootstrap-splitter,
     igx-switch: $_dark-bootstrap-switch,
     igx-tabs: $_dark-bootstrap-tabs,
     igx-time-picker: $_dark-bootstrap-time-picker,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss

@@ -20,11 +20,6 @@ $_dark-scrollbar: extend(
             igx-color: 'surface',
             lighten: 20%
         ),
-
-        track-background: (
-            igx-color: 'surface',
-            lighten: 5%
-        ),
     )
 );