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

21
cateditor/src/components/CatalogContents.vue
View File

@ -1,10 +1,19 @@
<template> <template>
<v-container fluid grid-list-lg> <v-container fluid grid-list-lg ma-0 pa-1>
<v-layout row> <v-layout row fill-height>
<SectionList/>
<ProductFamilyList/> <v-flex xs4>
<!-- <ModelList/> --> <SectionList/>
<MaterialList/> </v-flex>
<v-flex xs4>
<ProductFamilyList/>
</v-flex>
<v-flex xs4>
<MaterialList/>
</v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
</template> </template>

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

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

30
cateditor/src/components/ProductFamilyList.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<v-container> <v-card>
<v-card> <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
<v-card flat color="grey lighten-4" > Product Families
<v-card-title>Product Families</v-card-title> </v-card>
</v-card>
<v-card flat class="scroll-area">
<draggable v-model="families" group="categories"> <draggable v-model="families" group="categories">
<div v-for="item in families" :key="item.id"> <div v-for="item in families" :key="item.id">
<v-hover :key="item.id"> <v-hover :key="item.id">
@ -15,7 +15,11 @@
> >
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title v-html="item.name"></v-list-tile-title> <v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.models.length"></v-list-tile-sub-title> <v-list-tile-sub-title
class="caption font-weight-light"
color="grey lighten-2">
{{item.models.length}} {{item.models.length | pluralize('model') }}
</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
@ -32,8 +36,7 @@
</v-hover> </v-hover>
</div> </div>
</draggable> </draggable>
</v-card>
</v-card>
<!-- <v-flex xs5> <!-- <v-flex xs5>
<RawDisplayer :value="families" title="Data" /> <RawDisplayer :value="families" title="Data" />
@ -41,18 +44,20 @@
<!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/> <!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/>
<SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> --> <SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> -->
</v-container> </v-card>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import Vue2Filters from 'vue2-filters'
import SelectionMixin from './SelectionMixin' import SelectionMixin from './SelectionMixin'
/* import RawDisplayer from './RawDisplayer' */ /* import RawDisplayer from './RawDisplayer' */
/* import SectionInfoDialog from './SectionInfoDialog' /* import SectionInfoDialog from './SectionInfoDialog'
* import SectionDeleteDialog from './SectionDeleteDialog' */ * import SectionDeleteDialog from './SectionDeleteDialog' */
export default { export default {
mixins: [SelectionMixin], mixins: [Vue2Filters.mixin,
SelectionMixin],
components: { components: {
draggable, draggable,
/* SectionInfoDialog, /* SectionInfoDialog,
@ -109,5 +114,8 @@ export default {
</script> </script>
<style scoped> <style scoped>
.scroll-area {
height: 300px;
overflow-y: auto;
}
</style> </style>

110
cateditor/src/components/SectionList.vue
View File

@ -1,60 +1,65 @@
<template> <template>
<v-container> <v-card>
<v-card> <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
<v-card flat color="grey lighten-4" > Sections
<v-card-title>Sections</v-card-title>
</v-card>
<!-- <v-toolbar dense>
<v-toolbar-title>Sections</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon v-on="on">add</v-icon>
</template>
<span>Add new section</span>
</v-tooltip>
</v-btn>
</v-toolbar> -->
<draggable v-model="sections" group="categories">
<div v-for="item in sections" :key="item.id">
<v-hover :key="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="listItemClasses(item.id, hover)"
@click="selectSection(item.id)"
>
<v-list-tile-content>
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title color="text--grey lighten-1">12 models</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<span class="group">
<v-btn icon @click.stop="popInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon>
</v-btn>
<v-btn icon @click.stop="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-card> </v-card>
<!-- <v-toolbar dense>
<v-toolbar-title>Sections</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon v-on="on">add</v-icon>
</template>
<span>Add new section</span>
</v-tooltip>
</v-btn>
</v-toolbar> -->
<v-card flat class="scroll-area">
<draggable v-model="sections" group="categories">
<div v-for="item in sections" :key="item.id">
<v-hover :key="item.id">
<v-list-tile
slot-scope="{ hover }"
:class="listItemClasses(item.id, hover)"
@click="selectSection(item.id)"
>
<v-list-tile-content>
<v-list-tile-title v-html="item.name"></v-list-tile-title>
<v-list-tile-sub-title
class="caption font-weight-light"
color="grey lighten-2">
12 models
</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<span class="group">
<v-btn icon @click.stop="popInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon>
</v-btn>
<v-btn icon @click.stop="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-card>
<SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
<SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
<!--<v-flex xs5> <!--<v-flex xs5>
<RawDisplayer :value="sections" title="Data" /> <RawDisplayer :value="sections" title="Data" />
</v-flex>--> </v-flex>-->
<SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/> </v-card>
<SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
</v-container>
</template> </template>
<script> <script>
@ -116,5 +121,8 @@ export default {
</script> </script>
<style scoped> <style scoped>
.scroll-area {
height: 300px;
overflow-y: auto;
}
</style> </style>