alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

cateditor: improve contents layout

Browse Source
This commit is contained in:
Seth Ladygo
2019-04-10 22:29:30 -07:00
parent b0250a8ea5
commit 6d1af24a57
4 changed files with 138 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
cateditor/src/components/MaterialList.vue
View File

@ -1,52 +1,52 @@
<template>
<v-container>
<v-card>
<v-card flat color="grey lighten-4" >
<v-card-title>Styles</v-card-title>
</v-card>
<!-- <v-toolbar dense>
<v-toolbar-title>Categories</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>add</v-icon></v-btn>
</v-toolbar> -->
<v-card>
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
Styles
</v-card>
<!-- <v-toolbar dense>
<v-toolbar-title>Categories</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>add</v-icon></v-btn>
</v-toolbar> -->
<draggable v-model="materials" group="materials">
<div v-for="item in materials" :key="item.id">
<v-hover
:key="item.id"
:materialid="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="listItemClasses(item.id, hover)"
@click="selectMaterial(item.id)"
>
<v-list-tile-content>
<v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
</v-list-tile-content>
<v-card flat class="scroll-area">
<draggable v-model="materials" group="materials">
<div v-for="item in materials" :key="item.id">
<v-hover
:key="item.id"
:materialid="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="listItemClasses(item.id, hover)"
@click="selectMaterial(item.id)"
>
<v-list-tile-content>
<v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
<v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<span class="group">
<v-btn icon @click="popInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon>
</v-btn>
<v-btn icon @click="popDelete(item.id)">
<v-icon small color="grey lighten-1">delete</v-icon>
</v-btn>
</span>
</v-list-tile-action>
<v-list-tile-action>
<span class="group">
<v-btn icon @click="popInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon>
</v-btn>
<v-btn icon @click="popDelete(item.id)">
<v-icon small color="grey lighten-1">delete</v-icon>
</v-btn>
</span>
</v-list-tile-action>
</v-list-tile>
</v-hover>
</div>
</draggable>
</v-list-tile>
</v-hover>
</div>
</draggable>
</v-card>
<!-- <v-flex xs5>
<RawDisplayer :value="materials" title="Data" />
</v-flex> -->
</v-container>
</v-card>
</template>
<script>
@ -89,8 +89,8 @@ export default {
methods: {
listItemClasses: function (id, hovering) {
/* if (id === this.selectedMaterial) {
return 'primary'
} else */
return 'primary'
} else */
if (hovering) {
return 'grey lighten-4'
} else {
@ -110,5 +110,8 @@ export default {
</script>
<style scoped>
.scroll-area {
height: 300px;
overflow-y: auto;
}
</style>