FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Merge pull request #367 from Harpush/add-theming-support · angular-split/angular-split@d011162 · GitHub

/ angular-split Public

Commit d011162

Browse files
SanderElias
authored
Merge pull request #367 from Harpush/add-theming-support
feat: add CSS theme support with css variables support
2 parents e207736 + f5e5d13 commit d011162

28 files changed

Lines changed: 277 additions & 174 deletions

‎angular.json‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,13 @@
2020
"outputPath": "dist/angular-split-app",
2121
"index": "src/index.html",
2222
"main": "src/main.ts",
23-
"polyfills": [
24-
"zone.js"
25-
],
23+
"polyfills": ["zone.js"],
2624
"tsConfig": "src/tsconfig.app.json",
27-
"assets": [
28-
"src/favicon.ico",
29-
"src/assets"
30-
],
31-
"styles": [
32-
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
33-
"src/styles.scss"
34-
],
25+
"assets": ["src/favicon.ico", "src/assets"],
26+
"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
27+
"stylePreprocessorOptions": {
28+
"includePaths": ["dist"]
29+
},
3530
"scripts": []
3631
},
3732
"configurations": {
@@ -72,10 +67,7 @@
7267
"lint": {
7368
"builder": "@angular-eslint/builder:lint",
7469
"options": {
75-
"lintFilePatterns": [
76-
"src/**/*.ts",
77-
"src/**/*.html"
78-
]
70+
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
7971
}
8072
}
8173
}
@@ -96,10 +88,7 @@
9688
"lint": {
9789
"builder": "@angular-eslint/builder:lint",
9890
"options": {
99-
"lintFilePatterns": [
100-
"projects/angular-split/**/*.ts",
101-
"projects/angular-split/**/*.html"
102-
]
91+
"lintFilePatterns": ["projects/angular-split/**/*.ts", "projects/angular-split/**/*.html"]
10392
}
10493
}
10594
}

‎projects/angular-split/_theme.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@property --as-gutter-background-color {
2+
syntax: '<color>';
3+
inherits: true;
4+
initial-value: #eeeeee;
5+
}
6+
7+
@property --as-gutter-icon-horizontal {
8+
syntax: '<url>';
9+
inherits: true;
10+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
11+
}
12+
13+
@property --as-gutter-icon-vertical {
14+
syntax: '<url>';
15+
inherits: true;
16+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC');
17+
}
18+
19+
@property --as-gutter-icon-disabled {
20+
syntax: '<url>';
21+
inherits: true;
22+
initial-value: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
23+
}
24+
25+
@property --as-transition-duration {
26+
syntax: '<time>';
27+
inherits: true;
28+
initial-value: 0.3s;
29+
}
30+
31+
@property --as-gutter-disabled-cursor {
32+
syntax: '*';
33+
inherits: true;
34+
initial-value: default;
35+
}

‎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.css"]
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+
"css": "./theme.css"
32+
}
33+
},
2934
"peerDependencies": {
3035
"@angular/common": ">=16.0.0",
3136
"@angular/core": ">=16.0.0",

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

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

‎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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import {
1212
ViewChildren,
1313
QueryList,
1414
EventEmitter,
15-
ViewEncapsulation,
1615
Inject,
1716
Optional,
1817
ContentChild,
18+
ViewEncapsulation,
1919
} from '@angular/core'
2020
import { Observable, Subscriber, Subject } from 'rxjs'
2121
import { debounceTime } from 'rxjs/operators'
@@ -83,7 +83,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
8383
selector: 'as-split',
8484
exportAs: 'asSplit',
8585
changeDetection: ChangeDetectionStrategy.OnPush,
86-
styleUrls: [`./split.component.scss`],
86+
styleUrls: [`./split.component.css`],
8787
template: ` <ng-content></ng-content>
8888
<ng-template
8989
ngFor
@@ -137,7 +137,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
137137
</ng-template>
138138
</div>
139139
</ng-template>`,
140-
encapsulation: ViewEncapsulation.Emulated,
140+
encapsulation: ViewEncapsulation.None,
141141
})
142142
export class SplitComponent implements AfterViewInit, OnDestroy {
143143
@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
@@ -119,7 +119,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
119119
})
120120

121121
const iframeFixDiv = this.renderer.createElement('div')
122-
this.renderer.addClass(iframeFixDiv, 'iframe-fix')
122+
this.renderer.addClass(iframeFixDiv, 'as-iframe-fix')
123123

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

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL