This commit is contained in:
tengge1 2019-05-05 20:57:54 +08:00
parent d63fd9a7b9
commit 2fc0e19f4f
7 changed files with 337 additions and 39 deletions

View File

@ -10,6 +10,75 @@ body,
font-size: 14px;
}
/* Panel */
div.Panel {
position: relative;
left: 0;
top: 0;
width: 240px;
height: 320px;
background: rgb(44, 62, 80);
border: 1px solid rgb(44, 62, 80);
box-sizing: border-box;
}
div.Panel .wrap {
width: 100%;
height: 100%;
background: white;
}
div.Panel .wrap .title {
font-size: 14px;
line-height: 24px;
color: rgb(255, 255, 255);
background: rgb(44, 62, 80);
cursor: default;
white-space: nowrap;
overflow: hidden;
}
div.Panel .wrap .title .icon {
width: 16px;
height: 24px;
margin-right: 4px;
vertical-align: top;
display: inline-block;
}
div.Panel .wrap .title .controls {
position: absolute;
right: 5px;
top: 0px;
}
div.Panel .wrap .title .controls .control {
width: 16px;
height: 24px;
margin-right: 4px;
vertical-align: top;
display: inline-block;
cursor: pointer;
}
div.Panel .wrap .content {
position: absolute;
top: 24px;
bottom: 32px;
left: 0;
right: 0;
overflow: hidden;
}
div.Panel .resize {
position: absolute;
bottom: 0px;
right: 0px;
width: 10px;
height: 10px;
}
/* Alert */
div.Alert {

View File

@ -10,42 +10,16 @@
<body>
<div id="container">
<div tabindex="-1" class="dialog-container" style="outline: none; position: fixed; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px 0px; padding: 0px 5px 5px; box-sizing: border-box; background: rgb(44, 62, 80); width: 250px; height: 250px; left: 800px; top: 258px; transform: scale(1, 1); opacity: 1;">
<div tabindex="-1" style="outline: none; background: white; width: 100%; height: 100%; position: relative;">
<div tabindex="-1" class="dialog-container-title" style="outline: none; cursor: default; white-space: nowrap; overflow: hidden; font: 14px/24px arial, sans-serif; background: rgb(44, 62, 80); color: rgb(255, 255, 255); display: block;">
<canvas class="dialog-title-control dialog-title-control-icon" width="16" height="24" style="cursor: pointer; display: inline-block; margin-right: 4px; vertical-align: top; width: 16px; height: 24px;"></canvas>
<span>title</span>
<div tabindex="-1" class="dialog-title-controls" style="outline: none; position: absolute; left: 0px; right: 5px; top: 0px; bottom: 0px; text-align: right; white-space: nowrap;">
<canvas class="dialog-title-control dialog-title-control-maximize" width="16" height="24" style="cursor: pointer; display: inline-block; margin-right: 4px; vertical-align: top; width: 16px; height: 24px;"></canvas>
<canvas class="dialog-title-control dialog-title-control-close" width="16" height="24" style="cursor: pointer; display: inline-block; margin-right: 4px; vertical-align: top; width: 16px; height: 24px;"></canvas>
</div>
</div>
<div tabindex="-1" class="dialog-content" style="outline: none; position: absolute; font: 12px arial, sans-serif; top: 24px; bottom: 32px; left: 0px; right: 0px; overflow: hidden;">
<div tabindex="-1" style="border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; overflow: hidden; width: 100%; height: 100%;">
<canvas width="240" height="189" style="pointer-events: none; border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; width: 240px; height: 189px;"></canvas>
<div tabindex="-1" style="border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box;">
<div tabindex="-1" style="border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; left: 231px; top: 8.83694px; width: 7px; height: 180.163px; visibility: hidden; background: rgba(0, 0, 0, 0.35); border-radius: 3.5px;"></div>
<div tabindex="-1" style="border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; left: 8.92562px; top: 180px; width: 231.074px; height: 7px; visibility: hidden; background: rgba(0, 0, 0, 0.35); border-radius: 3.5px;"></div>
</div>
</div>
</div>
<div tabindex="-1" class="dialog-container-buttons" style="outline: none; line-height: 32px; position: absolute; bottom: 0px; left: 0px; white-space: nowrap; overflow: hidden; right: 0px; background: rgb(236, 240, 241); text-align: center;">
<div tabindex="-1" class="dialog-button undefined" style="border: 0px; outline: 0px; padding: 0px; position: relative; margin: 0px; box-sizing: border-box; height: 24px; width: 44.6797px; display: inline-block; text-align: left; vertical-align: middle;">
<canvas width="44" height="24" style="pointer-events: none; border: 0px; outline: 0px; padding: 0px; position: absolute; margin: 0px; box-sizing: border-box; width: 44px; height: 24px;"></canvas>
</div>
</div>
</div>
<div tabindex="-1" class="resize-area" style="outline: none; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px;"></div>
</div>
</div>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="build/ShadowEditor.js"></script>
<script>
// var button = React.createElement(Shadow.Button, undefined, 'OK');
// var alert = React.createElement(Shadow.Alert, {}, 'Something is wrong.');
// ReactDOM.render(alert, document.querySelector('#container'));
var panel = React.createElement(Shadow.Panel, {
title: 'Panel'
}, 'OK');
ReactDOM.render(panel, document.querySelector('#container'));
</script>
</body>

View File

@ -1,3 +1,5 @@
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
export default {
@ -11,6 +13,8 @@ export default {
treeshake: true,
external: [],
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**'
})

View File

@ -1,6 +1,59 @@
// const styles = {
// button: {
// fontSize: 12,
// '&:hover': {
// background: 'blue'
// }
// },
// ctaButton: {
// extend: 'button',
// '&:hover': {
// background: color('blue')
// .darken(0.3)
// .hex()
// }
// },
// '@media (min-width: 1024px)': {
// button: {
// width: 200
// }
// }
// };
// const { classes } = jss.createStyleSheet(styles).attach();
/**
* Panel
*/
class Panel extends React.Component {
render() {
return ;
const { width, height, title, children } = this.props;
return <div className="Panel">
<div className="wrap">
<div className="title">
<div className="icon">
<i className="iconfont icon-shadow"></i>
</div>
<span>{title}</span>
<div className="controls">
<div className="control">
<i className="iconfont icon-maximize"></i>
</div>
<div className="control">
<i className="iconfont icon-minus"></i>
</div>
<div className="control">
<i className="iconfont icon-close"></i>
</div>
</div>
</div>
<div className="content">
{children}
</div>
</div>
<div className="resize"></div>
</div>;
}
}

View File

@ -1,3 +1,8 @@
import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset());
export { default as Panel } from './Panel.jsx';
export { default as BorderLayout } from './BorderLayout.jsx';

202
package-lock.json generated
View File

@ -238,9 +238,9 @@
"dev": true
},
"@types/node": {
"version": "10.1.2",
"resolved": "http://registry.npm.taobao.org/@types/node/download/@types/node-10.1.2.tgz",
"integrity": "sha1-G5KKC6pAj8iuOsASzIE3Wt3BR8Y=",
"version": "12.0.0",
"resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-12.0.0.tgz",
"integrity": "sha1-0RgTucD/iqyinwTLwSgX9MfWVuU=",
"dev": true
},
"ansi-styles": {
@ -475,6 +475,15 @@
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
"dev": true
},
"css-vendor": {
"version": "0.3.8",
"resolved": "https://registry.npm.taobao.org/css-vendor/download/css-vendor-0.3.8.tgz",
"integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
"dev": true,
"requires": {
"is-in-browser": "^1.0.2"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -773,6 +782,12 @@
}
}
},
"hyphenate-style-name": {
"version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/hyphenate-style-name/download/hyphenate-style-name-1.0.3.tgz",
"integrity": "sha1-CXu3+guPGpzwvVxzTPlYmZgam0g=",
"dev": true
},
"is-accessor-descriptor": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@ -844,6 +859,12 @@
"integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
"dev": true
},
"is-in-browser": {
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/is-in-browser/download/is-in-browser-1.1.3.tgz",
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=",
"dev": true
},
"is-module": {
"version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/is-module/download/is-module-1.0.0.tgz",
@ -918,6 +939,113 @@
"minimist": "^1.2.0"
}
},
"jss": {
"version": "9.8.7",
"resolved": "https://registry.npm.taobao.org/jss/download/jss-9.8.7.tgz",
"integrity": "sha1-7Zdj/A8vAmD8gmDaxlevYeYizgU=",
"dev": true,
"requires": {
"is-in-browser": "^1.1.3",
"symbol-observable": "^1.1.0",
"warning": "^3.0.0"
}
},
"jss-camel-case": {
"version": "6.1.0",
"resolved": "https://registry.npm.taobao.org/jss-camel-case/download/jss-camel-case-6.1.0.tgz",
"integrity": "sha1-zLH/jWxwHAKh/tb7b7a3iW4RzkQ=",
"dev": true,
"requires": {
"hyphenate-style-name": "^1.0.2"
}
},
"jss-compose": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/jss-compose/download/jss-compose-5.0.0.tgz",
"integrity": "sha1-zgGy5FIdZcN+pCz0kRbl96tZZIQ=",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-default-unit": {
"version": "8.0.2",
"resolved": "https://registry.npm.taobao.org/jss-default-unit/download/jss-default-unit-8.0.2.tgz",
"integrity": "sha1-zB6Im65MC5QZMnsxSrHI4oJokOY=",
"dev": true
},
"jss-expand": {
"version": "5.3.0",
"resolved": "https://registry.npm.taobao.org/jss-expand/download/jss-expand-5.3.0.tgz",
"integrity": "sha1-Ar4Hbv5lASXIQvW7b7aHhv5EHtY=",
"dev": true
},
"jss-extend": {
"version": "6.2.0",
"resolved": "https://registry.npm.taobao.org/jss-extend/download/jss-extend-6.2.0.tgz",
"integrity": "sha1-SvCdC3L7mO4imXD4yoUv7ByiqNw=",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-global": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/jss-global/download/jss-global-3.0.0.tgz",
"integrity": "sha1-4Z5ckasrljU8In4wqiy9k4zar6I=",
"dev": true
},
"jss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npm.taobao.org/jss-nested/download/jss-nested-6.0.1.tgz",
"integrity": "sha1-75kredbo9j2TnEOXudmbXLvoJMo=",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-preset-default": {
"version": "4.5.0",
"resolved": "https://registry.npm.taobao.org/jss-preset-default/download/jss-preset-default-4.5.0.tgz",
"integrity": "sha1-06RXASzNelUTEgFOOUwjxLMByt0=",
"dev": true,
"requires": {
"jss-camel-case": "^6.1.0",
"jss-compose": "^5.0.0",
"jss-default-unit": "^8.0.2",
"jss-expand": "^5.3.0",
"jss-extend": "^6.2.0",
"jss-global": "^3.0.0",
"jss-nested": "^6.0.1",
"jss-props-sort": "^6.0.0",
"jss-template": "^1.0.1",
"jss-vendor-prefixer": "^7.0.0"
}
},
"jss-props-sort": {
"version": "6.0.0",
"resolved": "https://registry.npm.taobao.org/jss-props-sort/download/jss-props-sort-6.0.0.tgz",
"integrity": "sha1-kQUQGjtQcfq2Hi2F6nTMIumxYyM=",
"dev": true
},
"jss-template": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/jss-template/download/jss-template-1.0.1.tgz",
"integrity": "sha1-Ca7Z2GzFR7B/U+81XX4Xd/faQwo=",
"dev": true,
"requires": {
"warning": "^3.0.0"
}
},
"jss-vendor-prefixer": {
"version": "7.0.0",
"resolved": "https://registry.npm.taobao.org/jss-vendor-prefixer/download/jss-vendor-prefixer-7.0.0.tgz",
"integrity": "sha1-AWZyllABXvGdnwJDfHNmcjFgXHE=",
"dev": true,
"requires": {
"css-vendor": "^0.3.8"
}
},
"kind-of": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
@ -930,6 +1058,24 @@
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
"dev": true
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz",
"integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"magic-string": {
"version": "0.25.2",
"resolved": "https://registry.npm.taobao.org/magic-string/download/magic-string-0.25.2.tgz",
"integrity": "sha1-E5w6cpUV7FXpbmnoKhH+iQopOtk=",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.4"
}
},
"map-cache": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@ -1129,9 +1275,9 @@
"dev": true
},
"rollup": {
"version": "0.59.2",
"resolved": "http://registry.npm.taobao.org/rollup/download/rollup-0.59.2.tgz",
"integrity": "sha1-NwEe2DlH5OEHG2b559BXSxRK/8k=",
"version": "0.59.4",
"resolved": "https://registry.npm.taobao.org/rollup/download/rollup-0.59.4.tgz",
"integrity": "sha1-b4D3AXwiZn/xvz5irfhiSkTMRKo=",
"dev": true,
"requires": {
"@types/estree": "0.0.39",
@ -1148,6 +1294,29 @@
"rollup-pluginutils": "^2.3.0"
}
},
"rollup-plugin-commonjs": {
"version": "9.3.4",
"resolved": "https://registry.npm.taobao.org/rollup-plugin-commonjs/download/rollup-plugin-commonjs-9.3.4.tgz",
"integrity": "sha1-Kz3du73tg9RcNv8QHN0p6ST9I7w=",
"dev": true,
"requires": {
"estree-walker": "^0.6.0",
"magic-string": "^0.25.2",
"resolve": "^1.10.0",
"rollup-pluginutils": "^2.6.0"
},
"dependencies": {
"resolve": {
"version": "1.10.1",
"resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.10.1.tgz",
"integrity": "sha1-ZkhCrJYHlbvnWCIc3M2mH7ZLXxg=",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
"rollup-plugin-node-resolve": {
"version": "3.4.0",
"resolved": "http://registry.npm.taobao.org/rollup-plugin-node-resolve/download/rollup-plugin-node-resolve-3.4.0.tgz",
@ -1360,6 +1529,12 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
"sourcemap-codec": {
"version": "1.4.4",
"resolved": "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.4.tgz",
"integrity": "sha1-xj6pJ8Ap3WvZorf6A7P+wCrVbp8=",
"dev": true
},
"split-string": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@ -1399,6 +1574,12 @@
"has-flag": "^3.0.0"
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/symbol-observable/download/symbol-observable-1.2.0.tgz",
"integrity": "sha1-wiaIrtTqs83C3+rLtWFmBWCgCAQ=",
"dev": true
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@ -1539,6 +1720,15 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
"dev": true
},
"warning": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/warning/download/warning-3.0.0.tgz",
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
"dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
}
}
}

View File

@ -7,8 +7,11 @@
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"rollup": "^0.59.2",
"jss": "^9.8.7",
"jss-preset-default": "^4.5.0",
"rollup": "^0.59.4",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^3.4.0"
},
"scripts": {