feat(ui): ProjectNavMore + About view

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/ProjectNav.vue

@@ -12,6 +12,8 @@
           :route="route"
         />
       </VueGroup>
+
+      <ProjectNavMore/>
     </div>
   </div>
 </template>
@@ -105,10 +107,26 @@ export default {
 
   .content
     v-box()
+    height 100%
+
+    .vue-ui-group
+      flex auto 1 1
+      height 0
+      overflow hidden
+
+    >>> .v-popover .trigger,
+    >>> .vue-ui-dropdown
+      display block !important
 
     >>> .vue-ui-button
       button-colors(rgba($vue-ui-color-light, .7), transparent)
       border-radius 0
+      padding-left 0
+      padding-right @padding-left
+      h-box()
+      box-center()
+      width 100%
+
       &:hover, &:active
         $bg = darken($vue-ui-color-dark, 70%)
         button-colors($vue-ui-color-light, $bg)

packages/@vue/cli-ui/src/components/ProjectNavButton.vue

@@ -78,9 +78,6 @@ $bg = darken($vue-ui-color-dark, 70%)
 .project-nav-button
   position relative
 
-  .v-popover >>> .trigger
-    display block !important
-
   .bullet
     position absolute
     width 6px
@@ -111,12 +108,6 @@ $bg = darken($vue-ui-color-dark, 70%)
     .bullet
       border-color darken($bg, 8%)
 
-  .icon-button
-    padding-left 0
-    padding-right @padding-left
-    h-box()
-    box-center()
-
   .image-icon
     max-width 24px
     max-height @width

packages/@vue/cli-ui/src/components/ProjectNavMore.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="project-nav-more">
+    <VueDropdown placement="right-end">
+      <VueButton
+        slot="trigger"
+        icon-left="more_horiz"
+        class="icon-button big flat"
+      />
+
+      <VueDropdownButton
+        icon-left="work"
+        :to="{ name: 'project-select' }"
+        :label="$t('views.project-select.title')"
+      />
+      <VueDropdownButton
+        icon-left="info"
+        :to="{ name: 'about' }"
+        :label="$t('views.about.title')"
+      />
+    </VueDropdown>
+  </div>
+</template>

packages/@vue/cli-ui/src/locales/en.json

@@ -303,6 +303,13 @@
       "parameters": "Parameters",
       "more-info": "More Info",
       "output": "Output"
+    },
+    "about": {
+      "title": "About",
+      "description": "<a href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-ui\" target=\"_blank\">@vue/cli-ui</a> is a built-in package of vue-cli which opens a full-blown UI.",
+      "quote": "Vue-cli 3.x is a complete rewrite, with a lot of new awesome features. You will be to select features like routing, Vuex or Typescript, then add and upgrade building blocks called \"vue-cli plugins\". But having so much more options also means the tool is now more complex and harder to start using. That's why we thought having a full-blown GUI would help discover the new features, search and install vue-cli plugins and unlock more possibilities overall while not being limited by a terminal interface. To sum up, vue-cli will not only allow you to bootstrap a new project easily, but it will also remain useful for ongoing work afterwards!",
+      "links": "Useful links",
+      "back": "Go back"
     }
   }
 }

packages/@vue/cli-ui/src/views/About.vue

@@ -1,5 +1,77 @@
 <template>
   <div class="about page">
+    <h1>{{ $t('views.about.title') }}</h1>
 
+    <p class="description" v-html="$t('views.about.description')"/>
+
+    <blockquote class="quote" v-text="$t('views.about.quote')"/>
+
+    <p>- <a href="https://github.com/Akryum" target="_blank">Guillaume Chau</a></p>
+
+    <h2>{{ $t('views.about.links') }}</h2>
+
+    <div class="links vue-ui-grid default-gap">
+      <VueButton href="https://github.com/vuejs/vue-cli" target="_blank">Repository</VueButton>
+      <VueButton href="https://github.com/vuejs/vue-cli/tree/dev/docs#table-of-contents" target="_blank">Documentation</VueButton>
+      <VueButton href="https://vuejs.org/v2/guide/" target="_blank">Vue.js Guide</VueButton>
+      <VueButton href="https://vuejs.org/v2/api/" target="_blank">Vue.js API reference</VueButton>
+      <VueButton href="https://forum.vuejs.org/" target="_blank">Vue.js Forums</VueButton>
+      <VueButton href="https://chat.vuejs.org/" target="_blank">Vue.js Chat</VueButton>
+    </div>
+
+    <div class="actions">
+      <VueButton
+        :to="previousRoute"
+        class="primary big"
+        left-icon="arrow_back"
+        :label="$t('views.about.back')"
+      />
+    </div>
   </div>
 </template>
+
+<script>
+export default {
+  metaInfo () {
+    return {
+      title: this.$t('views.about.title')
+    }
+  },
+
+  data () {
+    return {
+      previousRoute: { name: 'home' }
+    }
+  },
+
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from) vm.previousRoute = from.fullPath
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.about
+  padding 42px
+  max-width 900px
+  margin 0 auto
+  box-sizing border-box
+
+  .quote
+    border-left solid 4px rgba($vue-ui-color-primary, .3)
+    margin-left 0
+    padding-left $padding-item
+    color lighten($vue-ui-color-dark, 30%)
+
+  .links
+    grid-template-columns repeat(auto-fill, 180px)
+
+  .actions
+    margin-top @padding
+    h-box()
+    box-center()
+</style>