Skip to content

Commit f6ab5b6

Browse files
brandyscarneybrandyscarney
committed
fix(toolbar): get translucency working with header, footer and toolbar
1 parent 6b29507 commit f6ab5b6

File tree

14 files changed

+523
-94
lines changed

14 files changed

+523
-94
lines changed

‎core/src/components.d.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2180,6 +2180,10 @@ declare global {
21802180
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
21812181
*/
21822182
'mode': Mode;
2183+
/**
2184+
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
2185+
*/
2186+
'translucent': boolean;
21832187
}
21842188
}
21852189

@@ -2206,6 +2210,10 @@ declare global {
22062210
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
22072211
*/
22082212
'mode'?: Mode;
2213+
/**
2214+
* If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
2215+
*/
2216+
'translucent'?: boolean;
22092217
}
22102218
}
22112219
}
@@ -2452,6 +2460,10 @@ declare global {
24522460
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
24532461
*/
24542462
'mode': Mode;
2463+
/**
2464+
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
2465+
*/
2466+
'translucent': boolean;
24552467
}
24562468
}
24572469

@@ -2478,6 +2490,10 @@ declare global {
24782490
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
24792491
*/
24802492
'mode'?: Mode;
2493+
/**
2494+
* If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
2495+
*/
2496+
'translucent'?: boolean;
24812497
}
24822498
}
24832499
}

‎core/src/components/footer/footer.ios.scss

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "./footer";
2+
@import "./footer.ios.vars";
23

3-
// iOS Borders
4+
// iOS Footer
45
// --------------------------------------------------
56

67
.footer-ios ion-toolbar:first-child {
@@ -10,3 +11,13 @@
1011
.footer-ios[no-border] ion-toolbar:first-child {
1112
--border-width: 0;
1213
}
14+
15+
.footer-translucent-ios {
16+
backdrop-filter: $footer-ios-translucent-filter;
17+
}
18+
19+
.footer-translucent-ios ion-toolbar {
20+
--border-color: transparent;
21+
--opacity: 0.8;
22+
--backdrop-filter: #{$footer-ios-translucent-filter};
23+
}

‎core/src/components/footer/footer.ios.vars.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "../../themes/ionic.globals.ios";
2+
3+
// iOS Footer
4+
// --------------------------------------------------
5+
6+
/// @prop - Filter of the translucent footer
7+
$footer-ios-translucent-filter: saturate(180%) blur(20px) !default;

‎core/src/components/footer/footer.md.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@import "./footer";
22

3+
// Material Design Footer
4+
// --------------------------------------------------
5+
36
.footer-md::before {
47
// using datauri png background image for improved scroll performance
58
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`

‎core/src/components/footer/footer.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,23 @@ export class Footer {
1717
*/
1818
@Prop() mode!: Mode;
1919

20+
/**
21+
* If true, the footer will be translucent.
22+
* Note: In order to scroll content behind the footer, the `fullscreen`
23+
* attribute needs to be set on the content.
24+
* Defaults to `false`.
25+
*/
26+
@Prop() translucent = false;
27+
2028
hostData() {
29+
const themedClasses = createThemedClasses(this.mode, 'footer');
30+
const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'footer-translucent') : null;
31+
2132
return {
22-
class: createThemedClasses(this.mode, 'footer')
33+
class: {
34+
...themedClasses,
35+
...translucentClasses
36+
}
2337
};
2438
}
2539
}

‎core/src/components/footer/test/translucent/index.html

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Header - Translucent</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<script src="/dist/ionic.js"></script>
9+
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
10+
</head>
11+
12+
<body>
13+
<ion-app>
14+
<ion-content fullscreen>
15+
<ion-grid>
16+
<ion-row>
17+
<ion-col size="6">
18+
<f class="red"></f>
19+
</ion-col>
20+
<ion-col size="6">
21+
<f class="green"></f>
22+
</ion-col>
23+
<ion-col size="6">
24+
<f class="blue"></f>
25+
</ion-col>
26+
<ion-col size="6">
27+
<f class="yellow"></f>
28+
</ion-col>
29+
<ion-col size="6">
30+
<f class="pink"></f>
31+
</ion-col>
32+
<ion-col size="6">
33+
<f class="purple"></f>
34+
</ion-col>
35+
<ion-col size="6">
36+
<f class="black"></f>
37+
</ion-col>
38+
<ion-col size="6">
39+
<f class="orange"></f>
40+
</ion-col>
41+
</ion-row>
42+
</ion-grid>
43+
44+
<p>
45+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam risus nibh, placerat
46+
at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elementum
47+
ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia porttitor. Praesent fringilla at est
48+
et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce felis neque, aliquet in velit vitae, venenatis
49+
euismod libero. Donec vulputate, urna sed sagittis tempor, mi arcu tristique lacus, eget fringilla urna sem eget
50+
felis. Fusce dignissim lacus a scelerisque vehicula. Nulla nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum
51+
quis ut nunc. Duis ex odio, sollicitudin ac mollis nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat
52+
maximus venenatis. Donec porttitor, felis eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien
53+
sapien malesuada tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
54+
Quisque luctus, sapien nec tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi
55+
sollicitudin nisi ex, et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum
56+
id. Quisque vitae interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin
57+
at dolor ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend
58+
non vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor risus,
59+
quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus mattis maximus.
60+
In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis aliquet. Proin rutrum
61+
varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque scelerisque nisl eu suscipit consectetur.
62+
</p>
63+
64+
<ion-grid>
65+
<ion-row>
66+
<ion-col size="6">
67+
<f class="red"></f>
68+
</ion-col>
69+
<ion-col size="6">
70+
<f class="green"></f>
71+
</ion-col>
72+
<ion-col size="6">
73+
<f class="blue"></f>
74+
</ion-col>
75+
<ion-col size="6">
76+
<f class="yellow"></f>
77+
</ion-col>
78+
<ion-col size="6">
79+
<f class="pink"></f>
80+
</ion-col>
81+
<ion-col size="6">
82+
<f class="purple"></f>
83+
</ion-col>
84+
<ion-col size="6">
85+
<f class="black"></f>
86+
</ion-col>
87+
<ion-col size="6">
88+
<f class="orange"></f>
89+
</ion-col>
90+
</ion-row>
91+
</ion-grid>
92+
</ion-content>
93+
94+
<ion-footer translucent>
95+
<ion-toolbar>
96+
<ion-title>Footer - Translucent</ion-title>
97+
</ion-toolbar>
98+
<ion-toolbar color="primary">
99+
<ion-title>Primary - Translucent</ion-title>
100+
</ion-toolbar>
101+
<ion-toolbar color="secondary">
102+
<ion-title>Secondary - Translucent</ion-title>
103+
</ion-toolbar>
104+
<ion-toolbar color="tertiary">
105+
<ion-title>Tertiary - Translucent</ion-title>
106+
</ion-toolbar>
107+
<ion-toolbar color="success">
108+
<ion-title>Success - Translucent</ion-title>
109+
</ion-toolbar>
110+
<ion-toolbar color="warning">
111+
<ion-title>Warning - Translucent</ion-title>
112+
</ion-toolbar>
113+
<ion-toolbar color="danger">
114+
<ion-title>Danger - Translucent</ion-title>
115+
</ion-toolbar>
116+
<ion-toolbar color="light">
117+
<ion-title>Light - Translucent</ion-title>
118+
</ion-toolbar>
119+
<ion-toolbar color="medium">
120+
<ion-title>Medium - Translucent</ion-title>
121+
</ion-toolbar>
122+
</ion-footer>
123+
</ion-app>
124+
125+
<style>
126+
f {
127+
display: block;
128+
height: 200px;
129+
}
130+
131+
.red {
132+
background-color: #ea445a;
133+
}
134+
135+
.green {
136+
background-color: #76d672;
137+
}
138+
139+
.blue {
140+
background-color: #3478f6;
141+
}
142+
143+
.yellow {
144+
background-color: #ffff80;
145+
}
146+
147+
.pink {
148+
background-color: #ff6b86;
149+
}
150+
151+
.purple {
152+
background-color: #7e34f6;
153+
}
154+
155+
.black {
156+
background-color: #000;
157+
}
158+
159+
.orange {
160+
background-color: #f69234;
161+
}
162+
163+
</style>
164+
</body>
165+
166+
</html>

‎core/src/components/header/header.ios.scss

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "./header";
2+
@import "./header.ios.vars";
23

3-
// iOS Borders
4+
// iOS Header
45
// --------------------------------------------------
56

67
.header-ios ion-toolbar:last-child {
@@ -10,3 +11,13 @@
1011
.header-ios[no-border] ion-toolbar:last-child {
1112
--border-width: 0;
1213
}
14+
15+
.header-translucent-ios {
16+
backdrop-filter: $header-ios-translucent-filter;
17+
}
18+
19+
.header-translucent-ios ion-toolbar {
20+
--border-color: transparent;
21+
--opacity: 0.8;
22+
--backdrop-filter: #{$header-ios-translucent-filter};
23+
}

‎core/src/components/header/header.ios.vars.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "../../themes/ionic.globals.ios";
2+
3+
// iOS Header
4+
// --------------------------------------------------
5+
6+
/// @prop - Filter of the translucent header
7+
$header-ios-translucent-filter: saturate(180%) blur(20px) !default;

‎core/src/components/header/header.md.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "./header";
22

3-
// Material Design Header / Footer / Tabs Box Shadow
3+
// Material Design Header
44
// --------------------------------------------------
55

66
.header-md::after {

‎core/src/components/header/header.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,23 @@ export class Header {
1717
*/
1818
@Prop() mode!: Mode;
1919

20+
/**
21+
* If true, the header will be translucent.
22+
* Note: In order to scroll content behind the header, the `fullscreen`
23+
* attribute needs to be set on the content.
24+
* Defaults to `false`.
25+
*/
26+
@Prop() translucent = false;
27+
2028
hostData() {
29+
const themedClasses = createThemedClasses(this.mode, 'header');
30+
const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'header-translucent') : null;
31+
2132
return {
22-
class: createThemedClasses(this.mode, 'header')
33+
class: {
34+
...themedClasses,
35+
...translucentClasses
36+
}
2337
};
2438
}
2539
}

0 commit comments

Comments
 (0)