sketch out stepper version of catedit ui
This commit is contained in:
Seth Ladygo
@ -1,35 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-toolbar app>
|
<Navbar/>
|
||||||
<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>
|
|
||||||
|
|
||||||
<v-content>
|
<v-content>
|
||||||
<HelloWorld/>
|
<HelloWorld/>
|
||||||
</v-content>
|
</v-content>
|
||||||
|
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Navbar from './components/Navbar'
|
||||||
import HelloWorld from './components/HelloWorld'
|
import HelloWorld from './components/HelloWorld'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
HelloWorld
|
Navbar,
|
||||||
|
HelloWorld
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
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>
|
<template>
|
||||||
<v-container>
|
<v-stepper v-model="step">
|
||||||
<v-layout
|
<v-stepper-header>
|
||||||
text-xs-center
|
<v-stepper-step :complete="step > 1" step="1">Catalog info</v-stepper-step>
|
||||||
wrap
|
<v-divider></v-divider>
|
||||||
>
|
<v-stepper-step :complete="step > 2" step="2">Contents</v-stepper-step>
|
||||||
<v-flex xs12>
|
<v-divider></v-divider>
|
||||||
<v-img
|
<v-stepper-step step="3">Pagination</v-stepper-step>
|
||||||
:src="require('../assets/logo.svg')"
|
</v-stepper-header>
|
||||||
class="my-3"
|
|
||||||
contain
|
|
||||||
height="200"
|
|
||||||
></v-img>
|
|
||||||
</v-flex>
|
|
||||||
|
|
||||||
<v-flex mb-4>
|
<v-stepper-items>
|
||||||
<h1 class="display-2 font-weight-bold mb-3">
|
<v-stepper-content step="1">
|
||||||
Welcome to Vuetify
|
<CatalogInfo/>
|
||||||
</h1>
|
<v-btn flat>Cancel</v-btn>
|
||||||
<p class="subheading font-weight-regular">
|
<v-btn @click="step = 1" disabled="true">Back</v-btn>
|
||||||
For help and collaboration with other Vuetify developers,
|
<v-btn @click="step = 2" color="primary">Next</v-btn>
|
||||||
<br>please join our online
|
</v-stepper-content>
|
||||||
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
|
|
||||||
</p>
|
|
||||||
</v-flex>
|
|
||||||
|
|
||||||
<v-flex
|
<v-stepper-content step="2">
|
||||||
mb-5
|
<CatalogContents/>
|
||||||
xs12
|
<v-btn flat>Cancel</v-btn>
|
||||||
>
|
<v-btn @click="step = 1">Back</v-btn>
|
||||||
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
|
<v-btn @click="step = 3" color="primary">Next</v-btn>
|
||||||
|
</v-stepper-content>
|
||||||
|
|
||||||
<v-layout justify-center>
|
<v-stepper-content step="3">
|
||||||
<a
|
<v-card
|
||||||
v-for="(next, i) in whatsNext"
|
class="mb-5"
|
||||||
:key="i"
|
color="grey lighten-1"
|
||||||
:href="next.href"
|
height="200px"
|
||||||
class="subheading mx-3"
|
></v-card>
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ next.text }}
|
|
||||||
</a>
|
|
||||||
</v-layout>
|
|
||||||
</v-flex>
|
|
||||||
|
|
||||||
<v-flex
|
<v-btn flat>Cancel</v-btn>
|
||||||
xs12
|
<v-btn @click="step = 2">Back</v-btn>
|
||||||
mb-5
|
<v-btn color="primary">Done</v-btn>
|
||||||
>
|
</v-stepper-content>
|
||||||
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
|
</v-stepper-items>
|
||||||
|
</v-stepper>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import CatalogInfo from './CatalogInfo'
|
||||||
data: () => ({
|
import CatalogContents from './CatalogContents'
|
||||||
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'
|
|
||||||
}
|
|
||||||
|
|
||||||
]
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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