Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-22 15:44:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve expansion list

Browse source
This commit is contained in:
Marcos Moura 2016-09-25 22:10:29 -03:00
parent 5d2d655ec2
commit 3f856302be
5 changed files with 95 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/mdList/mdList.scss
View file

@ -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;
}
}
}

8
src/components/mdList/mdList.theme
View file

@ -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'};
}
}
}

10
src/components/mdList/mdListExpand.vue
View file

@ -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();
}
};
</script>

113
src/components/mdList/mdListItem.vue
View file

@ -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]);
}
};
</script>

6
src/docs/pages/List.vue
View file

@ -404,9 +404,8 @@
<md-list>
<md-list-item class="md-inset">Humor</md-list-item>
<md-list-item class="md-inset">Music</md-list-item>
<md-list-item class="md-inset" @click="test = !test">Movies</md-list-item>
<md-list-item class="md-inset">Movies</md-list-item>
<md-list-item class="md-inset">TV Shows</md-list-item>
<md-list-item class="md-inset" v-if="test">Test</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
@ -716,8 +715,7 @@
export default {
data() {
return {
sidenavVisible: false,
test: false
sidenavVisible: false
};
},
methods: {