cateditor: improve contents layout
This commit is contained in:
Seth Ladygo
@ -1,10 +1,19 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout row>
|
||||
<SectionList/>
|
||||
<ProductFamilyList/>
|
||||
<!-- <ModelList/> -->
|
||||
<MaterialList/>
|
||||
<v-container fluid grid-list-lg ma-0 pa-1>
|
||||
<v-layout row fill-height>
|
||||
|
||||
<v-flex xs4>
|
||||
<SectionList/>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs4>
|
||||
<ProductFamilyList/>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs4>
|
||||
<MaterialList/>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card>
|
||||
<v-card flat color="grey lighten-4" >
|
||||
<v-card-title>Product Families</v-card-title>
|
||||
</v-card>
|
||||
<v-card>
|
||||
<v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
|
||||
Product Families
|
||||
</v-card>
|
||||
|
||||
<v-card flat class="scroll-area">
|
||||
<draggable v-model="families" group="categories">
|
||||
<div v-for="item in families" :key="item.id">
|
||||
<v-hover :key="item.id">
|
||||
@ -15,7 +15,11 @@
|
||||
>
|
||||
<v-list-tile-content>
|
||||
<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-action>
|
||||
@ -32,8 +36,7 @@
|
||||
</v-hover>
|
||||
</div>
|
||||
</draggable>
|
||||
|
||||
</v-card>
|
||||
</v-card>
|
||||
|
||||
<!-- <v-flex xs5>
|
||||
<RawDisplayer :value="families" title="Data" />
|
||||
@ -41,18 +44,20 @@
|
||||
|
||||
<!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/>
|
||||
<SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> -->
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import Vue2Filters from 'vue2-filters'
|
||||
import SelectionMixin from './SelectionMixin'
|
||||
/* import RawDisplayer from './RawDisplayer' */
|
||||
/* import SectionInfoDialog from './SectionInfoDialog'
|
||||
* import SectionDeleteDialog from './SectionDeleteDialog' */
|
||||
|
||||
export default {
|
||||
mixins: [SelectionMixin],
|
||||
mixins: [Vue2Filters.mixin,
|
||||
SelectionMixin],
|
||||
components: {
|
||||
draggable,
|
||||
/* SectionInfoDialog,
|
||||
@ -109,5 +114,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.scroll-area {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,60 +1,65 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card>
|
||||
<v-card flat color="grey lighten-4" >
|
||||
<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 class="subheading font-weight-bold pa-2" color="grey lighten-2">
|
||||
Sections
|
||||
</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>
|
||||
<RawDisplayer :value="sections" title="Data" />
|
||||
</v-flex>-->
|
||||
|
||||
<SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
|
||||
<SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -116,5 +121,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.scroll-area {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user