sketch out stepper version of catedit ui
This commit is contained in:
Seth Ladygo
@ -1,35 +1,23 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-toolbar app>
|
||||
<v-toolbar-title class="headline text-uppercase">
|
||||
<span>ProCatalog</span>
|
||||
<span class="font-weight-light">Catalog Edior</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items class="hidden-sm-and-down">
|
||||
<v-btn
|
||||
flat
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
>Dashboard</v-btn>
|
||||
<v-btn flat>Link Two</v-btn>
|
||||
<v-btn flat>Link Three</v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
|
||||
<Navbar/>
|
||||
|
||||
<v-content>
|
||||
<HelloWorld/>
|
||||
</v-content>
|
||||
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from './components/Navbar'
|
||||
import HelloWorld from './components/HelloWorld'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
Navbar,
|
||||
HelloWorld
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
53
cateditor/src/components/CatalogContents.vue
Normal file
53
cateditor/src/components/CatalogContents.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout column>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex d-flex shrink>
|
||||
<v-select :items="seasons" v-model="season" label="Season"></v-select>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-select :items="regions" v-model="region" label="Region"></v-select>
|
||||
</v-flex>
|
||||
<v-flex d-flex grow>
|
||||
<v-text-field v-model="name" label="Catalog name" required></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Public"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Show prices"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Region master"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="I forget"></v-checkbox>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<!-- TODO: email selects -->
|
||||
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
seasons: [ 'SS19', 'FW19', 'SS20' ],
|
||||
regions: [ 'US', 'Canada', 'Mexico' ],
|
||||
season: null,
|
||||
region: null,
|
||||
name: null,
|
||||
ispublic: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
53
cateditor/src/components/CatalogInfo.vue
Normal file
53
cateditor/src/components/CatalogInfo.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<v-container fluid grid-list-lg>
|
||||
<v-layout column>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex d-flex shrink>
|
||||
<v-select :items="seasons" v-model="season" label="Season"></v-select>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-select :items="regions" v-model="region" label="Region"></v-select>
|
||||
</v-flex>
|
||||
<v-flex d-flex grow>
|
||||
<v-text-field v-model="name" label="Catalog name" required></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Public"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Show prices"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="Region master"></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex d-flex shrink>
|
||||
<v-checkbox v-model="ispublic" label="I forget"></v-checkbox>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<!-- TODO: email selects -->
|
||||
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
seasons: [ 'SS19', 'FW19', 'SS20' ],
|
||||
regions: [ 'US', 'Canada', 'Mexico' ],
|
||||
season: null,
|
||||
region: null,
|
||||
name: null,
|
||||
ispublic: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,145 +1,62 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout
|
||||
text-xs-center
|
||||
wrap
|
||||
>
|
||||
<v-flex xs12>
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
></v-img>
|
||||
</v-flex>
|
||||
<v-stepper v-model="step">
|
||||
<v-stepper-header>
|
||||
<v-stepper-step :complete="step > 1" step="1">Catalog info</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step :complete="step > 2" step="2">Contents</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step step="3">Pagination</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-flex mb-4>
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1">
|
||||
<CatalogInfo/>
|
||||
<v-btn flat>Cancel</v-btn>
|
||||
<v-btn @click="step = 1" disabled="true">Back</v-btn>
|
||||
<v-btn @click="step = 2" color="primary">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-flex
|
||||
mb-5
|
||||
xs12
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
|
||||
<v-stepper-content step="2">
|
||||
<CatalogContents/>
|
||||
<v-btn flat>Cancel</v-btn>
|
||||
<v-btn @click="step = 1">Back</v-btn>
|
||||
<v-btn @click="step = 3" color="primary">Next</v-btn>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-stepper-content step="3">
|
||||
<v-card
|
||||
class="mb-5"
|
||||
color="grey lighten-1"
|
||||
height="200px"
|
||||
></v-card>
|
||||
|
||||
<v-flex
|
||||
xs12
|
||||
mb-5
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
xs12
|
||||
mb-5
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
|
||||
|
||||
<v-layout justify-center>
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-btn flat>Cancel</v-btn>
|
||||
<v-btn @click="step = 2">Back</v-btn>
|
||||
<v-btn color="primary">Done</v-btn>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader'
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify'
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify'
|
||||
}
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs'
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify'
|
||||
}
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer'
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/layout/pre-defined'
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
|
||||
}
|
||||
import CatalogInfo from './CatalogInfo'
|
||||
import CatalogContents from './CatalogContents'
|
||||
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
CatalogInfo,
|
||||
CatalogContents
|
||||
},
|
||||
data: () => ({
|
||||
/* seasons: [ 'SS19', 'FW19', 'SS20' ],
|
||||
* regions: [ 'US', 'Canada', 'Mexico' ],
|
||||
* season: null,
|
||||
* region: null,
|
||||
* name: null, */
|
||||
/* ispublic: true, */
|
||||
step: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
30
cateditor/src/components/Navbar.vue
Normal file
30
cateditor/src/components/Navbar.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<v-toolbar dark dense app>
|
||||
<v-toolbar-title class="headline text-uppercase">
|
||||
<span>ProCatalog</span>
|
||||
<span class="font-weight-light">Catalog Editor</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items class="hidden-sm-and-down">
|
||||
<v-btn
|
||||
flat
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
>Dashboard</v-btn>
|
||||
<v-btn flat>Link Two</v-btn>
|
||||
<v-btn flat>Link Three</v-btn>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
foo: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user