From 66c4f9be8ab8c8b7edd3474600986f48cfe32545 Mon Sep 17 00:00:00 2001 From: John Leider Date: Wed, 18 Jan 2017 21:03:28 -0500 Subject: [PATCH] updates to lists for better integration with sidebar --- src/components/lists/List.js | 7 +- src/components/lists/ListGroup.vue | 12 +- src/components/lists/ListTile.js | 167 ++++++++++++++++------------ src/components/sidebar/Sidebar.vue | 5 +- src/stylus/components/_lists.styl | 6 +- src/stylus/components/_sidebar.styl | 8 +- 6 files changed, 126 insertions(+), 79 deletions(-) diff --git a/src/components/lists/List.js b/src/components/lists/List.js index b54cdbd8b96..fc18f5442a8 100755 --- a/src/components/lists/List.js +++ b/src/components/lists/List.js @@ -23,7 +23,9 @@ export default { router: Boolean, - ripple: Boolean + ripple: Boolean, + + unshift: Boolean }, computed: { @@ -81,7 +83,8 @@ export default { props: { item: obj, ripple: this.ripple || obj.ripple, - router: this.router || obj.router + router: this.router || obj.router, + unshift: this.unshift } }) ]) diff --git a/src/components/lists/ListGroup.vue b/src/components/lists/ListGroup.vue index 97b05aff586..98061c43795 100755 --- a/src/components/lists/ListGroup.vue +++ b/src/components/lists/ListGroup.vue @@ -5,8 +5,12 @@ v-bind:class="classes" v-bind:ripple="ripple" ) - v-list-tile-action(v-if="item.action") - v-icon {{ item.action }} + template(v-if="item.action") + v-list-tile-action + template(v-if="typeof item.action === 'object'") + v-icon(v-bind:class="[item.action.class || '']") {{ item.action.icon }} + template(v-else) + v-icon {{ item.action }} v-list-tile-content v-list-tile-title {{ item.title }} v-list-tile-action @@ -76,7 +80,9 @@ watch: { '$route' (to) { - this.active = this.matchRoute(to.path) + if (this.router) { + this.active = this.matchRoute(to.path) + } } }, diff --git a/src/components/lists/ListTile.js b/src/components/lists/ListTile.js index 85008d6a21c..cff8b15163c 100755 --- a/src/components/lists/ListTile.js +++ b/src/components/lists/ListTile.js @@ -27,6 +27,7 @@ export default { ripple: false, router: false, subtitle: false, + tag: false, title: false } } @@ -34,7 +35,11 @@ export default { ripple: Boolean, - router: Boolean + router: Boolean, + + tag: String, + + unshift: Boolean }, computed: { @@ -54,12 +59,64 @@ export default { methods: { click () { this.$vuetify.bus.pub('list-item:selected') - } - }, + }, - render (createElement) { - if (this.item.items) { - return createElement('v-list-group', { + createAvatar (h) { + let avatar = [] + if (this.item.avatar.indexOf('.') !== -1) { + avatar.push( + h('img', { domProps: { src: this.item.avatar } }) + ) + } else { + avatar.push( + h('v-icon', this.item.avatar) + ) + } + + return h('v-list-tile-avatar', {}, avatar) + }, + + createAction (h) { + let data = {} + let actions = [] + let actionText = false + + if (typeof this.item.action === 'object') { + data['class'] = this.item.action.class || '' + data.domProps = { + innerText: this.item.action.icon + } + + if (this.item.action.text) { + actionText = h('v-list-tile-action-text', this.item.action.text) + } + } else { + data = this.item.action + } + + actions.push(h('v-icon', data)) + + if (actionText) { + actions.push(actionText) + } + + return h('v-list-tile-action', {}, actions) + }, + + createContent (h) { + let items = [] + + items.push(h('v-list-tile-title', { domProps: { innerHTML: this.item.title } })) + + if (this.item.subtitle) { + items.push(h('v-list-tile-sub-title', { domProps: { innerHTML: this.item.subtitle } })) + } + + return h('v-list-tile-content', {}, items) + }, + + createGroup (h) { + return h('v-list-group', { props: { item: { action: this.item.action, @@ -72,8 +129,30 @@ export default { } }) } + }, + + render (createElement) { + if (this.item.items) { + return this.createGroup(createElement) + } - let el + let avatar, + action, + content, + tag, + children = [] + + if (this.item.avatar) { + avatar = this.createAvatar(createElement) + } + + if (this.item.title) { + content = this.createContent(createElement) + } + + if (this.item.action) { + action = this.createAction(createElement) + } let data = { attrs: {}, @@ -87,8 +166,10 @@ export default { ] } - if (this.item.href && (this.router || this.item.router)) { - el = 'router-link' + if (this.item.tag || this.tag) { + tag = this.item.tag || this.tag + } else if (this.item.href && (this.router || this.item.router)) { + tag = 'router-link' data.props.to = this.item.href data.props.exact = this.item.href === '/' data.props.activeClass = 'list__tile--active' @@ -97,7 +178,7 @@ export default { data.nativeOn = { click: this.click } } } else { - el = 'a' + tag = 'a' data.attrs.href = this.item.href || 'javascript:;' if (this.click) { @@ -105,69 +186,17 @@ export default { } } - let children = [] - - if (this.item.avatar) { - let avatar = [] - if (this.item.avatar.indexOf('.') !== -1) { - avatar.push( - createElement('img', { domProps: { src: this.item.avatar } }) - ) - } else { - avatar.push( - createElement('v-icon', this.item.avatar) - ) - } - - children.push(createElement('v-list-tile-avatar', {}, avatar)) - } - - if (this.item.title) { - let items = [] - items.push(createElement('v-list-tile-title', { domProps: { innerHTML: this.item.title } })) - - if (this.item.subtitle) { - items.push(createElement('v-list-tile-sub-title', { domProps: { innerHTML: this.item.subtitle } })) - } - - children.push(createElement('v-list-tile-content', {}, items)) - } - - if (this.item.action) { - let data = {} - let actions = [] - let actionText = false - - if (typeof this.item.action === 'object') { - data['class'] = this.item.action.class || '' - data.domProps = { - innerText: this.item.action.icon - } + children.push(avatar) + children.push(content) - if (this.item.action.text) { - actionText = createElement('v-list-tile-action-text', this.item.action.text) - } - } else { - data = this.item.action - } - - actions.push(createElement('v-icon', data)) - - if (actionText) { - actions.push(actionText) - } - - let action = createElement('v-list-tile-action', {}, actions) - - if ((this.router || this.item.router) && !this.avatar) { - children.splice(-1, 0, action) - } else { - children.push(action) - } + if (this.unshift || (this.item.action && this.item.action.unshift)) { + children.unshift(action) + } else { + children.push(action) } children.push(this.$slots.default) - return createElement(el, data, children) + return createElement(tag, data, children) } } \ No newline at end of file diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue index d685d2416d6..2f08503f0f1 100755 --- a/src/components/sidebar/Sidebar.vue +++ b/src/components/sidebar/Sidebar.vue @@ -12,6 +12,7 @@ v-bind:items="items" v-bind:ripple="ripple" v-bind:router="router" + v-bind:unshift="unshift" ref="list" ) slot @@ -75,7 +76,9 @@ ripple: Boolean, - router: Boolean + router: Boolean, + + unshift: Boolean }, computed: { diff --git a/src/stylus/components/_lists.styl b/src/stylus/components/_lists.styl index 0fdce3aa643..f9b6073bb90 100755 --- a/src/stylus/components/_lists.styl +++ b/src/stylus/components/_lists.styl @@ -47,9 +47,9 @@ opacity: 0 width: 100% transition: $primary-transition - background-color: $material-twelve-percent-light + background-color: $material-twelve-percent-dark - &:hover + a&:hover background: $material-twelve-percent-dark &__content, @@ -186,7 +186,7 @@ height: 1px opacity: 0 width: 100% - background-color: $material-twelve-percent-light + background-color: $material-twelve-percent-dark .list__tile padding-left: $list-item-left-padding diff --git a/src/stylus/components/_sidebar.styl b/src/stylus/components/_sidebar.styl index 69d822ca4cd..5c4c8601352 100755 --- a/src/stylus/components/_sidebar.styl +++ b/src/stylus/components/_sidebar.styl @@ -69,6 +69,12 @@ background-color: $sidebar-item-hover-background-color color: $sidebar-item-active-color + &:after + background: $material-twelve-percent-light + .list--group > .list__tile--active - color: $sidebar-item-color \ No newline at end of file + color: $sidebar-item-color + + &:after + background: $material-twelve-percent-light \ No newline at end of file