From d5f86fc289ace93b8f4b130d23d498a7fff003f2 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 14 Nov 2016 10:12:08 -0200 Subject: [PATCH 01/22] Improve sidenav performance and expansion list performance --- src/components/mdList/mdList.scss | 1 + src/components/mdSidenav/mdSidenav.scss | 12 +++++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss index e04cbe1..779d8cb 100644 --- a/src/components/mdList/mdList.scss +++ b/src/components/mdList/mdList.scss @@ -276,6 +276,7 @@ position: relative; z-index: 1; transform: translate3D(0, 0, 0); + will-change: margin-bottom; transition: $swift-ease-in-out; &.md-transition-off { diff --git a/src/components/mdSidenav/mdSidenav.scss b/src/components/mdSidenav/mdSidenav.scss index cee3c3d..448d173 100644 --- a/src/components/mdSidenav/mdSidenav.scss +++ b/src/components/mdSidenav/mdSidenav.scss @@ -3,12 +3,12 @@ .md-sidenav { &.md-left .md-sidenav-content { left: 0; - transform: translate3d(-100%, 0, 0); + transform: translate3D(-100%, 0, 0); } &.md-right .md-sidenav-content { right: 0; - transform: translate3d(100%, 0, 0); + transform: translate3D(100%, 0, 0); } &.md-fixed { @@ -26,6 +26,9 @@ z-index: 100; pointer-events: none; overflow: auto; + -webkit-overflow-scrolling: touch; + box-shadow: $material-shadow-16dp; + will-change: transform; transition: $swift-ease-out; } @@ -38,8 +41,8 @@ z-index: 99; pointer-events: none; background-color: rgba(#000, .54); - transform: translate3d(0, 0, 0); opacity: 0; + will-change: opacity; transition: $swift-ease-in-out; } } @@ -47,8 +50,7 @@ .md-sidenav.md-active { .md-sidenav-content { pointer-events: auto; - box-shadow: $material-shadow-16dp; - transform: translate3d(0, 0, 0); + transform: translate3D(0, 0, 0); } .md-backdrop { From e3db463f069363d776dc6a516d09d177af0d51b9 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 16 Nov 2016 17:56:26 -0200 Subject: [PATCH 02/22] Init dialog --- docs/src/App.vue | 4 ++ docs/src/pages/components/Dialog.vue | 50 +++++++++++++++++++++ docs/src/routes.js | 6 +++ src/components/mdBackdrop/index.js | 5 +++ src/components/mdBackdrop/mdBackdrop.scss | 20 +++++++++ src/components/mdBackdrop/mdBackdrop.vue | 15 +++++++ src/components/mdDialog/index.js | 8 ++++ src/components/mdDialog/mdDialog.scss | 44 +++++++++++++++++++ src/components/mdDialog/mdDialog.theme | 7 +++ src/components/mdDialog/mdDialog.vue | 53 +++++++++++++++++++++++ src/components/mdMenu/mdMenu.scss | 4 +- src/components/mdSidenav/mdSidenav.scss | 18 +------- src/components/mdSidenav/mdSidenav.vue | 2 +- src/index.js | 8 +++- 14 files changed, 224 insertions(+), 20 deletions(-) create mode 100644 docs/src/pages/components/Dialog.vue create mode 100644 src/components/mdBackdrop/index.js create mode 100644 src/components/mdBackdrop/mdBackdrop.scss create mode 100644 src/components/mdBackdrop/mdBackdrop.vue create mode 100644 src/components/mdDialog/index.js create mode 100644 src/components/mdDialog/mdDialog.scss create mode 100644 src/components/mdDialog/mdDialog.theme create mode 100644 src/components/mdDialog/mdDialog.vue diff --git a/docs/src/App.vue b/docs/src/App.vue index ecc83c9..f81d4c6 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -47,6 +47,10 @@ Checkbox + + Dialog + + Icon diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue new file mode 100644 index 0000000..0ecf682 --- /dev/null +++ b/docs/src/pages/components/Dialog.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index edf8fbe..11150a0 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -12,6 +12,7 @@ import Buttons from './pages/components/Buttons'; import ButtonToggle from './pages/components/ButtonToggle'; import Card from './pages/components/Card'; import Checkbox from './pages/components/Checkbox'; +import Dialog from './pages/components/Dialog'; import Icon from './pages/components/Icon'; import Input from './pages/components/Input'; import List from './pages/components/List'; @@ -95,6 +96,11 @@ const components = [ name: 'components:checkbox', component: Checkbox }, + { + path: '/components/dialog', + name: 'components:dialog', + component: Dialog + }, { path: '/components/icon', name: 'components:icon', diff --git a/src/components/mdBackdrop/index.js b/src/components/mdBackdrop/index.js new file mode 100644 index 0000000..f16326e --- /dev/null +++ b/src/components/mdBackdrop/index.js @@ -0,0 +1,5 @@ +import mdBackdrop from './mdBackdrop.vue'; + +export default function install(Vue) { + Vue.component('md-backdrop', Vue.extend(mdBackdrop)); +} diff --git a/src/components/mdBackdrop/mdBackdrop.scss b/src/components/mdBackdrop/mdBackdrop.scss new file mode 100644 index 0000000..bfafe5d --- /dev/null +++ b/src/components/mdBackdrop/mdBackdrop.scss @@ -0,0 +1,20 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99; + pointer-events: none; + background-color: rgba(#000, .54); + transform: translate3d(0, 0, 0); + opacity: 0; + transition: $swift-ease-in-out; + + &.md-active { + opacity: 1; + pointer-events: auto; + } +} diff --git a/src/components/mdBackdrop/mdBackdrop.vue b/src/components/mdBackdrop/mdBackdrop.vue new file mode 100644 index 0000000..d72dcac --- /dev/null +++ b/src/components/mdBackdrop/mdBackdrop.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/components/mdDialog/index.js b/src/components/mdDialog/index.js new file mode 100644 index 0000000..a38c107 --- /dev/null +++ b/src/components/mdDialog/index.js @@ -0,0 +1,8 @@ +import mdDialog from './mdDialog.vue'; +import mdDialogTheme from './mdDialog.theme'; + +export default function install(Vue) { + Vue.component('md-dialog', Vue.extend(mdDialog)); + + Vue.material.styles.push(mdDialogTheme); +} diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss new file mode 100644 index 0000000..af73f0f --- /dev/null +++ b/src/components/mdDialog/mdDialog.scss @@ -0,0 +1,44 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-dialog { + min-width: 240px; + max-width: 80%; + max-height: 80%; + overflow: hidden; + position: fixed; + top: 50%; + left: 50%; + z-index: 110; + outline: none; + border-radius: 2px; + opacity: 0; + filter: drop-shadow(0 7px 8px rgba(#000, $shadow-key-umbra-opacity)) + drop-shadow(0 12px 17px rgba(#000, $shadow-key-penumbra-opacity)) + drop-shadow(0 5px 22px rgba(#000, $shadow-ambient-shadow-opacity)); + clip-path: inset(0 7% 12% 7%); + transform: translate3D(-50%, -60%, 0) scale(.85); + transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, + opacity .3s $swift-ease-out-timing-function, + clip-path .3s .1s $swift-ease-out-timing-function; + transition-delay: 0; + + &.md-active { + pointer-events: auto; + opacity: 1; + clip-path: inset(-22px -22px -22px -22px); + transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, + opacity .5s $swift-ease-out-timing-function, + clip-path .4s .1s $swift-ease-out-timing-function; + transition-delay: 0; + transform: translate3D(-50%, -50%, 0) scale(1); + } +} + +.md-dialog-content { + padding: 24px; +} + +.md-dialog-backdrop { + position: fixed; + z-index: 109; +} diff --git a/src/components/mdDialog/mdDialog.theme b/src/components/mdDialog/mdDialog.theme new file mode 100644 index 0000000..a6f0547 --- /dev/null +++ b/src/components/mdDialog/mdDialog.theme @@ -0,0 +1,7 @@ +.THEME_NAME { + .md-dialog, + &.md-dialog { + background-color: #{'BACKGROUND-COLOR-A100'}; + color: #{'BACKGROUND-CONTRAST'}; + } +} diff --git a/src/components/mdDialog/mdDialog.vue b/src/components/mdDialog/mdDialog.vue new file mode 100644 index 0000000..53b2923 --- /dev/null +++ b/src/components/mdDialog/mdDialog.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss index a0a70c7..8cb98ab 100644 --- a/src/components/mdMenu/mdMenu.scss +++ b/src/components/mdMenu/mdMenu.scss @@ -18,7 +18,9 @@ $menu-base-width: 56px; z-index: 120; background-color: #fff; border-radius: 2px; - filter: drop-shadow(0 1px 1px rgba(#000, $shadow-key-umbra-opacity)) drop-shadow(0 2px 2px rgba(#000, $shadow-key-penumbra-opacity)) drop-shadow(0 1px 1px rgba(#000, $shadow-ambient-shadow-opacity)); + filter: drop-shadow(0 1px 1px rgba(#000, $shadow-key-umbra-opacity)) + drop-shadow(0 2px 2px rgba(#000, $shadow-key-penumbra-opacity)) + drop-shadow(0 1px 1px rgba(#000, $shadow-ambient-shadow-opacity)); opacity: 0; transition: width $swift-ease-out-duration $swift-ease-out-timing-function, opacity .25s $swift-ease-in-timing-function, diff --git a/src/components/mdSidenav/mdSidenav.scss b/src/components/mdSidenav/mdSidenav.scss index cee3c3d..393b4d2 100644 --- a/src/components/mdSidenav/mdSidenav.scss +++ b/src/components/mdSidenav/mdSidenav.scss @@ -13,7 +13,7 @@ &.md-fixed { .md-sidenav-content, - .md-backdrop { + .md-sidenav-backdrop { position: fixed; } } @@ -28,20 +28,6 @@ overflow: auto; transition: $swift-ease-out; } - - .md-backdrop { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 99; - pointer-events: none; - background-color: rgba(#000, .54); - transform: translate3d(0, 0, 0); - opacity: 0; - transition: $swift-ease-in-out; - } } .md-sidenav.md-active { @@ -51,7 +37,7 @@ transform: translate3d(0, 0, 0); } - .md-backdrop { + .md-sidenav-backdrop { opacity: 1; pointer-events: auto; } diff --git a/src/components/mdSidenav/mdSidenav.vue b/src/components/mdSidenav/mdSidenav.vue index 9784e9b..ab54b08 100644 --- a/src/components/mdSidenav/mdSidenav.vue +++ b/src/components/mdSidenav/mdSidenav.vue @@ -4,7 +4,7 @@ -
+ diff --git a/src/index.js b/src/index.js index 1a2bbb6..106149a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,12 @@ import mdCore from './core'; import mdAvatar from './components/mdAvatar'; +import mdBackdrop from './components/mdBackdrop'; import mdBottomBar from './components/mdBottomBar'; import mdButton from './components/mdButton'; import mdButtonToggle from './components/mdButtonToggle'; -import mdCheckbox from './components/mdCheckbox'; import mdCard from './components/mdCard'; +import mdCheckbox from './components/mdCheckbox'; +import mdDialog from './components/mdDialog'; import mdDivider from './components/mdDivider'; import mdIcon from './components/mdIcon'; import mdInputContainer from './components/mdInputContainer'; @@ -24,11 +26,13 @@ import mdWhiteframe from './components/mdWhiteframe'; let options = { mdCore, mdAvatar, + mdBackdrop, mdBottomBar, mdButton, mdButtonToggle, - mdCheckbox, mdCard, + mdCheckbox, + mdDialog, mdDivider, mdIcon, mdInputContainer, From 88690d02fa620c5a67dcc4211452962ec8eccea4 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 16 Nov 2016 23:54:56 -0200 Subject: [PATCH 03/22] Add initial transition --- src/components/mdDialog/mdDialog.scss | 4 ++-- src/components/mdDialog/mdDialog.vue | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss index af73f0f..f5e628d 100644 --- a/src/components/mdDialog/mdDialog.scss +++ b/src/components/mdDialog/mdDialog.scss @@ -1,7 +1,7 @@ @import '../../core/stylesheets/variables.scss'; .md-dialog { - min-width: 240px; + min-width: 280px; max-width: 80%; max-height: 80%; overflow: hidden; @@ -34,7 +34,7 @@ } } -.md-dialog-content { +.md-dialog-container { padding: 24px; } diff --git a/src/components/mdDialog/mdDialog.vue b/src/components/mdDialog/mdDialog.vue index 53b2923..d6b9a53 100644 --- a/src/components/mdDialog/mdDialog.vue +++ b/src/components/mdDialog/mdDialog.vue @@ -1,8 +1,10 @@ From 202163783059f46742968123aba1dae9d59f8ed4 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 17 Nov 2016 00:15:55 -0200 Subject: [PATCH 04/22] Add backdrop to md-menu --- src/components/mdBackdrop/mdBackdrop.scss | 4 +++ src/components/mdMenu/mdMenu.vue | 43 ++++++++++++----------- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/mdBackdrop/mdBackdrop.scss b/src/components/mdBackdrop/mdBackdrop.scss index bfafe5d..8bd0e8a 100644 --- a/src/components/mdBackdrop/mdBackdrop.scss +++ b/src/components/mdBackdrop/mdBackdrop.scss @@ -17,4 +17,8 @@ opacity: 1; pointer-events: auto; } + + &.md-transparent { + background: none; + } } diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue index 8330c2b..157cbb1 100644 --- a/src/components/mdMenu/mdMenu.vue +++ b/src/components/mdMenu/mdMenu.vue @@ -1,6 +1,8 @@ @@ -68,11 +70,6 @@ addNewDirectionMenuContentClass(direction) { this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-')); }, - closeOnOffClick(event) { - if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) { - this.close(); - } - }, isAboveOfViewport(pos) { return pos.top <= this.browserMargin - parseInt(getComputedStyle(this.menuContent).marginTop, 10); }, @@ -180,12 +177,12 @@ window.requestAnimationFrame(this.calculateMenuContentPos); }, open() { - if (this.$root.$el.contains(this.menuContent)) { - this.$root.$el.removeChild(this.menuContent); + if (this.rootElement.contains(this.menuContent)) { + this.rootElement.removeChild(this.menuContent); } - this.$root.$el.appendChild(this.menuContent); - document.addEventListener('click', this.closeOnOffClick); + this.rootElement.appendChild(this.menuContent); + this.rootElement.appendChild(this.backdropElement); window.addEventListener('resize', this.recalculateOnResize); this.calculateMenuContentPos(); @@ -196,12 +193,11 @@ this.active = true; }, close() { - let menuContent = this.menuContent; let close = (event) => { - if (menuContent && event.target === menuContent) { + if (this.menuContent && event.target === this.menuContent) { let activeRipple = this.menuContent.querySelector('.md-ripple.md-active'); - menuContent.removeEventListener(transitionEndEventName, close); + this.menuContent.removeEventListener(transitionEndEventName, close); this.menuTrigger.focus(); this.active = false; @@ -209,8 +205,8 @@ activeRipple.classList.remove('md-active'); } - this.$root.$el.removeChild(menuContent); - document.removeEventListener('click', this.closeOnOffClick); + this.rootElement.removeChild(this.menuContent); + this.rootElement.removeChild(this.backdropElement); window.removeEventListener('resize', this.recalculateOnResize); } }; @@ -227,13 +223,18 @@ } }, mounted() { - this.menuTrigger = this.$el.querySelector('[md-menu-trigger]'); - this.menuContent = this.$el.querySelector('.md-menu-content'); - this.validateMenu(); - this.addNewSizeMenuContentClass(this.mdSize); - this.addNewDirectionMenuContentClass(this.mdDirection); - this.menuContent.parentNode.removeChild(this.menuContent); - this.menuTrigger.addEventListener('click', this.toggle); + this.$nextTick(() => { + this.rootElement = this.$root.$el; + this.menuTrigger = this.$el.querySelector('[md-menu-trigger]'); + this.menuContent = this.$el.querySelector('.md-menu-content'); + this.backdropElement = this.$refs.backdrop.$el; + this.validateMenu(); + this.addNewSizeMenuContentClass(this.mdSize); + this.addNewDirectionMenuContentClass(this.mdDirection); + this.$el.removeChild(this.$refs.backdrop.$el); + this.menuContent.parentNode.removeChild(this.menuContent); + this.menuTrigger.addEventListener('click', this.toggle); + }); } }; From 40a4213b98076ae55d7fb5dd0bb618c4f98f7a9d Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 17 Nov 2016 03:05:25 -0200 Subject: [PATCH 05/22] Create dialog opening from and closing to --- docs/src/pages/components/Dialog.vue | 4 +- src/components/mdDialog/mdDialog.scss | 82 ++++++++++++------- src/components/mdDialog/mdDialog.vue | 112 +++++++++++++++++++++----- 3 files changed, 144 insertions(+), 54 deletions(-) diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue index 0ecf682..4b32bfb 100644 --- a/docs/src/pages/components/Dialog.vue +++ b/docs/src/pages/components/Dialog.vue @@ -2,7 +2,7 @@
- +
@@ -15,7 +15,7 @@ Close - Open + Open
diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss index f5e628d..1a6ac6e 100644 --- a/src/components/mdDialog/mdDialog.scss +++ b/src/components/mdDialog/mdDialog.scss @@ -1,44 +1,64 @@ @import '../../core/stylesheets/variables.scss'; -.md-dialog { - min-width: 280px; - max-width: 80%; - max-height: 80%; - overflow: hidden; +.md-dialog-container { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + pointer-events: none; position: fixed; - top: 50%; - left: 50%; - z-index: 110; - outline: none; - border-radius: 2px; - opacity: 0; - filter: drop-shadow(0 7px 8px rgba(#000, $shadow-key-umbra-opacity)) - drop-shadow(0 12px 17px rgba(#000, $shadow-key-penumbra-opacity)) - drop-shadow(0 5px 22px rgba(#000, $shadow-ambient-shadow-opacity)); - clip-path: inset(0 7% 12% 7%); - transform: translate3D(-50%, -60%, 0) scale(.85); - transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, - opacity .3s $swift-ease-out-timing-function, - clip-path .3s .1s $swift-ease-out-timing-function; - transition-delay: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 108; &.md-active { pointer-events: auto; - opacity: 1; - clip-path: inset(-22px -22px -22px -22px); - transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, - opacity .5s $swift-ease-out-timing-function, - clip-path .4s .1s $swift-ease-out-timing-function; - transition-delay: 0; - transform: translate3D(-50%, -50%, 0) scale(1); - } -} -.md-dialog-container { - padding: 24px; + .md-dialog { + opacity: 1 !important; + transform: scale(1) !important; + transition: $swift-ease-out; + transform-property: opacity, transform; + + > * { + opacity: 1; + } + } + } } .md-dialog-backdrop { position: fixed; z-index: 109; } + +.md-dialog { + min-width: 280px; + max-width: 80%; + max-height: 80%; + overflow: hidden; + position: relative; + z-index: 110; + outline: none; + border-radius: 2px; + opacity: 0; + box-shadow: $material-shadow-14dp; + transform: scale(.9, .85); + transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function, + transform $swift-ease-out-duration .05s $swift-ease-out-timing-function; + will-change: opacity, transform; + + &.md-transition-off { + transition: none; + } + + > * { + opacity: 0; + transition: $swift-ease-out; + transition-property: opacity; + transition-delay: .1s; + will-change: opacity; + } +} diff --git a/src/components/mdDialog/mdDialog.vue b/src/components/mdDialog/mdDialog.vue index d6b9a53..19f6cb8 100644 --- a/src/components/mdDialog/mdDialog.vue +++ b/src/components/mdDialog/mdDialog.vue @@ -1,10 +1,10 @@ @@ -14,31 +14,99 @@ import transitionEndEventName from '../../core/utils/transitionEndEventName'; export default { + props: { + mdClickOutsideToClose: { + type: Boolean, + default: true + }, + mdEscToClose: { + type: Boolean, + default: true + }, + mdBackdrop: { + type: Boolean, + default: true + }, + mdOpenFrom: String, + mdCloseTo: String, + mdFullscreen: { + type: Boolean, + default: false + } + }, data: () => ({ - active: false + active: false, + transitionOff: false, + dialogTransform: '', + dialogTransformOrigin: '' }), + computed: { + classes() { + return { + 'md-fullscreen': this.mdFullscreen, + 'md-active': this.active + }; + }, + dialogClasses() { + return { + 'md-transition-off': this.transitionOff + }; + }, + styles() { + return { + transform: this.dialogTransform, + 'transform-origin': this.dialogTransformOrigin + }; + } + }, methods: { - open() { - this.close(); - this.$root.$el.appendChild(this.dialogElement); - this.$root.$el.appendChild(this.backdropElement); + removeDialog() { + this.$el.parentNode.removeChild(this.$el); + }, + calculateDialogPos(ref) { + const reference = document.querySelector(ref); - getComputedStyle(this.dialogElement).opacity; - this.dialogElement.focus(); - this.dialogElement.classList.add('md-active'); - this.backdropElement.classList.add('md-active'); + if (reference) { + const openFromRect = reference.getBoundingClientRect(); + const dialogRect = this.dialogInnerElement.getBoundingClientRect(); + const topDistance = dialogRect.top - openFromRect.top; + const leftDistance = dialogRect.left - openFromRect.left; + const widthInScale = openFromRect.width / dialogRect.width; + const heightInScale = openFromRect.height / dialogRect.height; + + this.dialogTransform = `translate3D(-${leftDistance}px, -${topDistance}px, 0) scale(${widthInScale}, ${heightInScale})`; + this.dialogTransformOrigin = 'top left'; + } + }, + open() { + this.$root.$el.appendChild(this.dialogElement); + this.transitionOff = true; + this.calculateDialogPos(this.mdOpenFrom); + + window.setTimeout(() => { + this.dialogElement.focus(); + this.transitionOff = false; + this.active = true; + }); }, close() { if (this.$root.$el.contains(this.dialogElement)) { let cleanElement = () => { - this.dialogElement.removeEventListener(transitionEndEventName, close); + this.dialogInnerElement.removeEventListener(transitionEndEventName, cleanElement); this.$root.$el.removeChild(this.dialogElement); - this.$root.$el.removeChild(this.backdropElement); + + this.dialogTransform = ''; + this.dialogTransformOrigin = ''; }; - this.dialogElement.classList.remove('md-active'); - this.backdropElement.classList.remove('md-active'); - this.dialogElement.addEventListener(cleanElement, close); + this.dialogTransform = ''; + this.dialogTransformOrigin = ''; + this.calculateDialogPos(this.mdCloseTo); + + window.setTimeout(() => { + this.active = false; + this.dialogInnerElement.addEventListener(transitionEndEventName, cleanElement); + }); } } }, @@ -46,10 +114,12 @@ this.$nextTick(() => { this.rootElement = this.$root.$el; this.dialogElement = this.$el; - this.backdropElement = this.$refs.backdrop.$el; - this.$el.parentNode.removeChild(this.$el); - this.$el.removeChild(this.$refs.backdrop.$el); + this.dialogInnerElement = this.$refs.dialog; + this.removeDialog(); }); + }, + beforeDestroy() { + this.removeDialog(); } }; From b0f0eebe0aaacb39cc2c3a8612dbc563e5c311ae Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 17 Nov 2016 03:08:40 -0200 Subject: [PATCH 06/22] Add example os basic and opening from and to --- docs/src/pages/components/Dialog.vue | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue index 4b32bfb..b12689f 100644 --- a/docs/src/pages/components/Dialog.vue +++ b/docs/src/pages/components/Dialog.vue @@ -2,7 +2,7 @@
- +
@@ -12,10 +12,24 @@
- Close + Close - Open + +
+
+ + + + +
+
+ + Close + + + Simple + Open from/Close to
@@ -39,11 +53,11 @@ diff --git a/src/components/mdDialog/mdDialogTitle.vue b/src/components/mdDialog/mdDialogTitle.vue new file mode 100644 index 0000000..7f516fc --- /dev/null +++ b/src/components/mdDialog/mdDialogTitle.vue @@ -0,0 +1,5 @@ + From fd1bdfe5383c47de634e92aac6b96ebda088db8b Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 22 Nov 2016 00:37:59 -0200 Subject: [PATCH 19/22] Create alert dialog preset --- docs/src/pages/components/Dialog.vue | 46 +++++++++++------ src/components/mdDialog/index.js | 6 ++- .../mdDialog/presets/mdDialogAlert.vue | 51 +++++++++++++++++++ .../{ => presets}/mdDialogConfirm.vue | 14 ++--- 4 files changed, 94 insertions(+), 23 deletions(-) create mode 100644 src/components/mdDialog/presets/mdDialogAlert.vue rename src/components/mdDialog/{ => presets}/mdDialogConfirm.vue (79%) diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue index 9fe14b2..d5de35a 100644 --- a/docs/src/pages/components/Dialog.vue +++ b/docs/src/pages/components/Dialog.vue @@ -2,16 +2,14 @@
- - Use Google's location service? - - Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running. - - - Disagree - Agree - - + + - + + Use Google's location service? + + Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running. + + + Disagree + Agree + + + + Create new note @@ -36,14 +45,16 @@ - Cancel - Create + Cancel + Create - Simple + Alert Confirm - + Prompt + Simple + add @@ -74,6 +85,11 @@ content: 'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.', ok: 'Agree', cancel: 'Disagree' + }, + alert: { + title: 'Use Google\'s location service?', + content: 'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.', + ok: 'Got it!' } }), methods: { diff --git a/src/components/mdDialog/index.js b/src/components/mdDialog/index.js index faa1ccb..f1f12b9 100644 --- a/src/components/mdDialog/index.js +++ b/src/components/mdDialog/index.js @@ -2,7 +2,8 @@ import mdDialog from './mdDialog.vue'; import mdDialogTitle from './mdDialogTitle.vue'; import mdDialogContent from './mdDialogContent.vue'; import mdDialogActions from './mdDialogActions.vue'; -import mdDialogConfirm from './mdDialogConfirm.vue'; +import mdDialogConfirm from './presets/mdDialogConfirm.vue'; +import mdDialogAlert from './presets/mdDialogAlert.vue'; import mdDialogTheme from './mdDialog.theme'; export default function install(Vue) { @@ -10,7 +11,10 @@ export default function install(Vue) { Vue.component('md-dialog-title', Vue.extend(mdDialogTitle)); Vue.component('md-dialog-content', Vue.extend(mdDialogContent)); Vue.component('md-dialog-actions', Vue.extend(mdDialogActions)); + + /* Presets */ Vue.component('md-dialog-confirm', Vue.extend(mdDialogConfirm)); + Vue.component('md-dialog-alert', Vue.extend(mdDialogAlert)); Vue.material.styles.push(mdDialogTheme); } diff --git a/src/components/mdDialog/presets/mdDialogAlert.vue b/src/components/mdDialog/presets/mdDialogAlert.vue new file mode 100644 index 0000000..a94ad96 --- /dev/null +++ b/src/components/mdDialog/presets/mdDialogAlert.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/mdDialog/mdDialogConfirm.vue b/src/components/mdDialog/presets/mdDialogConfirm.vue similarity index 79% rename from src/components/mdDialog/mdDialogConfirm.vue rename to src/components/mdDialog/presets/mdDialogConfirm.vue index a9454fc..3b42e25 100644 --- a/src/components/mdDialog/mdDialogConfirm.vue +++ b/src/components/mdDialog/presets/mdDialogConfirm.vue @@ -1,13 +1,13 @@ @@ -31,9 +31,9 @@ debounce: false }), methods: { - fireCloseEvent(type) { + fireCloseEvent() { if (!this.debounce) { - this.$emit('close', type); + this.$emit('close'); } }, open() { @@ -41,8 +41,8 @@ this.$refs.dialog.open(); this.debounce = false; }, - close(type) { - this.fireCloseEvent(type); + close() { + this.fireCloseEvent(); this.debounce = true; this.$refs.dialog.close(); } From 21ffd13e3f2a1ba685369f8c7e0117a63c4efacb Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 22 Nov 2016 01:23:40 -0200 Subject: [PATCH 20/22] Create prompt dialog preset --- docs/src/pages/components/Dialog.vue | 49 +++++++++--- src/components/mdDialog/index.js | 6 +- src/components/mdDialog/mdDialog.vue | 2 +- .../mdDialog/presets/mdDialogAlert.vue | 14 ++-- .../mdDialog/presets/mdDialogConfirm.vue | 16 ++-- .../mdDialog/presets/mdDialogPrompt.vue | 80 +++++++++++++++++++ src/components/mdTable/mdTableEdit.vue | 2 +- 7 files changed, 138 insertions(+), 31 deletions(-) create mode 100644 src/components/mdDialog/presets/mdDialogPrompt.vue diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue index d5de35a..3d0d501 100644 --- a/docs/src/pages/components/Dialog.vue +++ b/docs/src/pages/components/Dialog.vue @@ -21,18 +21,32 @@ ref="dialog2"> - - Use Google's location service? + + - Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running. + + Lorem ipsum dolor sit amet + + Nemo, nobis necessitatibus ut illo, ducimus ex. - Disagree - Agree + Cancel + Ok - + Create new note @@ -53,10 +67,12 @@ Alert Confirm Prompt - Simple - + Custom + add + +
Prompt Name: {{ prompt.value }}
@@ -80,16 +96,25 @@ diff --git a/src/components/mdTable/mdTableEdit.vue b/src/components/mdTable/mdTableEdit.vue index 4226a2e..242d0f4 100644 --- a/src/components/mdTable/mdTableEdit.vue +++ b/src/components/mdTable/mdTableEdit.vue @@ -22,7 +22,7 @@