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

cat editor: updates for vuetify 2

Browse Source
This commit is contained in:
Seth Ladygo
2019-10-01 22:40:07 -07:00
parent a6052d69d4
commit e6e060da80
12 changed files with 120 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cateditor/src/components/AddProductDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="text-xs-center"> <div class="text-center">
<v-dialog v-model="show" width="280"> <v-dialog v-model="show" width="280">
<v-card> <v-card>
@ -25,9 +25,9 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <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-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-spacer></v-spacer>
</v-card-actions> </v-card-actions>

2
cateditor/src/components/AddSectionDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="text-xs-center"> <div class="text-center">
<v-dialog v-model="show" width="300"> <v-dialog v-model="show" width="300">
<v-form v-model="valid"> <v-form v-model="valid">
<v-card> <v-card>

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

@ -1,12 +1,12 @@
<template> <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-btn @click="showAddProductDialog = true">Add products</v-btn>
</v-layout> </v-row>
<v-layout row fill-height> <v-row class="fill-height">
<v-flex xs4> <v-col cols="4">
<v-card> <v-card>
<DragListHeading title="Sections"> <DragListHeading title="Sections">
<v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0"> <v-btn @click="showAddSectionDialog = true" icon class="ma-0 pa-0">
@ -17,7 +17,7 @@
<div id="sections" class="list-group"> <div id="sections" class="list-group">
<div v-for="item in catalog.sections" :key="item.id"> <div v-for="item in catalog.sections" :key="item.id">
<v-hover :key="item.id"> <v-hover :key="item.id">
<v-list-tile <v-list-item
slot-scope="{ hover }" slot-scope="{ hover }"
:class="sectionListItemClasses(item.id, hover)" :class="sectionListItemClasses(item.id, hover)"
@click="selectSection(item.id)" @click="selectSection(item.id)"
@ -25,18 +25,18 @@
<!-- TODO try move sectionparent into v-list-title <!-- TODO try move sectionparent into v-list-title
and so section-drop can cover all interior and so section-drop can cover all interior
--> -->
<v-list-tile-content class="section-parent"> <v-list-item-content class="section-parent">
<v-list-tile-title v-html="item.name"></v-list-tile-title> <v-list-item-title v-html="item.name"></v-list-item-title>
<v-list-tile-sub-title <v-list-item-subtitle
class="caption font-weight-light" class="caption font-weight-light"
color="grey lighten-2" color="grey lighten-2"
> >
{{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }} {{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
</v-list-tile-sub-title> </v-list-item-subtitle>
<v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title> <v-list-item-subtitle class="section-drop" :section-id="item.id"></v-list-item-subtitle>
</v-list-tile-content> </v-list-item-content>
<v-list-tile-action> <v-list-item-action>
<span class="group"> <span class="group">
<v-btn icon @click.stop="popSectionInfo(item.id)"> <v-btn icon @click.stop="popSectionInfo(item.id)">
<v-icon small color="grey lighten-1">info</v-icon> <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-icon small color="grey lighten-1">delete</v-icon>
</v-btn> </v-btn>
</span> </span>
</v-list-tile-action> </v-list-item-action>
</v-list-tile> </v-list-item>
</v-hover> </v-hover>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-flex> </v-col>
<v-flex xs4> <v-col cols="4">
<v-card> <v-card>
<DragListHeading title="Models" /> <DragListHeading title="Models" />
<div id="models" class="list-group"> <div id="models" class="list-group">
<div v-for="item in selectedModels" :key="item.model"> <div v-for="item in selectedModels" :key="item.model">
<v-hover :key="item.model"> <v-hover :key="item.model">
<v-list-tile <v-list-item
slot-scope="{ hover }" slot-scope="{ hover }"
:class="modelListItemClasses(item.model, hover)" :class="modelListItemClasses(item.model, hover)"
@click="selectModel(item.model)" @click="selectModel(item.model)"
> >
<v-list-tile-content> <v-list-item-content>
<v-list-tile-title v-html="item.name"></v-list-tile-title> <v-list-item-title v-html="item.name"></v-list-item-title>
<v-list-tile-sub-title <v-list-item-subtitle
class="caption font-weight-light" class="caption font-weight-light"
color="grey lighten-2"> color="grey lighten-2">
{{item.ids.length}} {{item.ids.length | pluralize('material') }} {{item.ids.length}} {{item.ids.length | pluralize('material') }}
</v-list-tile-sub-title> </v-list-item-subtitle>
</v-list-tile-content> </v-list-item-content>
<v-list-tile-action> <v-list-item-action>
<span class="group"> <span class="group">
<v-btn icon @click.stop="popModelInfo(item.model)"> <v-btn icon @click.stop="popModelInfo(item.model)">
<v-icon small color="grey lighten-1">info</v-icon> <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-icon small color="grey lighten-1">delete</v-icon>
</v-btn> </v-btn>
</span> </span>
</v-list-tile-action> </v-list-item-action>
</v-list-tile> </v-list-item>
</v-hover> </v-hover>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-flex> </v-col>
<v-flex xs4> <v-col cols="4">
<v-card> <v-card>
<DragListHeading title="Materials" /> <DragListHeading title="Materials" />
<div id="materials" class="list-group"> <div id="materials" class="list-group">
<div v-for="item in selectedMaterials" :key="item.id"> <div v-for="item in selectedMaterials" :key="item.id">
<v-hover :key="item.id"> <v-hover :key="item.id">
<v-list-tile <v-list-item
@click="selectMaterial(item.id)" @click="selectMaterial(item.id)"
slot-scope="{ hover }" slot-scope="{ hover }"
:class="materialListItemClasses(item.id, hover)" :class="materialListItemClasses(item.id, hover)"
> >
<v-list-tile-content> <v-list-item-content>
<v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title> <v-list-item-title><b>{{ item.id }}</b> {{ item.name }}</v-list-item-title>
<v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title> <v-list-item-subtitle v-html="item.color"></v-list-item-subtitle>
</v-list-tile-content> </v-list-item-content>
<v-list-tile-action> <v-list-item-action>
<span class="group"> <span class="group">
<v-btn icon @click="popMaterialDelete(item.id)"> <v-btn icon @click="popMaterialDelete(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-item-action>
</v-list-tile> </v-list-item>
</v-hover> </v-hover>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-col>
</v-flex> </v-row>
</v-layout>
<AddProductDialog v-model="showAddProductDialog"/> <AddProductDialog v-model="showAddProductDialog"/>
<AddSectionDialog v-model="showAddSectionDialog"/> <AddSectionDialog v-model="showAddSectionDialog"/>

8
cateditor/src/components/CatalogEditor.vue
View File

@ -16,7 +16,7 @@
<v-stepper-content step="1"> <v-stepper-content step="1">
<CatalogInfo/> <CatalogInfo/>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat @click="popExit()">Cancel</v-btn> <v-btn text @click="popExit()">Cancel</v-btn>
<v-btn <v-btn
:disabled="!valid" :disabled="!valid"
@click="step = 2" @click="step = 2"
@ -27,7 +27,7 @@
<v-stepper-content step="2"> <v-stepper-content step="2">
<CatalogContents/> <CatalogContents/>
<v-spacer></v-spacer> <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 = 1">Back</v-btn>
<!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> --> <!-- <v-btn @click="step = 3" color="primary" class="black--text">Next</v-btn> -->
<v-btn <v-btn
@ -40,7 +40,7 @@
<!-- <v-stepper-content step="3"> <!-- <v-stepper-content step="3">
<CatalogPagination/> <CatalogPagination/>
<v-btn flat>Cancel</v-btn> <v-btn text>Cancel</v-btn>
<v-btn @click="step = 2">Back</v-btn> <v-btn @click="step = 2">Back</v-btn>
<v-btn color="primary" class="black--text">Save</v-btn> <v-btn color="primary" class="black--text">Save</v-btn>
</v-stepper-content> --> </v-stepper-content> -->
@ -54,7 +54,7 @@
multi-line top :timeout="10000"> multi-line top :timeout="10000">
This is a public catalog.<br/> This is a public catalog.<br/>
Changes will be saved in a new catalog that you own. 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-snackbar>
</v-form> </v-form>

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

@ -1,16 +1,8 @@
<template> <template>
<v-container fluid grid-list-sm> <v-container fluid>
<!-- <v-row>
<v-layout row> <v-col cols="8">
<v-flex xs8>
<h2>Catalog Info</h2>
</v-flex>
</v-layout>
-->
<v-layout row>
<v-flex xs8>
<v-text-field <v-text-field
v-model="name" v-model="name"
label="Catalog name" label="Catalog name"
@ -19,11 +11,11 @@
class="headline font-weight-medium" class="headline font-weight-medium"
height="30px" height="30px"
></v-text-field> ></v-text-field>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout row> <v-row>
<v-flex xs4> <v-col cols="4">
<v-select <v-select
v-model="season" v-model="season"
:items="seasons" :items="seasons"
@ -31,8 +23,8 @@
item-text="name" item-text="name"
:rules="[rules.required]" :rules="[rules.required]"
label="Season"></v-select> label="Season"></v-select>
</v-flex> </v-col>
<v-flex xs4> <v-col cols="4">
<v-select <v-select
v-model="region" v-model="region"
:items="regions" :items="regions"
@ -42,11 +34,11 @@
label="Region" label="Region"
class="pl-4" class="pl-4"
></v-select> ></v-select>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout row> <v-row>
<v-flex xs8> <v-col cols="8">
<v-text-field <v-text-field
v-model="email" v-model="email"
:rules="[rules.emailRules]" :rules="[rules.emailRules]"
@ -54,29 +46,29 @@
hint="Get notified when the catalog PDF is done" hint="Get notified when the catalog PDF is done"
persistent-hint persistent-hint
></v-text-field> ></v-text-field>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout row> <v-row>
<v-flex xs4> <v-col cols="4">
<v-checkbox <v-checkbox
v-model="isPublic" v-model="isPublic"
label="Public" label="Public"
></v-checkbox> ></v-checkbox>
</v-flex> </v-col>
<v-flex xs4> <v-col cols="4">
<v-checkbox v-model="prices" label="Show prices"></v-checkbox> <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
</v-flex> </v-col>
</v-layout> </v-row>
<v-layout row> <v-row>
<v-flex xs4 v-if="isAdmin"> <v-col cols="4" v-if="isAdmin">
<v-checkbox v-model="utility" label="Is Utility?"></v-checkbox> <v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
</v-flex> </v-col>
<v-flex xs4 v-if="isAdmin"> <v-col cols="4" v-if="isAdmin">
<v-checkbox v-model="master" label="Region master"></v-checkbox> <v-checkbox v-model="master" label="Region master"></v-checkbox>
</v-flex> </v-col>
</v-layout> </v-row>
</v-container> </v-container>
</template> </template>

4
cateditor/src/components/ExitEditorDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-layout row justify-center> <v-row justify="center">
<v-dialog v-model="show" max-width="280"> <v-dialog v-model="show" max-width="280">
<v-card> <v-card>
@ -20,7 +20,7 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-layout> </v-row>
</template> </template>
<script> <script>

8
cateditor/src/components/MaterialDeleteDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-layout row justify-center> <v-row justify="center">
<v-dialog v-model="show" max-width="250"> <v-dialog v-model="show" max-width="250">
<v-card> <v-card>
<DialogHeading title="Remove Material"> <DialogHeading title="Remove Material">
@ -18,13 +18,13 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat @click="show = false">Cancel</v-btn> <v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" flat @click="doDelete()">OK</v-btn> <v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-layout> </v-row>
</template> </template>
<script> <script>

8
cateditor/src/components/ModelDeleteDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-layout row justify-center> <v-row justify="center">
<v-dialog v-model="show" max-width="250"> <v-dialog v-model="show" max-width="250">
<v-card> <v-card>
<DialogHeading title="Remove Model"> <DialogHeading title="Remove Model">
@ -17,13 +17,13 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat @click="show = false">Cancel</v-btn> <v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" flat @click="doDelete()">OK</v-btn> <v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-layout> </v-row>
</template> </template>
<script> <script>

4
cateditor/src/components/ModelInfoDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="text-xs-center"> <div class="text-center">
<v-dialog v-model="show" width="250"> <v-dialog v-model="show" width="250">
<v-card> <v-card>
<DialogHeading title="Model Info"> <DialogHeading title="Model Info">
@ -15,7 +15,7 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <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-spacer></v-spacer>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

8
cateditor/src/components/SectionDeleteDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-layout row justify-center> <v-row justify="center">
<v-dialog v-model="show" max-width="250"> <v-dialog v-model="show" max-width="250">
<v-card> <v-card>
<DialogHeading title="Delete Section"> <DialogHeading title="Delete Section">
@ -17,13 +17,13 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat @click="show = false">Cancel</v-btn> <v-btn text @click="show = false">Cancel</v-btn>
<v-btn color="primary" flat @click="doDelete()">OK</v-btn> <v-btn color="primary" text @click="doDelete()">OK</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</v-layout> </v-row>
</template> </template>
<script> <script>

4
cateditor/src/components/SectionInfoDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="text-xs-center"> <div class="text-center">
<v-dialog v-model="show" width="250"> <v-dialog v-model="show" width="250">
<v-card> <v-card>
<DialogHeading title="Section Info"> <DialogHeading title="Section Info">
@ -16,7 +16,7 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <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-spacer></v-spacer>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

31
cateditor/src/pages/editor/main.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import './../../plugins/vuetify' import Vuetify from 'vuetify/lib'
import Vue2Filters from 'vue2-filters' import Vue2Filters from 'vue2-filters'
import App from './App.vue' import App from './App.vue'
import { store } from './store' import { store } from './store'
@ -7,8 +7,35 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(Vue2Filters) 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({ new Vue({
store, store,
render: h => h(App) render: h => h(App),
vuetify: new Vuetify(opts)
}).$mount('#app') }).$mount('#app')