Skip to content

Commit 3ac16c7

Browse files
VdustRmarcosmoura
VdustR
authored and
marcosmoura
committed
fix(MdApp): right drawer, fully reactive (#1493)
* fix(MdApp): right drawer BREAKING CHANGE: Replace useless props `mdLeft` with `!this.mdRight` fix #1204 * fix(MdAppDrawer): right drawer supporting BREAKING CHANGE: no more than one drawer in a MdApp * fix(MdDrawerRightPrevious): right drawer styles use an previous element for styling container with right drawer with similar css codes * fix(MdDrawer): Temporary style * fix(MdAppSideDrawer): correct component name * fix(MdApp): reactive persistent drawer fully reactive drawer
1 parent ddee303 commit 3ac16c7

File tree

10 files changed

+205
-35
lines changed

10 files changed

+205
-35
lines changed

‎src/components/MdApp/MdApp.vue

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
2+
import Vue from 'vue'
23
import MdAppSideDrawer from './MdAppSideDrawer'
34
import MdAppInternalDrawer from './MdAppInternalDrawer'
5+
import MdDrawerRightPrevious from '../MdDrawer/MdDrawerRightPrevious';
46
57
const componentTypes = [
68
'md-app-toolbar',
@@ -12,16 +14,41 @@
1214
return componentOptions && componentTypes.includes(componentOptions.tag)
1315
}
1416
15-
function buildSlots (children, context, functionalContext, options) {
17+
function buildSlots (children, context, functionalContext, options, createElement) {
1618
let slots = []
1719
20+
let hasDrawer = false
21+
1822
if (children) {
1923
children.forEach(child => {
2024
const data = child.data
2125
const componentOptions = child.componentOptions
2226
2327
if ((data && componentTypes.includes(data.slot)) || isValidChild(componentOptions)) {
2428
child.data.slot = data.slot || componentOptions.tag
29+
30+
if (componentOptions.tag === 'md-app-drawer') {
31+
if (hasDrawer) {
32+
Vue.util.warn(`There shouldn't be more than one drawer in a MdApp at one time.`)
33+
return
34+
}
35+
36+
hasDrawer = true
37+
let nativeMdRight = componentOptions.propsData.mdRight
38+
let mdRight = nativeMdRight === '' || !!nativeMdRight
39+
child.data.slot += `-${mdRight ? 'right' : 'left'}`
40+
child.key = JSON.stringify({
41+
'persistent': child.data.attrs['md-persistent'],
42+
'permanent': child.data.attrs['md-permanent']
43+
})
44+
45+
if (mdRight) {
46+
const drawerRightPrevious = createElement(MdDrawerRightPrevious, { props: {...child.data.attrs}})
47+
drawerRightPrevious.data.slot = 'md-app-drawer-right-previous'
48+
slots.push(drawerRightPrevious)
49+
}
50+
}
51+
2552
child.data.provide = options.Ctor.options.provide
2653
child.context = context
2754
child.functionalContext = functionalContext
@@ -54,7 +81,7 @@
5481
render (createElement, { children, props, data }) {
5582
let appComponent = MdAppSideDrawer
5683
const { context, functionalContext, componentOptions } = createElement(appComponent)
57-
const slots = buildSlots(children, context, functionalContext, componentOptions)
84+
const slots = buildSlots(children, context, functionalContext, componentOptions, createElement)
5885
const drawers = getDrawers(slots)
5986
6087
drawers.forEach(drawer => {
@@ -157,7 +184,9 @@
157184
&.md-permanent-card + .md-app-scroller .md-content {
158185
@include md-layout-small-and-up {
159186
padding-left: 0;
187+
padding-right: 0;
160188
border-left: none;
189+
border-right: none;
161190
}
162191
}
163192
}
@@ -167,6 +196,7 @@
167196
168197
@include md-layout-small-and-up {
169198
border-left: 1px solid transparent;
199+
border-right: 1px solid transparent;
170200
}
171201
172202
> p {
@@ -185,8 +215,9 @@
185215
display: flex;
186216
overflow: auto;
187217
transform: translate3D(0, 0, 0);
188-
transition: padding-left .4s $md-transition-default-timing;
189-
will-change: padding-left;
218+
transition: padding-left .4s $md-transition-default-timing,
219+
padding-right .4s $md-transition-default-timing;
220+
will-change: padding-left, padding-right;
190221
}
191222
192223
.md-app-scroller {

‎src/components/MdApp/MdAppDrawer.vue

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<md-drawer class="md-app-drawer" v-bind="$attrs" v-on="$listeners">
2+
<md-drawer class="md-app-drawer" :md-active="mdActive && initialized" v-bind="$attrs" v-on="$listeners" :md-right="mdRight" ref="drawer">
33
<slot />
44
</md-drawer>
55
</template>
@@ -13,8 +13,19 @@
1313
mdActive: null,
1414
mode: null,
1515
submode: null
16-
}
16+
},
17+
initialized: false
1718
}),
19+
props: {
20+
mdRight: {
21+
type: Boolean,
22+
default: false
23+
},
24+
mdActive: {
25+
type: Boolean,
26+
default: false
27+
}
28+
},
1829
computed: {
1930
visible () {
2031
return this.drawerElement.mdActive
@@ -24,7 +35,7 @@
2435
},
2536
submode () {
2637
return this.drawerElement.submode
27-
}
38+
},
2839
},
2940
watch: {
3041
visible (visible) {
@@ -36,6 +47,9 @@
3647
},
3748
submode (submode) {
3849
this.MdApp.drawer.submode = submode
50+
},
51+
mdRight (right) {
52+
this.MdApp.drawer.right = right
3953
}
4054
},
4155
methods: {
@@ -45,17 +59,35 @@
4559
}
4660
4761
return 0
48-
}
49-
},
50-
mounted () {
51-
this.$nextTick().then(() => {
52-
this.drawerElement = this.$children[0]
62+
},
63+
updateDrawerData () {
5364
this.MdApp.drawer.width = this.getDrawerWidth()
5465
this.MdApp.drawer.active = this.visible
5566
this.MdApp.drawer.mode = this.mode
5667
this.MdApp.drawer.submode = this.submode
68+
this.MdApp.drawer.right = this.mdRight
69+
},
70+
clearDrawerData () {
71+
this.MdApp.drawer.width = 0
72+
this.MdApp.drawer.active = false
73+
this.MdApp.drawer.mode = 'temporary'
74+
this.MdApp.drawer.submode = null
75+
this.MdApp.drawer.initialWidth = 0
76+
},
77+
},
78+
mounted () {
79+
this.$nextTick().then(() => {
5780
this.MdApp.drawer.initialWidth = this.$el.offsetWidth
81+
this.drawerElement = this.$refs.drawer
82+
this.updateDrawerData()
83+
this.initialized = true
5884
})
85+
},
86+
updated () {
87+
this.drawerElement = this.$refs.drawer
88+
},
89+
beforeDestroy () {
90+
this.clearDrawerData()
5991
}
6092
}
6193
</script>

‎src/components/MdApp/MdAppInternalDrawer.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
<slot name="md-app-toolbar"></slot>
44

55
<main class="md-app-container md-flex md-layout-row" :style="[containerStyles, contentStyles]" :class="[$mdActiveTheme, scrollerClasses]">
6-
<slot name="md-app-drawer"></slot>
6+
<slot name="md-app-drawer-left"></slot>
7+
<slot name="md-app-drawer-right-previous"></slot>
78
<div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]">
89
<slot name="md-app-content"></slot>
910
</div>
11+
<slot name="md-app-drawer-right"></slot>
1012
</main>
1113
</div>
1214
</template>

‎src/components/MdApp/MdAppMixin.js

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ export default {
4848
initialWidth: 0,
4949
active: false,
5050
mode: 'temporary',
51-
width: 0
51+
submode: null,
52+
width: 0,
53+
right: false
5254
}
5355
}
5456
}),
@@ -61,16 +63,21 @@ export default {
6163
isFixed () {
6264
return this.mdMode && this.mdMode !== 'fixed'
6365
},
64-
isMini () {
66+
isDrawerMini () {
6567
return this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'mini'
6668
},
67-
contentStyles () {
69+
contentPadding () {
6870
const drawer = this.MdApp.drawer
6971

70-
if (drawer.active && drawer.mode === 'persistent' && drawer.submode === 'full') {
71-
return {
72-
'padding-left': drawer.width
73-
}
72+
if (this.MdApp.drawer.active && this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'full') {
73+
return this.MdApp.drawer.width
74+
}
75+
76+
return 0
77+
},
78+
contentStyles () {
79+
return {
80+
[`padding-${this.MdApp.drawer.right ? 'right' : 'left'}`]: this.contentPadding
7481
}
7582
},
7683
containerStyles () {
@@ -80,8 +87,8 @@ export default {
8087
styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
8188
}
8289

83-
if (this.isMini) {
84-
styles['padding-left'] = !this.MdApp.drawer.active ? this.MdApp.drawer.initialWidth + 'px' : 0
90+
if (this.isDrawerMini) {
91+
styles[`padding-${this.MdApp.drawer.right ? 'right' : 'left'}`] = !this.MdApp.drawer.active ? this.MdApp.drawer.initialWidth + 'px' : 0
8592
}
8693

8794
return styles

‎src/components/MdApp/MdAppSideDrawer.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<template>
22
<div class="md-app md-app-side-drawer md-layout-row" :class="[appClasses, $mdActiveTheme]">
3-
<slot name="md-app-drawer"></slot>
4-
3+
<slot name="md-app-drawer-left"></slot>
4+
<slot name="md-app-drawer-right-previous"></slot>
55
<main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="contentStyles" @scroll.passive="handleScroll">
66
<slot name="md-app-toolbar"></slot>
77
<div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" :style="containerStyles" @scroll.passive="handleScroll">
88
<slot name="md-app-content"></slot>
99
</div>
1010
</main>
11+
12+
<slot name="md-app-drawer-right"></slot>
1113
</div>
1214
</template>
1315

@@ -16,7 +18,7 @@
1618
import MdAppMixin from './MdAppMixin'
1719
1820
export default new MdComponent({
19-
name: 'MdAppInternalSideDrawer',
21+
name: 'MdAppSideDrawer',
2022
mixins: [MdAppMixin]
2123
})
2224
</script>

‎src/components/MdApp/MdAppToolbar.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@
6161
}
6262
}
6363
64+
.md-app-toolbar {
65+
min-height: 64px;
66+
}
67+
6468
.md-overlap {
6569
.md-app-toolbar {
6670
height: 196px;

‎src/components/MdContent/theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
.md-app & {
1717
@include md-theme-property(border-left-color, divider, background);
18+
@include md-theme-property(border-right-color, divider, background);
1819
}
1920
}
2021
}

‎src/components/MdDrawer/MdDrawer.vue

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
MdOverlay
1818
},
1919
props: {
20-
mdLeft: Boolean,
2120
mdRight: Boolean,
2221
mdPermanent: {
2322
type: String,
@@ -49,7 +48,7 @@
4948
computed: {
5049
drawerClasses () {
5150
let classes = {
52-
'md-left': this.mdLeft,
51+
'md-left': !this.mdRight,
5352
'md-right': this.mdRight,
5453
'md-temporary': this.isTemporary,
5554
'md-persistent': this.mdPersistent,
@@ -165,8 +164,16 @@
165164
}
166165
167166
&.md-temporary {
168-
+ .md-app-container .md-content {
169-
border-left: none;
167+
&.md-left {
168+
+ .md-app-container .md-content {
169+
border-left: none;
170+
}
171+
}
172+
173+
&.md-right-previous {
174+
+ .md-app-container .md-content {
175+
border-right: none;
176+
}
170177
}
171178
172179
&.md-active {
@@ -216,22 +223,45 @@
216223
217224
&.md-persistent {
218225
&:not(.md-active) {
219-
+ .md-app-container .md-content {
220-
border-left: none;
226+
&.md-left {
227+
+ .md-app-container .md-content {
228+
border-left: none;
229+
}
230+
}
231+
232+
&.md-right-previous {
233+
+ .md-app-container .md-content {
234+
border-right: none;
235+
}
221236
}
222237
}
223238
}
224239
225240
&.md-persistent-mini {
226-
border-right: 1px solid;
227241
transform: translate3D(0, 64px, 0);
228242
transition: .3s $md-transition-stand-timing;
229243
transition-property: transform, width;
230244
will-change: transform, box-shadow;
231245
246+
&.md-left {
247+
border-right: 1px solid;
248+
}
249+
250+
&.md-right {
251+
border-left: 1px solid;
252+
}
253+
232254
&.md-active {
233-
+ .md-app-container .md-content {
234-
border-left: none;
255+
&.md-left {
256+
+ .md-app-container .md-content {
257+
border-left: none;
258+
}
259+
}
260+
261+
&.md-right-previous {
262+
+ .md-app-container .md-content {
263+
border-right: none;
264+
}
235265
}
236266
}
237267

0 commit comments

Comments
 (0)