jupyterlab · blink1073 · Jul 29, 2021 · Jul 22, 2021 · Jul 23, 2021 · Jul 26, 2021
diff --git a/examples/example-accordionpanel/index.html b/examples/example-accordionpanel/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+  <script type="text/javascript" src="build/bundle.example.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/example-accordionpanel/package.json b/examples/example-accordionpanel/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@lumino/example-accordionpanel",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "tsc && webpack",
+    "clean": "rimraf build"
+  },
+  "dependencies": {
+    "@lumino/default-theme": "^0.16.0",
+    "@lumino/messaging": "^1.7.0",
+    "@lumino/widgets": "^1.25.0",
+    "es6-promise": "^4.0.5"
+  },
+  "devDependencies": {
+    "css-loader": "^3.4.0",
+    "file-loader": "^5.0.2",
+    "rimraf": "^2.5.2",
+    "source-map-loader": "0.2.4",
+    "style-loader": "^1.0.2",
+    "typescript": "~3.6.0",
+    "webpack": "^4.41.3",
+    "webpack-cli": "^3.3.10"
+  }
+}
diff --git a/examples/example-accordionpanel/src/index.ts b/examples/example-accordionpanel/src/index.ts
@@ -0,0 +1,69 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import 'es6-promise/auto'; // polyfill Promise on IE
+
+import { Message } from '@lumino/messaging';
+
+import { AccordionPanel, BoxPanel, Widget } from '@lumino/widgets';
+
+import '../style/index.css';
+
+class ContentWidget extends Widget {
+  static createNode(): HTMLElement {
+    let node = document.createElement('div');
+    let content = document.createElement('div');
+    let input = document.createElement('input');
+    input.placeholder = 'Placeholder...';
+    content.appendChild(input);
+    node.appendChild(content);
+    return node;
+  }
+
+  constructor(name: string) {
+    super({ node: ContentWidget.createNode() });
+    this.setFlag(Widget.Flag.DisallowLayout);
+    this.addClass('content');
+    this.addClass(name.toLowerCase());
+    this.title.label = name;
+    this.title.closable = true;
+    this.title.caption = `Long description for: ${name}`;
+  }
+
+  get inputNode(): HTMLInputElement {
+    return this.node.getElementsByTagName('input')[0] as HTMLInputElement;
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    if (this.isAttached) {
+      this.inputNode.focus();
+    }
+  }
+}
+
+function main(): void {
+  const accordion = new AccordionPanel();
+  accordion.id = 'accordion';
+
+  const r1 = new ContentWidget('Red');
+  const b1 = new ContentWidget('Blue');
+  const g1 = new ContentWidget('Green');
+
+  accordion.addWidget(r1);
+  accordion.addWidget(b1);
+  accordion.addWidget(g1);
+
+  BoxPanel.setStretch(accordion, 1);
+
+  const main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
+  main.id = 'main';
+  main.addWidget(accordion);
+
+  window.onresize = () => {
+    main.update();
+  };
+
+  Widget.attach(main, document.body);
+}
+
+window.onload = main;
diff --git a/examples/example-accordionpanel/style/content.css b/examples/example-accordionpanel/style/content.css
@@ -0,0 +1,53 @@
+/*
+ Copyright (c) Jupyter Development Team.
+ Distributed under the terms of the Modified BSD License.
+*/
+
+.content {
+  min-width: 50px;
+  min-height: 50px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  border: 1px solid #C0C0C0;
+  background: white;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.lm-AccordionPanel[data-orientation="vertical"] .content {
+  border-top: none;
+}
+
+.lm-AccordionPanel[data-orientation="horizontal"] .content {
+  border-left: none;
+}
+
+.content > div {
+  flex: 1 1 auto;
+  border: 1px solid #505050;
+  overflow: auto;
+}
+
+.content  input {
+  margin: 8px;
+}
+
+
+.red > div {
+  background: #E74C3C;
+}
+
+
+.yellow > div {
+  background: #F1C40F;
+}
+
+
+.green > div {
+  background: #27AE60;
+}
+
+
+.blue > div {
+  background: #3498DB;
+}
diff --git a/examples/example-accordionpanel/style/index.css b/examples/example-accordionpanel/style/index.css
@@ -0,0 +1,29 @@
+/* 
+ Copyright (c) Jupyter Development Team.
+ Distributed under the terms of the Modified BSD License.
+*/
+@import '~@lumino/default-theme/style/index.css';
+@import './content.css';
+
+
+body {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+#main {
+  flex: 1 1 auto;
+}
+
+#accordion {
+  flex: 1 1 auto;
+  padding: 4px;
+}
diff --git a/examples/example-accordionpanel/tsconfig.json b/examples/example-accordionpanel/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "ES5",
+    "outDir": "./build",
+    "lib": ["ES5", "ES2015.Promise", "ES2015.Iterable", "DOM"],
+    "types": []
+  },
+  "include": ["src/*"]
+}
diff --git a/examples/example-accordionpanel/webpack.config.js b/examples/example-accordionpanel/webpack.config.js
@@ -0,0 +1,19 @@
+var path = require("path");
+
+module.exports = {
+  entry: "./build/index.js",
+  mode: "development",
+  devtool: "source-map",
+  output: {
+    path: __dirname + "/build/",
+    filename: "bundle.example.js",
+    publicPath: "./build/",
+  },
+  module: {
+    rules: [
+      { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
+      { test: /\.css$/, use: ["style-loader", "css-loader"] },
+      { test: /\.png$/, use: "file-loader" },
+    ],
+  },
+};
diff --git a/examples/example-dockpanel/webpack.config.js b/examples/example-dockpanel/webpack.config.js
@@ -1,19 +1,19 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-  entry: './build/index.js',
-  mode: 'development',
-  devtool: 'source-map',
+  entry: "./build/index.js",
+  mode: "development",
+  devtool: "source-map",
   output: {
-    path: __dirname + '/build/',
-    filename: 'bundle.example.js',
-    publicPath: './build/'
+    path: __dirname + "/build/",
+    filename: "bundle.example.js",
+    publicPath: "./build/",
   },
   module: {
     rules: [
       { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, use: 'file-loader' }
-    ]
-  }
+      { test: /\.css$/, use: ["style-loader", "css-loader"] },
+      { test: /\.png$/, use: "file-loader" },
+    ],
+  },
 };
diff --git a/packages/default-theme/style/accordionpanel.css b/packages/default-theme/style/accordionpanel.css
@@ -0,0 +1,43 @@
+.lm-AccordionPanel .lm-AccordionPanel-title {
+  box-sizing: border-box;
+  padding: 0px 10px;
+  background: #E5E5E5;
+  border: 1px solid #C0C0C0;
+  border-bottom: none;
+  font: 12px Helvetica, Arial, sans-serif;
+  min-height: 22px;
+  max-height: 22px;
+  min-width: 35px;
+  line-height: 20px;
+  margin: 0px;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title:focus, 
+.lm-AccordionPanel .lm-AccordionPanel-title:hover {
+  background: #dbdbdb;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title:focus,
+.lm-AccordionPanel .lm-AccordionPanel-title:last-of-type:focus:not(.lm-mod-expanded) {
+  border: 1px solid lightskyblue;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title:last-of-type:not(.lm-mod-expanded) {
+  border-bottom: 1px solid #C0C0C0;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title.lm-mod-expanded .lm-AccordionPanel-titleCollapser:before {
+  content: "\f0d8";
+  font-family: FontAwesome;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-title .lm-AccordionPanel-titleCollapser:before {
+  content: "\f0d7";
+  font-family: FontAwesome;
+  position: absolute;
+  right: 10px;
+}
+
+.lm-AccordionPanel .lm-AccordionPanel-titleLabel {
+  padding: 0px 5px;
+}
diff --git a/packages/default-theme/style/index.css b/packages/default-theme/style/index.css
@@ -7,6 +7,7 @@
 |----------------------------------------------------------------------------*/
 @import '~@lumino/dragdrop/style/index.css';
 @import '~@lumino/widgets/style/index.css';
+@import './accordionpanel.css';
 @import './commandpalette.css';
 @import './datagrid.css';
 @import './dockpanel.css';

diff --git a/packages/default-theme/style/index.js b/packages/default-theme/style/index.js
@@ -7,6 +7,7 @@
 |----------------------------------------------------------------------------*/
 import '@lumino/dragdrop/style/index';
 import '@lumino/widgets/style/index';
+import './accordionpanel.css';
 import './commandpalette.css';
 import './datagrid.css';
 import './dockpanel.css';