-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Guillaume Chau
committed
Mar 9, 2018
1 parent
61655b1
commit 9f0eece
Showing
37 changed files
with
1,138 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <template> | ||
| <div | ||
| class="logger-message" | ||
| :class="[ | ||
| `type-${message.type}`, | ||
| { | ||
| 'has-type': message.type !== 'log', | ||
| 'has-tag': message.tag, | ||
| pre | ||
| } | ||
| ]" | ||
| > | ||
| <div v-if="message.type !== 'log'" class="type">{{ message.type }}</div> | ||
| <div v-if="message.tag" class="tag">{{ message.tag }}</div> | ||
| <div class="message" v-html="formattedMessage"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import AU from 'ansi_up' | ||
| const ansiUp = new AU() | ||
| ansiUp.use_classes = true | ||
| export default { | ||
| props: { | ||
| message: { | ||
| type: Object, | ||
| required: true | ||
| }, | ||
| pre: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| computed: { | ||
| formattedMessage () { | ||
| return ansiUp.ansi_to_html(this.message.message) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| @import "~@/style/imports" | ||
| .logger-message | ||
| h-box() | ||
| align-items baseline | ||
| font-family 'Roboto Mono', monospace | ||
| box-sizing border-box | ||
| padding 2px 4px | ||
| .type, | ||
| .tag | ||
| padding 2px 6px | ||
| border-radius $br | ||
| .type | ||
| text-transform uppercase | ||
| &.type-warn | ||
| .type | ||
| background $vue-color-warning | ||
| color $vue-color-light | ||
| &.type-error | ||
| .type | ||
| background $vue-color-danger | ||
| color $vue-color-light | ||
| &.type-info | ||
| .type | ||
| background $vue-color-info | ||
| color $vue-color-light | ||
| &.type-done | ||
| .type | ||
| background $vue-color-success | ||
| color $vue-color-light | ||
| .tag | ||
| background lighten($vue-color-dark, 60%) | ||
| &.has-type.has-tag | ||
| .type | ||
| border-top-right-radius 0 | ||
| border-bottom-right-radius 0 | ||
| .tag | ||
| border-top-left-radius 0 | ||
| border-bottom-left-radius 0 | ||
| .message | ||
| flex 100% 1 1 | ||
| width 0 | ||
| ellipsis() | ||
| &.has-type, | ||
| &.has-tag | ||
| .message | ||
| margin-left 12px | ||
| &.pre | ||
| .message | ||
| white-space pre-wrap | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <template> | ||
| <div class="logger-view"> | ||
| <ApolloQuery | ||
| :query="require('../graphql/consoleLogs.gql')" | ||
| fetch-policy="cache-and-network" | ||
| class="logs" | ||
| > | ||
| <ApolloSubscribeToMore | ||
| ref="logs" | ||
| :document="require('../graphql/consoleLogAdded.gql')" | ||
| :update-query="onConsoleLogAdded" | ||
| /> | ||
|
|
||
| <template slot-scope="{ result: { data } }"> | ||
| <template v-if="data && data.consoleLogs"> | ||
| <LoggerMessage | ||
| v-for="log of data.consoleLogs" | ||
| :key="log.id" | ||
| :message="log" | ||
| pre | ||
| /> | ||
| </template> | ||
| </template> | ||
| </ApolloQuery> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import LoggerMessage from './LoggerMessage' | ||
| export default { | ||
| components: { | ||
| LoggerMessage | ||
| }, | ||
| methods: { | ||
| onConsoleLogAdded (previousResult, { subscriptionData }) { | ||
| this.scrollToBottom() | ||
| return { | ||
| consoleLogs: [ | ||
| ...previousResult.consoleLogs, | ||
| subscriptionData.data.consoleLogAdded | ||
| ] | ||
| } | ||
| }, | ||
| async scrollToBottom () { | ||
| await this.$nextTick() | ||
| const list = this.$refs.logs.$el | ||
| list.scrollTop = list.scrollHeight | ||
| console.log(list.scrollHeight) | ||
| }, | ||
| clearLogs () { | ||
| // TODO | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| @import "~@/style/imports" | ||
| .logger-view | ||
| background $vue-color-light-neutral | ||
| padding $padding-item 0 | ||
| height 160px | ||
| display grid | ||
| grid-template-columns 1fr | ||
| grid-template-rows 1fr | ||
| grid-template-areas "logs" | ||
| .logs | ||
| grid-area logs | ||
| padding 0 $padding-item | ||
| overflow-x hidden | ||
| overflow-y auto | ||
| font-size 12px | ||
| .logger-message | ||
| &:hover | ||
| background lighten(@background, 40%) | ||
| </style> |
Oops, something went wrong.