[#654][3.0] inputNumber 컴포넌트 개발 (#655)

* [#654][3.0] Docs 페이지 레이아웃 수정 ######### - Docs 페이지 레이아웃 수정 * [#654][3.0] InputNumber 컴포넌트 개발 ####### - InputNumber 컴포넌트 개발 - 불필요 코드 삭제 * [#654][3.0] InputNumber 컴포넌트 개발 ####### - 피드백 반영: 코드 개선 및 불필요 코드 삭제 - docs 레이아웃 수정 Co-authored-by: mjchoi <mjchoi@ex-em.com>
ex-em · Oct 7, 2020 · f346771 · f346771
1 parent 602c2d6
commit f346771
Show file tree

Hide file tree

Showing 25 changed files with 746 additions and 274 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
     'no-bitwise': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-console': ['error', { allow: ['log'] }],
+    'no-console': ['error', { allow: ['log', 'warn'] }],
     'class-methods-use-this': 'off',
     'prefer-promise-reject-errors': 'off',
     'prefer-destructuring': 'off',

diff --git a/docs/App.vue b/docs/App.vue
@@ -36,13 +36,45 @@ export default {
 </script>
 
 <style lang="scss">
+$file-path: './assets/fonts/';
+
 @import './style/index.scss';
 
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Bold.ttf') format('trutype');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Medium.ttf') format('trutype');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url($file-path + 'Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+}
+.evui-wrapper {
+  position: relative;
+  min-height: 100vh;
+  padding: $header-height 0 0 $nav-width;
+  font-size: $font-size-base;
+
+  @include themify() {
+    color: themed('font-color-base');
+    background-color: themed('background-color-base');
+  }
 }
 .dark {
   @import './style/lib/highlightjs.hybrid';
@@ -56,14 +88,4 @@ export default {
     font-family: consolas, monospace;
   }
 }
-.evui-wrapper {
-  position: relative;
-  min-height: 100vh;
-  padding: $header-height 0 0 $nav-width;
-
-  @include themify() {
-    color: themed('font-color-base');
-    background-color: themed('background-color-base');
-  }
-}
 </style>
diff --git a/docs/assets/fonts/Roboto-Bold.ttf b/docs/assets/fonts/Roboto-Bold.ttf
diff --git a/docs/assets/fonts/Roboto-Medium.ttf b/docs/assets/fonts/Roboto-Medium.ttf
diff --git a/docs/assets/fonts/Roboto-Regular.ttf b/docs/assets/fonts/Roboto-Regular.ttf
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
@@ -7,7 +7,10 @@
       {{ description }}
     </p>
     <div class="article-example">
-      <div class="view">
+      <div
+        ref="viewArea"
+        class="view"
+      >
         <component :is="component" />
       </div>
       <div
@@ -17,27 +20,29 @@
         <div
           ref="codeWrapper"
           class="code-wrapper"
+          :style="{ height: `${viewAreaHeight}px` }"
         >
-          <pre>
+          <pre class="html">
             {{ parsedData?.template?.content }}
           </pre>
-          <pre>
+          <pre class="javascript">
             {{ parsedData?.script?.content }}
           </pre>
         </div>
         <div
           class="btn-show-more"
           @click="clickExpend"
         >
-          {{ codeExpend ? '▲ Fold the code' : '▼ Unfold the code' }}
+          <i class="ev-icon-document-vertically" />
+          {{ codeExpend ? 'Hide the code' : 'Show more code' }}
         </div>
       </div>
     </div>
   </article>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import hljs from 'highlight.js';
 
 export default {
@@ -80,10 +85,18 @@ export default {
       }
     };
 
+    const viewArea = ref();
+    const viewAreaHeight = ref();
+    onMounted(() => {
+      viewAreaHeight.value = viewArea.value.offsetHeight;
+    });
+
     return {
       codeExpend,
       codeWrapper,
       clickExpend,
+      viewArea,
+      viewAreaHeight,
     };
   },
 };
@@ -137,6 +150,7 @@ export default {
     margin: 15px 0 20px;
     border-radius: 4px;
     font-size: 13px;
+    word-break: break-all;
 
     @include themify() {
       background-color: themed('background-color-description');
@@ -177,30 +191,38 @@ export default {
     max-width: 700px;
     overflow: hidden;
     .code-wrapper {
-      height: 50px;
+      height: 100px;
+      min-height: 350px;
+      overflow: hidden;
     }
     .btn-show-more {
+      display: flex;
       position: absolute;
+      top: 0;
       left: 0;
-      bottom: 0;
       width: 100%;
-      height: 45px;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
       line-height: 45px;
       background-color: rgba($color-yellow, 0.5);
+      backdrop-filter: blur(2px);
       color: $color-black;
       text-align: center;
       cursor: pointer;
+      transition: all $animate-fast;
       &:hover {
-        background-color: $color-yellow;
+        background-color: rgba($color-yellow, 0.8);
       }
     }
     &.expend {
       .code-wrapper {
-        height: auto;
-        max-height: 600px;
-        padding-bottom: 45px;
+        padding-top: 40px;
         overflow-y: auto;
       }
+      .btn-show-more {
+        height: 40px;
+      }
     }
   }
 }
@@ -216,6 +238,18 @@ export default {
     .code {
       max-width: none;
       width: 100%;
+      .code-wrapper {
+        height: 40px !important;
+        transition: all $animate-fast;
+      }
+      .btn-show-more {
+        height: 40px;
+      }
+      &.expend {
+        .code-wrapper {
+          height: 300px !important;
+        }
+      }
     }
   }
 }

diff --git a/docs/components/Header.vue b/docs/components/Header.vue
@@ -1,12 +1,15 @@
 <template>
   <header class="evui-header">
-    <h1 class="evui-header-logo">EXEM Visualization UI</h1>
-    <button
+    <h1 class="evui-header-logo">EVUI</h1>
+    <p class="evui-header-name">EXEM Visualization UI</p>
+    <span
       class="evui-header-theme"
-      @click="changeTheme"
     >
-      {{ theme }}
-    </button>
+      <ev-icon
+        :icon="themeIcon"
+        @click="changeTheme"
+      />
+    </span>
   </header>
 </template>
 
@@ -29,15 +32,13 @@ export default {
       set: value => emit('update:modelValue', value),
     });
     const changeTheme = () => {
-      if (theme.value === 'light') {
-        theme.value = 'dark';
-      } else {
-        theme.value = 'light';
-      }
+      theme.value = theme.value === 'light' ? 'dark' : 'light';
     };
+    const themeIcon = computed(() => (theme.value === 'light' ? 'ev-icon-sun' : 'ev-icon-moon'));
 
     return {
       theme,
+      themeIcon,
       changeTheme,
     };
   },
@@ -51,7 +52,6 @@ a {
   text-decoration: none !important;
 }
 .evui-header {
-  display: flex;
   position: fixed;
   top: 0;
   right: 0;
@@ -62,32 +62,40 @@ a {
   background-color: $color-blue;
   z-index: 10;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-
   &-logo {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    width: 110px;
     height: 30px;
-    line-height: 30px;
-    padding-left: 110px;
     background: url('http://evui.ex-em.com/wp-content/uploads/2017/11/evui_1.png') left center no-repeat;
     background-size: contain;
-    color: rgb(43,87,151);
+    transform: translateY(-50%);
+
+    @include font-hide();
+  }
+  &-name {
     font-size: $font-size-large;
-    font-weight: bold;
+    color: #E8E8E8;
+    text-align: center;
+    line-height: $header-height;
   }
 }
 .evui-header-theme {
   position: absolute;
   top: 50%;
   right: 20px;
-  width: 60px;
-  height: 25px;
+  width: 26px;
+  height: 26px;
   transform: translateY(-50%);
   outline: none;
   border: none;
   cursor: pointer;
-
-  @include themify() {
-    color: themed('font-color-base');
-    background-color: themed('background-color-base');
+  font-size: 26px;
+  color: #E8E8E8;
+  transition: all $animate-fast;
+  &:hover {
+    opacity: 0.5;
   }
 }
 </style>