Carbon: sidenav & table & changelog

build/bin/template.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const templates = path.resolve(process.cwd(), './examples/pages/template');
+
+const chokidar = require('chokidar');
+let watcher = chokidar.watch([templates]);
+
+watcher.on('ready', function() {
+  watcher
+    .on('change', function() {
+      exec('npm run i18n');
+    });
+});
+
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}

examples/app.vue

@@ -21,7 +21,7 @@
   }
 
   a {
-    color: #4078c0;
+    color: #1989FA;
     text-decoration: none;
   }
 

examples/components/side-nav.vue

@@ -7,6 +7,7 @@
     li {
       list-style: none;
     }
+
     ul {
       padding: 0;
       margin: 0;
@@ -36,7 +37,7 @@
       }
       @when active {
         span, i {
-          color: #20a0ff;
+          color: #1989FA;
         }
         i {
           transform: rotateZ(180deg) translateY(2px);
@@ -44,7 +45,7 @@
       }
       &:hover {
         span, i {
-          color: #20a0ff;
+          color: #1989FA;
         }
       }
     }
@@ -52,7 +53,7 @@
     .nav-item {
       a {
         font-size: 16px;
-        color: #5e6d82;
+        color: #333;
         line-height: 40px;
         height: 40px;
         margin: 0;
@@ -60,36 +61,39 @@
         text-decoration: none;
         display: block;
         position: relative;
-        transition: all .3s;
+        transition: .15s ease-out;
+        font-weight: bold;
 
         &.active {
-          color: #20a0ff;
+          color: #1989FA;
         }
       }
+
       .nav-item {
         a {
           display: block;
           height: 40px;
+          color: #666;
           line-height: 40px;
-          font-size: 13px;
-          padding-left: 24px;
+          font-size: 14px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          font-weight: normal;
 
-
-          &:hover {
-            color: #20a0ff;
+          &:hover,
+          &.active {
+            color: #1989FA;
           }
         }
       }
     }
+
     .nav-group__title {
       font-size: 12px;
-      color: #99a9bf;
-      padding-left: 8px;
+      color: #999;
       line-height: 26px;
-      margin-top: 10px;
+      margin-top: 15px;
     }
   }
   .nav-dropdown-list {
@@ -102,28 +106,6 @@
 </style>
 <template>
   <div class="side-nav" :style="navStyle">
-    <el-dropdown
-      v-show="isComponentPage"
-      trigger="click"
-      class="nav-dropdown"
-      :class="{ 'is-active': dropdownVisible }">
-      <span>
-        {{ langConfig.dropdown }}{{ version }}
-        <i class="el-icon-caret-bottom el-icon--right"></i>
-      </span>
-      <el-dropdown-menu
-        slot="dropdown"
-        :offset="-80"
-        class="nav-dropdown-list"
-        @input="handleDropdownToggle">
-        <el-dropdown-item
-          v-for="item in Object.keys(versions)"
-          :key="item"
-          @click.native="switchVersion(item)">
-          {{ item }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
     <ul>
       <li class="nav-item" v-for="item in data">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>

examples/nav.config.json

@@ -1,5 +1,13 @@
 {
   "zh-CN": [
+    {
+      "name": "更新日志",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element React",
+      "href": "https://eleme.github.io/element-react/"
+    },
     {
       "name": "开发指南",
       "children": [
@@ -25,14 +33,6 @@
         }
       ]
     },
-    {
-      "name": "更新日志",
-      "path": "/changelog"
-    },
-    {
-      "name": "Element React",
-      "href": "https://eleme.github.io/element-react/"
-    },
     {
       "name": "基础组件",
       "groups": [

examples/pages/template/changelog.tpl

@@ -5,66 +5,65 @@
     .fr {
       float: right;
       padding: 0;
+
+      &.el-button {
+        transform: translateY(-3px);
+      }
+
       a {
         display: block;
         padding: 10px 15px;
-        color: #475669;
+        color: #333;
       }
+
       &:hover a {
         color: #20a0ff;
       }
     }
+
     .heading {
-      margin-bottom: 40px;
+      font-size: 24px;
+      margin-bottom: 60px;
+      color: #333;
     }
+
     .timeline {
-      margin: 0 0 0 105px;
-      padding-left: 25px;
+      padding: 0;
+      padding-bottom: 10px;
       position: relative;
       color: #5e6d82;
 
-      &:before {
-        content: '';
-        width: 1px;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 10px;
-        background-color: #eaeefa;
-      }
-
       > li {
-        list-style: none;
         position: relative;
+        padding-bottom: 15px;
+        list-style: none;
         line-height: 1.8;
+        border: 1px solid #ddd;
+        border-radius: 4px;
 
         &:not(:last-child) {
           margin-bottom: 50px;
         }
-
-        &:first-child {
-          margin-top: -10px;
-
-          h3:before {
-            left: -33px;
-            top: 10px;
-            width: 17px;
-            height: @width;
-            background-color: #20a0ff;
-            border: 0;
-          }
-        }
       }
 
       ul {
-        padding-left: 0;
+        padding: 30px 30px 15px;
+
         ul {
-          padding-left: 20px;
+          padding: 0;
+          padding-top: 5px;
+          padding-left: 27px;
+
+          li {
+            padding-left: 0;
+            color: #555;
+          }
+
           li::before {
             content: '';
             circle: 4px #fff;
-            border: solid 1px #5e6d82;
-            margin-right: 5px;
+            border: solid 1px #333;
+            margin-right: -12px;
             display: inline-block;
             vertical-align: middle;
           }
@@ -72,56 +71,59 @@
       }
 
       li li {
-        font-size: 14px;
+        font-size: 16px;
         list-style: none;
-        padding-left: 0;
+        padding-left: 20px;
+        padding-bottom: 5px;
+        color: #333;
         word-break: break-all;
 
         &:before {
           content: '';
-          circle: 4px #5e6d82;
-          margin-right: 5px;
+          circle: 6px #333;
+          transform: translateX(-20px);
           display: inline-block;
           vertical-align: middle;
         }
       }
 
       h3 {
-        margin: 0 0 10px;
-
-        &:before {
-          content: '';
-          display: block;
-          position: absolute;
-          left: -31px;
-          top: 13px;
-          circle: 13px transparent;
-          border: 2px solid #20a0ff;
-          box-sizing: border-box;
-          background-color: #fff;
-        }
+        margin:0;
+        padding: 15px 30px;
+        border-bottom: 1px solid #ddd;
+        font-size: 20px;
+        color: #333;
+        font-weight: bold;
 
         a {
           opacity: 1;
+          font-size: 20px;
           float: none;
           margin-left: 0;
-          color: inherit;
+          color: #333;
         }
       }
+
       h4 {
-        margin: 50px 0 10px;
+        margin: 0;
+        margin-bottom: -10px;
+        font-size: 18px;
+        padding-left: 54px;
+        padding-top: 30px;
+        font-weight: bold;
       }
+
       p {
         margin: 0;
       }
 
       em {
         position: absolute;
-        left: -127px;
+        right: 30px;
         font-style: normal;
-        top: 6px;
-        font-size: 14px;
-        color: #99a9bf;
+        top: 23px;
+        font-size: 16px;
+        color: #666;
       }
     }
   }
@@ -141,6 +143,7 @@
 </template>
 <script>
   import ChangeLog from '../../../CHANGELOG.<%= 2 >.md';
+
   export default {
     components: {
       ChangeLog

examples/pages/template/component.tpl

@@ -7,13 +7,13 @@
 
       > {
         h3 {
-          margin: 45px 0 15px;
+          margin: 45px 0 20px;
         }
+
         table {
           border-collapse: collapse;
           width: 100%;
           background-color: #fff;
-          color: #5e6d82;
           font-size: 14px;
           margin-bottom: 45px;
           line-height: 1.5em;
@@ -21,22 +21,30 @@
           strong {
             font-weight: normal;
           }
+
+          td, th {
+            border-bottom: 1px solid #eaeefb;
+            padding: 15px;
+            max-width: 250px;
+          }
+
           th {
             text-align: left;
-            border-top: 1px solid #eaeefb;
-            background-color: #EFF2F7;
             white-space: nowrap;
+            color: #666;
+            font-weight: normal;
           }
-          td, th {
-            border-bottom: 1px solid #eaeefb;
-            padding: 10px;
-            max-width: 250px;
+
+          td {
+            color: #333;
           }
+
           th:first-child, td:first-child {
             padding-left: 10px;
           }
         }
-        ul {
+
+        ul:not(.timeline) {
           margin: 10px 0;
           padding: 0 0 0 20px;
           font-size: 14px;
@@ -100,6 +108,7 @@
 <script>
   import navsData from '../../nav.config.json';
   import throttle from 'throttle-debounce/throttle';
+
   export default {
     data() {
       return {

package.json

@@ -17,7 +17,7 @@
     "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
     "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
     "deploy:build": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME",
-    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",
+    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p & node build/bin/template.js",
     "dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",
     "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:umd && npm run build:theme",
     "dist:all": "node build/bin/build-all.js && npm run build:theme",
@@ -64,6 +64,7 @@
     "babel-preset-es2015": "^6.14.0",
     "chai": "^3.5.0",
     "cheerio": "^0.18.0",
+    "chokidar": "^1.7.0",
     "cooking": "^1.2.0",
     "cooking-lint": "^0.1.3",
     "cooking-vue2": "^0.3.0",

yarn.lock

@@ -1119,6 +1119,21 @@ chokidar@^1.0.0, chokidar@^1.4.1:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chokidar@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  dependencies:
+    anymatch "^1.3.0"
+    async-each "^1.0.0"
+    glob-parent "^2.0.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^2.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+  optionalDependencies:
+    fsevents "^1.0.0"
+
 circular-json@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"