Skip to content

Commit

Permalink
feat(ui): ProjectCreate prompts tab
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume Chau committed Mar 7, 2018
1 parent ee59f54 commit 239c4d4
Show file tree
Hide file tree
Showing 31 changed files with 792 additions and 148 deletions.
34 changes: 32 additions & 2 deletions packages/@vue/cli-ui/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,40 @@
<template>
<div id="app">
<router-view/>
<div id="app" class="app">
<div class="content">
<router-view/>
</div>

<StatusBar/>
</div>
</template>

<script>
import StatusBar from './components/StatusBar'
export default {
components: {
StatusBar
}
}
</script>

<style lang="stylus">
@import "~@vue/ui/dist/vue-ui.css"
@import "~@/style/main"
</style>

<style lang="stylus" scoped>
@import "~@/style/imports"
.app
display grid
grid-template-columns 1fr
grid-template-rows auto 28px
grid-template-areas "content" "status"
.content
grid-area content
.status-bar
grid-area status
</style>
4 changes: 2 additions & 2 deletions packages/@vue/cli-ui/src/components/FolderExplorer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@ export default {
@import "~@/style/imports"
.toolbar
padding 12px
padding $padding-item
background $color-light-background
h-box()
align-items center
>>> > *
space-between-x(12px)
space-between-x($padding-item)
.current-path
flex 100% 1 1
Expand Down
4 changes: 2 additions & 2 deletions packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default {
.folder-name
flex 100% 1 1
margin-left 12px
margin-left $padding-item
ellipsis()
.vue-project-icon
Expand All @@ -44,7 +44,7 @@ export default {
top 5px
.foder-explorer-item
padding 12px
padding $padding-item
h-box()
align-items center
user-select none
Expand Down
62 changes: 62 additions & 0 deletions packages/@vue/cli-ui/src/components/ListItemInfo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<div
class="list-item-info"
:class="{
selected
}"
>
<div class="name">{{ name }}</div>
<div v-if="description || link" class="description">
{{ description }}
<a
v-if="link"
:href="link"
target="_blank"
@click.stop="() => {}"
>
More info
</a>
</div>
</div>
</template>

<script>
export default {
props: {
description: {
type: String,
default: ''
},
link: {
type: String,
default: null
},
name: {
type: String,
required: true
},
selected: {
type: Boolean,
default: false
}
}
}
</script>

<style lang="stylus" scoped>
@import "~@/style/imports"
.list-item-info
v-box()
align-items stretch
.description
color lighten($vue-color-dark, 40%)
&.selected
.name
color $vue-color-primary
</style>
57 changes: 15 additions & 42 deletions packages/@vue/cli-ui/src/components/ProjectFeatureItem.vue
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
<template>
<div
class="project-feature-item"
class="project-feature-item list-item"
:class="{
enabled: feature.enabled
selected: feature.enabled
}"
>
<VueSwitch
:value="feature.enabled"
class="extend-left"
>
<div class="content">
<div class="name">{{ feature.name }}</div>
<div class="description">
{{ feature.description }}
<a
v-if="feature.link"
:href="feature.link"
target="_blank"
@click.stop="() => {}"
>
More info
</a>
</div>
</div>
<ListItemInfo
:name="feature.name"
:description="feature.description"
:link="feature.link"
:selected="feature.enabled"
/>
</VueSwitch>
</div>
</template>

<script>
import ListItemInfo from './ListItemInfo'
export default {
components: {
ListItemInfo
},
props: {
feature: {
type: Object,
Expand All @@ -42,33 +40,8 @@ export default {
@import "~@/style/imports"
.project-feature-item
user-select none
cursor pointer
.vue-switch
padding 12px
padding $padding-item
width 100%
box-sizing border-box
.content
display grid
grid-template-columns 1fr
grid-template-rows repeat(2, 24px)
grid-template-areas "name" "description"
.name
grid-area name
.description
grid-area description
color lighten($vue-color-dark, 40%)
&.enabled
background rgba($vue-color-primary, .05)
.name
color $vue-color-primary
&:hover
background rgba($vue-color-primary, .1)
</style>
39 changes: 19 additions & 20 deletions packages/@vue/cli-ui/src/components/ProjectPresetItem.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="project-preset-item"
class="project-preset-item list-item"
:class="{
selected
}"
Expand All @@ -14,14 +14,25 @@
class="medium"
/>
</div>
<div class="name">{{ preset.name }}</div>
<div class="description">{{ preset.description }}</div>

<ListItemInfo
:name="preset.name"
:description="preset.description"
:link="preset.link"
:selected="selected"
/>
</div>
</div>
</template>

<script>
import ListItemInfo from './ListItemInfo'
export default {
components: {
ListItemInfo
},
props: {
preset: {
type: Object,
Expand All @@ -40,38 +51,26 @@ export default {
@import "~@/style/imports"
.project-preset-item
padding 12px
padding $padding-item
padding-left 0
user-select none
cursor pointer
.content
display grid
grid-template-columns 64px auto
grid-template-rows repeat(2, 24px)
grid-template-areas "icon name" "icon description"
grid-template-rows auto
grid-template-areas "icon info"
.radio-icon
h-box()
box-center()
grid-area icon
.name
grid-area name
.description
grid-area description
color lighten($vue-color-dark, 40%)
.list-item-info
grid-area info
&.selected
background rgba($vue-color-primary, .05)
.radio-icon
>>> svg
fill $vue-color-primary
.name
color $vue-color-primary
&:hover
background rgba($vue-color-primary, .1)
</style>
48 changes: 48 additions & 0 deletions packages/@vue/cli-ui/src/components/Prompt.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<script>
import ListItemInfo from './ListItemInfo.vue'
export default {
components: {
ListItemInfo
},
props: {
prompt: {
type: Object,
required: true
}
},
methods: {
value (value) {
return JSON.parse(value)
},
answer (value) {
this.$emit('answer', value)
}
}
}
</script>

<style lang="stylus">
@import "~@/style/imports"
.prompt
list-item()
.prompt-content
display grid
grid-template-columns auto 300px
grid-template-rows auto
grid-template-areas "info input"
padding $padding-item
> .list-item-info
grid-area info
> .prompt-input
grid-area input
v-box()
align-items stretch
justify-content center
</style>
Loading

0 comments on commit 239c4d4

Please sign in to comment.