Skip to content

Commit 7b6b26a

Browse files
bertrandgbertrandg
committed
v2.0.0-beta.4
1 parent 14aa872 commit 7b6b26a

11 files changed

Lines changed: 1457 additions & 1257 deletions

‎CHANGELOG.md‎

Lines changed: 222 additions & 215 deletions
Large diffs are not rendered by default.

‎projects/angular-split/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-split",
3-
"version": "2.0.0-beta.3",
3+
"version": "2.0.0-beta.4",
44
"description": "Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
55
"author": "bertrandg",
66
"repository": {

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

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

0 commit comments

Comments
 (0)