Skip to content

Commit f537e12

Browse files
marcosmouramarcosmoura
committed
feat(MdApp): create fixed last row option
1 parent 4c3b432 commit f537e12

File tree

5 files changed

+137
-2
lines changed

5 files changed

+137
-2
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<example src="./examples/Waterfall.vue" />
33
<example src="./examples/Reveal.vue" />
44
<example src="./examples/Flexible.vue" />
5+
<example src="./examples/LastRowFixed.vue" />
56

67
<template>
78
<page-container centered :title="$t('pages.app.title')">
@@ -16,6 +17,7 @@
1617
<code-example title="Fixed + Waterfall" :component="examples['waterfall']" />
1718
<code-example title="Reveal" :component="examples['reveal']" />
1819
<code-example title="Flexible" :component="examples['flexible']" />
20+
<code-example title="Last Row Fixed" :component="examples['last-row-fixed']" />
1921

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

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<div class="page-container">
3+
<md-app md-waterfall md-mode="fixed-last">
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+
11+
<span class="md-title">My Title</span>
12+
</div>
13+
14+
<div class="md-toolbar-section-end">
15+
<md-button class="md-icon-button">
16+
<md-icon>more_vert</md-icon>
17+
</md-button>
18+
</div>
19+
</div>
20+
21+
<div class="md-toolbar-row">
22+
<md-button>Home</md-button>
23+
<md-button>Pages</md-button>
24+
<md-button>Posts</md-button>
25+
<md-button>Favorites</md-button>
26+
</div>
27+
</md-app-toolbar>
28+
29+
<md-app-drawer :md-visible.sync="menuVisible">
30+
<md-toolbar class="md-transparent" md-elevation="0">Navigation</md-toolbar>
31+
32+
<md-list>
33+
<md-list-item>
34+
<md-icon>move_to_inbox</md-icon>
35+
<span class="md-list-item-text">Inbox</span>
36+
</md-list-item>
37+
38+
<md-list-item>
39+
<md-icon>send</md-icon>
40+
<span class="md-list-item-text">Sent Mail</span>
41+
</md-list-item>
42+
43+
<md-list-item>
44+
<md-icon>delete</md-icon>
45+
<span class="md-list-item-text">Trash</span>
46+
</md-list-item>
47+
48+
<md-list-item>
49+
<md-icon>error</md-icon>
50+
<span class="md-list-item-text">Spam</span>
51+
</md-list-item>
52+
</md-list>
53+
</md-app-drawer>
54+
55+
<md-app-content>
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+
<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>
67+
<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>
68+
<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>
69+
<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>
70+
<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>
71+
</md-app-content>
72+
</md-app>
73+
</div>
74+
</template>
75+
76+
<style lang="scss" scoped>
77+
.md-app {
78+
max-height: 400px;
79+
border: 1px solid rgba(#000, .12);
80+
}
81+
82+
// Demo purposes only
83+
.md-drawer {
84+
width: 230px;
85+
max-width: calc(100vw - 125px);
86+
}
87+
</style>
88+
89+
<script>
90+
export default {
91+
name: 'LastRowFixed',
92+
data: () => ({
93+
menuVisible: false
94+
})
95+
}
96+
</script>

‎src/components/MdApp/MdApp.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
}
8080
8181
&.md-reveal,
82+
&.md-fixed-last,
8283
&.md-flexible {
8384
transform: translate3d(0, 0, 0);
8485

‎src/components/MdApp/MdAppMixin.js

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default {
4646
top: 0,
4747
titleSize: 20,
4848
hasElevation: true,
49-
revealActive: true
49+
revealActive: false
5050
},
5151
drawer: {
5252
active: false,
@@ -68,7 +68,7 @@ export default {
6868
styles['margin-left'] = this.MdApp.drawer.width
6969
}
7070

71-
if (this.mdMode === 'reveal' || this.mdFlexible) {
71+
if (this.mdMode === 'reveal' || this.mdMode === 'fixed-last' || this.mdFlexible) {
7272
styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
7373
}
7474

@@ -187,9 +187,35 @@ export default {
187187
this.MdApp.toolbar.revealActive = true
188188
}
189189
},
190+
handleFixedLastMode ($event) {
191+
let { scrollTop, toolbarHeight } = this.getToolbarConstrants($event)
192+
const toolbar = this.MdApp.toolbar.element
193+
const firstRow = toolbar.querySelector('.md-toolbar-row:first-child')
194+
const firstRowHeight = firstRow.offsetHeight
195+
196+
if (scrollTop > firstRowHeight) {
197+
this.setToolbarMarginAndHeight(scrollTop - firstRowHeight, toolbarHeight)
198+
} else {
199+
this.setToolbarMarginAndHeight(0, toolbarHeight)
200+
}
201+
202+
/* if (firstRowHeight) {
203+
if (scrollTop < initialHeight - firstRowHeight) {
204+
toolbar.style.height = scrollAmount + 'px'
205+
} else {
206+
toolbar.style.height = firstRowHeight + 'px'
207+
}
208+
}
209+
210+
let { threshold, toolbarHeight } = this.getToolbarConstrants($event)
211+
212+
this.setToolbarMarginAndHeight(scrollTop - threshold, toolbarHeight) */
213+
},
190214
handleModeScroll ($event) {
191215
if (this.mdMode === 'reveal') {
192216
this.handleRevealMode($event)
217+
} else if (this.mdMode === 'fixed-last') {
218+
this.handleFixedLastMode($event)
193219
}
194220
},
195221
handleScroll ($event) {
@@ -218,11 +244,20 @@ export default {
218244
},
219245
mounted () {
220246
if (this.mdMode === 'reveal' || this.mdFlexible) {
247+
this.MdApp.toolbar.revealActive = true
221248
this.handleRevealMode({
222249
target: {
223250
scrollTop: 0
224251
}
225252
})
226253
}
254+
255+
if (this.mdMode === 'fixed-last') {
256+
this.handleFixedLastMode({
257+
target: {
258+
scrollTop: 0
259+
}
260+
})
261+
}
227262
}
228263
}

‎src/components/MdApp/MdAppToolbar.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
}
4343
4444
.md-reveal,
45+
.md-fixed-last,
4546
.md-flexible {
4647
.md-reveal-active {
4748
transform: translate3d(0, calc(100% + 10px), 0);

0 commit comments

Comments
 (0)