From a7181790a6cc7bdce5debce494bd97088021d722 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 16 Dec 2019 19:00:34 +0800
Subject: [PATCH] refactor(log): wip

---
 .../components/log/enUS/basic.md              |  4 +-
 .../components/log/enUS/index.md              |  1 +
 packages/common/Log/src/LogLoader.vue         | 15 ++++
 packages/common/Log/src/main.vue              | 31 ++++---
 packages/utils/colors.js                      |  9 ++
 styles/Log.scss                               | 83 ++++++++++++-------
 styles/themes/vars.scss                       | 40 +++++++--
 7 files changed, 129 insertions(+), 54 deletions(-)
 create mode 100644 packages/common/Log/src/LogLoader.vue
 create mode 100644 packages/utils/colors.js

diff --git a/demo/documentation/components/log/enUS/basic.md b/demo/documentation/components/log/enUS/basic.md
index 5a669417d..59521a046 100644
--- a/demo/documentation/components/log/enUS/basic.md
+++ b/demo/documentation/components/log/enUS/basic.md
@@ -64,7 +64,7 @@ export default {
       setTimeout(() => {
         this.log = log + this.log
         this.topLoading = false
-      }, 3000)
+      }, 6000)
     },
     handleReachBottom () {
       if (this.bottomLoading) return
@@ -72,7 +72,7 @@ export default {
       setTimeout(() => {
         this.log = this.log + log
         this.bottomLoading = false
-      }, 3000)
+      }, 6000)
     }
   }
 }
diff --git a/demo/documentation/components/log/enUS/index.md b/demo/documentation/components/log/enUS/index.md
index 4d0db4851..434f1c33b 100644
--- a/demo/documentation/components/log/enUS/index.md
+++ b/demo/documentation/components/log/enUS/index.md
@@ -1,4 +1,5 @@
 # Log
+<!--single-column-->
 ```demo
 basic
 ```
\ No newline at end of file
diff --git a/packages/common/Log/src/LogLoader.vue b/packages/common/Log/src/LogLoader.vue
new file mode 100644
index 000000000..421117b5c
--- /dev/null
+++ b/packages/common/Log/src/LogLoader.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="n-log-loader">
+    <n-spin /><span class="n-log-loader__content">Loading</span>
+  </div>
+</template>
+
+<script>
+import NSpin from '../../Spin'
+
+export default {
+  components: {
+    NSpin
+  }
+}
+</script>
diff --git a/packages/common/Log/src/main.vue b/packages/common/Log/src/main.vue
index 67fe9ae55..43014970d 100644
--- a/packages/common/Log/src/main.vue
+++ b/packages/common/Log/src/main.vue
@@ -1,41 +1,40 @@
 <template>
   <div
     class="n-log"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
     :style="{
       lineHeight: lineHeight,
       height: styleHeight
     }"
     @wheel="handleWheel"
   >
-    <n-scrollbar ref="scrollbar" theme="dark" @scroll="handleScroll">
-      <pre
-        class="n-log__line n-log__line--padding"
-        :style="{
-          lineHeight: lineHeight,
-          height: paddingStyleHeight
-        }"
-      >{{ topLoading ? "Loading More" : 'Wheel Up to View More' }}</pre>
+    <n-scrollbar ref="scrollbar" @scroll="handleScroll">
       <pre class="n-log__lines">{{ processedLog }}</pre>
       <!-- <pre v-for="(line, index) in synthesizedLines" :key="index" class="n-log__line">{{ line }}</pre> -->
-      <pre
-        class="n-log__line n-log__line--padding"
-        :style="{
-          lineHeight: lineHeight,
-          height: paddingStyleHeight
-        }"
-      >{{ bottomLoading ? "Loading More" : 'Wheel Down to View More' }}</pre>
     </n-scrollbar>
+    <n-fade-in-height-expand-transition width>
+      <n-log-loader v-if="topLoading || bottomLoading" />
+    </n-fade-in-height-expand-transition>
   </div>
 </template>
 
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 import NScrollbar from '../../Scrollbar'
+import NLogLoader from './LogLoader'
+import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
 
 export default {
   name: 'NLog',
   components: {
-    NScrollbar
+    NScrollbar,
+    NLogLoader,
+    NFadeInHeightExpandTransition
   },
+  mixins: [ withapp, themeable ],
   props: {
     topLoading: {
       type: Boolean,
diff --git a/packages/utils/colors.js b/packages/utils/colors.js
new file mode 100644
index 000000000..5587597b8
--- /dev/null
+++ b/packages/utils/colors.js
@@ -0,0 +1,9 @@
+import darkstyleScheme from '../../styles/themes/dark/jsIndex.scss'
+import lightstyleScheme from '../../styles/themes/light/jsIndex.scss'
+
+const styleScheme = {
+  dark: darkstyleScheme,
+  light: lightstyleScheme
+}
+
+export default styleScheme
diff --git a/styles/Log.scss b/styles/Log.scss
index d74c3f9dd..4f4c64814 100644
--- a/styles/Log.scss
+++ b/styles/Log.scss
@@ -1,32 +1,26 @@
 @import './mixins/mixins.scss';
 
-@include b(log) {
-  font-family: 'FiraCode', monospace;
-  font-size: 14px;
-  background-color: rgba(0, 0, 0, .95);
-  color: rgba(255, 255, 255, .75);
-  border-radius: 6px;
-  width: 100%;
-  box-sizing: border-box;
-  @include b(scrollbar-content) {
-    overflow: hidden;
-  }
-  @include e(lines) {
-    padding: 0 8px;
-    margin: 0;
-    white-space: pre-wrap;
-  }
-  @include e(line) {
-    padding: 0 8px;
-    margin: 0;
-    @include m(padding) {
-      font-family: 'Lato';
-      border-radius: 6px;
-      background-color: rgba(255, 255, 255, .3);
-      margin: 8px;
-      width: calc(100% - 16px);
-      text-align: center;
-      padding: 4px 0;
+@include themes-mixin {
+  @include b(log) {
+    position: relative;
+    font-family: 'FiraCode', monospace;
+    font-size: 14px;
+    color: $--n-secondary-text-color;
+    border-radius: 6px;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid $--n-border-color;
+    @include b(scrollbar-content) {
+      overflow: hidden;
+    }
+    @include e(lines) {
+      padding: 0 8px;
+      margin: 0;
+      white-space: pre-wrap;
+    }
+    @include e(line) {
+      padding: 0 8px;
+      margin: 0;
       &:first-child {
         margin-top: 8px;
       }
@@ -34,5 +28,38 @@
         margin-bottom: 8px;
       }
     }
+    @include b(log-loader) {
+      @include fade-in-width-expand-transition($duration: .3s, $delay: 0s);
+      box-shadow: $--popover-box-shadow;
+      position: absolute;
+      right: 16px;
+      top: 8px;
+      height: 34px;
+      border-radius: 17px;
+      color: $--n-secondary-text-color;
+      background-color: $--n-dialog-color;
+      line-height: 34px;
+      font-family: 'Lato';
+      white-space: nowrap;
+      overflow: hidden;
+      @include e(content) {
+        display: inline-block;
+        vertical-align: bottom;
+        line-height: 34px;
+        font-family: 'Lato';
+        padding-left: 40px;
+        padding-right: 20px;
+        white-space: nowrap;
+      }
+      @include b(spin) {
+        position: absolute;
+        left: 12px;
+        top: calc(50% - 10px);
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+      }
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 08a6b19be..b6ab8b74e 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -397,26 +397,30 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
 
 @mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
   &.#{$namespace}-#{$block}-leave-active {
-    transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay, margin $duration $default-cubic-bezier $delay;
+    transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay,
+      margin-left $duration $default-cubic-bezier $delay,
+      margin-right $duration $default-cubic-bezier $delay;
   }
   &.#{$namespace}-#{$block}-enter-active {
-    transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier,  margin $duration $default-cubic-bezier;
+    transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier,
+      margin-left $duration $default-cubic-bezier,
+      margin-right $duration $default-cubic-bezier;
   }
   &.#{$namespace}-#{$block}-enter-to {
     opacity: 1;
   }
   &.#{$namespace}-#{$block}-enter {
-    max-width: 0!important;
-    margin: 0!important;
-    opacity: 0;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    opacity: 0!important;
   }
   &.#{$namespace}-#{$block}-leave {
     opacity: 1;
   }
   &.#{$namespace}-#{$block}-leave-to {
-    max-width: 0!important;
-    opacity: 0!important;
-    margin: 0!important;
+    opacity: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 }
 
@@ -445,4 +449,24 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
     opacity: 0!important;
     transform: translateY(60%);
   }
+}
+
+@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
+  &.n-icon-switch-enter, &.n-icon-switch-leave-to {
+    /* make sure it apply to element */
+    transform: $original-transform scale(.75);
+    opacity: 0;
+  }
+  &.n-icon-switch-enter-to, &.n-icon-switch-leave {
+    transform: scale(0.9999) $original-transform;
+    opacity: 1;
+  }
+  &.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
+    transform-origin: center;
+    position: absolute;
+    left: $left;
+    top: $top;
+    transition:
+      all .3s cubic-bezier(.4, 0, .2, 1) !important;
+  }
 }
\ No newline at end of file