Switched splitpane implementation
diff --git a/org.eclipse.mdm.application/src/main/webapp/package-lock.json b/org.eclipse.mdm.application/src/main/webapp/package-lock.json
index ea11b62..7522fe1 100644
--- a/org.eclipse.mdm.application/src/main/webapp/package-lock.json
+++ b/org.eclipse.mdm.application/src/main/webapp/package-lock.json
@@ -1302,6 +1302,7 @@
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dev": true,
"requires": {
"color-convert": "^1.9.0"
}
@@ -1885,7 +1886,7 @@
"bootstrap": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
- "integrity": "sha1-DrNxryyESOjCEEEdDLgkpkCaEr4="
+ "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
},
"brace-expansion": {
"version": "1.1.11",
@@ -2182,6 +2183,7 @@
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha1-GMSasWoDe26wFSzIPjRxM4IVtm4=",
+ "dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
@@ -2420,6 +2422,7 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
+ "dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -2427,7 +2430,8 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+ "dev": true
},
"colors": {
"version": "1.1.2",
@@ -3371,7 +3375,8 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
- "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+ "dev": true
},
"eslint-scope": {
"version": "4.0.0",
@@ -4906,7 +4911,8 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+ "dev": true
},
"has-unicode": {
"version": "2.0.1",
@@ -6195,6 +6201,7 @@
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz",
"integrity": "sha1-FRIAlejtgZGG5HoLAS8810GJVWA=",
+ "dev": true,
"requires": {
"chalk": "^2.1.0",
"log-symbols": "^2.1.0",
@@ -6204,12 +6211,14 @@
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
- "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+ "dev": true
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+ "dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
@@ -6419,6 +6428,7 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
"integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+ "dev": true,
"requires": {
"chalk": "^2.0.1"
}
@@ -9697,6 +9707,11 @@
"extend-shallow": "^3.0.0"
}
},
+ "split.js": {
+ "version": "1.5.11",
+ "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.5.11.tgz",
+ "integrity": "sha512-ec0sAbWnaMGpNHWo1ZgIlF3Mx7GzSyaO0GlcEBZGIFZQwYPPkbDV6JRpDmpzIshVig7USREuEPudy0ygQaskXg=="
+ },
"sprintf-js": {
"version": "1.0.3",
"resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -9987,6 +10002,7 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+ "dev": true,
"requires": {
"has-flag": "^3.0.0"
}
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
index b240a99..21c6c65 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
@@ -11,9 +11,8 @@
* SPDX-License-Identifier: EPL-2.0
*
********************************************************************************-->
-
-<vertical-split-pane primary-component-minsize="{{minWidthLeft()}}" secondary-component-minsize="{{minWidthRight()}}" primary-component-initialratio="{{initRatio()}}">
- <div class="split-pane-content-primary">
+ <div class="mainnavigation">
+ <div id="leftsidenav" class="split">
<nav class="navbar navbar-default navbar-vertical bg-light">
<div class="container-fluid">
<div class="" id="bs-admin-navbar">
@@ -29,7 +28,7 @@
</div>
</nav>
</div>
- <div class="split-pane-content-secondary">
+ <div id="rightsidenav" class="split">
<div class="navigator-content" (scroll)=onScroll($event)>
<router-outlet></router-outlet>
<div *ngIf="scrollBtnVisible" style="position: fixed; bottom: 30px; right: 35px;">
@@ -37,4 +36,4 @@
</div>
</div>
</div>
-</vertical-split-pane>
+</div>
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
index f784dfe..41a02e2 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
@@ -13,11 +13,10 @@
********************************************************************************/
-import {Component} from '@angular/core';
+import {Component, AfterViewInit} from '@angular/core';
import {Router} from '@angular/router';
-
+import Split from 'split.js';
import { TRANSLATE } from '../core/mdm-core.module';
-import { SplitPaneModule } from 'ng2-split-pane/lib/ng2-split-pane';
@Component({
selector: 'admin-modules',
@@ -25,11 +24,13 @@
styleUrls: ['./admin-modules.component.css'],
providers: []
})
-export class AdminModulesComponent {
+export class AdminModulesComponent implements AfterViewInit {
div: any;
scrollBtnVisible = false;
+ split: Split;
+
links = [
{ name: TRANSLATE('administration.admin-modules.preferences'), path: 'preferences'},
{ name: TRANSLATE('administration.admin-modules.extsystems'), path: 'extsystems'}
@@ -46,7 +47,23 @@
}
initRatio() {
- return Math.max(200 / window.innerWidth, 0.20);
+ return Math.floor(Math.max(250 / window.innerWidth, 0.20) * 100);
+ }
+ initRatioRight() {
+ return 100 - this.initRatio();
+ }
+ ngAfterViewInit(): void {
+ this.split = Split(['#leftsidenav', '#rightsidenav'], {
+ sizes: [this.initRatio(), this.initRatioRight()],
+ minSize: this.minWidthLeft(),
+ gutterSize: 10,
+ gutterStyle: function (dimension, gutterSize) {
+ return {
+ 'width': gutterSize + 'px',
+ 'height': (document.getElementById('leftsidenav').clientHeight - 5) + 'px'
+ }
+ },
+ });
}
onScrollTop() {
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
index 68eaff0..59c1cf7 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
@@ -25,7 +25,6 @@
import { AdminModulesComponent } from './admin-modules.component';
import { AdminRoutingModule } from './admin-routing.module';
import { ExtSystemService } from './extsystem.service';
-import { SplitPaneModule } from 'ng2-split-pane/lib/ng2-split-pane';
import { PreferenceModule } from './preference.module';
import { TableModule } from 'primeng/table';
import { ContextMenuModule } from 'primeng/contextmenu';
@@ -39,7 +38,6 @@
MDMCoreModule,
FormsModule,
ReactiveFormsModule,
- SplitPaneModule,
PreferenceModule,
TableModule,
ContextMenuModule,
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
index 02e0ab8..5783bfd 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
@@ -312,8 +312,8 @@
this.translateService.instant('administration.extsystem.err-cannot-save-ext-system-attr'), error);
// restore values
this.getAttributeFromNode(this.tmpExtSystemAttr, 'Name').value = this.getAttributeValueFromNode(this.tmpNode, 'Name');
- this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = this.getAttributeValueFromNode(this.tmpNode, 'Description');
- this.tmpExtSystemAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
+ this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = <string> this.getAttributeValueFromNode(this.tmpNode, 'Description');
+ this.tmpExtSystemAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
this.tmpNode = undefined;
}
);
@@ -325,7 +325,7 @@
this.dialogExtSystemAttr = false;
this.getAttributeFromNode(this.tmpExtSystemAttr, 'Name').value = this.getAttributeValueFromNode(this.tmpNode, 'Name');
this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = this.getAttributeValueFromNode(this.tmpNode, 'Description');
- this.tmpExtSystemAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
+ this.tmpExtSystemAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
this.tmpExtSystemAttr = undefined;
}
@@ -419,7 +419,7 @@
this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'CompType').value = this.getAttributeValueFromNode(this.tmpNode, 'CompType');
this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'CompName').value = this.getAttributeValueFromNode(this.tmpNode, 'CompName');
this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'AttrName').value = this.getAttributeValueFromNode(this.tmpNode, 'AttrName');
- this.tmpExtSystemMDMAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'Name');
+ this.tmpExtSystemMDMAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'Name');
this.tmpNode = undefined;
}
);
@@ -528,26 +528,26 @@
}
getCatalogComponentStr() {
- let type: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
+ let type: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
let data: string[] = new Array();
// sensor does not have catalog elements
if (type !== undefined && type !== 'Sensor') {
- let tmp = this.getCatalogComponents(type);
- for (let i in tmp) {
- data.push(tmp[i].name);
+ let components = this.getCatalogComponents(type);
+ for (let component of components) {
+ data.push(component.name);
}
}
return data;
}
getAttributeComponentStr() {
- let type: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
- let comp: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompName');
+ let type: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
+ let comp: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompName');
let data: string[] = new Array();
if (type !== undefined && comp !== undefined) {
- let tmp = this.getAttributeComponents(type, comp);
- for (let i in tmp) {
- data.push(tmp[i].name);
+ let components = this.getAttributeComponents(type, comp);
+ for (let component of components) {
+ data.push(component.name);
}
}
return data;
