+205
-35
lines changedFilter options
+205
-35
lines changed Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
1 1
<script>
2 +
import Vue from 'vue'
2 3
import MdAppSideDrawer from './MdAppSideDrawer'
3 4
import MdAppInternalDrawer from './MdAppInternalDrawer'
5 +
import MdDrawerRightPrevious from '../MdDrawer/MdDrawerRightPrevious';
4 6 5 7
const componentTypes = [
6 8
'md-app-toolbar',
@@ -12,16 +14,41 @@
12 14
return componentOptions && componentTypes.includes(componentOptions.tag)
13 15
}
14 16 15 -
function buildSlots (children, context, functionalContext, options) {
17 +
function buildSlots (children, context, functionalContext, options, createElement) {
16 18
let slots = []
17 19 20 +
let hasDrawer = false
21 + 18 22
if (children) {
19 23
children.forEach(child => {
20 24
const data = child.data
21 25
const componentOptions = child.componentOptions
22 26 23 27
if ((data && componentTypes.includes(data.slot)) || isValidChild(componentOptions)) {
24 28
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 + 25 52
child.data.provide = options.Ctor.options.provide
26 53
child.context = context
27 54
child.functionalContext = functionalContext
@@ -54,7 +81,7 @@
54 81
render (createElement, { children, props, data }) {
55 82
let appComponent = MdAppSideDrawer
56 83
const { context, functionalContext, componentOptions } = createElement(appComponent)
57 -
const slots = buildSlots(children, context, functionalContext, componentOptions)
84 +
const slots = buildSlots(children, context, functionalContext, componentOptions, createElement)
58 85
const drawers = getDrawers(slots)
59 86 60 87
drawers.forEach(drawer => {
@@ -157,7 +184,9 @@
157 184
&.md-permanent-card + .md-app-scroller .md-content {
158 185
@include md-layout-small-and-up {
159 186
padding-left: 0;
187 +
padding-right: 0;
160 188
border-left: none;
189 +
border-right: none;
161 190
}
162 191
}
163 192
}
@@ -167,6 +196,7 @@
167 196 168 197
@include md-layout-small-and-up {
169 198
border-left: 1px solid transparent;
199 +
border-right: 1px solid transparent;
170 200
}
171 201 172 202
> p {
@@ -185,8 +215,9 @@
185 215
display: flex;
186 216
overflow: auto;
187 217
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;
190 221
}
191 222 192 223
.md-app-scroller {
@@ -1,5 +1,5 @@
1 1
<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">
3 3
<slot />
4 4
</md-drawer>
5 5
</template>
@@ -13,8 +13,19 @@
13 13
mdActive: null,
14 14
mode: null,
15 15
submode: null
16 -
}
16 +
},
17 +
initialized: false
17 18
}),
19 +
props: {
20 +
mdRight: {
21 +
type: Boolean,
22 +
default: false
23 +
},
24 +
mdActive: {
25 +
type: Boolean,
26 +
default: false
27 +
}
28 +
},
18 29
computed: {
19 30
visible () {
20 31
return this.drawerElement.mdActive
@@ -24,7 +35,7 @@
24 35
},
25 36
submode () {
26 37
return this.drawerElement.submode
27 -
}
38 +
},
28 39
},
29 40
watch: {
30 41
visible (visible) {
@@ -36,6 +47,9 @@
36 47
},
37 48
submode (submode) {
38 49
this.MdApp.drawer.submode = submode
50 +
},
51 +
mdRight (right) {
52 +
this.MdApp.drawer.right = right
39 53
}
40 54
},
41 55
methods: {
@@ -45,17 +59,35 @@
45 59
}
46 60 47 61
return 0
48 -
}
49 -
},
50 -
mounted () {
51 -
this.$nextTick().then(() => {
52 -
this.drawerElement = this.$children[0]
62 +
},
63 +
updateDrawerData () {
53 64
this.MdApp.drawer.width = this.getDrawerWidth()
54 65
this.MdApp.drawer.active = this.visible
55 66
this.MdApp.drawer.mode = this.mode
56 67
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(() => {
57 80
this.MdApp.drawer.initialWidth = this.$el.offsetWidth
81 +
this.drawerElement = this.$refs.drawer
82 +
this.updateDrawerData()
83 +
this.initialized = true
58 84
})
85 +
},
86 +
updated () {
87 +
this.drawerElement = this.$refs.drawer
88 +
},
89 +
beforeDestroy () {
90 +
this.clearDrawerData()
59 91
}
60 92
}
61 93
</script>
Original file line number Diff line number Diff line change
@@ -3,10 +3,12 @@
3 3
<slot name="md-app-toolbar"></slot>
4 4 5 5
<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>
7 8
<div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]">
8 9
<slot name="md-app-content"></slot>
9 10
</div>
11 +
<slot name="md-app-drawer-right"></slot>
10 12
</main>
11 13
</div>
12 14
</template>
@@ -48,7 +48,9 @@ export default {
48 48
initialWidth: 0,
49 49
active: false,
50 50
mode: 'temporary',
51 -
width: 0
51 +
submode: null,
52 +
width: 0,
53 +
right: false
52 54
}
53 55
}
54 56
}),
@@ -61,16 +63,21 @@ export default {
61 63
isFixed () {
62 64
return this.mdMode && this.mdMode !== 'fixed'
63 65
},
64 -
isMini () {
66 +
isDrawerMini () {
65 67
return this.MdApp.drawer.mode === 'persistent' && this.MdApp.drawer.submode === 'mini'
66 68
},
67 -
contentStyles () {
69 +
contentPadding () {
68 70
const drawer = this.MdApp.drawer
69 71 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
74 81
}
75 82
},
76 83
containerStyles () {
@@ -80,8 +87,8 @@ export default {
80 87
styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
81 88
}
82 89 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
85 92
}
86 93 87 94
return styles
@@ -1,13 +1,15 @@
1 1
<template>
2 2
<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>
5 5
<main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="contentStyles" @scroll.passive="handleScroll">
6 6
<slot name="md-app-toolbar"></slot>
7 7
<div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" :style="containerStyles" @scroll.passive="handleScroll">
8 8
<slot name="md-app-content"></slot>
9 9
</div>
10 10
</main>
11 + 12 +
<slot name="md-app-drawer-right"></slot>
11 13
</div>
12 14
</template>
13 15
@@ -16,7 +18,7 @@
16 18
import MdAppMixin from './MdAppMixin'
17 19 18 20
export default new MdComponent({
19 -
name: 'MdAppInternalSideDrawer',
21 +
name: 'MdAppSideDrawer',
20 22
mixins: [MdAppMixin]
21 23
})
22 24
</script>
@@ -61,6 +61,10 @@
61 61
}
62 62
}
63 63 64 +
.md-app-toolbar {
65 +
min-height: 64px;
66 +
}
67 + 64 68
.md-overlap {
65 69
.md-app-toolbar {
66 70
height: 196px;
@@ -15,6 +15,7 @@
15 15 16 16
.md-app & {
17 17
@include md-theme-property(border-left-color, divider, background);
18 +
@include md-theme-property(border-right-color, divider, background);
18 19
}
19 20
}
20 21
}
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@
17 17
MdOverlay
18 18
},
19 19
props: {
20 -
mdLeft: Boolean,
21 20
mdRight: Boolean,
22 21
mdPermanent: {
23 22
type: String,
@@ -49,7 +48,7 @@
49 48
computed: {
50 49
drawerClasses () {
51 50
let classes = {
52 -
'md-left': this.mdLeft,
51 +
'md-left': !this.mdRight,
53 52
'md-right': this.mdRight,
54 53
'md-temporary': this.isTemporary,
55 54
'md-persistent': this.mdPersistent,
@@ -165,8 +164,16 @@
165 164
}
166 165 167 166
&.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 +
}
170 177
}
171 178 172 179
&.md-active {
@@ -216,22 +223,45 @@
216 223 217 224
&.md-persistent {
218 225
&: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 +
}
221 236
}
222 237
}
223 238
}
224 239 225 240
&.md-persistent-mini {
226 -
border-right: 1px solid;
227 241
transform: translate3D(0, 64px, 0);
228 242
transition: .3s $md-transition-stand-timing;
229 243
transition-property: transform, width;
230 244
will-change: transform, box-shadow;
231 245 246 +
&.md-left {
247 +
border-right: 1px solid;
248 +
}
249 + 250 +
&.md-right {
251 +
border-left: 1px solid;
252 +
}
253 + 232 254
&.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 +
}
235 265
}
236 266
}
237 267 You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4