Skip to content

Commit a0053d3

Browse files
marcosmouramarcosmoura
committedSep 25, 2017
feat(MdList): make static list items
1 parent cb242c7 commit a0053d3

File tree

5 files changed

+139
-17
lines changed

5 files changed

+139
-17
lines changed
 

‎docs/app/pages/Components/List/examples/RegularLists.vue

+70-7
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
<md-divider class="md-inset"></md-divider>
2525

2626
<md-list-item class="md-inset">
27-
<!-- <md-avatar>
27+
<md-avatar>
2828
<img src="https://placeimg.com/40/40/people/5" alt="People">
29-
</md-avatar> -->
29+
</md-avatar>
3030

3131
<span class="md-list-item-text">Abbey Christansen</span>
3232

@@ -36,9 +36,9 @@
3636
</md-list-item>
3737

3838
<md-list-item class="md-inset">
39-
<!-- <md-avatar>
39+
<md-avatar>
4040
<img src="https://placeimg.com/40/40/people/1" alt="People">
41-
</md-avatar> -->
41+
</md-avatar>
4242

4343
<span class="md-list-item-text">Alex Nelson</span>
4444

@@ -48,9 +48,69 @@
4848
</md-list-item>
4949

5050
<md-list-item class="md-inset">
51-
<!-- <md-avatar>
51+
<md-avatar>
5252
<img src="https://placeimg.com/40/40/people/6" alt="People">
53-
</md-avatar> -->
53+
</md-avatar>
54+
55+
<span class="md-list-item-text">Mary Johnson</span>
56+
57+
<md-button class="md-icon-button md-list-action">
58+
<md-icon>chat_bubble</md-icon>
59+
</md-button>
60+
</md-list-item>
61+
</md-list>
62+
63+
<md-list class="md-dense">
64+
<md-list-item>
65+
<md-icon>move_to_inbox</md-icon>
66+
<span class="md-list-item-text">Inbox</span>
67+
</md-list-item>
68+
69+
<md-list-item>
70+
<md-icon>send</md-icon>
71+
<span class="md-list-item-text">Sent Mail</span>
72+
</md-list-item>
73+
74+
<md-list-item>
75+
<md-icon>delete</md-icon>
76+
<span class="md-list-item-text">Trash</span>
77+
</md-list-item>
78+
79+
<md-list-item>
80+
<md-icon>error</md-icon>
81+
<span class="md-list-item-text">Spam</span>
82+
</md-list-item>
83+
84+
<md-divider class="md-inset"></md-divider>
85+
86+
<md-list-item class="md-inset">
87+
<md-avatar>
88+
<img src="https://placeimg.com/40/40/people/5" alt="People">
89+
</md-avatar>
90+
91+
<span class="md-list-item-text">Abbey Christansen</span>
92+
93+
<md-button class="md-icon-button md-list-action">
94+
<md-icon class="md-primary">chat_bubble</md-icon>
95+
</md-button>
96+
</md-list-item>
97+
98+
<md-list-item class="md-inset">
99+
<md-avatar>
100+
<img src="https://placeimg.com/40/40/people/1" alt="People">
101+
</md-avatar>
102+
103+
<span class="md-list-item-text">Alex Nelson</span>
104+
105+
<md-button class="md-icon-button md-list-action">
106+
<md-icon class="md-primary">chat_bubble</md-icon>
107+
</md-button>
108+
</md-list-item>
109+
110+
<md-list-item class="md-inset">
111+
<md-avatar>
112+
<img src="https://placeimg.com/40/40/people/6" alt="People">
113+
</md-avatar>
54114

55115
<span class="md-list-item-text">Mary Johnson</span>
56116

@@ -70,7 +130,10 @@ export default {
70130

71131
<style lang="scss" scoped>
72132
.md-list {
73-
max-width: 320px;
133+
width: 320px;
134+
max-width: 100%;
135+
display: inline-block;
136+
vertical-align: top;
74137
border: 1px solid rgba(#000, .12);
75138
}
76139
</style>

‎src/components/MdButton/MdButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
display: inline-block;
9191
position: relative;
9292
overflow: hidden;
93-
user-select: none;
9493
outline: none;
9594
background: transparent;
9695
border: 0;
@@ -111,6 +110,7 @@
111110
min-width: $md-button-min-width;
112111
height: $md-button-height;
113112
margin: 6px 8px;
113+
user-select: none;
114114
border-radius: $md-button-radius;
115115
font-size: $md-button-font-size;
116116
font-weight: 500;

‎src/components/MdList/MdListItem/MdListItem.vue

+51-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
import MdRouterLinkProps from 'core/utils/MdRouterLinkProps'
3+
import MdListItemDefault from './MdListItemDefault'
34
import MdListItemButton from './MdListItemButton'
45
import MdListItemLink from './MdListItemLink'
56
import MdListItemRouter from './MdListItemRouter'
@@ -12,7 +13,14 @@
1213
MdButton
1314
},
1415
render (createElement, { data, parent, props, listeners, children }) {
15-
let listComponent = MdListItemButton
16+
const interactionEvents = [
17+
'click',
18+
'contextmenu',
19+
'dblclick',
20+
'mousedown',
21+
'mouseup'
22+
]
23+
let listComponent = MdListItemDefault
1624
1725
if (parent && parent.$router && props.to) {
1826
listComponent = MdListItemRouter
@@ -22,6 +30,14 @@
2230
delete listComponent.props.href
2331
} else if (props.href) {
2432
listComponent = MdListItemLink
33+
} else {
34+
let listenerNames = Object.keys(listeners)
35+
36+
listenerNames.forEach(listener => {
37+
if (interactionEvents.includes(listener)) {
38+
listComponent = MdListItemButton
39+
}
40+
})
2541
}
2642
2743
return createElement('li', {
@@ -45,16 +61,16 @@
4561
position: relative;
4662
z-index: 2;
4763
48-
.md-icon {
49-
margin: 0;
50-
transition-property: color, margin-right;
51-
}
52-
5364
&.md-inset {
5465
.md-list-item-content {
5566
padding-left: 72px;
5667
}
5768
}
69+
70+
.md-icon {
71+
margin: 0;
72+
transition-property: color, margin-right;
73+
}
5874
}
5975
6076
.md-list-item-container {
@@ -64,7 +80,15 @@
6480
font-weight: 400;
6581
text-align: left;
6682
text-transform: none;
67-
cursor: pointer;
83+
84+
.md-list.md-dense & {
85+
font-size: 13px;
86+
}
87+
88+
&:not(.md-list-item-default) {
89+
user-select: none;
90+
cursor: pointer;
91+
}
6892
6993
&.md-button-clean:hover {
7094
opacity: 1;
@@ -74,18 +98,37 @@
7498
7599
.md-list-item-content {
76100
min-height: 48px;
77-
padding: 0 16px;
101+
padding: 8px 16px;
78102
display: flex;
79103
flex-flow: row nowrap;
80104
align-items: center;
81105
flex: 1;
82106
transition: padding .4s $md-transition-stand-timing;
83107
will-change: padding;
84108
109+
.md-list.md-dense & {
110+
min-height: 40px;
111+
padding-top: 4px;
112+
padding-bottom: 4px;
113+
114+
> .md-avatar {
115+
width: 36px;
116+
height: 36px;
117+
118+
&:first-child {
119+
margin-right: 20px;
120+
}
121+
}
122+
}
123+
85124
> .md-icon:first-child {
86125
margin-right: 32px;
87126
}
88127
128+
> .md-avatar:first-child {
129+
margin-right: 16px;
130+
}
131+
89132
.md-list-action {
90133
margin: 0 -10px 0 0;
91134

‎src/components/MdList/MdListItem/MdListItemDefault.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="md-list-item-default">
3+
<md-list-item-content md-disabled>
4+
<slot></slot>
5+
</md-list-item-content>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import MdListItemMixin from './MdListItemMixin'
11+
12+
export default {
13+
name: 'MdListItemDefault',
14+
mixins: [MdListItemMixin]
15+
}
16+
</script>

‎src/components/MdList/theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.md-list-item-container {
66
@include md-theme-property(color, text-primary, background);
77

8-
&:active {
8+
&:not(.md-list-item-default):active {
99
@include md-theme-property(background-color, divider, background);
1010
}
1111
}

0 commit comments

Comments
 (0)