cat editor: updates for vuetify 2
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="show" width="280">
|
||||
<v-card>
|
||||
|
||||
@ -25,9 +25,9 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn small flat @click="show = false">Cancel</v-btn>
|
||||
<v-btn small text @click="show = false">Cancel</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn small flat color="primary" @click="doAdd()">Add</v-btn>
|
||||
<v-btn small text color="primary" @click="doAdd()">Add</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="show" width="300">
|
||||
<v-form v-model="valid">
|
||||
<v-card>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-lg ma-0 pa-1>
|
||||
<v-container fluid>
|
||||
|
||||
<v-layout row fill-height>
|
||||
<v-row class="fill-height">
|
||||
<v-btn @click="showAddProductDialog = true">Add products</v-btn>
|
||||
</v-layout>
|
||||
</v-row>
|
||||
|
||||
<v-layout row fill-height>
|
||||
<v-flex xs4>
|
||||
<v-row class="fill-height">
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<DragListHeading title="Sections">
|
||||
<v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
|
||||
@ -17,7 +17,7 @@
|
||||
<div id="sections" class="list-group">
|
||||
<div v-for="item in catalog.sections" :key="item.id">
|
||||
<v-hover :key="item.id">
|
||||
<v-list-tile
|
||||
<v-list-item
|
||||
slot-scope="{ hover }"
|
||||
:class="sectionListItemClasses(item.id, hover)"
|
||||
@click="selectSection(item.id)"
|
||||
@ -25,18 +25,18 @@
|
||||
<!-- 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-title v-html="item.name"></v-list-tile-title>
|
||||
<v-list-tile-sub-title
|
||||
<v-list-item-content class="section-parent">
|
||||
<v-list-item-title v-html="item.name"></v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
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-content>
|
||||
</v-list-item-subtitle>
|
||||
<v-list-item-subtitle class="section-drop" :section-id="item.id"></v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-tile-action>
|
||||
<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>
|
||||
@ -45,37 +45,37 @@
|
||||
<v-icon small color="grey lighten-1">delete</v-icon>
|
||||
</v-btn>
|
||||
</span>
|
||||
</v-list-tile-action>
|
||||
</v-list-item-action>
|
||||
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
</v-hover>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-col>
|
||||
|
||||
<v-flex xs4>
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<DragListHeading title="Models" />
|
||||
|
||||
<div id="models" class="list-group">
|
||||
<div v-for="item in selectedModels" :key="item.model">
|
||||
<v-hover :key="item.model">
|
||||
<v-list-tile
|
||||
<v-list-item
|
||||
slot-scope="{ hover }"
|
||||
:class="modelListItemClasses(item.model, hover)"
|
||||
@click="selectModel(item.model)"
|
||||
>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="item.name"></v-list-tile-title>
|
||||
<v-list-tile-sub-title
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="item.name"></v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
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-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-tile-action>
|
||||
<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>
|
||||
@ -84,48 +84,47 @@
|
||||
<v-icon small color="grey lighten-1">delete</v-icon>
|
||||
</v-btn>
|
||||
</span>
|
||||
</v-list-tile-action>
|
||||
</v-list-item-action>
|
||||
|
||||
</v-list-tile>
|
||||
</v-list-item>
|
||||
</v-hover>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-col>
|
||||
|
||||
<v-flex xs4>
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<DragListHeading title="Materials" />
|
||||
|
||||
<div id="materials" class="list-group">
|
||||
<div v-for="item in selectedMaterials" :key="item.id">
|
||||
<v-hover :key="item.id">
|
||||
<v-list-tile
|
||||
<v-list-item
|
||||
@click="selectMaterial(item.id)"
|
||||
slot-scope="{ hover }"
|
||||
:class="materialListItemClasses(item.id, hover)"
|
||||
>
|
||||
<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-item-content>
|
||||
<v-list-item-title><b>{{ item.id }}</b> {{ item.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle v-html="item.color"></v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-tile-action>
|
||||
<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-btn>
|
||||
</span>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-hover>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
</v-row>
|
||||
|
||||
<AddProductDialog v-model="showAddProductDialog"/>
|
||||
<AddSectionDialog v-model="showAddSectionDialog"/>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<v-stepper-content step="1">
|
||||
<CatalogInfo/>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="popExit()">Cancel</v-btn>
|
||||
<v-btn text @click="popExit()">Cancel</v-btn>
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
@click="step = 2"
|
||||
@ -27,7 +27,7 @@
|
||||
<v-stepper-content step="2">
|
||||
<CatalogContents/>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="popExit()">Cancel</v-btn>
|
||||
<v-btn text @click="popExit()">Cancel</v-btn>
|
||||
<v-btn @click="step = 1">Back</v-btn>
|
||||
<!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> -->
|
||||
<v-btn
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<!-- <v-stepper-content step="3">
|
||||
<CatalogPagination/>
|
||||
<v-btn flat>Cancel</v-btn>
|
||||
<v-btn text>Cancel</v-btn>
|
||||
<v-btn @click="step = 2">Back</v-btn>
|
||||
<v-btn color="primary" class="black--text">Save</v-btn>
|
||||
</v-stepper-content> -->
|
||||
@ -54,7 +54,7 @@
|
||||
multi-line top :timeout="10000">
|
||||
This is a public catalog.<br/>
|
||||
Changes will be saved in a new catalog that you own.
|
||||
<v-btn dark flat @click="showPublicNotice = false">Close</v-btn>
|
||||
<v-btn dark text @click="showPublicNotice = false">Close</v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
</v-form>
|
||||
|
||||
@ -1,16 +1,8 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-sm>
|
||||
<v-container fluid>
|
||||
|
||||
<!--
|
||||
<v-layout row>
|
||||
<v-flex xs8>
|
||||
<h2>Catalog Info</h2>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
-->
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs8>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="name"
|
||||
label="Catalog name"
|
||||
@ -19,11 +11,11 @@
|
||||
class="headline font-weight-medium"
|
||||
height="30px"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs4>
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<v-select
|
||||
v-model="season"
|
||||
:items="seasons"
|
||||
@ -31,8 +23,8 @@
|
||||
item-text="name"
|
||||
:rules="[rules.required]"
|
||||
label="Season"></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-select
|
||||
v-model="region"
|
||||
:items="regions"
|
||||
@ -42,11 +34,11 @@
|
||||
label="Region"
|
||||
class="pl-4"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs8>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:rules="[rules.emailRules]"
|
||||
@ -54,29 +46,29 @@
|
||||
hint="Get notified when the catalog PDF is done"
|
||||
persistent-hint
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs4>
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<v-checkbox
|
||||
v-model="isPublic"
|
||||
label="Public"
|
||||
></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-checkbox v-model="prices" label="Show prices"></v-checkbox>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex xs4 v-if="isAdmin">
|
||||
<v-row>
|
||||
<v-col cols="4" v-if="isAdmin">
|
||||
<v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex xs4 v-if="isAdmin">
|
||||
</v-col>
|
||||
<v-col cols="4" v-if="isAdmin">
|
||||
<v-checkbox v-model="master" label="Region master"></v-checkbox>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-row justify="center">
|
||||
<v-dialog v-model="show" max-width="280">
|
||||
<v-card>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-row justify="center">
|
||||
<v-dialog v-model="show" max-width="250">
|
||||
<v-card>
|
||||
<DialogHeading title="Remove Material">
|
||||
@ -18,13 +18,13 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" flat @click="doDelete()">OK</v-btn>
|
||||
<v-btn text @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-row justify="center">
|
||||
<v-dialog v-model="show" max-width="250">
|
||||
<v-card>
|
||||
<DialogHeading title="Remove Model">
|
||||
@ -17,13 +17,13 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" flat @click="doDelete()">OK</v-btn>
|
||||
<v-btn text @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="show" width="250">
|
||||
<v-card>
|
||||
<DialogHeading title="Model Info">
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click="show = false">OK</v-btn>
|
||||
<v-btn color="primary" text @click="show = false">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-row justify="center">
|
||||
<v-dialog v-model="show" max-width="250">
|
||||
<v-card>
|
||||
<DialogHeading title="Delete Section">
|
||||
@ -17,13 +17,13 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn flat @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" flat @click="doDelete()">OK</v-btn>
|
||||
<v-btn text @click="show = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="doDelete()">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<v-dialog v-model="show" width="250">
|
||||
<v-card>
|
||||
<DialogHeading title="Section Info">
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click="show = false">OK</v-btn>
|
||||
<v-btn color="primary" text @click="show = false">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import './../../plugins/vuetify'
|
||||
import Vuetify from 'vuetify/lib'
|
||||
import Vue2Filters from 'vue2-filters'
|
||||
import App from './App.vue'
|
||||
import { store } from './store'
|
||||
@ -7,8 +7,35 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(Vue2Filters)
|
||||
Vue.use(Vuetify)
|
||||
|
||||
const opts = {
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
primary: '#fdd02f',
|
||||
keen_yellow: '#fddd04',
|
||||
keen_dark_grey: '#373737',
|
||||
keen_light_grey: '#bababa',
|
||||
secondary: '#424242',
|
||||
accent: '#82B1FF',
|
||||
error: '#FF5252',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FFC107'
|
||||
},
|
||||
},
|
||||
},
|
||||
options: {
|
||||
customProperties: true
|
||||
},
|
||||
// icons: {
|
||||
// iconfont: 'md',
|
||||
// },
|
||||
}
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
render: h => h(App)
|
||||
render: h => h(App),
|
||||
vuetify: new Vuetify(opts)
|
||||
}).$mount('#app')
|
||||
|
||||
Reference in New Issue
Block a user