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

CatalogContents: nicer list tiles

Browse Source
This commit is contained in:
Seth Ladygo
2019-05-17 02:07:30 -07:00
parent bae790ccc7
commit d54e3dfc5a
1 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,31 @@
:class="sectionListItemClasses(item.id, hover)" :class="sectionListItemClasses(item.id, hover)"
@click="selectSection(item.id)" @click="selectSection(item.id)"
> >
<!-- TODO try move sectionparent into v-list-title
and so section-drop can cover all interior
-->
<v-list-tile-content class="section-parent"> <v-list-tile-content class="section-parent">
<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
class="caption font-weight-light"
color="grey lighten-2"
>
{{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
</v-list-tile-sub-title>
<v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title> <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
</v-list-tile-content> </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-list-tile>
</v-hover> </v-hover>
</div> </div>
@ -42,7 +63,26 @@
:class="modelListItemClasses(item.model, hover)" :class="modelListItemClasses(item.model, hover)"
@click="selectModel(item.model)" @click="selectModel(item.model)"
> >
<v-list-tile-title v-html="item.name"></v-list-tile-title> <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">
{{item.ids.length}} {{item.ids.length | pluralize('material') }}
</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-list-tile>
</v-hover> </v-hover>
</div> </div>
@ -61,7 +101,21 @@
slot-scope="{ hover }" slot-scope="{ hover }"
:class="materialListItemClasses(item.id, hover)" :class="materialListItemClasses(item.id, hover)"
> >
<v-list-tile-title v-html="item.id"></v-list-tile-title> <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> </v-list-tile>
</v-hover> </v-hover>
</div> </div>
@ -70,10 +124,6 @@
</v-flex> </v-flex>
<v-flex xs3>
<RawDisplayer :value="selectedMaterials" title="mats" />
</v-flex>
</v-layout> </v-layout>
</v-container> </v-container>