Skip to content

Commit 5e9eb4b

Browse files
author
Guillaume Chau
committed
feat: improved design and layout
1 parent 6f7b259 commit 5e9eb4b

27 files changed

+326
-270
lines changed

‎packages/@vue/cli-ui-addon-webpack/src/components/AssetList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="asset-list list-block">
2+
<div class="asset-list card list-block">
33
<div class="content">
44
<div class="title">
55
{{ $t('org.vue.vue-webpack.dashboard.asset-list.title') }}

‎packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="build-progress"
3+
class="build-progress card"
44
:class="{
55
[`mode-${mode}`]: true
66
}"

‎packages/@vue/cli-ui-addon-webpack/src/components/BuildStatus.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="build-status">
2+
<div class="build-status card">
33
<div class="content">
44
<div class="info-block status">
55
<div class="label">

‎packages/@vue/cli-ui-addon-webpack/src/components/ModuleList.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="module-list list-block">
2+
<div class="module-list card list-block">
33
<div class="content">
44
<div class="title">
55
{{ $t('org.vue.vue-webpack.dashboard.module-list.title') }}

‎packages/@vue/cli-ui-addon-webpack/src/components/SpeedStats.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="speed-stats">
2+
<div class="speed-stats card">
33
<div class="content">
44
<div class="title">
55
{{ $t('org.vue.vue-webpack.dashboard.speed-stats.title') }}

‎packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="vue-webpack-analyzer">
3-
<div class="pane-toolbar">
3+
<div class="pane-toolbar card">
44
<VueIcon icon="donut_large"/>
55
<div class="title">{{ $t('org.vue.vue-webpack.analyzer.title') }}</div>
66

@@ -84,7 +84,7 @@
8484
</template>
8585

8686
<div v-if="describedModule" class="described-module">
87-
<div class="wrapper">
87+
<div class="wrapper card">
8888
<div class="path" v-html="modulePath"/>
8989
<div
9090
class="stats size"
@@ -345,10 +345,6 @@ export default {
345345
.pane-toolbar,
346346
.described-module .wrapper
347347
padding $padding-item
348-
background $vue-ui-color-light-neutral
349-
border-radius $br
350-
.vue-ui-dark-mode &
351-
background $vue-ui-color-dark
352348
353349
.content
354350
display flex

‎packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="vue-webpack-dashboard">
3-
<div class="pane-toolbar">
3+
<div class="pane-toolbar card">
44
<VueIcon icon="dashboard"/>
55
<div class="title">{{ $t('org.vue.vue-webpack.dashboard.title') }}</div>
66

@@ -124,13 +124,8 @@ export default {
124124
opacity .75
125125
font-size 16px
126126
127-
.pane-toolbar,
128-
.content >>> > div
127+
/deep/ .card
129128
padding $padding-item
130-
background $vue-ui-color-light-neutral
131-
border-radius $br
132-
.vue-ui-dark-mode &
133-
background $vue-ui-color-dark
134129
135130
.pane-toolbar
136131
margin-bottom $padding-item

‎packages/@vue/cli-ui-addon-widgets/src/components/NewsItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default {
5757
.news-item
5858
padding ($padding-item / 2) $padding-item
5959
&:not(:last-child)
60-
border-bottom rgba($vue-ui-color-primary, .3) solid 1px
60+
border-bottom rgba($vue-ui-color-primary, .2) solid 1px
6161
6262
.title
6363
margin-bottom ($padding-item /2)

‎packages/@vue/cli-ui/src/components/app/ProjectHome.vue

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
wide: $responsive.wide
66
}"
77
>
8-
<TopBar />
9-
108
<div class="panes">
119
<ViewNav/>
1210

1311
<div v-if="ready" class="content vue-ui-disable-scroll">
14-
<router-view/>
12+
<TopBar />
13+
<router-view class="router-view"/>
1514
</div>
1615
</div>
1716

@@ -49,7 +48,7 @@ export default {
4948
5049
&.wide
5150
.project-nav
52-
width 180px
51+
width 220px
5352
5453
.panes
5554
flex auto 1 1
@@ -69,5 +68,13 @@ export default {
6968
width 0
7069
overflow-x hidden
7170
overflow-y auto
71+
display flex
72+
flex-direction column
73+
74+
.top-bar
75+
flex auto 0 0
7276
77+
.router-view
78+
flex 1
79+
height 0
7380
</style>

‎packages/@vue/cli-ui/src/components/app/ProjectQuickDropdown.vue

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<VueDropdown
3+
v-if="$responsive.wide"
4+
:label="projectCurrent ? projectCurrent.name : $t('org.vue.components.status-bar.project.empty')"
5+
class="current-project project-quick-dropdown"
6+
icon-right="arrow_drop_down"
7+
button-class="round"
8+
>
9+
<!-- Current project options -->
10+
11+
<template v-if="projectCurrent">
12+
<VueSwitch
13+
:value="projectCurrent.favorite"
14+
:icon="projectCurrent.favorite ? 'star' : 'star_border'"
15+
class="extend-left"
16+
@input="toggleCurrentFavorite()"
17+
>
18+
{{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
19+
</VueSwitch>
20+
21+
<VueDropdownButton
22+
:label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
23+
icon-left="open_in_browser"
24+
@click="openInEditor(projectCurrent)"
25+
/>
26+
27+
<VueDropdownButton
28+
v-if="projectCurrent.homepage"
29+
:href="projectCurrent.homepage"
30+
:label="$t('org.vue.components.top-bar.homepage')"
31+
target="_blank"
32+
icon-left="open_in_new"
33+
/>
34+
</template>
35+
36+
<div class="dropdown-separator"/>
37+
38+
<!-- Favorites -->
39+
40+
<div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
41+
42+
<template v-else>
43+
<div class="section-title">
44+
{{ $t('org.vue.components.top-bar.favorite-projects') }}
45+
</div>
46+
47+
<VueDropdownButton
48+
v-for="project of favoriteProjects"
49+
:key="project.id"
50+
:label="project.name"
51+
icon-left="star"
52+
@click="openProject(project)"
53+
/>
54+
</template>
55+
56+
<!-- Recents -->
57+
58+
<template v-if="recentProjects.length">
59+
<div class="dropdown-separator"/>
60+
61+
<div class="section-title">
62+
{{ $t('org.vue.components.top-bar.recent-projects') }}
63+
</div>
64+
65+
<VueDropdownButton
66+
v-for="project of recentProjects"
67+
:key="project.id"
68+
:label="project.name"
69+
icon-left="restore"
70+
@click="openProject(project)"
71+
/>
72+
</template>
73+
74+
<div class="dropdown-separator"/>
75+
76+
<VueDropdownButton
77+
:to="{ name: 'project-select' }"
78+
:label="$t('org.vue.views.project-select.title')"
79+
icon-left="home"
80+
/>
81+
</VueDropdown>
82+
</template>
83+
84+
<script>
85+
import { resetApollo } from '@/vue-apollo'
86+
87+
import PROJECT_CURRENT from '@/graphql/project/projectCurrent.gql'
88+
import PROJECTS from '@/graphql/project/projects.gql'
89+
import PROJECT_OPEN from '@/graphql/project/projectOpen.gql'
90+
import PROJECT_SET_FAVORITE from '@/graphql/project/projectSetFavorite.gql'
91+
import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
92+
import CURRENT_PROJECT_ID_SET from '@/graphql/project/currentProjectIdSet.gql'
93+
94+
export default {
95+
apollo: {
96+
projectCurrent: PROJECT_CURRENT,
97+
projects: PROJECTS
98+
},
99+
100+
computed: {
101+
favoriteProjects () {
102+
if (!this.projects) return []
103+
return this.projects.filter(
104+
p => p.favorite && (!this.projectCurrent || this.projectCurrent.id !== p.id)
105+
)
106+
},
107+
108+
recentProjects () {
109+
if (!this.projects) return []
110+
return this.projects.filter(
111+
p => !p.favorite && (!this.projectCurrent || this.projectCurrent.id !== p.id)
112+
).sort((a, b) => b.openDate - a.openDate).slice(0, 3)
113+
}
114+
},
115+
116+
methods: {
117+
async openProject (project) {
118+
this.$bus('quickOpenProject', project)
119+
120+
await this.$apollo.mutate({
121+
mutation: PROJECT_OPEN,
122+
variables: {
123+
id: project.id
124+
}
125+
})
126+
127+
await resetApollo()
128+
129+
await this.$apollo.mutate({
130+
mutation: CURRENT_PROJECT_ID_SET,
131+
variables: {
132+
projectId: project.id
133+
}
134+
})
135+
},
136+
137+
async toggleCurrentFavorite () {
138+
if (this.projectCurrent) {
139+
await this.$apollo.mutate({
140+
mutation: PROJECT_SET_FAVORITE,
141+
variables: {
142+
id: this.projectCurrent.id,
143+
favorite: this.projectCurrent.favorite ? 0 : 1
144+
}
145+
})
146+
}
147+
},
148+
149+
async openInEditor (project) {
150+
await this.$apollo.mutate({
151+
mutation: OPEN_IN_EDITOR,
152+
variables: {
153+
input: {
154+
file: project.path
155+
}
156+
}
157+
})
158+
}
159+
}
160+
}
161+
</script>
162+
163+
<style lang="stylus" scoped>
164+
@import "~@/style/imports"
165+
166+
.current-project
167+
>>> .trigger
168+
.vue-ui-button
169+
.vue-ui-icon.right
170+
width 20px
171+
height @width
172+
173+
.vue-ui-empty
174+
padding 6px
175+
</style>

‎packages/@vue/cli-ui/src/components/app/StatusBar.vue

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -188,33 +188,30 @@ export default {
188188
189189
.status-bar
190190
position relative
191-
z-index 1
192-
box-shadow 0 -2px 10px rgba(black, .05)
191+
z-index 101
192+
box-shadow 0 -2px 10px rgba(black, .1)
193193
.vue-ui-dark-mode &
194194
box-shadow 0 -2px 10px rgba(black, .2)
195195
196196
.content
197197
h-box()
198198
align-items center
199-
background $vue-ui-color-light
199+
background $vue-ui-color-primary
200200
font-size 12px
201201
height 34px
202-
.vue-ui-dark-mode &
203-
background $vue-ui-color-darker
202+
color $vue-ui-color-light
203+
>>> .vue-ui-icon svg
204+
fill @color
204205
205206
.section
206207
h-box()
207208
align-items center
208-
opacity .8
209209
padding 0 11px
210210
height 100%
211211
cursor default
212212
213213
&:hover
214-
opacity 1
215-
background lighten($vue-ui-color-light-neutral, 30%)
216-
.vue-ui-dark-mode &
217-
background $vue-ui-color-dark
214+
background lighten($vue-ui-color-primary, 30%)
218215
219216
> .vue-ui-icon + *
220217
margin-left 4px

0 commit comments

Comments
 (0)