Skip to content

Commit 00c000a

Browse files
HarpushHarpush
committed
feat: add SCSS theme with css variables support
1 parent 3a74324 commit 00c000a

File tree

13 files changed

+208
-130
lines changed

13 files changed

+208
-130
lines changed

‎angular.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
"tsConfig": "src/tsconfig.app.json",
2525
"assets": ["src/favicon.ico", "src/assets"],
2626
"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
27+
"stylePreprocessorOptions": {
28+
"includePaths": ["dist"]
29+
},
2730
"scripts": []
2831
},
2932
"configurations": {

‎projects/angular-split/_theme.scss‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@use 'sass:map';
2+
3+
$_defaultConfig: (
4+
gutter-background-color: #eeeeee,
5+
gutter-icon-horizontal-bg-image-url:
6+
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='),
7+
gutter-icon-vertical-bg-image-url:
8+
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC'),
9+
gutter-icon-disabled-bg-image-url:
10+
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='),
11+
transition-duration: 0.3s,
12+
gutter-disabled-cursor: default,
13+
);
14+
15+
@function var-or-map-default($name, $map) {
16+
@return var(--as-#{$name}, map.get($map, $name));
17+
}
18+
19+
@mixin theme($config: ()) {
20+
$mergedConfig: map.merge($_defaultConfig, $config);
21+
22+
as-split {
23+
display: flex;
24+
flex-wrap: nowrap;
25+
justify-content: flex-start;
26+
align-items: stretch;
27+
overflow: hidden;
28+
width: 100%;
29+
height: 100%;
30+
31+
&.as-horizontal {
32+
flex-direction: row;
33+
}
34+
35+
&.as-vertical {
36+
flex-direction: column;
37+
}
38+
39+
// Add transition only when transition enabled + split initialized + not currently dragging.
40+
&.as-transition.as-init:not(.as-dragging) {
41+
& > .as-split-gutter,
42+
& > .as-split-area {
43+
transition: flex-basis var-or-map-default('transition-duration', $mergedConfig);
44+
}
45+
}
46+
}
47+
48+
.as-split-gutter {
49+
border: none;
50+
flex-grow: 0;
51+
flex-shrink: 0;
52+
background-color: var-or-map-default('gutter-background-color', $mergedConfig);
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
57+
&.as-split-gutter-collapsed {
58+
flex-basis: 1px !important;
59+
pointer-events: none;
60+
}
61+
62+
.as-horizontal > & {
63+
flex-direction: row;
64+
cursor: col-resize;
65+
// Fix safari bug about gutter height when direction is horizontal.
66+
height: 100%;
67+
}
68+
69+
.as-vertical > & {
70+
flex-direction: column;
71+
cursor: row-resize;
72+
width: 100%;
73+
}
74+
75+
.as-disabled > & {
76+
cursor: var-or-map-default('gutter-disabled-cursor', $mergedConfig);
77+
}
78+
}
79+
80+
.as-split-gutter-icon {
81+
width: 100%;
82+
height: 100%;
83+
background-position: center center;
84+
background-repeat: no-repeat;
85+
86+
.as-horizontal & {
87+
background-image: var-or-map-default('gutter-icon-horizontal-bg-image-url', $mergedConfig);
88+
}
89+
90+
.as-vertical & {
91+
background-image: var-or-map-default('gutter-icon-vertical-bg-image-url', $mergedConfig);
92+
}
93+
94+
.as-disabled & {
95+
background-image: var-or-map-default('gutter-icon-disabled-bg-image-url', $mergedConfig);
96+
}
97+
}
98+
99+
.as-split-area {
100+
flex-grow: 0;
101+
flex-shrink: 0;
102+
overflow-x: hidden;
103+
overflow-y: auto;
104+
105+
&.as-hidden {
106+
// When <as-split-area [visible]="false"> force size to 0.
107+
flex: 0 1 0px !important;
108+
overflow-x: hidden;
109+
overflow-y: hidden;
110+
}
111+
112+
.as-iframe-fix {
113+
position: absolute;
114+
top: 0;
115+
left: 0;
116+
width: 100%;
117+
height: 100%;
118+
}
119+
120+
.as-horizontal & {
121+
height: 100%;
122+
}
123+
124+
.as-vertical & {
125+
width: 100%;
126+
127+
&.as-hidden {
128+
max-width: 0;
129+
}
130+
}
131+
}
132+
}

‎projects/angular-split/ng-package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"dest": "../../dist/angular-split",
44
"lib": {
55
"entryFile": "src/public_api.ts"
6-
}
6+
},
7+
"assets": ["_theme.scss"]
78
}

‎projects/angular-split/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@
2626
"flexbox"
2727
],
2828
"license": "Apache-2.0",
29+
"exports": {
30+
"./theme": {
31+
"sass": "./theme.scss"
32+
}
33+
},
2934
"peerDependencies": {
3035
"@angular/common": ">=16.0.0",
3136
"@angular/core": ">=16.0.0",

‎projects/angular-split/src/lib/component/split.component.scss‎

Lines changed: 0 additions & 115 deletions
This file was deleted.

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
8383
selector: 'as-split',
8484
exportAs: 'asSplit',
8585
changeDetection: ChangeDetectionStrategy.OnPush,
86-
styleUrls: [`./split.component.scss`],
8786
template: ` <ng-content></ng-content>
8887
<ng-template
8988
ngFor
@@ -137,7 +136,6 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
137136
</ng-template>
138137
</div>
139138
</ng-template>`,
140-
encapsulation: ViewEncapsulation.Emulated,
141139
})
142140
export class SplitComponent implements AfterViewInit, OnDestroy {
143141
@ContentChild(SplitGutterDirective) customGutter: SplitGutterDirective

‎projects/angular-split/src/lib/directive/split-area.directive.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
118118
})
119119

120120
const iframeFixDiv = this.renderer.createElement('div')
121-
this.renderer.addClass(iframeFixDiv, 'iframe-fix')
121+
this.renderer.addClass(iframeFixDiv, 'as-iframe-fix')
122122

123123
this.dragStartSubscription = this.split.dragStart.subscribe(() => {
124124
this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative')

‎src/app/documentation/documentation.component.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,28 @@ <h4>
135135
excluded.</p>
136136
<br /><br />
137137

138+
<h4><b>Theme</b></h4>
139+
<table class="table table-striped">
140+
<thead>
141+
<tr>
142+
<th style="width: 40%">Theme SCSS property</th>
143+
<th>CSS variable</th>
144+
<th>Details</th>
145+
</tr>
146+
</thead>
147+
<tbody>
148+
<tr *ngFor="let x of themeInfo">
149+
<td>
150+
<code>{{ x.name }}</code>
151+
</td>
152+
<td>
153+
<code>--as-{{ x.name }}</code>
154+
</td>
155+
<td [innerHTML]="x.details"></td>
156+
</tr>
157+
</tbody>
158+
</table>
159+
138160
<h4><b>CSS classes</b></h4>
139161
<table class="table table-striped">
140162
<thead>

‎src/app/documentation/documentation.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,4 +252,31 @@ export class DocumentationComponent {
252252
{ name: 'as-dragged', details: 'Added on gutter while dragged.' },
253253
],
254254
}
255+
256+
readonly themeInfo = [
257+
{
258+
name: 'gutter-background-color',
259+
details: 'The gutter background color',
260+
},
261+
{
262+
name: 'gutter-icon-horizontal-bg-image-url',
263+
details: 'Gutter icon in horizontal mode',
264+
},
265+
{
266+
name: 'gutter-icon-vertical-bg-image-url',
267+
details: 'Gutter icon in vertical mode',
268+
},
269+
{
270+
name: 'gutter-icon-disabled-bg-image-url',
271+
details: 'Gutter icon when gutter is disabled',
272+
},
273+
{
274+
name: 'transition-duration',
275+
details: 'Size change transition duration for animation',
276+
},
277+
{
278+
name: 'gutter-disabled-cursor',
279+
details: 'Gutter cursor when gutter is disabled',
280+
},
281+
]
255282
}

‎src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,9 @@ import { formatDate } from '../../utils/format-date'
1212
},
1313
styles: [
1414
`
15-
as-split.as-transition.as-init:not(.as-dragging) ::ng-deep > .as-split-gutter,
16-
as-split.as-transition.as-init:not(.as-dragging) > .as-split-area {
17-
transition: flex-basis 1.5s !important;
18-
}
19-
as-split.as-disabled ::ng-deep > .as-split-gutter {
20-
cursor: pointer !important;
15+
as-split {
16+
--as-transition-duration: 1.5s;
17+
--as-gutter-disabled-cursor: pointer;
2118
}
2219
2320
.btns {

0 commit comments

Comments
 (0)