feat(ui): ProjectNav: display labels when screen is wide

Author: Guillaume Chau

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="project-nav">
+  <div
+    class="project-nav"
+    :class="{
+      wide: $responsive.wide
+    }"
+  >
     <div class="content">
       <VueGroup
         v-model="currentView"
@@ -139,4 +144,18 @@ export default {
         button-colors($vue-ui-color-light, $bg)
         &.selected
           button-colors(lighten($vue-ui-color-primary, 40%), $bg)
+
+  &.wide
+    >>> .vue-ui-button
+      justify-content flex-start
+      padding-left $padding-item
+      padding-right @padding-left
+      > .content
+        width 100%
+        text-align left
+        > .default-slot
+          flex auto 1 1
+          width 0
+          margin-left 6px
+          ellipsis()
 </style>

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

@@ -9,7 +9,10 @@
       :delay="{ show: 300, hide: 0 }"
     >
       <VueGroupButton
-        class="flat big icon-button"
+        class="flat big"
+        :class="{
+          'icon-button': $responsive.wide
+        }"
         :value="view.name"
         :icon-left="!imageIcon && view.icon"
       >
@@ -18,6 +21,8 @@
           :src="view.icon"
           class="image-icon"
         >
+
+        <span v-if="$responsive.wide" class="label">{{ $t(view.tooltip) }}</span>
       </VueGroupButton>
 
       <template slot="popover">

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

@@ -5,7 +5,9 @@
         slot="trigger"
         icon-left="more_horiz"
         class="icon-button big flat"
-      />
+      >
+        <span v-if="$responsive.wide" class="label">{{ $t('components.project-nav.tooltips.more') }}</span>
+      </VueButton>
 
       <VueDropdownButton
         icon-left="work"
@@ -20,3 +22,17 @@
     </VueDropdown>
   </div>
 </template>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-nav-more
+  .vue-ui-dropdown.open .dropdown-trigger .vue-ui-button
+    &,
+    &:hover
+      background lighten($vue-ui-color-dark, 10%) !important
+      color $md-white
+      /deep/ > .content > .button-icon
+        svg
+          fill @color
+</style>

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

@@ -62,7 +62,8 @@
       "tooltips": {
         "plugins": "Plugins",
         "configuration": "Configuration",
-        "tasks": "Tasks"
+        "tasks": "Tasks",
+        "more": "More"
       }
     },
     "project-select-list": {

packages/@vue/cli-ui/src/main.js

@@ -28,6 +28,9 @@ Vue.use(Responsive, {
     },
     desktop () {
       return !this.tablet
+    },
+    wide () {
+      return this.width >= 1600
     }
   }
 })

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="project-home page">
+  <div
+    class="project-home page"
+    :class="{
+      wide: $responsive.wide
+    }"
+  >
     <ProjectNav/>
 
     <div v-if="ready" class="content">
@@ -38,6 +43,9 @@ export default {
   grid-template-rows auto
   grid-template-areas "side-left content"
 
+  &.wide
+    grid-template-columns 250px 1fr
+
 .project-nav
   grid-area side-left