feat(ui): StatusBar/LoggerView improvements

Author: Guillaume Chau

packages/@vue/cli-ui/src/App.vue

@@ -4,9 +4,7 @@
       <router-view/>
     </div>
 
-    <StatusBar
-      @project="$router.push({ name: 'project-select' })"
-    />
+    <StatusBar/>
   </div>
 </template>
 

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

@@ -1,5 +1,35 @@
 <template>
   <div class="logger-view">
+    <div class="toolbar">
+      <VueIcon
+        icon="dvr"
+      />
+      <div class="title">
+        Logs
+      </div>
+      <VueButton
+        class="icon-button"
+        icon-left="delete_forever"
+        v-tooltip="'Clear logs'"
+        @click="clearLogs()"
+      />
+      <VueIcon
+        icon="lens"
+        class="separator"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="arrow_downward"
+        v-tooltip="'Scroll to bottom'"
+        @click="scrollToBottom()"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="close"
+        v-tooltip="'Close'"
+        @click="close()"
+      />
+    </div>
     <ApolloQuery
       ref="logs"
       :query="require('../graphql/consoleLogs.gql')"
@@ -20,6 +50,14 @@
             :message="log"
             pre
           />
+
+          <div
+            v-if="!data.consoleLogs.length"
+            class="vue-empty"
+          >
+            <VueIcon icon="wifi" class="large"/>
+            <div>No logs yet</div>
+          </div>
         </template>
       </template>
     </ApolloQuery>
@@ -29,6 +67,10 @@
 <script>
 import LoggerMessage from './LoggerMessage'
 
+import CONSOLE_LOGS from '../graphql/consoleLogs.gql'
+import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
+import CONSOLE_LOGS_CLEAR from '../graphql/consoleLogsClear.gql'
+
 export default {
   components: {
     LoggerMessage
@@ -51,8 +93,19 @@ export default {
       list.scrollTop = list.scrollHeight
     },
 
-    clearLogs () {
-      // TODO
+    async clearLogs () {
+      await this.$apollo.mutate({
+        mutation: CONSOLE_LOGS_CLEAR,
+        update: store => {
+          store.writeQuery({ query: CONSOLE_LOGS, data: { consoleLogs: [] }})
+          store.writeQuery({ query: CONSOLE_LOG_LAST, data: { consoleLogLast: null }})
+        }
+      })
+      this.close()
+    },
+
+    close () {
+      this.$emit('close')
     }
   }
 }
@@ -63,21 +116,34 @@ export default {
 
 .logger-view
   background $vue-color-light-neutral
-  padding $padding-item 0
-  height 160px
+  height 174px
   display grid
   grid-template-columns 1fr
-  grid-template-rows 1fr
-  grid-template-areas "logs"
+  grid-template-rows auto 1fr
+  grid-template-areas "toolbar" "logs"
+
+  .toolbar
+    grid-area toolbar
+    h-box()
+    align-items center
+    padding 6px 6px 6px $padding-item
+    > :not(.separator)
+      space-between-x(6px)
+    > * + .separator
+      margin-left 6px
+    .title
+      flex 100% 1 1
+      width 0
+      ellipsis()
 
   .logs
     grid-area logs
     padding 0 $padding-item
     overflow-x hidden
     overflow-y auto
-    font-size 12px
 
   .logger-message
+    font-size 12px
     &:hover
       background lighten(@background, 40%)
 </style>

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

@@ -2,13 +2,14 @@
   <div class="status-bar">
     <LoggerView
       v-if="showLogs"
+      @close="showLogs = false"
     />
 
     <div class="content">
       <div
-        class="section current-project"
-        v-tooltip="'Current project'"
-        @click="$emit('project')"
+        class="section action current-project"
+        v-tooltip="'Current project<br><i>Click to toggle Project Manager</i>'"
+        @click="onProjectClick()"
       >
         <VueIcon icon="work"/>
         <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
@@ -19,7 +20,7 @@
         :query="require('@/graphql/cwd.gql')"
         class="section current-path"
         v-tooltip="'Current Working Directory'"
-        @click.native="$emit('cwd')"
+        @click.native="onCwdClick()"
       >
         <ApolloSubscribeToMore
           :document="require('@/graphql/cwdChanged.gql')"
@@ -35,11 +36,11 @@
       </ApolloQuery>
 
       <div
-        class="section console-log"
-        v-tooltip="'Logs'"
+        class="section action console-log"
+        v-tooltip="'Logs<br><i>Click to toggle vue-cli logs</i>'"
         @click="onConsoleClick()"
       >
-        <VueIcon icon="subtitles"/>
+        <VueIcon icon="dvr"/>
         <LoggerMessage class="last-message"
           v-if="consoleLogLast"
           :message="consoleLogLast"
@@ -67,6 +68,8 @@ import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
 import CONSOLE_LOG_ADDED from '../graphql/consoleLogAdded.gql'
 
+let lastRoute
+
 export default {
   components: {
     LoggerMessage,
@@ -103,6 +106,21 @@ export default {
   },
 
   methods: {
+    onProjectClick () {
+      this.$emit('project')
+      if (this.$route.name === 'project-select') {
+        this.$router.push(lastRoute || { name: 'home' })
+      } else {
+        const { name, params, query } = this.$route
+        lastRoute = { name, params, query }
+        this.$router.push({ name: 'project-select' })
+      }
+    },
+
+    onCwdClick () {
+      this.$emit('cwd')
+    },
+
     onConsoleClick () {
       this.$emit('console')
       this.showLogs = !this.showLogs
@@ -143,6 +161,10 @@ export default {
     .label
       color lighten($vue-color-dark, 20%)
 
+    &.action
+      user-select none
+      cursor pointer
+
   .console-log
     &,
     .last-message

packages/@vue/cli-ui/src/style/main.styl

@@ -46,3 +46,12 @@ ansi-colors('blue', $md-blue)
 ansi-colors('magenta', $vue-color-accent)
 ansi-colors('cyan', $vue-color-info)
 ansi-colors('white', $vue-color-light)
+
+.vue-icon.separator
+  width 6px
+  height @width
+  h-box()
+  box-center()
+  margin $padding-item
+  svg
+    fill rgba($vue-color-dark, .2)