+
-
-
+
+
@@ -21,31 +21,54 @@
components: {
MdOverlay
},
+ inject: ['MdApp'],
props: {
+ mdLeft: Boolean,
+ mdRight: Boolean,
mdPermanent: {
type: String,
- validate: value => !!drawerPermanentTypes[value]
+ validator (value) {
+ if (drawerPermanentTypes.includes(value)) {
+ return true
+ }
+
+ console.error(`The md-permanent prop is invalid. Given value: ${value}. Available options: ${drawerPermanentTypes.join(', ')}.`)
+
+ return false
+ }
},
mdPersistent: Boolean,
mdVisible: Boolean,
mdFixed: Boolean
},
- data: () => ({
- drawerWidth: null
- }),
watch: {
mdVisible (visible) {
if (visible) {
this.$emit('md-opened')
+ } else {
+ this.$emit('md-closed')
+ }
+
+ if (this.MdApp) {
+ this.MdApp.drawerWidth = this.getDrawerWidth()
+ this.MdApp.drawerActive = visible
+ }
+ },
+ mode () {
+ if (this.MdApp) {
+ this.MdApp.drawerMode = this.mode
}
}
},
computed: {
drawerClasses () {
let classes = {
+ 'md-left': this.mdLeft,
+ 'md-right': this.mdRight,
'md-temporary': this.isTemporary,
'md-persistent': this.mdPersistent,
- 'md-active': this.mdVisible || this.mdPermanent,
+ 'md-permanent': this.mdPermanent,
+ 'md-active': this.mdVisible,
'md-fixed': this.mdFixed
}
@@ -55,34 +78,40 @@
return classes
},
- drawerStyles () {
- if (this.canPullDrawer) {
- return {
- 'margin-left': this.getDrawerWidth()
- }
- }
- },
- canPullDrawer () {
- return this.mdPersistent && !this.mdVisible
- },
isTemporary () {
return !this.mdPermanent && !this.mdPersistent
+ },
+ mode () {
+ if (this.mdPersistent) {
+ return 'persistent'
+ }
+
+ if (this.mdPermanent) {
+ return 'permanent'
+ }
+
+ return 'temporary'
}
},
methods: {
getDrawerWidth () {
let drawerWidth = this.$el ? this.$el.offsetWidth : 0
- return -drawerWidth + 'px'
+ return drawerWidth + 'px'
},
closeDrawer () {
- this.$emit('md-closed')
this.$emit('update:mdVisible', false)
}
},
+ created () {
+ if (this.MdApp) {
+ this.MdApp.drawerActive = this.mdVisible
+ this.MdApp.drawerMode = this.mode
+ }
+ },
mounted () {
- if (this.canPullDrawer) {
- this.$el.style.marginLeft = this.getDrawerWidth()
+ if (this.MdApp) {
+ this.MdApp.drawerWidth = this.getDrawerWidth()
}
}
})
@@ -93,85 +122,114 @@
@import "~components/MdLayout/mixins";
@import "~components/MdElevation/mixins";
+ @mixin md-drawer-temporary () {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 30;
+ transform: translate3D(-100%, 0, 0);
+ transition: transform .4s $md-transition-stand-timing;
+ will-change: transform, box-shadow;
+ }
+
+ @mixin md-drawer-temporary-active () {
+ transform: translate3D(0, 0, 0);
+ transition-timing-function: $md-transition-default-timing;
+
+ @include md-layout-xsmall {
+ @include md-elevation(16);
+ }
+ }
+
.md-drawer {
+ @include md-drawer-temporary;
width: 400px;
max-width: calc(100vw - 56px);
- position: relative;
- z-index: 1;
overflow: auto;
@include md-layout-xsmall {
width: 320px;
}
+ &.md-right {
+ right: 0;
+ left: auto;
+ transform: translate3D(100%, 0, 0);
+ }
+
+ &.md-fixed {
+ position: fixed;
+ }
+
+ &.md-active {
+ @include md-drawer-temporary-active;
+ }
+
+ &:not(.md-temporary) {
+ ~ .md-overlay {
+ @include md-layout-small-and-up {
+ background: none;
+ pointer-events: none;
+ }
+ }
+ }
+
&.md-temporary {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 30;
- transform: translate3D(-100%, 0, 0);
- transition: transform .4s $md-transition-stand-timing;
- will-change: transform, box-shadow;
-
- &.md-active {
- transition-timing-function: $md-transition-default-timing;
- @include md-elevation(16);
- transform: translate3D(0, 0, 0);
+ + .md-app-container .md-content {
+ border-left: none;
}
}
- &.md-permanent-clipped,
- &.md-permanent-card {
- z-index: 1;
+ &.md-permanent {
+ @include md-layout-small-and-up {
+ position: relative;
+ transform: translate3D(0, 0, 0);
+ }
}
&.md-permanent-full {
- height: 100%;
- z-index: 3;
+ @include md-layout-small-and-up {
+ height: 100%;
+ z-index: 3;
- .md-list {
- padding-top: 0;
+ .md-list {
+ padding-top: 0;
+ }
}
}
+ &.md-permanent-clipped,
&.md-permanent-card {
- /* TODO: Remove styles to inherit from md-card */
- @include md-elevation(2);
- margin: 16px;
- overflow: hidden;
- border-radius: 2px;
-
- @include md-layout-xsmall {
- margin: 8px;
+ @include md-layout-small-and-up {
+ z-index: 1;
}
}
- &.md-persistent {
- transition: .4s $md-transition-stand-timing;
- transition-property: max-width, margin-left;
- will-change: max-width, margin-left;
-
- /* TODO: Create a way to use transform instead of margin */
- &,
- ~ * {
- margin-left: 0;
- transform: translate3D(0, 0, 0);
+ &.md-permanent-card {
+ @include md-layout-small-and-up {
+ @include md-elevation(2);
+ margin: 8px;
+ overflow: hidden;
+ z-index: 1;
+ border-radius: 2px;
}
- &.md-active {
- transition-timing-function: $md-transition-default-timing;
+ @include md-layout-medium-and-up {
+ margin: 16px;
}
- }
- &.md-right {
- right: 0;
- left: auto;
- transform: translate3D(100%, 0, 0);
+ @include md-layout-large-and-up {
+ margin: 24px;
+ }
}
- &.md-fixed {
- position: fixed;
+ &.md-persistent {
+ &:not(.md-active) {
+ + .md-app-container .md-content {
+ border-left: none;
+ }
+ }
}
.md-list-item-container {
diff --git a/src/components/MdLayout/mixins.scss b/src/components/MdLayout/mixins.scss
index 35fcbd676..d1329b982 100644
--- a/src/components/MdLayout/mixins.scss
+++ b/src/components/MdLayout/mixins.scss
@@ -177,25 +177,25 @@
}
@mixin md-layout-xsmall-and-up {
- @media (min-width: #{$md-breakpoint-xsmall - 300px}) {
+ @media (min-width: 1px) {
@content;
}
}
@mixin md-layout-small-and-up {
- @media (min-width: #{$md-breakpoint-small - 300px}) {
+ @media (min-width: #{$md-breakpoint-xsmall}) {
@content;
}
}
@mixin md-layout-medium-and-up {
- @media (min-width: #{$md-breakpoint-small - 16px}) {
+ @media (min-width: #{$md-breakpoint-small}) {
@content;
}
}
@mixin md-layout-large-and-up {
- @media (min-width: #{$md-breakpoint-medium - 16px}) {
+ @media (min-width: #{$md-breakpoint-medium}) {
@content;
}
}
diff --git a/src/components/index.js b/src/components/index.js
index a3b90314b..5a088459a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+import MdApp from './MdApp'
import MdButton from './MdButton'
import MdCheckbox from './MdCheckbox'
import MdContent from './MdContent'
@@ -16,6 +17,7 @@ import MdSwitch from './MdSwitch'
import MdToolbar from './MdToolbar'
export default {
+ MdApp,
MdButton,
MdCheckbox,
MdContent,