Skip to content

Commit 4c3b432

Browse files
marcosmouramarcosmoura
committed
feat(MdApp): create flexible toolbars
1 parent 311c40f commit 4c3b432

File tree

9 files changed

+223
-25
lines changed

9 files changed

+223
-25
lines changed

‎docs/app/components/CodeExample.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
8989
.md-title {
9090
flex: 1;
91+
color: #fff !important;
9192
}
9293
9394
.md-button {

‎docs/app/pages/Components/App/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<example src="./examples/Normal.vue" />
22
<example src="./examples/Waterfall.vue" />
33
<example src="./examples/Reveal.vue" />
4+
<example src="./examples/Flexible.vue" />
45

56
<template>
67
<page-container centered :title="$t('pages.app.title')">
@@ -14,6 +15,7 @@
1415
<code-example title="Default" :component="examples['normal']" />
1516
<code-example title="Fixed + Waterfall" :component="examples['waterfall']" />
1617
<code-example title="Reveal" :component="examples['reveal']" />
18+
<code-example title="Flexible" :component="examples['flexible']" />
1719

1820
<api-item title="API - md-app">
1921
<p>This component do not have any extra option.</p>

‎docs/app/pages/Components/App/examples/Flexible.vue

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="page-container">
3+
<md-app md-waterfall md-flexible>
4+
<md-app-toolbar class="md-large md-primary">
5+
<div class="md-toolbar-row">
6+
<div class="md-toolbar-section-start">
7+
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
8+
<md-icon>menu</md-icon>
9+
</md-button>
10+
</div>
11+
12+
<div class="md-toolbar-section-end">
13+
<md-button class="md-icon-button">
14+
<md-icon>more_vert</md-icon>
15+
</md-button>
16+
</div>
17+
</div>
18+
19+
<div class="md-toolbar-row md-toolbar-offset">
20+
<span class="md-display-1">My Title</span>
21+
</div>
22+
</md-app-toolbar>
23+
24+
<md-app-drawer :md-visible.sync="menuVisible">
25+
<md-toolbar class="md-transparent" md-elevation="0">Navigation</md-toolbar>
26+
27+
<md-list>
28+
<md-list-item>
29+
<md-icon>move_to_inbox</md-icon>
30+
<span class="md-list-item-text">Inbox</span>
31+
</md-list-item>
32+
33+
<md-list-item>
34+
<md-icon>send</md-icon>
35+
<span class="md-list-item-text">Sent Mail</span>
36+
</md-list-item>
37+
38+
<md-list-item>
39+
<md-icon>delete</md-icon>
40+
<span class="md-list-item-text">Trash</span>
41+
</md-list-item>
42+
43+
<md-list-item>
44+
<md-icon>error</md-icon>
45+
<span class="md-list-item-text">Spam</span>
46+
</md-list-item>
47+
</md-list>
48+
</md-app-drawer>
49+
50+
<md-app-content>
51+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
53+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
54+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
59+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
62+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
63+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
65+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
66+
</md-app-content>
67+
</md-app>
68+
</div>
69+
</template>
70+
71+
<style lang="scss" scoped>
72+
.md-app {
73+
max-height: 400px;
74+
border: 1px solid rgba(#000, .12);
75+
}
76+
77+
.md-app-toolbar {
78+
height: 196px;
79+
}
80+
81+
// Demo purposes only
82+
.md-drawer {
83+
width: 230px;
84+
max-width: calc(100vw - 125px);
85+
}
86+
</style>
87+
88+
<script>
89+
export default {
90+
name: 'Flexible',
91+
data: () => ({
92+
menuVisible: false
93+
})
94+
}
95+
</script>

‎src/components/MdApp/MdApp.vue

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,35 @@
7878
}
7979
}
8080
81-
&.md-reveal {
81+
&.md-reveal,
82+
&.md-flexible {
8283
transform: translate3d(0, 0, 0);
8384
84-
.md-app-container {
85-
padding-top: 64px;
85+
.md-app-toolbar {
86+
position: fixed;
87+
top: 0;
8688
}
89+
}
8790
91+
&.md-flexible {
8892
.md-app-toolbar {
93+
min-height: 0;
94+
}
95+
96+
.md-toolbar-row {
97+
&:first-child {
98+
z-index: 2;
99+
}
100+
101+
&:last-child {
102+
position: fixed;
103+
bottom: 0;
104+
z-index: 1;
105+
}
106+
}
107+
108+
.md-display-1 {
89109
position: fixed;
90-
top: 0;
91110
}
92111
}
93112
}

‎src/components/MdApp/MdAppMixin.js

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,11 @@ export default {
4040
},
4141
toolbar: {
4242
element: null,
43-
marginTop: 0,
43+
titleElement: null,
44+
height: '0px',
45+
initialHeight: 0,
46+
top: 0,
47+
titleSize: 20,
4448
hasElevation: true,
4549
revealActive: true
4650
},
@@ -58,11 +62,17 @@ export default {
5862
},
5963
computed: {
6064
containerStyles () {
65+
let styles = {}
66+
6167
if (this.MdApp.drawer.active && this.MdApp.drawer.mode === 'persistent') {
62-
return {
63-
'padding-left': this.MdApp.drawerWidth
64-
}
68+
styles['margin-left'] = this.MdApp.drawer.width
69+
}
70+
71+
if (this.mdMode === 'reveal' || this.mdFlexible) {
72+
styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
6573
}
74+
75+
return styles
6676
},
6777
scrollerClasses () {
6878
if (this.mdScrollbar) {
@@ -95,17 +105,26 @@ export default {
95105
setToolbarElevation () {
96106
this.MdApp.toolbar.hasElevation = !this.mdWaterfall
97107
},
108+
setToolbarMarginAndHeight (margin, height) {
109+
this.MdApp.toolbar.top = margin
110+
this.MdApp.toolbar.height = height
111+
},
98112
getToolbarConstrants ($event) {
99113
const toolbarHeight = this.MdApp.toolbar.element.offsetHeight
100114
const safeAmount = 10
101115
const threshold = toolbarHeight + safeAmount
102116
const scrollTop = $event.target.scrollTop
103117

118+
if (!this.MdApp.toolbar.initialHeight) {
119+
this.MdApp.toolbar.initialHeight = toolbarHeight
120+
}
121+
104122
return {
105123
toolbarHeight,
106124
safeAmount,
107125
threshold,
108-
scrollTop
126+
scrollTop,
127+
initialHeight: this.MdApp.toolbar.initialHeight
109128
}
110129
},
111130
handleWaterfallScroll ($event) {
@@ -118,16 +137,49 @@ export default {
118137

119138
this.MdApp.toolbar.hasElevation = scrollTop >= elevationMark
120139
},
140+
handleFlexibleScroll ($event) {
141+
let { scrollTop, initialHeight } = this.getToolbarConstrants($event)
142+
const toolbar = this.MdApp.toolbar.element
143+
const firstRow = toolbar.querySelector('.md-toolbar-row:first-child')
144+
const firstRowHeight = firstRow.offsetHeight
145+
const scrollAmount = initialHeight - scrollTop
146+
147+
if (firstRowHeight) {
148+
if (scrollTop < initialHeight - firstRowHeight) {
149+
toolbar.style.height = scrollAmount + 'px'
150+
} else {
151+
toolbar.style.height = firstRowHeight + 'px'
152+
}
153+
}
154+
155+
const titleElement = this.MdApp.toolbar.titleElement
156+
if (titleElement) {
157+
const targetSize = 20
158+
const initialSize = this.MdApp.toolbar.titleSize
159+
160+
if (scrollTop < initialHeight - firstRowHeight) {
161+
const newSize = Math.max(0, 1 - (scrollTop - initialSize) / (scrollAmount + initialSize + 0.000001)) * (initialSize - targetSize) + targetSize
162+
163+
titleElement.style.fontSize = newSize + 'px'
164+
} else {
165+
titleElement.style.fontSize = '20px'
166+
}
167+
}
168+
169+
let { threshold, toolbarHeight } = this.getToolbarConstrants($event)
170+
171+
this.setToolbarMarginAndHeight(scrollTop - threshold, toolbarHeight)
172+
},
121173
handleRevealMode ($event) {
122-
const { safeAmount, threshold, scrollTop } = this.getToolbarConstrants($event)
174+
const { toolbarHeight, safeAmount, threshold, scrollTop } = this.getToolbarConstrants($event)
123175

124176
window.clearTimeout(this.revealTimer)
125177

126178
this.revealTimer = window.setTimeout(() => {
127179
this.revealLastPos = scrollTop
128180
}, 100)
129181

130-
this.MdApp.toolbar.marginTop = scrollTop - threshold
182+
this.setToolbarMarginAndHeight(scrollTop - threshold, toolbarHeight)
131183

132184
if (scrollTop >= threshold) {
133185
this.MdApp.toolbar.revealActive = this.revealLastPos > scrollTop + safeAmount
@@ -141,17 +193,21 @@ export default {
141193
}
142194
},
143195
handleScroll ($event) {
144-
window.requestAnimationFrame(() => {
145-
if (this.MdApp.toolbar.element) {
196+
if (this.MdApp.toolbar.element) {
197+
window.requestAnimationFrame(() => {
146198
if (this.mdWaterfall) {
147199
this.handleWaterfallScroll($event)
148200
}
149201

202+
if (this.mdFlexible) {
203+
this.handleFlexibleScroll($event)
204+
}
205+
150206
if (this.mdMode) {
151207
this.handleModeScroll($event)
152208
}
153-
}
154-
})
209+
})
210+
}
155211
}
156212
},
157213
created () {
@@ -161,10 +217,12 @@ export default {
161217
this.setToolbarElevation()
162218
},
163219
mounted () {
164-
this.handleModeScroll({
165-
target: {
166-
scrollTop: 0
167-
}
168-
})
220+
if (this.mdMode === 'reveal' || this.mdFlexible) {
221+
this.handleRevealMode({
222+
target: {
223+
scrollTop: 0
224+
}
225+
})
226+
}
169227
}
170228
}

‎src/components/MdApp/MdAppSideDrawer.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<div class="md-app md-app-side-drawer md-layout-row" :class="appClasses">
33
<slot name="md-app-drawer"></slot>
44

5-
<main class="md-app-container md-flex md-layout-column" :style="containerStyles" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
5+
<main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
66
<slot name="md-app-toolbar"></slot>
7-
<div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
7+
<div class="md-app-scroller md-layout-column md-flex" :style="containerStyles" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
88
<slot name="md-app-content"></slot>
99
</div>
1010
</main>

‎src/components/MdApp/MdAppToolbar.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,19 @@
1717
},
1818
toolbarStyles () {
1919
return {
20-
'margin-top': `${this.MdApp.toolbar.marginTop}px`
20+
'top': `${this.MdApp.toolbar.top}px`
2121
}
2222
}
2323
},
2424
mounted () {
25+
const title = this.$el.querySelector('.md-title, .md-display-1')
26+
2527
this.MdApp.toolbar.element = this.$el
28+
this.MdApp.toolbar.titleElement = title
29+
30+
if (title) {
31+
this.MdApp.toolbar.titleSize = parseInt(window.getComputedStyle(title).fontSize, 10)
32+
}
2633
}
2734
}
2835
</script>
@@ -34,12 +41,13 @@
3441
box-shadow: none !important;
3542
}
3643
37-
.md-reveal {
44+
.md-reveal,
45+
.md-flexible {
3846
.md-reveal-active {
3947
transform: translate3d(0, calc(100% + 10px), 0);
4048
transition: .3s $md-transition-stand-timing;
4149
transition-property: box-shadow, transform;
42-
will-change: box-shadow, transform;
50+
will-change: height, box-shadow, transform;
4351
}
4452
}
4553
</style>

‎src/components/MdToolbar/MdToolbar.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@
128128
white-space: nowrap;
129129
vertical-align: top;
130130
}
131+
132+
.md-display-1 {
133+
padding: 12px 0;
134+
}
131135
}
132136
133137
.md-toolbar-row {

0 commit comments

Comments
 (0)