github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Carbon: sidenav & table & changelog

pull/7281/head
wayne 2017-09-28 20:15:00 +08:00 committed by 杨奕
parent 21c579179c
commit fa6580e7a9
8 changed files with 136 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/bin/template.js Normal file
View File

@ -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();
}

2
examples/app.vue
View File

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

58
examples/components/side-nav.vue
View File

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

16
examples/nav.config.json
View File

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

113
examples/pages/template/changelog.tpl
View File

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

29
examples/pages/template/component.tpl
View File

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

3
package.json
View File

@ -17,7 +17,7 @@
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes", "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": "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", "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", "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": "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", "dist:all": "node build/bin/build-all.js && npm run build:theme",
@ -64,6 +64,7 @@
"babel-preset-es2015": "^6.14.0", "babel-preset-es2015": "^6.14.0",
"chai": "^3.5.0", "chai": "^3.5.0",
"cheerio": "^0.18.0", "cheerio": "^0.18.0",
"chokidar": "^1.7.0",
"cooking": "^1.2.0", "cooking": "^1.2.0",
"cooking-lint": "^0.1.3", "cooking-lint": "^0.1.3",
"cooking-vue2": "^0.3.0", "cooking-vue2": "^0.3.0",

15
yarn.lock
View File

@ -1119,6 +1119,21 @@ chokidar@^1.0.0, chokidar@^1.4.1:
optionalDependencies: optionalDependencies:
fsevents "^1.0.0" 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: circular-json@^0.3.0:
version "0.3.1" version "0.3.1"
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d" resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"