Skip to content

Commit

Permalink
feat(ui): FolderExplorer favorites + Project select page
Browse files Browse the repository at this point in the history
  • Loading branch information
Guillaume Chau committed Mar 5, 2018
1 parent ae0d895 commit 376e4bb
Show file tree
Hide file tree
Showing 35 changed files with 623 additions and 162 deletions.
7 changes: 5 additions & 2 deletions packages/@vue/cli-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"apollo-link-context": "^1.0.5",
"apollo-link-http": "^1.0.0",
"apollo-link-persisted-queries": "^0.1.0",
"apollo-link-state": "^0.4.0",
"apollo-link-ws": "^1.0.0",
"apollo-upload-client": "^7.0.0-alpha.4",
"apollo-utilities": "^1.0.1",
Expand All @@ -36,8 +37,7 @@
"vue-apollo": "^3.0.0-alpha.1",
"vue-cli-plugin-apollo": "^0.4.1",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vuex": "^3.0.1"
"vue-template-compiler": "^2.5.13"
},
"browserslist": [
"> 1%",
Expand All @@ -62,5 +62,8 @@
"vue-cli-service lint",
"git add"
]
},
"dependencies": {
"eslint": "^4.16.0"
}
}
2 changes: 1 addition & 1 deletion packages/@vue/cli-ui/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>cli-ui</title>
<title>Vue CLI</title>
</head>
<body>
<noscript>
Expand Down
10 changes: 8 additions & 2 deletions packages/@vue/cli-ui/src/apollo.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ApolloClient } from 'apollo-client'
import { split } from 'apollo-link'
import { split, ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { createUploadLink } from 'apollo-upload-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
Expand All @@ -8,6 +8,9 @@ import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'
import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
import { setContext } from 'apollo-link-context'
import { withClientState } from 'apollo-link-state'
import defaults from './state/defaults'
import resolvers from './state/resolvers'

function getAuth () {
// get the authentication token from local storage if it exists
Expand Down Expand Up @@ -63,6 +66,9 @@ export default function createApolloClient ({ ssr, base, endpoints, persisting }
// Apollo cache
const cache = new InMemoryCache()

// Client-side state
const stateLink = withClientState({ defaults, cache, resolvers })

if (!ssr) {
// If on the client, recover the injected state
if (typeof window !== 'undefined') {
Expand Down Expand Up @@ -115,7 +121,7 @@ export default function createApolloClient ({ ssr, base, endpoints, persisting }
}

const apolloClient = new ApolloClient({
link,
link: ApolloLink.from([stateLink, link]),
cache,
// Additional options
...(ssr ? {
Expand Down
102 changes: 81 additions & 21 deletions packages/@vue/cli-ui/src/components/FolderExplorer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

<ApolloQuery
v-else
ref="cwd"
:query="require('@/graphql/cwd.gql')"
class="current-path"
v-tooltip="'Edit path'"
Expand All @@ -48,6 +47,36 @@
class="error-icon big"
/>

<VueButton
class="icon-button favorite-button"
:icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
v-tooltip="'Toggle favorite'"
@click="toggleFavorite"
/>

<VueDropdown>
<VueButton
slot="trigger"
icon-left="arrow_drop_down"
class="icon-button"
v-tooltip="'Favorite folders'"
/>

<template v-if="foldersFavorite.length">
<VueDropdownButton
v-for="folder of foldersFavorite"
:key="folder.path"
:label="folder.path"
icon-left="folder"
@click="openFolder(folder.path)"
/>
</template>

<div v-else class="vue-empty">
No favorite folders yet.
</div>
</VueDropdown>

<VueButton
class="icon-button"
icon-left="refresh"
Expand All @@ -56,29 +85,26 @@
/>
</div>

<ApolloQuery
:query="require('@/graphql/folderCurrent.gql')"
class="folders"
>
<template slot-scope="{ result: { data } }">
<template v-if="data">
<FolderExplorerItem
v-for="folder of data.folderCurrent.children"
:key="folder.name"
:folder="folder"
@click.native="openFolder(folder.path)"
/>
</template>
<div class="folders">
<template v-if="folderCurrent.children">
<FolderExplorerItem
v-for="folder of folderCurrent.children"
:key="folder.name"
:folder="folder"
@click.native="openFolder(folder.path)"
/>
</template>
</ApolloQuery>
</div>
</div>
</template>

<script>
import FolderExplorerItem from './FolderExplorerItem'
import FOLDER_OPEN from '@/graphql/folderOpen.gql'
import FOLDER_OPEN_PARENT from '@/graphql/folderOpenParent.gql'
import FOLDER_CURRENT from '@/graphql/folderCurrent.gql'
import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
import FOLDERS_FAVORITE from '../graphql/foldersFavorite.gql'
import FOLDER_OPEN from '../graphql/folderOpen.gql'
import FOLDER_OPEN_PARENT from '../graphql/folderOpenParent.gql'
import FOLDER_SET_FAVORITE from '../graphql/folderSetFavorite.gql'
export default {
components: {
Expand All @@ -90,9 +116,16 @@ export default {
error: false,
editingPath: false,
editedPath: '',
folderCurrent: {},
foldersFavorite: [],
}
},
apollo: {
folderCurrent: FOLDER_CURRENT,
foldersFavorite: FOLDERS_FAVORITE
},
methods: {
async openFolder (path) {
this.editingPath = false
Expand Down Expand Up @@ -127,14 +160,38 @@ export default {
}
},
async toggleFavorite () {
await this.$apollo.mutate({
mutation: FOLDER_SET_FAVORITE,
variables: {
path: this.folderCurrent.path,
favorite: !this.folderCurrent.favorite
},
update: (store, { data: { folderSetFavorite } }) => {
store.writeQuery({ query: FOLDER_CURRENT, data: { folderCurrent: folderSetFavorite } })
const data = store.readQuery({ query: FOLDERS_FAVORITE })
if (folderSetFavorite.favorite) {
data.foldersFavorite.push(folderSetFavorite)
} else {
const index = data.foldersFavorite.findIndex(
f => f.path === folderSetFavorite.path
)
index !== -1 && data.foldersFavorite.splice(index, 1)
}
store.writeQuery({ query: FOLDERS_FAVORITE, data })
}
})
},
cwdChangedUpdate (previousResult, { subscriptionData }) {
return {
cwd: subscriptionData.data.cwd
}
},
async openPathEdit () {
this.editedPath = this.$refs.cwd.result.data.cwd
this.editedPath = this.folderCurrent.path
this.editingPath = true
await this.$nextTick()
this.$refs.pathInput.focus()
Expand All @@ -145,7 +202,7 @@ export default {
},
refreshFolder () {
this.openFolder(this.$refs.cwd.result.data.cwd)
this.openFolder(this.folderCurrent.path)
}
}
}
Expand All @@ -156,7 +213,7 @@ export default {
.toolbar
padding 12px
background rgba($vue-color-light-neutral, .2)
background $color-light-background
h-box()
align-items center
Expand All @@ -173,6 +230,9 @@ export default {
> .vue-input
width 100%
.favorite-button
margin-right 4px
.error-icon
>>> svg
fill $vue-color-danger
Expand Down
58 changes: 58 additions & 0 deletions packages/@vue/cli-ui/src/components/ProjectNav.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<div class="project-nav">
<div class="content">
<VueGroup
v-model="currentRoute"
class="vertical small-indicator left-indicator primary"
indicator
>
<VueGroupButton
class="flat big icon-button"
value="plugins"
icon-left="widgets"
v-tooltip.right="'Plugins'"
/>
<VueGroupButton
class="flat big icon-button"
value="config"
icon-left="settings_applications"
v-tooltip.right="'Configurations'"
/>
<VueGroupButton
class="flat big icon-button"
value="tasks"
icon-left="assignment"
v-tooltip.right="'Tasks'"
/>
</VueGroup>
</div>
</div>
</template>

<script>
export default {
data () {
return {
currentRoute: 'plugins'
}
}
}
</script>

<style lang="stylus" scoped>
@import "~@/style/imports"
.project-nav
background $vue-color-dark
.content
v-box()
>>> .vue-button
button-colors(rgba($vue-color-light, .7), transparent)
border-radius 0
&:hover
button-colors($vue-color-light, lighten($vue-color-dark, 10%))
&.selected
button-colors($vue-color-primary, lighten($vue-color-dark, 10%))
</style>
19 changes: 19 additions & 0 deletions packages/@vue/cli-ui/src/components/ProjectSelectList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<div class="project-select-list">
<ApolloQuery
:query="require('@/graphql/projects.gql')"
>
<template slot-scope="{ result: { data } }">
<template v-if="data">
<div v-if="data.projects.length">
TODO
</div>
<div v-else class="vue-empty">
<VueIcon icon="attach_file" class="empty-icon"/>
<div>No existing projects</div>
</div>
</template>
</template>
</ApolloQuery>
</div>
</template>
45 changes: 45 additions & 0 deletions packages/@vue/cli-ui/src/components/StatusBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div class="status-bar">
<div class="section current-project">
<span>Current Project:</span>
</div>

<div class="section console-log" v-tooltip="'Console'">
<VueIcon icon="subtitles"/>
<span>{{ consoleLog }}</span>
</div>
</div>
</template>

<script>
export default {
data () {
return {
consoleLog: ''
}
}
}
</script>


<style lang="stylus" scoped>
@import "~@/style/imports"
.status-bar
h-box()
align-items center
background $vue-color-light-neutral
font-size 12px
.section
h-box()
align-items center
opacity .5
padding 0 8px
height 100%
cursor default
&:hover
opacity 1
background lighten(@background, 40%)
</style>
Loading

0 comments on commit 376e4bb

Please sign in to comment.