diff --git a/ShadowEditor.UI/css/index.css b/ShadowEditor.UI/css/index.css
index 5024acbb..6d943fc9 100644
--- a/ShadowEditor.UI/css/index.css
+++ b/ShadowEditor.UI/css/index.css
@@ -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 {
diff --git a/ShadowEditor.UI/index.html b/ShadowEditor.UI/index.html
index 6ed010cb..de6e988e 100644
--- a/ShadowEditor.UI/index.html
+++ b/ShadowEditor.UI/index.html
@@ -10,42 +10,16 @@
diff --git a/ShadowEditor.UI/rollup.config.js b/ShadowEditor.UI/rollup.config.js
index 4f2f70ca..58be4a74 100644
--- a/ShadowEditor.UI/rollup.config.js
+++ b/ShadowEditor.UI/rollup.config.js
@@ -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/**'
})
diff --git a/ShadowEditor.UI/src/Panel.jsx b/ShadowEditor.UI/src/Panel.jsx
index 8b8c8ff6..0c2446c8 100644
--- a/ShadowEditor.UI/src/Panel.jsx
+++ b/ShadowEditor.UI/src/Panel.jsx
@@ -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 ;
}
}
diff --git a/ShadowEditor.UI/src/index.js b/ShadowEditor.UI/src/index.js
index acce4751..c35bf5e1 100644
--- a/ShadowEditor.UI/src/index.js
+++ b/ShadowEditor.UI/src/index.js
@@ -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';
diff --git a/package-lock.json b/package-lock.json
index f69e50f8..2c117a7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
+ }
}
}
}
diff --git a/package.json b/package.json
index eec595b0..c26f0287 100644
--- a/package.json
+++ b/package.json
@@ -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": {