cat editor: update icons and layout for vuetify2

This commit is contained in:
2020-01-16 12:14:07 -08:00
parent d5b96a945a
commit aebaef0f28
9 changed files with 81 additions and 41 deletions

View File

@ -5,11 +5,11 @@
<v-card>
<DialogHeading title="Add Section">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="my-0 pb-0 pt-2">
<v-text-field
v-model="name"
:rules="[v => !!v || 'Required']"
@ -22,11 +22,15 @@
<v-card-actions>
<v-spacer/>
<v-btn flat @click="show = false">Cancel</v-btn>
<v-btn
small
class="mb-2"
@click="show = false">Cancel</v-btn>
<v-btn
:disabled="!valid"
color="primary"
flat
class="black--text ml-4 mb-2"
small
@click="doNewSection()">OK</v-btn>
<v-spacer/>
</v-card-actions>

View File

@ -12,7 +12,7 @@
<v-card>
<DragListHeading title="Sections">
<v-btn icon class="ma-0 pa-0" @click="showAddSectionDialog = true">
<v-icon>add</v-icon>
<v-icon>mdi-plus</v-icon>
</v-btn>
</DragListHeading>
@ -41,10 +41,10 @@
<v-list-item-action>
<span class="group">
<v-btn icon @click.stop="popSectionInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon>
<v-icon small color="grey">mdi-information-outline</v-icon>
</v-btn>
<v-btn icon @click.stop="popSectionDelete(item.id)">
<v-icon small color="grey lighten-1">delete</v-icon>
<v-icon small color="grey">mdi-trash-can-outline</v-icon>
</v-btn>
</span>
</v-list-item-action>
@ -81,10 +81,10 @@
<v-list-item-action>
<span class="group">
<v-btn icon @click.stop="popModelInfo(item.model)">
<v-icon small color="grey lighten-1">info</v-icon>
<v-icon small color="grey">mdi-information-outline</v-icon>
</v-btn>
<v-btn icon @click.stop="popModelDelete(item.model)">
<v-icon small color="grey lighten-1">delete</v-icon>
<v-icon small color="grey">mdi-trash-can-outline</v-icon>
</v-btn>
</span>
</v-list-item-action>
@ -116,7 +116,7 @@
<v-list-item-action>
<span class="group">
<v-btn icon @click="popMaterialDelete(item.id)">
<v-icon small color="grey lighten-1">delete</v-icon>
<v-icon small color="grey">mdi-trash-can-outline</v-icon>
</v-btn>
</span>
</v-list-item-action>

View File

@ -1,22 +1,30 @@
<template>
<v-row justify="center">
<v-dialog v-model="show" max-width="280">
<v-dialog v-model="show" max-width="250">
<v-card>
<DialogHeading title="Quit Editor">
<DialogHeading title="Exit Editor">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="my-0 pb-0 pt-2">
Abandon changes and return to the catalog list?
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn flat @click="show = false">Back to editing</v-btn>
<v-btn flat href="/catalogs">Quit</v-btn>
<v-btn
small
class="mb-2"
@click="show = false">Cancel</v-btn>
<v-btn
color="primary"
class="black--text ml-4 mb-2"
small
href="/catalogs">Exit</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>
</v-dialog>

View File

@ -1,16 +1,16 @@
<template>
<v-row justify="center">
<v-dialog v-model="show" max-width="250">
<v-dialog v-model="show" max-width="300">
<v-card>
<DialogHeading title="Remove Material">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="pt-4 pb-2">
Really remove material from model?
<div class="subheading mt-2">
<div class="subheading black--text mt-2">
<span class="font-weight-medium">{{ id }}</span> {{ name }}
</div>
<div class="body">{{ color }}</div>
@ -18,8 +18,15 @@
<v-card-actions>
<v-spacer/>
<v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-btn
small
class="mb-2"
@click="show = false">Cancel</v-btn>
<v-btn
color="primary"
class="black--text ml-4 mb-2"
small
@click="doDelete()">OK</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>

View File

@ -1,24 +1,31 @@
<template>
<v-row justify="center">
<v-dialog v-model="show" max-width="250">
<v-dialog v-model="show" max-width="300">
<v-card>
<DialogHeading title="Remove Model">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="pt-4 pb-2">
Really remove model from section?
<div class="subheading font-weight-medium mt-2">
<div class="subheading black--text font-weight-medium mt-2">
{{ name }}
</div>
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-btn
small
class="mb-2"
@click="show = false">Cancel</v-btn>
<v-btn
color="primary"
class="black--text ml-4 mb-2"
small
@click="doDelete()">OK</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>

View File

@ -4,18 +4,22 @@
<v-card>
<DialogHeading title="Model Info">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="pt-2 pb-0">
<v-text-field v-model="name" label="Name" required/>
{{ modelMaterialCount }} {{ modelMaterialCount | pluralize('material') }}
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn color="primary" text @click="show = false">OK</v-btn>
<v-btn
color="primary"
small
class="black--text mb-2"
@click="show = false">OK</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>

View File

@ -1,24 +1,31 @@
<template>
<v-row justify="center">
<v-dialog v-model="show" max-width="250">
<v-dialog v-model="show" max-width="300">
<v-card>
<DialogHeading title="Delete Section">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="pt-4 pb-2">
Really delete catalog section?
<div class="subheading font-weight-medium mt-2">
<div class="subheading black--text font-weight-medium mt-2">
{{ name }}
</div>
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-btn
small
class="mb-2"
@click="show = false">Cancel</v-btn>
<v-btn
color="primary"
class="black--text ml-4 mb-2"
small
@click="doDelete()">OK</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>

View File

@ -4,11 +4,11 @@
<v-card>
<DialogHeading title="Section Info">
<v-btn icon class="ma-0 pa-0" @click="show = false">
<v-icon color="white">clear</v-icon>
<v-icon color="white">mdi-close</v-icon>
</v-btn>
</DialogHeading>
<v-card-text>
<v-card-text class="pt-2 pb-0">
<v-text-field v-model="name" label="Name" required/>
{{ sectionModelCount }} {{ sectionModelCount | pluralize('model') }}<br>
{{ sectionMaterialCount }} {{ sectionMaterialCount | pluralize('material') }}
@ -16,7 +16,11 @@
<v-card-actions>
<v-spacer/>
<v-btn color="primary" text @click="show = false">OK</v-btn>
<v-btn
color="primary"
small
class="black--text mb-2"
@click="show = false">OK</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>

View File

@ -10,7 +10,6 @@
<link href="{% static 'img/favicon.ico' %}" rel="shortcut icon" />
<title>ProCatalog Editor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
{{ catalogID | json_script:"catalogID" }}
{{ regions | json_script:"regions" }}
{{ seasons | json_script:"seasons" }}