Skip to content

Commit 3370322

Browse files
simeonoffsimeonoff
authored
refactor(splitter): bundle styles with component (#15514)
1 parent 2394308 commit 3370322

File tree

12 files changed

+357
-12
lines changed

12 files changed

+357
-12
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -216,13 +216,13 @@
216216
@include carousel($carousel-theme-map);
217217
}
218218

219-
@if is-used('igx-splitter', $exclude) {
220-
$splitter-theme-map: splitter-theme(
221-
$schema: $schema,
222-
);
223-
$splitter-theme-map: meta.call($theme-handler, $splitter-theme-map);
224-
@include splitter($splitter-theme-map);
225-
}
219+
// @if is-used('igx-splitter', $exclude) {
220+
// $splitter-theme-map: splitter-theme(
221+
// $schema: $schema,
222+
// );
223+
// $splitter-theme-map: meta.call($theme-handler, $splitter-theme-map);
224+
// @include splitter($splitter-theme-map);
225+
// }
226226

227227
@if is-used('data-chart', $exclude) {
228228
$data-chart-theme-map: data-chart-theme(

‎projects/igniteui-angular/src/lib/splitter/splitter-bar.component.html‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div class="igx-splitter-bar"
2+
[class.igx-splitter-bar--horizontal]="type === 1"
23
[class.igx-splitter-bar--vertical]="type === 0"
34
[style.cursor]="cursor"
45
igxDrag
@@ -9,7 +10,20 @@
910
(dragEnd)="onDragEnd($event)"
1011
[class.igx-splitter-bar--collapsible]="!nonCollapsible"
1112
>
12-
<div class="igx-splitter-bar__expander--start" igxDragIgnore (click)="onCollapsing(false)" [hidden]="prevButtonHidden"></div>
13-
<div class="igx-splitter-bar__handle"></div>
14-
<div class="igx-splitter-bar__expander--end" igxDragIgnore (click)="onCollapsing(true)" [hidden]="nextButtonHidden"></div>
13+
<div
14+
class="igx-splitter-bar__expander igx-splitter-bar__expander--start"
15+
igxDragIgnore (click)="onCollapsing(false)"
16+
[hidden]="prevButtonHidden">
17+
</div>
18+
<div
19+
class="igx-splitter-bar__handle"
20+
[class.igx-splitter-bar__handle--horizontal]="type === 1"
21+
[class.igx-splitter-bar__handle--vertical]="type === 0"
22+
>
23+
</div>
24+
<div
25+
class="igx-splitter-bar__expander igx-splitter-bar__expander--end"
26+
igxDragIgnore (click)="onCollapsing(true)"
27+
[hidden]="nextButtonHidden">
28+
</div>
1529
</div>

‎projects/igniteui-angular/src/lib/splitter/splitter.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('IgxSplitter', () => {
2121
}).compileComponents()));
2222
let fixture: ComponentFixture<SplitterTestComponent>;
2323
let splitter: IgxSplitterComponent;
24-
24+
2525
beforeEach(waitForAsync(() => {
2626
fixture = TestBed.createComponent(SplitterTestComponent);
2727
fixture.detectChanges();

‎projects/igniteui-angular/src/lib/splitter/splitter.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DOCUMENT } from '@angular/common';
2-
import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Output, QueryList, booleanAttribute, forwardRef } from '@angular/core';
2+
import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Output, QueryList, ViewEncapsulation, booleanAttribute, forwardRef } from '@angular/core';
33
import { DragDirection, IDragMoveEventArgs, IDragStartEventArgs, IgxDragDirective, IgxDragIgnoreDirective } from '../directives/drag-drop/drag-drop.directive';
44
import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component';
55

@@ -45,6 +45,8 @@ export declare interface ISplitterBarResizeEventArgs {
4545
@Component({
4646
selector: 'igx-splitter',
4747
templateUrl: './splitter.component.html',
48+
styleUrl: 'splitter.component.css',
49+
encapsulation: ViewEncapsulation.None,
4850
imports: [forwardRef(() => IgxSplitBarComponent)]
4951
})
5052
export class IgxSplitterComponent implements AfterContentInit {

‎projects/igniteui-angular/src/lib/splitter/themes/_base.scss‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
/* stylelint-disable max-nesting-depth */
2+
@use 'sass:map';
3+
@use 'sass:string';
4+
@use 'igniteui-theming/sass/animations' as *;
5+
@use 'igniteui-theming/sass/bem' as *;
6+
@use 'igniteui-theming/sass/themes' as *;
7+
@use 'igniteui-theming/sass/typography' as *;
8+
@use 'igniteui-theming/sass/utils' as *;
9+
@use 'styles/themes/standalone' as *;
10+
@use 'light/tokens' as *;
11+
12+
$theme: $base;
13+
14+
@include layer(base) {
15+
$splitter-color: var-get($theme, 'bar-color');
16+
$hitbox-size: rem(4px);
17+
$debug-hitbox: false;
18+
$hitbox-debug-color: rgba(coral, 0.24);
19+
20+
@include b(igx-splitter) {
21+
//splitter-size + borders
22+
--splitter-size: #{unitless(map.get($theme, 'size')) + 2};
23+
24+
&[aria-orientation='horizontal'] {
25+
[dir='rtl'] & {
26+
flex-direction: row-reverse !important;
27+
}
28+
}
29+
}
30+
31+
@include b(igx-splitter-bar-host) {
32+
&:focus {
33+
outline: transparent solid rem(1px);
34+
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
35+
}
36+
}
37+
38+
@include b(igx-splitter-bar) {
39+
position: relative;
40+
display: flex;
41+
flex-grow: 1;
42+
justify-content: center;
43+
align-items: center;
44+
background: $splitter-color;
45+
border: rem(1px) solid $splitter-color;
46+
z-index: 99;
47+
opacity: 0.68;
48+
transition: opacity 0.15s $ease-out-quad !important;
49+
50+
&::before,
51+
&::after {
52+
position: absolute;
53+
content: '';
54+
width: 100%;
55+
height: $hitbox-size;
56+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
57+
}
58+
59+
&::before {
60+
top: 100%;
61+
}
62+
63+
&::after {
64+
bottom: 100%;
65+
}
66+
67+
&:hover {
68+
transition: all 0.25s ease-out;
69+
opacity: 1;
70+
}
71+
72+
@include e(handle) {
73+
background: var-get($theme, 'handle-color');
74+
border-radius: var-get($theme, 'border-radius');
75+
opacity: 0;
76+
transition: opacity 0.25s 0.5s ease;
77+
pointer-events: none;
78+
}
79+
80+
@include e(handle, $m: horizontal) {
81+
width: 25%;
82+
height: var-get($theme, 'size');
83+
margin: 0 rem(48px);
84+
}
85+
86+
@include e(handle, $m: vertical) {
87+
width: var-get($theme, 'size');
88+
height: 25%;
89+
margin: rem(48px) 0;
90+
}
91+
92+
@include e(expander) {
93+
position: relative;
94+
width: 0;
95+
height: 0;
96+
border-inline-end: var-get($theme, 'size') solid transparent;
97+
border-inline-start: var-get($theme, 'size') solid transparent;
98+
cursor: pointer;
99+
opacity: 0;
100+
transition: opacity 0.25s 0.5s ease;
101+
pointer-events: none;
102+
z-index: 1;
103+
104+
&::before {
105+
position: absolute;
106+
content: '';
107+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
108+
}
109+
}
110+
111+
@include e(expander, $m: 'start') {
112+
border-bottom: var-get($theme, 'size') solid
113+
var-get($theme, 'expander-color');
114+
115+
&::before {
116+
top: calc(100% - #{map.get($theme, 'size')});
117+
left: calc(100% - (#{map.get($theme, 'size')} * 2));
118+
width: calc(#{map.get($theme, 'size')} * 4);
119+
height: calc(#{map.get($theme, 'size')} * 3);
120+
}
121+
}
122+
123+
@include e(expander, $m: 'end') {
124+
border-bottom: unset;
125+
border-top: var-get($theme, 'size') solid
126+
var-get($theme, 'expander-color');
127+
128+
&::before {
129+
top: calc(100% - (#{map.get($theme, 'size')} * 2));
130+
left: calc(100% - (#{map.get($theme, 'size')} * 2));
131+
width: calc(#{map.get($theme, 'size')} * 4);
132+
height: calc(#{map.get($theme, 'size')} * 3);
133+
}
134+
}
135+
136+
@include m(collapsible) {
137+
transition: all 0.25s $ease-in-out-quad !important;
138+
transition-delay: 0s !important;
139+
140+
@include e(handle) {
141+
opacity: 1;
142+
transition: opacity 0.25s ease;
143+
pointer-events: auto;
144+
}
145+
146+
@include e(expander) {
147+
opacity: 1;
148+
transition: opacity 0.25s ease;
149+
pointer-events: auto;
150+
}
151+
}
152+
153+
@include m(vertical) {
154+
flex-direction: column;
155+
height: 100%;
156+
157+
&::before,
158+
&::after {
159+
width: $hitbox-size;
160+
height: 100%;
161+
top: 0;
162+
}
163+
164+
&::before {
165+
right: 100%;
166+
}
167+
168+
&::after {
169+
left: 100%;
170+
}
171+
172+
@include e(expander, $m: 'start') {
173+
border-top: var-get($theme, 'size') solid transparent;
174+
border-inline-end: var-get($theme, 'size') solid
175+
var-get($theme, 'expander-color');
176+
border-bottom: var-get($theme, 'size') solid transparent;
177+
border-inline-start: unset;
178+
179+
&::before {
180+
top: calc(100% - (#{map.get($theme, 'size')} * 2));
181+
left: calc(100% - (#{map.get($theme, 'size')}));
182+
width: calc(#{map.get($theme, 'size')} * 3);
183+
height: calc(#{map.get($theme, 'size')} * 4);
184+
}
185+
}
186+
187+
@include e(expander, $m: 'end') {
188+
border-top: var-get($theme, 'size') solid transparent;
189+
border-inline-end: unset;
190+
border-bottom: var-get($theme, 'size') solid transparent;
191+
border-inline-start: var-get($theme, 'size') solid
192+
var-get($theme, 'expander-color');
193+
194+
&::before {
195+
top: calc(100% - (#{map.get($theme, 'size')} * 2));
196+
left: calc(100% - (#{map.get($theme, 'size')} * 2));
197+
height: calc(#{map.get($theme, 'size')} * 4);
198+
width: calc(#{map.get($theme, 'size')} * 3);
199+
}
200+
}
201+
}
202+
}
203+
}

‎projects/igniteui-angular/src/lib/splitter/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-splitter, $tokens, dark);

‎projects/igniteui-angular/src/lib/splitter/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/splitter' as *;
3+
4+
$material: digest-schema($dark-material-splitter);
5+
$bootstrap: digest-schema($dark-bootstrap-splitter);
6+
$fluent: digest-schema($dark-fluent-splitter);
7+
$indigo: digest-schema($dark-indigo-splitter);

‎projects/igniteui-angular/src/lib/splitter/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-splitter, $tokens, light);

‎projects/igniteui-angular/src/lib/splitter/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/splitter' as *;
3+
4+
$base: digest-schema($light-splitter);
5+
$material: digest-schema($material-splitter);
6+
$bootstrap: digest-schema($bootstrap-splitter);
7+
$fluent: digest-schema($fluent-splitter);
8+
$indigo: digest-schema($indigo-splitter);

0 commit comments

Comments
 (0)