Skip to content

Commit d54b9eb

Browse files
blink1073blink1073
authored
Merge pull request #205 from fcollonval/ft/accordion-panel
Add accordion panel
2 parents ad3aeab + 90faddc commit d54b9eb

24 files changed

+1580
-229
lines changed

‎examples/example-accordionpanel/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
5+
<script type="text/javascript" src="build/bundle.example.js"></script>
6+
</head>
7+
<body>
8+
</body>
9+
</html>

‎examples/example-accordionpanel/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@lumino/example-accordionpanel",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"build": "tsc && webpack",
7+
"clean": "rimraf build"
8+
},
9+
"dependencies": {
10+
"@lumino/default-theme": "^0.16.0",
11+
"@lumino/messaging": "^1.7.0",
12+
"@lumino/widgets": "^1.25.0",
13+
"es6-promise": "^4.0.5"
14+
},
15+
"devDependencies": {
16+
"css-loader": "^3.4.0",
17+
"file-loader": "^5.0.2",
18+
"rimraf": "^2.5.2",
19+
"source-map-loader": "0.2.4",
20+
"style-loader": "^1.0.2",
21+
"typescript": "~3.6.0",
22+
"webpack": "^4.41.3",
23+
"webpack-cli": "^3.3.10"
24+
}
25+
}

‎examples/example-accordionpanel/src/index.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import 'es6-promise/auto'; // polyfill Promise on IE
5+
6+
import { Message } from '@lumino/messaging';
7+
8+
import { AccordionPanel, BoxPanel, Widget } from '@lumino/widgets';
9+
10+
import '../style/index.css';
11+
12+
class ContentWidget extends Widget {
13+
static createNode(): HTMLElement {
14+
let node = document.createElement('div');
15+
let content = document.createElement('div');
16+
let input = document.createElement('input');
17+
input.placeholder = 'Placeholder...';
18+
content.appendChild(input);
19+
node.appendChild(content);
20+
return node;
21+
}
22+
23+
constructor(name: string) {
24+
super({ node: ContentWidget.createNode() });
25+
this.setFlag(Widget.Flag.DisallowLayout);
26+
this.addClass('content');
27+
this.addClass(name.toLowerCase());
28+
this.title.label = name;
29+
this.title.closable = true;
30+
this.title.caption = `Long description for: ${name}`;
31+
}
32+
33+
get inputNode(): HTMLInputElement {
34+
return this.node.getElementsByTagName('input')[0] as HTMLInputElement;
35+
}
36+
37+
protected onActivateRequest(msg: Message): void {
38+
if (this.isAttached) {
39+
this.inputNode.focus();
40+
}
41+
}
42+
}
43+
44+
function main(): void {
45+
const accordion = new AccordionPanel();
46+
accordion.id = 'accordion';
47+
48+
const r1 = new ContentWidget('Red');
49+
const b1 = new ContentWidget('Blue');
50+
const g1 = new ContentWidget('Green');
51+
52+
accordion.addWidget(r1);
53+
accordion.addWidget(b1);
54+
accordion.addWidget(g1);
55+
56+
BoxPanel.setStretch(accordion, 1);
57+
58+
const main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
59+
main.id = 'main';
60+
main.addWidget(accordion);
61+
62+
window.onresize = () => {
63+
main.update();
64+
};
65+
66+
Widget.attach(main, document.body);
67+
}
68+
69+
window.onload = main;

‎examples/example-accordionpanel/style/content.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
Copyright (c) Jupyter Development Team.
3+
Distributed under the terms of the Modified BSD License.
4+
*/
5+
6+
.content {
7+
min-width: 50px;
8+
min-height: 50px;
9+
display: flex;
10+
flex-direction: column;
11+
padding: 8px;
12+
border: 1px solid #C0C0C0;
13+
background: white;
14+
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
15+
}
16+
17+
.lm-AccordionPanel[data-orientation="vertical"] .content {
18+
border-top: none;
19+
}
20+
21+
.lm-AccordionPanel[data-orientation="horizontal"] .content {
22+
border-left: none;
23+
}
24+
25+
.content > div {
26+
flex: 1 1 auto;
27+
border: 1px solid #505050;
28+
overflow: auto;
29+
}
30+
31+
.content input {
32+
margin: 8px;
33+
}
34+
35+
36+
.red > div {
37+
background: #E74C3C;
38+
}
39+
40+
41+
.yellow > div {
42+
background: #F1C40F;
43+
}
44+
45+
46+
.green > div {
47+
background: #27AE60;
48+
}
49+
50+
51+
.blue > div {
52+
background: #3498DB;
53+
}

‎examples/example-accordionpanel/style/index.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
Copyright (c) Jupyter Development Team.
3+
Distributed under the terms of the Modified BSD License.
4+
*/
5+
@import '~@lumino/default-theme/style/index.css';
6+
@import './content.css';
7+
8+
9+
body {
10+
display: flex;
11+
flex-direction: column;
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
bottom: 0;
17+
margin: 0;
18+
padding: 0;
19+
overflow: hidden;
20+
}
21+
22+
#main {
23+
flex: 1 1 auto;
24+
}
25+
26+
#accordion {
27+
flex: 1 1 auto;
28+
padding: 4px;
29+
}

‎examples/example-accordionpanel/tsconfig.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"declaration": false,
4+
"noImplicitAny": true,
5+
"noEmitOnError": true,
6+
"noUnusedLocals": true,
7+
"strictNullChecks": true,
8+
"sourceMap": true,
9+
"module": "commonjs",
10+
"moduleResolution": "node",
11+
"target": "ES5",
12+
"outDir": "./build",
13+
"lib": ["ES5", "ES2015.Promise", "ES2015.Iterable", "DOM"],
14+
"types": []
15+
},
16+
"include": ["src/*"]
17+
}

‎examples/example-accordionpanel/webpack.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var path = require("path");
2+
3+
module.exports = {
4+
entry: "./build/index.js",
5+
mode: "development",
6+
devtool: "source-map",
7+
output: {
8+
path: __dirname + "/build/",
9+
filename: "bundle.example.js",
10+
publicPath: "./build/",
11+
},
12+
module: {
13+
rules: [
14+
{ test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
15+
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
16+
{ test: /\.png$/, use: "file-loader" },
17+
],
18+
},
19+
};

‎examples/example-dockpanel/webpack.config.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
var path = require('path');
1+
var path = require("path");
22

33
module.exports = {
4-
entry: './build/index.js',
5-
mode: 'development',
6-
devtool: 'source-map',
4+
entry: "./build/index.js",
5+
mode: "development",
6+
devtool: "source-map",
77
output: {
8-
path: __dirname + '/build/',
9-
filename: 'bundle.example.js',
10-
publicPath: './build/'
8+
path: __dirname + "/build/",
9+
filename: "bundle.example.js",
10+
publicPath: "./build/",
1111
},
1212
module: {
1313
rules: [
1414
{ test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
15-
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
16-
{ test: /\.png$/, use: 'file-loader' }
17-
]
18-
}
15+
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
16+
{ test: /\.png$/, use: "file-loader" },
17+
],
18+
},
1919
};

‎packages/default-theme/style/accordionpanel.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.lm-AccordionPanel .lm-AccordionPanel-title {
2+
box-sizing: border-box;
3+
padding: 0px 10px;
4+
background: #E5E5E5;
5+
border: 1px solid #C0C0C0;
6+
border-bottom: none;
7+
font: 12px Helvetica, Arial, sans-serif;
8+
min-height: 22px;
9+
max-height: 22px;
10+
min-width: 35px;
11+
line-height: 20px;
12+
margin: 0px;
13+
}
14+
15+
.lm-AccordionPanel .lm-AccordionPanel-title:focus,
16+
.lm-AccordionPanel .lm-AccordionPanel-title:hover {
17+
background: #dbdbdb;
18+
}
19+
20+
.lm-AccordionPanel .lm-AccordionPanel-title:focus,
21+
.lm-AccordionPanel .lm-AccordionPanel-title:last-of-type:focus:not(.lm-mod-expanded) {
22+
border: 1px solid lightskyblue;
23+
}
24+
25+
.lm-AccordionPanel .lm-AccordionPanel-title:last-of-type:not(.lm-mod-expanded) {
26+
border-bottom: 1px solid #C0C0C0;
27+
}
28+
29+
.lm-AccordionPanel .lm-AccordionPanel-title.lm-mod-expanded .lm-AccordionPanel-titleCollapser:before {
30+
content: "\f0d8";
31+
font-family: FontAwesome;
32+
}
33+
34+
.lm-AccordionPanel .lm-AccordionPanel-title .lm-AccordionPanel-titleCollapser:before {
35+
content: "\f0d7";
36+
font-family: FontAwesome;
37+
position: absolute;
38+
right: 10px;
39+
}
40+
41+
.lm-AccordionPanel .lm-AccordionPanel-titleLabel {
42+
padding: 0px 5px;
43+
}

‎packages/default-theme/style/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
|----------------------------------------------------------------------------*/
88
@import '~@lumino/dragdrop/style/index.css';
99
@import '~@lumino/widgets/style/index.css';
10+
@import './accordionpanel.css';
1011
@import './commandpalette.css';
1112
@import './datagrid.css';
1213
@import './dockpanel.css';

‎packages/default-theme/style/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
|----------------------------------------------------------------------------*/
88
import '@lumino/dragdrop/style/index';
99
import '@lumino/widgets/style/index';
10+
import './accordionpanel.css';
1011
import './commandpalette.css';
1112
import './datagrid.css';
1213
import './dockpanel.css';

0 commit comments

Comments
 (0)