Carbon: sidenav & table & changelog

2017-09-28 20:15:00 +08:00 · 2017-09-28 20:15:00 +08:00 · fa6580e7a9
parent 21c579179c
commit fa6580e7a9
8 changed files with 136 additions and 110 deletions
--- a/build/bin/template.js
+++ b/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();
+}
--- a/examples/app.vue
+++ b/examples/app.vue
@ -21,7 +21,7 @@
  }

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

--- a/examples/components/side-nav.vue
+++ b/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>
--- a/examples/nav.config.json
+++ b/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": [
--- a/examples/pages/template/changelog.tpl
+++ b/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
--- a/examples/pages/template/component.tpl
+++ b/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;
          }
-          th {
-            text-align: left;
-            border-top: 1px solid #eaeefb;
-            background-color: #EFF2F7;
-            white-space: nowrap;
-          }
+
          td, th {
            border-bottom: 1px solid #eaeefb;
-            padding: 10px;
+            padding: 15px;
            max-width: 250px;
          }
+
+          th {
+            text-align: left;
+            white-space: nowrap;
+            color: #666;
+            font-weight: normal;
+          }
+
+          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 {
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/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"