refactor(log): wip

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)
     }
   }
 }

demo/documentation/components/log/enUS/index.md

@@ -1,4 +1,5 @@
 # Log
+<!--single-column-->
 ```demo
 basic
 ```

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>

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,

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

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;
+      }
+    }
   }
-}
+}

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;
+  }
 }