From 59a31d0dab24362a1ce20c83d6fb6a6f069998f2 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Sun, 25 Sep 2016 22:10:29 -0300 Subject: [PATCH] Improve expansion list --- src/components/mdList/mdList.scss | 11 +++ src/components/mdList/mdList.theme | 8 +- src/components/mdList/mdListExpand.vue | 10 +-- src/components/mdList/mdListItem.vue | 113 ++++++++++++++++--------- src/docs/pages/List.vue | 6 +- 5 files changed, 95 insertions(+), 53 deletions(-) diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss index 540bb96..c50361a 100644 --- a/src/components/mdList/mdList.scss +++ b/src/components/mdList/mdList.scss @@ -243,6 +243,10 @@ .md-list-expand { margin-bottom: 0 !important; + + > * { + opacity: 1; + } } } @@ -262,10 +266,17 @@ z-index: 1; transform: translate3D(0, 0, 0); transition: $swift-ease-out; + transition-duration: .45s; &.md-transition-off { transition: none; } + + > * { + opacity: 0; + transition: $swift-ease-out; + transition-duration: .5s; + } } } diff --git a/src/components/mdList/mdList.theme b/src/components/mdList/mdList.theme index 3e76615..3711476 100644 --- a/src/components/mdList/mdList.theme +++ b/src/components/mdList/mdList.theme @@ -51,10 +51,12 @@ .md-list-item-expand { &.md-active { - color: #{'PRIMARY-COLOR'}; - - .md-icon:not(.md-list-expand-indicator) { + > .md-list-item-container { color: #{'PRIMARY-COLOR'}; + + .md-icon:not(.md-list-expand-indicator) { + color: #{'PRIMARY-COLOR'}; + } } } diff --git a/src/components/mdList/mdListExpand.vue b/src/components/mdList/mdListExpand.vue index afd2769..be803ca 100644 --- a/src/components/mdList/mdListExpand.vue +++ b/src/components/mdList/mdListExpand.vue @@ -8,16 +8,16 @@ export default { data() { return { - height: null + height: 0 }; }, - watch: { - '$el.offsetHeight': function() { - console.log(this); + methods: { + calculatePadding() { + this.height = -this.$el.offsetHeight + 'px'; } }, mounted() { - this.height = -this.$el.offsetHeight + 'px'; + this.calculatePadding(); } }; diff --git a/src/components/mdList/mdListItem.vue b/src/components/mdList/mdListItem.vue index a91d510..0046e5a 100644 --- a/src/components/mdList/mdListItem.vue +++ b/src/components/mdList/mdListItem.vue @@ -6,7 +6,12 @@ }, render(createElement) { let containerClass = 'md-button md-list-item-container'; - let listItem = { + let slot = this.$slots.default; + let componentOptions = slot[0].componentOptions; + let expandSlot; + let expandSlotIndex; + + let listItemSpec = { staticClass: 'md-list-item', on: { click: () => { @@ -14,57 +19,71 @@ } } }; - let slot = this.$slots.default; - let componentOptions = slot[0].componentOptions; - if (componentOptions && componentOptions.tag === 'router-link') { + let createCompatibleRouterLink = () => { slot[0].data.staticClass = containerClass; slot[0].data.directives = [{ name: 'md-ink-ripple' }]; - return createElement('li', listItem, slot); - } + return createElement('li', listItemSpec, slot); + }; - let expand; - let expandIndex; + let prepareExpandList = () => { + slot.some((slot, index) => { + if (slot.componentOptions && slot.componentOptions.tag === 'md-list-expand') { + expandSlot = slot; + expandSlotIndex = index; - slot.some((slot, index) => { - if (slot.componentOptions && slot.componentOptions.tag === 'md-list-expand') { - expand = slot; - expandIndex = index; + return true; + } + }); + }; - return true; - } - }); - - if (expand) { - let expandArrow = createElement('md-icon', { + let createExpandIndicator = () => { + return createElement('md-icon', { staticClass: 'md-list-expand-indicator' }, 'keyboard_arrow_down'); + }; - slot.splice(expandIndex, 1); - slot.push(expandArrow); + let recalculateExpand = (element) => { + element.$children.some((expand) => { + if (expand.$el.classList.contains('md-list-expand')) { + expand.calculatePadding(); + } + }); + }; - let container = createElement('div', { + let handleExpandClick = (scope) => { + let target; + + scope.$parent.$children.some((child) => { + var classList = child.$el.classList; + + if (classList.contains('md-list-item-expand') && classList.contains('md-active')) { + target = child; + classList.remove('md-active'); + + recalculateExpand(child); + + return true; + } + }); + + if (!target || scope.$el !== target.$el) { + scope.$el.classList.add('md-active'); + } + }; + + let createExpandElement = () => { + slot.splice(expandSlotIndex, 1); + slot.push(createExpandIndicator()); + + return createElement('div', { staticClass: containerClass, on: { click: () => { - let target; - - this.$parent.$children.some((child) => { - if (child.$el.classList.contains('md-list-item-expand') && child.$el.classList.contains('md-active')) { - target = child; - child.$el.classList.remove('md-active'); - - return true; - } - }); - - if (!target || this.$el !== target.$el) { - this.$el.classList.add('md-active'); - } - + handleExpandClick(this); this.$emit('click'); } }, @@ -72,13 +91,25 @@ name: 'md-ink-ripple' }] }, slot); + }; - listItem.staticClass += ' md-list-item-expand'; + let createExpandList = () => { + listItemSpec.staticClass += ' md-list-item-expand'; - return createElement('li', listItem, [container, expand]); + return createElement('li', listItemSpec, [createExpandElement(), expandSlot]); + }; + + if (componentOptions && componentOptions.tag === 'router-link') { + createCompatibleRouterLink(); } - let button = createElement('md-button', { + prepareExpandList(); + + if (expandSlot) { + return createExpandList(); + } + + let buttonSpec = createElement('md-button', { staticClass: containerClass, attrs: { target: this.target, @@ -87,10 +118,10 @@ }, slot); if (this.target) { - button.data.attrs.rel = 'noopener'; + buttonSpec.data.attrs.rel = 'noopener'; } - return createElement('li', listItem, [button]); + return createElement('li', listItemSpec, [buttonSpec]); } }; diff --git a/src/docs/pages/List.vue b/src/docs/pages/List.vue index 9d3a73f..af1d414 100644 --- a/src/docs/pages/List.vue +++ b/src/docs/pages/List.vue @@ -404,9 +404,8 @@ Humor Music - Movies + Movies TV Shows - Test @@ -716,8 +715,7 @@ export default { data() { return { - sidenavVisible: false, - test: false + sidenavVisible: false }; }, methods: {