From 99b030a8f029dc8f8aee0af00ea1e737528adba3 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Mon, 11 Jun 2018 17:26:23 +0200
Subject: [PATCH] fix(ui): nav button custom image align

---
 .../src/components/ProjectNavButton.vue       | 19 +++++++++++++++++--
 packages/@vue/cli-ui/vue-cli-ui.js            |  4 ++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/@vue/cli-ui/src/components/ProjectNavButton.vue b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
index b81d865b54..d00c3c0bdd 100644
--- a/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
+++ b/packages/@vue/cli-ui/src/components/ProjectNavButton.vue
@@ -11,10 +11,11 @@
       <VueGroupButton
         class="flat big"
         :class="{
-          'icon-button': !$responsive.wide
+          'icon-button': !$responsive.wide,
+          'has-image-icon': imageIcon
         }"
         :value="view.name"
-        :icon-left="!imageIcon && view.icon"
+        :icon-left="!imageIcon ? view.icon : null"
       >
         <img
           v-if="imageIcon"
@@ -127,6 +128,20 @@ $bg-dark = $vue-ui-color-dark
   .image-icon
     max-width 24px
     max-height @width
+    .wide &
+      margin-right 6px
+      position relative
+      left -2px
+
+  .vue-ui-group-button.has-image-icon
+    >>> .default-slot
+      display flex
+      align-items center
+      overflow visible !important
+      .label
+        display block
+        max-width 150px
+        ellipsis()
 
 .badges
   margin ($padding-item/2) 0
diff --git a/packages/@vue/cli-ui/vue-cli-ui.js b/packages/@vue/cli-ui/vue-cli-ui.js
index 065d505709..c6354dbf89 100644
--- a/packages/@vue/cli-ui/vue-cli-ui.js
+++ b/packages/@vue/cli-ui/vue-cli-ui.js
@@ -15,8 +15,8 @@ module.exports = api => {
   api.addView({
     id: 'vue-webpack-test-view',
     name: 'test-webpack-route',
-    icon: 'pets',
-    // icon: 'http://localhost:4000/_plugin/%40vue%2Fcli-service/webpack-icon.svg',
+    // icon: 'pets',
+    icon: 'http://localhost:4000/public/webpack-logo.png',
     tooltip: 'Test view from webpack addon'
   })